Clasificador de Video con Teachable Machine

Este es un modelo entrenado en Teachable Machine que clasifica imágenes en tiempo real usando la cámara.

Este modelo utiliza un clasificador entrenado en Teachable Machine para analizar imágenes capturadas desde una cámara web en tiempo real. El clasificador puede identificar patrones visuales definidos durante el entrenamiento del modelo y producir una predicción continua a partir del video.

Instrucciones:

• 1. Haz clic en el botón “Iniciar Clasificador de Video”
• 2. Permite el acceso a la cámara cuando el navegador lo solicite
• 3. Verás la etiqueta detectada y un emoji que representa la predicción actual

Note

Este ejemplo usa video en tiempo real como entrada. El modelo puede clasificar continuamente los frames capturados por la cámara web.

Explicación del Código

Código Completo

// Clasificador de imágenes cargado desde Teachable Machine
let classifier;

// Video capturado en tiempo real desde la cámara web
let video;

// Etiqueta resultante de la clasificación
let label = "";

// URL del modelo entrenado en Teachable Machine
const modelURL = "https://teachablemachine.withgoogle.com/models/bXy2kDNi/";

// Se ejecuta antes de setup() y se usa para cargar recursos
function preload() {
    // Cargar el modelo de clasificación entrenado previamente
    classifier = ml5.imageClassifier(modelURL);
}

function setup() {
    // Crear el lienzo donde se mostrará el video
    createCanvas(640, 520);

    // Activar la cámara y capturar el video
    video = createCapture(VIDEO);

    // Ocultar el elemento HTML del video (solo se usa el canvas)
    video.hide();

    // Iniciar la primera clasificación del video
    classifier.classify(video, gotResult);
}

// Función callback que se ejecuta cuando el modelo entrega un resultado
function gotResult(error, results) {
    // Verificar si ocurrió un error durante la clasificación
    if (error) {
        console.error(error);
        return;
    }

    // Guardar la etiqueta más probable
    label = results[0].label;

    // Volver a clasificar el siguiente frame del video
    classifier.classify(video, gotResult);
}

function draw() {
    // Dibujar el video en el lienzo
    image(video, 0, 0, width, height);

    // Configurar el estilo del texto
    fill(255);
    stroke(0);
    strokeWeight(2);
    textSize(18);

    // Mostrar la etiqueta detectada en pantalla
    text("Etiqueta: " + label, 10, height - 20);
}

1. Declaración de Variables

Primero, declaramos las variables que necesitaremos durante todo el proceso:

// Clasificador de imágenes cargado desde Teachable Machine
let classifier;

// Video capturado en tiempo real desde la cámara web
let video;

// Etiqueta resultante de la clasificación
let label = "";

// URL del modelo entrenado en Teachable Machine
const modelURL = "https://teachablemachine.withgoogle.com/models/bXy2kDNi/";

2. Carga del Modelo (preload)

La función preload() se ejecuta antes de setup() y es ideal para cargar recursos:

function preload() {
    classifier = ml5.imageClassifier(modelURL);
}

3. Configuración Inicial (setup)

La función setup() se ejecuta una vez al inicio:

function setup() {
    createCanvas(640, 520);
    video = createCapture(VIDEO);
    video.hide();
    classifier.classify(video, gotResult);
}

4. Procesamiento de Resultados

La función gotResult es un callback que recibe los resultados de la clasificación:

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    label = results[0].label;
    classifier.classify(video, gotResult);
}

5. Visualización del Resultado (draw)

La función draw() se ejecuta varias veces por segundo:

function draw() {
    image(video, 0, 0, width, height);
    fill(255);
    stroke(0);
    strokeWeight(2);
    textSize(18);
    text("Etiqueta: " + label, 10, height - 20);
}