Modelo de clasificación · 2 clases

¿Llevas gafas?

Activa la cámara y el modelo te dará una respuesta al instante. La imagen nunca sale de tu dispositivo.

Tu imagen aparecerá aquí al dar permiso a la cámara.

Cámara detenida

Resultado

—

Activa la cámara para empezar

Probabilidades

Con gafas0.0 %

Sin gafas0.0 %

El procesamiento ocurre por completo en tu navegador. Ningún fotograma se almacena o envía.

Cómo funciona

Detrás de la detección

La librería oficial de Teachable Machine carga el modelo, prepara la cámara y clasifica cada fotograma en tiempo real.

Importar las librerías

Se cargan únicamente cuando activas la cámara.

const tmImage = await import("@teachablemachine/image");
await import("@tensorflow/tfjs");

Cargar el modelo

load() descarga el grafo, los pesos y sus etiquetas.

const model = await tmImage.load(
  "/model/model.json",
  "/model/metadata.json"
);

Iniciar la cámara

Webcam abre el video y prepara el canvas de análisis.

const webcam = new tmImage.Webcam(400, 400, true);
await webcam.setup({ facingMode: "user" });
await webcam.play();

Predecir en bucle

Cada fotograma pasa al modelo para obtener las probabilidades.

webcam.update();
const result = await model.predict(webcam.canvas);
requestAnimationFrame(loop);

Estructura del modelo

El resultado contiene la etiqueta de cada clase y una probabilidad entre 0 y 1.

[
  { className: "Class 1", probability: 0.92 }, // Con gafas
  { className: "Class 2", probability: 0.08 }  // Sin gafas
]

Stack técnico

Librerías y componentes

Estas son las piezas de software que dan vida al detector. Toda la inferencia ocurre en el navegador, sin enviar datos al servidor.

Motor de IA

@tensorflow/tfjs

Versión de TensorFlow.js. Ejecuta el grafo de red neuronal en la CPU/GPU del navegador usando WebGL. Aquí solo se carga como soporte del modelo de Teachable Machine.

await import("@tensorflow/tfjs");

Clasificación de imagen

@teachablemachine/image

Librería oficial de Teachable Machine. load() descarga el modelo, Webcam() gestiona el video y el canvas, y model.predict() clasifica cada fotograma.

const model = await tmImage.load(
  "/model/model.json",
  "/model/metadata.json"
);
const webcam = new tmImage.Webcam(400, 400, true);
const result = await model.predict(webcam.canvas);

Interfaz y enrutado

React + TanStack Start

El componente GlassesDetector gestiona el estado (idle/loading/running/error) y el bucle de predicción. TanStack Router define la ruta raíz de la página.

export const Route = createFileRoute("/")({
  component: GlassesDetector,
});

Iconografía

lucide-react

Biblioteca de iconos. Se usan Camera, Power, Glasses, ScanFace, ShieldCheck y Braces para reforzar las acciones y estados de la interfaz.

import {
  Camera, Power, Glasses,
  ScanFace, ShieldCheck, Braces,
} from "lucide-react";

useRef

Guarda referencias estables: el contenedor del canvas, la instancia de Webcam y una bandera para detener el bucle.

useState / useCallback

Manejan el estado del detector (status, predicciones, errores) y memorizan start() y stop() para estabilidad del render.

Button (shadcn/ui)

Componente base de la guía de estilos. Se usa para «Activar cámara» y «Desactivar cámara», con variantes y tamaños.

Las librerías se importan dinámicamente solo al activar la cámara, por lo que la carga inicial de la página no se penaliza con el peso de TensorFlow.js.