// Classifier Variable let classifier; // Model URL let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/'; // Video let video; let flippedVideo; // To store the classification let label = ""; // Load the model first function preload() { classifier = ml5.imageClassifier(imageModelURL + 'model.json'); } function setup() { createCanvas(320, 260); // Create the video video = createCapture(VIDEO); video.size(320, 240); video.hide(); flippedVideo = ml5.flipImage(video); // Start classifying classifyVideo(); } function draw() { background(0); // Draw the video image(flippedVideo, 0, 0); // Draw the label fill(255); textSize(16); textAlign(CENTER); text(label, width / 2, height - 4); } // Get a prediction for the current video frame function classifyVideo() { flippedVideo = ml5.flipImage(video) classifier.classify(flippedVideo, gotResult); flippedVideo.remove(); } // When we get a result function gotResult(error, results) { // If there is an error if(label == "Azul"){ document.body.style.backgroundColor = 'blue'; } else{ document.body.style.backgroundColor = 'yellow'; } if (error) { console.error(error); return; } // The results are in an array ordered by confidence. // console.log(results[0]); label = results[0].label; // Classifiy again! classifyVideo(); }Importo mi modelo desde la página de Teachable machine y no sé cómo eliminar el lienzo predeterminado, porque si simplemente lo elimino, no puedo capturar los datos que devuelve. ¿Hay alguna forma de hacerlo transparente? Muchísimas gracias.
El modelo se descarga máquina con la opción p5.js
Intento que el lienzo sea transparente, pero no lo consigo.
Actualmente estás dibujando en el lienzo predeterminado:
background(0); // Draw the video image(flippedVideo, 0, 0); // Draw the label fill(255); textSize(16); textAlign(CENTER); text(label, width / 2, height - 4);background(0); significa borrar los píxeles dibujados previamente haciéndolos todos negros opacosimage(flippedVideo, 0, 0); mostrará la imagen de la cámara web en la parte superior (ocultando una gran parte del fondo)text(label, width / 2, height - 4); mostrará la etiqueta sobre el fondo.Si no desea mostrar la imagen de la cámara web, simplemente no la renderice:
background(0); // Draw the label fill(255); textSize(16); textAlign(CENTER); text(label, width / 2, height - 4); (no necesita flippedVideo.remove(); en este caso).
Si desea mostrar principalmente la etiqueta de texto, en lugar de background() , pero desea un fondo negro para el texto, puede usar un rect() que tenga aproximadamente las dimensiones del texto. Puedes hacer esto con rectMode(CENTER); (lo que ayudará con el texto alineado al centro):
// Classifier Variable let classifier; // Model URL let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/'; // Video let video; let flippedVideo; // To store the classification let label = ""; // Load the model first function preload() { classifier = ml5.imageClassifier(imageModelURL + 'model.json'); } function setup() { createCanvas(320, 260); // draw rectangles from center rectMode(CENTER); // Create the video video = createCapture(VIDEO); video.size(320, 240); video.hide(); flippedVideo = ml5.flipImage(video); // Start classifying classifyVideo(); } function draw() { // Draw the label background rect let margin = 3; fill(0) rect(width / 2, height - 5, 70, 25); // Draw the label fill(255); textSize(16); textAlign(CENTER); text(label, width / 2, height - 4); } // Get a prediction for the current video frame function classifyVideo() { flippedVideo = ml5.flipImage(video) classifier.classify(flippedVideo, gotResult); } // When we get a result function gotResult(error, results) { // If there is an error if(label == "Azul"){ document.body.style.backgroundColor = 'blue'; } else{ document.body.style.backgroundColor = 'yellow'; } if (error) { console.error(error); return; } // The results are in an array ordered by confidence. // console.log(results[0]); label = results[0].label; // Classifiy again! classifyVideo(); }function draw() { let margin = 3; fill(0); rect(width, height - 0, 0, 0); }Cambié esto en la función de dibujo y finalmente desapareció todo el lienzo.