HTML

HTML HTML

Disclaimer: This post has been translated to English using a machine translation model. Please, let me know if you find any mistakes.

Commentslink image 32

To add a comment to an html, the following code is used:

	
<!-- Comentario -->
Copy

The HTML must start with a !DOCTYPE tag that indicates the version of HTML to the browser. By simply putting HTML, the browser understands it as version 5.

	
<!DOCTYPE html>
Copy

The following must be a container with the html tag that has an attribute called lang indicating the language in which the page is written.

	
<!DOCTYPE html>
<html lang="es">
</html>
Copy

Inside, two more containers are created, the head and the body.

	
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Copy

In the head container goes everything that the browser needs to be able to load, while in the body goes everything that will be visible on the page.

One of the head tags is meta which has an attribute called charset that indicates the type of text encoding, usually it is utf-8, utf-16.

Another type of meta is the name="description" which is a description for browsers. It is important for SEO.

Another type of meta is the name="robots" which is for search engine bots and indicates whether the page can be followed or not.

Another attribute of the head is title which indicates the title that is seen in the tab.

Another meta is name="viewport" which is for responsive design.

Another meta is name="theme-color" which is for the navigation bar color.

Another goal is the favicon, which is the icon that appears on the tab. It is written with the link tag and the attributes type and href="path".

Some important tags for SEO are all those related to Open Graph, which are the ones that appear when sharing a link on social media. For this, a very useful page is open graph, where you can enter your link and it will show you how it would look on each social network. These meta tags are

property="og:title" which is the title that appears on social media.

property="og:description" is the description that is seen on social media.

property="og:image" is the image that is displayed on social media.

property="og:image:alt" is the alternative text for the image that appears on social media.

There is a tag for CSS that is link

On the Open Graph page, you can see all the tags that can be placed in the head.

Another important tag for SEO is link rel="alternate" which is used to indicate that there is an alternative version of the page, for example in another language.

Another important tag for SEO is link rel="canonical" which is used to indicate that there is a canonical version of the page, for example in another language.

With the style and script tags, you can write CSS and JavaScript in the html.

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
</body>
</html>
Copy

Bodylink image 34

There are container tags that help create a structure and contain more tags inside. And there are container tags that are the ones that contain the text, images, etc.

Container tagslink image 35

This is the tag to describe the header

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
Header
</header>
</body>
</html>
Copy

The nav tag is used to create navigation. Inside this tag, you can place links using the a tag and a logo using the img tag.

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
</body>
</html>
Copy

Like in navigation, links are created with the a tag and carry an attribute href="path" that indicates the link to which the link leads. They can also have an attribute target="_blank" that indicates it opens in a new tab. Additionally, you can add the attribute rel="noreferer" which indicates that no information about the page from which the link comes is passed.

	
<a href="path" target="_blank">Enlace</a>
Copy

If the link is to a section of the page, the attribute href="#id" is used.

	
<a href="#id">Enlace</a>
Copy

Therefore, in another part of the page, a container with the attribute id="id" must be placed.

	
<div id="id">
</div>
Copy

If the link is an email address, the attribute href="mailto:email" is used.

	
<a href="mailto:email">Email</a>
Copy

If the link is a phone number, the attribute href="tel:phone" is used.

	
<a href="tel:phone">Teléfono</a>
Copy

If you want to add a link to open WhatsApp, you put the attribute href="https://wa.me/phone".

	
<a href="https://wa.me/phone">WhatsApp</a>
Copy

Mainlink image 39

This is the tag to describe the main

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
</main>
</body>
</html>
Copy

This is the tag to describe the footer

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Copy

Sectionlink image 41

Inside main sections can be created

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

Articlelink image 42

Inside main there can be articles

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

Dividerlink image 43

When we have run out of semantic tags, the div tag can be used, which is a generic container.

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

Unordered lists ullink image 44

Inside main there can be unordered lists, each item of the list must have the li tag

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

Ordered lists ollink image 45

Within main there can be ordered lists, each item of the list must have the li tag

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

The type of list order can be changed with the attribute type="a" for letters, type="i" for Roman numerals, type="1" for Arabic numerals.

	
<ol type="a">
<li></li>
</ol>
Copy

If you want the order of the list to start at a specific number, use the attribute start="number".

	
<ol start="2">
<li></li>
</ol>
Copy

If you want the order of the list to be in reverse order, you put the attribute reversed.

	
<ol reversed>
<li></li>
</ol>
Copy

If we want a list item to have a value, we set the attribute value="number".

	
<ol>
<li value="2"></li>
</ol>
Copy

Role rolelink image 46

Each of the tags we've seen before has a role, but the role of each one can be changed with the role="role" attribute.

	
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="description" content="Descripción para los buscadores"/>
<meta name="robots" content="index,folow"/>
<title>Título pestaña</title>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#09f"/>
<link rel="stulesheet" href="path"/>
<link rel="icon" type="image/png" href="path"/>
<meta property="og:title" content="Título para las redes sociales"/>
<meta property="og:description" content="Descripción para las redes sociales"/>
<meta property="og:image" content="path"/>
<meta property="og:image:alt" content="Texto alternativo para la imagen"/>
<link rel="alternate" href="path" hreflang="en"/>
<link rel="canonical" href="path"/>
</head>
<body>
<header>
<nav>
<a href="path">Enlace</a>
<img src="path" alt="Texto alternativo"/>
</nav>
</header>
<main>
<section>
<article>
<div>
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</div>
<div role="list">
<div role="listitem">
</div>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Copy

Content Tagslink image 47

To create a new paragraph, we use the <p></p> tag. To emphasize something within a paragraph, we might think of using bold (<b></b>), but it's better to use the <strong></strong> tag, since the b tag is **deprecated**.

To create a title we have the tags h1, h2, h3, h4, h5, h6.

To create hyperlinks, the a tag is used, the href attribute indicates the address of the hyperlink. If a hash # is used, the page does not refresh.

Multimedia tagslink image 48

Multimedia tags do not have opening and closing tags, for example the img tag is not written as <img></img> but as <img/>. This is because it is replaced by an image. Therefore, in general, replaceable tags do not have a closing tag.

There are two types of images

  • Lossy (with loss): These images lose quality, but are lighter. jpg, jpeg* Lossless (without loss): These images do not lose quality, but they are very heavy. GIF, PNG-8, PNG-24, SVG

Image Optimizationlink image 49

The average size should be 70 KB

Tag imglink image 50

Page to download free images from the internet pexels

The img tag has the src attribute where the source is indicated.

	
<img src="path"/>
Copy

The alt attribute where the alternative text is indicated.

	
<img src="path" alt="Texto alternativo"/>
Copy

The title attribute where the title of the image is indicated, which serves to display the title when we hover over the image with the mouse, also serves for SEO, so that search engines know what the image is about.

	
<img src="path" alt="Texto alternativo" title="Título"/>
Copy

We can also set the width and height attributes to indicate the size of the image, but it's better not to set them and let the browser calculate it.

	
<img src="path" alt="Texto alternativo" title="Título" width="100" height="100"/>
Copy

The hidden attribute can be used to hide an image, which is very useful when we want an image to appear after the user performs an action. With JavaScript, we can remove the hidden attribute and the image will appear.

	
<img src="path" alt="Texto alternativo" title="Título" hidden/>
Copy

To make pages load faster, you can use the loading="lazy" attribute, which makes the image load when the user approaches it.

	
<img src="path" alt="Texto alternativo" title="Título" loading="lazy"/>
Copy

**Important!** Do not use the loading="lazy" attribute on images that are important for SEO, such as the logo. Nor should you use it on images at the beginning of the webpage, as this can cause a flicker.

Tag figurelink image 51

This tag allows us to create a container for the image, for example, it allows us to add a description. For this, you need to use the figcapture tag.

	
<figure>
<img src="path" alt="Texto alternativo" title="Título"/>
<figcaption>Descripción</figcaption>
</figure>
Copy

video taglink image 52

This tag can be used to add videos, for which the src attribute is used. To display the playback buttons, the controls attribute must be added. The last attribute is preload="auto", which ensures that the video starts downloading when the page begins to load, so by the time the user wants to play it, a significant portion is already loaded and it will take less time to start playing.

	
<video src="path" controls preload="auto">
</video>
Copy

If you want it to start playing at a specific minute, after the source in src you need to put #t=xx,yy

	
<video src="path#t=1,2" controls>
</video>
Copy

If the video is in multiple formats, the source should be placed inside a tag called source, where the different possible sources of the video are indicated. The browser will decide which source to use. This is because some browsers play certain videos better than others.

	
<video controls>
<source src="path" type="video/mp4"/>
<source src="path" type="video/webm"/>
</video>
Copy

If we don't want playback controls and want the video to play automatically, we set the autoplay attribute.

	
<video src="path" autoplay>
</video>
Copy

But to avoid disturbing the user, we can make it play silently by adding the muted attribute.

	
<video src="path" autoplay muted>
</video>
Copy

If we want the video to play in a loop, we add the loop attribute.

	
<video src="path" autoplay muted loop>
</video>
Copy

This is very useful for adding a background video to a webpage.

To change the video image when it is not playing, set the attribute poster="path".

	
<video src="path" autoplay muted loop poster="path">
</video>
Copy

audio taglink image 53

To play audio, the audio tag is used, for which the src attribute is used.

	
<audio src="path">
</audio>
Copy

To make the playback controls appear, the controls attribute is added.

	
<audio src="path" controls>
</audio>
Copy

If we want the audio to play automatically, we add the autoplay attribute.

	
<audio src="path" autoplay>
</audio>
Copy

If we want the audio to loop, we add the loop attribute.

	
<audio src="path" autoplay loop>
</audio>
Copy

If we want the audio to loop, we add the loop attribute.

	
<audio src="path" autoplay loop>
</audio>
Copy

iframe Taglink image 54

When we share a YouTube video, we are given the option to copy the code. This generates an HTML code that has the iframe tag. This tag is used to embed content from other web pages.

	
<iframe src="path">
</iframe>
Copy

We have talked about the YouTube page, but we could embed any page. Although there are some pages that do not allow this.

Tag dialoglink image 55

You may have noticed that many people in their portfolios put their projects and when you click on them, a dialog box opens with more information, or in image galleries when you click on an image, a dialog box opens with the larger image. This is done using the dialog tag.

	
<dialog>
</dialog>
Copy

Inside you can put whatever you want, for example a title, some text, an image, etc.

	
<dialog id="id">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
Copy

To open the dialog box, a button can be placed within a script.

	
<dialog id="dialog">
<h1>Título</h1>
<p>Texto</p>
<img src="path" alt="Texto alternativo"/>
</dialog>
<button id="open">
Abrir
</button>
<script>
window.open.addEventListener("click", () => {
window.dialog.showModal();
});
</script>
Copy

Formslink image 56

To create a form, we use the form tag. Inside this tag, you place the form fields. The action attribute specifies where the form is sent to. The method attribute indicates the submission method, which can be get or post. The name attribute specifies the name of the form, which is useful for JavaScript.

	
<form action="path" method="post" name="name">
</form>
Copy

Grouping Elementslink image 57

The fieldset tag is used to group form elements. Inside this tag, the form elements are placed. The legend attribute indicates the title of the group of elements.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
</fieldset>
</form>
Copy

Labellink image 58

The label tag creates a label for a form element. The for attribute indicates the id of the form element it refers to.

The form element is placed below, for example input.

You need to specify the type, which can be of type text, email, password, number, date, time, color, range, file, checkbox, radio, submit, reset, button, hidden.

If the input must be entered mandatory, you can add the required attribute.

If the user had already entered a value in the input, the autocomplete attribute can be used to indicate that it should be filled out automatically.

The pattern attribute can be used to specify a regular expression for validating the input. For example, to validate whether the email or phone number is correct.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label for="id">Nombre:</label>
<input type="text" id="id" name="name" placeholder="Nombre" required autocomplete="on"/>
</fieldset>
</form>
Copy

Another way to specify the input of a label is to put the input inside the label. Now the for attribute is not necessary because it is understood that the label refers to the input inside.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
</fieldset>
</form>
Copy

Selectlink image 59

The select tag creates a dropdown. Inside this tag, the options of the dropdown are placed using the option tag. The value attribute indicates the value of the option. The selected attribute indicates the option that is selected by default.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<label>País:
<select name="country">
<option value="es">España</option>
<option value="fr">Francia</option>
<option value="it" selected>Italia</option>
</select>
</label>
</fieldset>
</form>
Copy

In case of having many options, the datalist tag can be used to create a list of options. This way, as the user starts typing one of the options from the list, the matching options are displayed. Inside this tag, the options are placed using the option tag. The value attribute indicates the value of the option.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<label>País:
<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option value="es">España</option>
<option value="fr">Francia</option>
<option value="it">Italia</option>
</datalist>
</label>
</fieldset>
</form>
Copy

Sendlink image 60

To submit the form, the input tag with the attribute type="submit" is used.

	
<form action="path" method="post" name="name">
<fieldset>
<legend>Título</legend>
<label>Nombre:
<input type="text" id="id" name="name" placeholder="Nombre" required/>
</label>
<input type="submit" value="Enviar"/>
</fieldset>
</form>
Copy

Detailslink image 61

If you want to create sections of text that are normally collapsed, such as a frequently asked questions section, you can use the details tag. Inside this tag, you put the summary tag, which is the title of the section. And within the details tag, you place the text of the section.

	
<details>
<summary>Título</summary>
<p>Texto</p>
</details>
Copy

If we want any to appear by default, we add the open attribute.

	
<details open>
<summary>Título</summary>
<p>Texto</p>
</details>
Copy

Continue reading

Stream Information in MCP: Complete Guide to Real-time Progress Updates with FastMCP

Stream Information in MCP: Complete Guide to Real-time Progress Updates with FastMCP

Learn how to implement real-time streaming in MCP (Model Context Protocol) applications using FastMCP. This comprehensive guide shows you how to create MCP servers and clients that support progress updates and streaming information for long-running tasks. You'll build streaming-enabled tools that provide real-time feedback during data processing, file uploads, monitoring tasks, and other time-intensive operations. Discover how to use StreamableHttpTransport, implement progress handlers with Context, and create visual progress bars that enhance user experience when working with MCP applications that require continuous feedback.

Last posts -->

Have you seen these projects?

Horeca chatbot

Horeca chatbot Horeca chatbot
Python
LangChain
PostgreSQL
PGVector
React
Kubernetes
Docker
GitHub Actions

Chatbot conversational for cooks of hotels and restaurants. A cook, kitchen manager or room service of a hotel or restaurant can talk to the chatbot to get information about recipes and menus. But it also implements agents, with which it can edit or create new recipes or menus

Subtify

Subtify Subtify
Python
Whisper
Spaces

Subtitle generator for videos in the language you want. Also, it puts a different color subtitle to each person

View all projects -->

Do you want to apply AI in your project? Contact me!

Do you want to improve with these tips?

Last tips -->

Use this locally

Hugging Face spaces allow us to run models with very simple demos, but what if the demo breaks? Or if the user deletes it? That's why I've created docker containers with some interesting spaces, to be able to use them locally, whatever happens. In fact, if you click on any project view button, it may take you to a space that doesn't work.

Flow edit

Flow edit Flow edit

FLUX.1-RealismLora

FLUX.1-RealismLora FLUX.1-RealismLora
View all containers -->

Do you want to apply AI in your project? Contact me!

Do you want to train your model with these datasets?

short-jokes-dataset

Dataset with jokes in English

opus100

Dataset with translations from English to Spanish

netflix_titles

Dataset with Netflix movies and series

View more datasets -->