Uso de MobileNet y TensorFlow JS para Clasificación de Imágenes

¿Cómo usar un modelo de clasificación de imágenes preentrenado?

La clasificación de imágenes es una tecnología poderosa que puede servirte para múltiples aplicaciones, gracias a la implementación de modelos preentrenados como MobileNet y TensorFlow JS. Estos modelos han sido previamente entrenados por Google, lo que simplifica su uso en nuestras aplicaciones. Puedes integrar este modelo, que representa la transferencia de conocimiento, a tus proyectos de manera sencilla. Veamos cómo.

¿Cuáles son los pasos iniciales?

Para comenzar a utilizar un modelo de clasificación, es necesario importar ciertas librerías. Usaremos tanto TensorFlow JS como el modelo preentrenado MobileNet. A continuación, te mostramos un ejemplo del código para importar estas librerías:

// Importamos las librerías necesarias
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

Además, debes cargar la imagen con el atributo crossOrigin para evitar restricciones, dado que las imágenes pueden no estar en tu propio servidor:

<img id="img" src="URL_de_imagen" crossOrigin="anonymous" width="224" height="224">

¿Cómo configurar el entorno de desarrollo?

Para que toda la configuración funcione de forma óptima, debes levantar un servidor localmente. En este ejemplo, utilizamos Node.js. El servidor te ayudará a servir las páginas que usarás durante el experimento:

// Command to start the server
node http-server

Con ello, asegúrate de que las librerías y la imagen se están cargando correctamente en tu página web.

¿Cómo cargar el modelo de MobileNet?

El siguiente paso es cargar el modelo usando una función asincrónica. Esto permite que las tareas de descarga y carga de redes neuronales no obstruyan la ejecución general de la aplicación:

// Función asíncrona para cargar el modelo
async function loadModel() {
  const net = await mobilenet.load();
  console.log('Modelo cargado:', net);
}

¿Qué hacemos después de cargar el modelo?

Después de asegurarte que el modelo ha sido cargado correctamente, puedes utilizar el método classify del modelo para identificar objetos en la imagen proporcionada:

// Ejecutamos la clasificación de la imagen
async function classifyImage() {
  const img = document.getElementById('img');
  const predictions = await net.classify(img);
  console.log('Predicciones:', predictions);
}

Aquí es crucial usar el operador await para manejar el retorno de promesas y obtener resultados concretos.

¿Cómo mostrar los resultados al usuario?

Para desplegar los resultados de las clasificaciones, puedes actualizar dinámicamente las descripciones en tu página:

// Función para mostrar la predicción
function displayPrediction(predictions) {
  const descriptionDiv = document.getElementById('description');
  descriptionDiv.innerHTML = JSON.stringify(predictions, null, 2);
}

// Llamamos a esta función después de realizar la predicción
classifyImage().then(displayPrediction);

¿Cómo incorporar interactividad y nuevas imágenes?

Para hacer nuestro proyecto aún más dinámico, podrías añadir un botón que cambie la imagen cada vez que es presionado:

<button onclick="changeImage()">Cambiar Imagen</button>

La función changeImage puede estar diseñada para obtener imágenes de un recurso externo e incrementar un contador de modo que siempre obtengas una nueva imagen:

let count = 0;
// Función para cambiar la imagen y realizar una nueva predicción
function changeImage() {
  count++;
  const imgElement = document.getElementById('img');
  imgElement.src = `URL_de_imagen_dinámica?count=${count}`;
  classifyImage().then(displayPrediction);
}

Con esta implementación, puedes disfrutar de una experiencia interactiva que genera resultados rápidos y divertidos.

En definitiva, el uso de modelos preentrenados como MobileNet te permite adentrarte en el mundo de la inteligencia artificial de manera directa y amigable. La facilidad de integración y personalización te abre las puertas para nuevos desarrollos e innovaciones. ¡Continúa explorando y aprendiendo más sobre la magia detrás de los modelos de clasificación de imágenes!