Public
Edited
Oct 29, 2024
3 forks
ml5 = require("ml5@0.12.2");
P5 = require('https://unpkg.com/p5@1.9.2/lib/p5.js')
import {p5} from "@tmcw/p5";
clasificadorGenerico = ml5.imageClassifier('MobileNet');
extractorCualidades = ml5.featureExtractor('MobileNet');
clasificadorEntrenado = extractorCualidades.classification();
p5(sketch => {
return
let video;
let labelResultado = "";
// Escoger clasificador
let clasificador = clasificadorGenerico;
// let clasificador = clasificadorEntrenado;
sketch.setup = function() {
// sketch.noCanvas();
sketch.createCanvas(640, 480);
sketch.frameRate(16);
video = sketch.createCapture(sketch.VIDEO);
video.hide();
sketch.textSize(40);
sketch.textAlign(sketch.CENTER)
// Crear botones para cada label
const contenedorLabels = sketch.createDiv();
const labels = ["A", "B"];
for (let label of labels) {
sketch.createButton(`Ejemplo de: ${label}`).parent(contenedorLabels).mouseClicked(() => incluirEjemplo(label));
}
const contenedorClasificador = sketch.createDiv();
sketch.createButton("Clasificar").parent(contenedorClasificador).mouseClicked(clasificar);
sketch.createButton("Entrenar").parent(contenedorClasificador).mouseClicked(entrenar);
};
sketch.draw = function() {
sketch.image(video, 0, 0);
sketch.fill("red");
sketch.text(labelResultado, sketch.width/2, sketch.height/10);
};
// Incluir un nuevo ejemplo a los datos para entrenar
function incluirEjemplo(label) {
clasificador.addImage(video, label);
}
function entrenar() {
clasificador.train();
}
// Esta función muestra el label de la clasificación de la imagen en video
function clasificar() {
clasificador.classify(video, (error, results) => {
labelResultado = results[0].label;
});
}
})
p5(sketch => {
return
let video;
let t = 0;
const opciones = {
withLandmarks: true,
withDescriptors: false,
}
let faceapi;
let listo = false;
sketch.setup = function() {
sketch.createCanvas(640, 480);
video = sketch.createCapture(sketch.VIDEO);
video.hide();
sketch.frameRate(12);
sketch.textSize(40);
sketch.textAlign(sketch.CENTER);
faceapi = ml5.faceApi(video, opciones, () => {listo = true });
};
sketch.draw = function() {
if (listo) {
faceapi.detect(mostrarResultados);
} else {
sketch.text(`CARGANDO`, sketch.width / 2, sketch.height / 2);
}
};
function mostrarResultados(error, resultados) {
if (error) return
sketch.image(video, 0, 0);
if (resultados) {
if (resultados.length > 0) {
dibujarCajas(resultados);
}
}
faceapi.detect(mostrarResultados);
}
function dibujarCajas(resultados) {
for(let i = 0; i < resultados.length; i++){
const alignedRect = resultados[i].alignedRect;
const x = alignedRect._box._x
const y = alignedRect._box._y
const boxWidth = alignedRect._box._width
const boxHeight = alignedRect._box._height
sketch.noFill();
sketch.stroke(161, 95, 251);
sketch.strokeWeight(2);
sketch.rect(x, y, boxWidth, boxHeight);
}
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
