Análisis del Código HTML y CSS
Aplicación de Inteligencia Artificial usando TensorFlow y Keras
Cuarta parte del tutorial – Crea una inteligencia artificial con TensorFlow.js y Keras para el reconocimiento de objetos: Reconocimiento de objetos usando TensorFlow.js y Keras
El HTML es la columna vertebral de cualquier página web. En tu caso, define todos los elementos que el usuario ve y con los que interactúa, como el título, la cámara, los botones y los mensajes de estado.
Aquí está el código y un análisis de las partes más importantes:
La Sección <head>
Esta sección contiene metadatos sobre la página, que no son visibles para el usuario, pero son cruciales para el navegador y los motores de búsqueda (SEO).
<!DOCTYPE html> <html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IA de reconocimiento de objetos: TensorFlow.js y Keras</title> <meta name="description" content="Aprende a crear una aplicación de reconocimiento de objetos con Inteligencia Artificial utilizando TensorFlow.js y Keras. ¡Entrena tu propio modelo web!"> <meta name="keywords" content="TensorFlow.js, Keras, reconocimiento de objetos, inteligencia artificial, IA, JavaScript, web, tutorial, realidad aumentada, crea realidad aumentada, aprender a crear aplicaciones de realidad aumentada"> <!-- Incluye Tailwind CSS para estilizar la aplicación. Solo para trabajarlo en produccion --> <script src="https://cdn.tailwindcss.com"></script> <!-- Incluye la fuente 'Inter' para una mejor tipografía --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"> <style> /* Aquí va el CSS personalizado */ </style> </head>
meta charset=»UTF-8″: Asegura que los caracteres especiales, como las tildes y las «ñ», se muestren correctamente.
meta name=»viewport»: Es fundamental para la adaptabilidad. Le dice al navegador que el ancho de la página debe ajustarse al ancho de la pantalla del dispositivo.
title: El título de la pestaña del navegador. Es importante para el SEO y la usabilidad.
meta name=»description» y meta name=»keywords»: Ayudan a los motores de búsqueda a entender el contenido de tu página.
script y link: Cargas bibliotecas externas. En este caso, Tailwind CSS para los estilos, la fuente Inter para la tipografía y las librerías de TensorFlow.js, FileSaver.js y JSZip para la funcionalidad.
La Sección <body>
Aquí es donde se define todo el contenido visible. Cada <div> actúa como un contenedor para organizar los elementos de la interfaz.
<body> <div class="container"> <h1 class="text-3xl font-bold mb-4 text-gray-800">IA de reconocimiento de objetos: TensorFlow.js y Keras</h1> <p class="mb-4 text-gray-600"> Autor: IngCarlosReina - <a href="https://blog.realidad-aumentada.com.co" class="text-blue-500 hover:underline" target="_blank">Blog Realidad Aumentada Empezando Desde Cero</a> </p> <p class="mb-4 text-gray-600"> Primero, añade nombres a los objetos, captura imágenes de cada uno y luego entrena tu propio modelo. </p> <!-- Contenedor para la cámara --> <div class="w-full sm:w-1/2 mx-auto"> <div id="video-container"> <video id="videoElement" autoplay muted playsinline></video> </div> </div> <!-- Controles para agregar clases y capturar imágenes --> <div class="mt-6 p-4 bg-gray-100 rounded-xl"> <h2 class="text-xl font-semibold mb-2 text-gray-700">1. Añadir un objeto para entrenar</h2> <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2"> <input type="text" id="classNameInput" placeholder="Ej: Vaso, Lápiz, Libro" class="flex-grow p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <button id="addClassButton" class="button bg-blue-500 hover:bg-blue-600">Añadir Objeto</button> </div> </div> <!-- Área para los botones de captura de imágenes por clase --> <div id="captureButtonsContainer" class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2"> <!-- Botones de captura se generarán aquí dinámicamente --> </div> <!-- Controles para el entrenamiento y reconocimiento --> <div class="mt-6 p-4 bg-gray-100 rounded-xl"> <h2 class="text-xl font-semibold mb-2 text-gray-700">2. Entrenar y Reconocer</h2> <div class="flex flex-col sm:flex-row justify-center items-center space-y-2 sm:space-y-0 sm:space-x-4"> <button id="trainButton" class="button bg-green-500 hover:bg-green-600">Entrenar Modelo</button> <button id="predictButton" class="button bg-purple-500 hover:bg-purple-600" disabled>Iniciar Reconocimiento</button> </div> </div> <!-- Controles para guardar y cargar el modelo --> <div class="mt-6 p-4 bg-gray-100 rounded-xl"> <h2 class="text-xl font-semibold mb-2 text-gray-700">3. Guardar y Cargar</h2> <div class="flex flex-col sm:flex-row justify-center items-center space-y-2 sm:space-y-0 sm:space-x-4"> <button id="saveModelButton" class="button bg-gray-500 hover:bg-gray-600" disabled>Guardar Modelo</button> <div class="file-upload-wrapper button bg-gray-500 hover:bg-gray-600"> <span>Cargar Modelo</span> <input type="file" id="loadModelInput" accept=".zip"> </div> </div> </div> <!-- Contenedor para mostrar el estado y los resultados --> <div class="status-box"> <p id="status" class="text-gray-700 font-medium">Cargando aplicación...</p> </div> </div> </body>
div class=»container»: Este es el contenedor principal que centra todo el contenido y le da un aspecto limpio y redondeado, gracias a las clases de Tailwind.
<h1> y <p>: Encabezados y párrafos que explican el propósito de la aplicación y el autor. Las clases de Tailwind (text-3xl, font-bold, mb-4) se usan para controlar el tamaño de la fuente, el peso y el margen.
div id=»video-container»: Un contenedor para la cámara. La clase w-full sm:w-1/2 hace que ocupe todo el ancho en pantallas pequeñas (w-full) y solo la mitad en pantallas medianas o más grandes (sm:w-1/2), demostrando diseño adaptable.
video: El elemento que muestra el flujo de la cámara web. Los atributos autoplay, muted y playsinline aseguran que el video se reproduzca automáticamente sin sonido, lo cual es esencial para una buena experiencia de usuario.
<input> y <button>: Estos son los elementos interactivos que permiten al usuario introducir datos y activar acciones. Los id (como addClassButton) son cruciales para que el código JavaScript pueda interactuar con ellos.
El Código CSS: Dando Estilo a la Aplicación
Aunque el código usa Tailwind CSS para muchos estilos, hay un bloque <style> para reglas personalizadas que no se pueden lograr solo con clases de Tailwind.
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
}
.container {
max-width: 800px;
width: 100%;
background-color: white;
padding: 2rem;
border-radius: 1.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
text-align: center;
}
#video-container {
position: relative;
width: 100%;
padding-top: 75%; /* Proporción 4:3 */
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
#videoElement {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.status-box {
margin-top: 1.5rem;
padding: 1rem;
background-color: #e5e7eb;
border-radius: 0.75rem;
}
.button {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
color: white;
transition: all 0.2s ease-in-out;
cursor: pointer;
margin-top: 0.5rem;
border: none;
}
.button:disabled {
background-color: #9ca3af;
cursor: not-allowed;
}
.file-upload-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.file-upload-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
</style>body: Define el estilo global. Las propiedades display: flex y justify-content: center, junto con align-items: center, son las que centran el contenedor principal en el medio de la pantalla, tanto horizontal como verticalmente.
.container: Establece un ancho máximo para que el contenido no se extienda demasiado en pantallas grandes (max-width: 800px), y le añade un fondo blanco, esquinas redondeadas (border-radius) y una elegante sombra (box-shadow).
#video-container: Un truco de CSS para mantener la relación de aspecto del video. Al usar position: relative y un padding-top basado en un porcentaje (75%), el contenedor siempre mantendrá una proporción de 4:3, independientemente del ancho de la pantalla.
#videoElement: Las propiedades position: absolute, top: 0 y left: 0 hacen que el video se posicione exactamente dentro del contenedor padre (#video-container). La propiedad transform: scaleX(-1) es muy importante, ya que voltea el video horizontalmente para que el reflejo de la cámara sea como el de un espejo, lo que es más intuitivo para el usuario.
.button: Una clase base para los botones que define estilos comunes como padding, border-radius, y una transición suave (transition: all 0.2s) al cambiar el estado del botón.
.button:disabled: Un pseudo-selector que aplica estilos especiales cuando el botón está deshabilitado. Cambia el color del fondo y el cursor para indicar que no se puede hacer clic.
.file-upload-wrapper: Esta es una técnica para ocultar el feo botón de carga de archivos por defecto. position: relative se usa para que el input[type=file] (con position: absolute) se posicione encima de él.
input[type=file]: Se hace invisible (opacity: 0) y se le da un tamaño enorme (font-size: 100px) para asegurar que ocupe toda el área del contenedor padre (.file-upload-wrapper), haciendo que sea fácil de clicar incluso estando invisible.
y listo! Ya explicamos el HTML y el CSS puedes ver como deberia funcionar tu app de reconocimiento de objetos utilizando TensorFlow.js y Keras.
Este es el resultado de la version 1.0.0, pruébala en tu pc online aquí: IA de reconocimiento de objetos: TensorFlow.js y Keras