Construir un clasificador de imágenes funcional en el navegador es más accesible de lo que parece. Con TensorFlow JS y el modelo preentrenado MobileNet, es posible identificar objetos en fotografías sin necesidad de entrenar una red neuronal desde cero. Todo el proceso ocurre en unas pocas líneas de código y abre la puerta a técnicas avanzadas como la transferencia de conocimiento.
¿Cómo cargar MobileNet y TensorFlow JS en una página web?
El punto de partida es importar dos librerías: TensorFlow JS, que proporciona la infraestructura para ejecutar modelos de machine learning en JavaScript, y MobileNet, un clasificador de imágenes ya entrenado por Google con millones de imágenes [0:08].
Para trabajar con una imagen externa se utiliza la etiqueta <img> con un atributo clave: crossorigin. Este atributo es indispensable cuando la imagen no reside en el propio servidor. Sin él, el navegador permite visualizarla, pero bloquea su uso dentro del modelo por restricciones de seguridad [0:35].
html
<img id="img" crossorigin src="https://..." width="227" />
Una vez confirmado que la imagen se despliega correctamente y las librerías cargan sin errores, el siguiente paso es preparar el modelo.
¿Qué significa cargar un modelo preentrenado en el navegador?
Se declara una función asíncrona porque tanto la descarga del modelo como las predicciones son operaciones que no se ejecutan de forma inmediata. Bloquear la aplicación mientras se descargan varios megabytes de parámetros sería inaceptable para el usuario [1:42].
javascript
const img = document.getElementById('img');
let net;
async function app() {
net = await mobilenet.load();
}
app();
Al invocar mobilenet.load(), el navegador descarga múltiples shards de datos binarios que contienen todos los parámetros aprendidos durante el entrenamiento original. También se descarga una representación textual de la arquitectura de la red neuronal [2:22]. Estos archivos juntos conforman el modelo listo para inferencia.
¿Por qué es obligatorio usar await en la clasificación?
Un error frecuente es olvidar la palabra reservada await antes de net.classify(img). Sin ella, la variable de resultado almacena una promise en lugar del arreglo de predicciones [3:00]. El clasificador necesita tiempo para procesar la imagen y devolver las probabilidades.
javascript
const result = await net.classify(img);
console.log(result);
El resultado es un arreglo de objetos que indica qué elementos identificó en la imagen y con qué porcentaje de certeza corresponde cada clasificación. Por ejemplo, ante la foto de un perro, el modelo devuelve varias razas posibles ordenadas por probabilidad [3:30].
¿Cómo actualizar predicciones de forma dinámica con cada nueva imagen?
Para convertir el experimento en algo interactivo se agrega un botón que cambia la imagen y dispara una nueva predicción. Se crea un <div> con un identificador donde se despliega la descripción en formato JSON [4:05].
javascript
async function displayImagePrediction() {
const result = await net.classify(img);
document.getElementById('descripcion').innerText = JSON.stringify(result);
}
La función cambiarImagen modifica dinámicamente el atributo src de la imagen usando un servicio que devuelve fotografías aleatorias. Un contador se incrementa en cada clic para evitar que el navegador sirva la misma imagen desde caché [5:15].
javascript
let count = 0;
function cambiarImagen() {
count += 1;
img.src = https://...?random=${count};
img.onload = displayImagePrediction;
}
¿Qué tan preciso es MobileNet con imágenes aleatorias?
Los resultados son reveladores: MobileNet acierta con claridad en objetos comunes como un notebook o una laptop, pero confunde un atrapasueños con un basketball [6:02]. A pesar de haberse entrenado con una cantidad enorme de datos, ningún modelo generaliza perfectamente ante cualquier escenario. Esta limitación es precisamente lo que motiva el siguiente paso: aplicar transferencia de conocimiento para enseñarle al modelo a reconocer categorías nuevas, como señas u objetos específicos, sin reentrenar toda la red desde cero [6:30].
¿Has probado MobileNet con tus propias imágenes? Comparte qué predicciones inesperadas obtuviste y cómo planeas usar la transferencia de conocimiento en tus proyectos.
