Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
How can I remove the default canvas when I import a machine learning model from the teachable machine page?
// 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();
}

I import my model from the Teachable machine page, and I don't know how to remove the default canvas, because if I simply remove it I can't capture the data it returns. Is there any way to make it transparent? Thank you very much.

The model is downloaded machine with the p5.js option

I try to make the canvas transparent, but I didn't get it

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You're currently drawing into the default canvas:

  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); means clear the previously drawn pixels by making them all opaque black
  • image(flippedVideo, 0, 0); will render the webcam image on top (hiding a large portion of the background)
  • text(label, width / 2, height - 4); will render the label on top of the background.

If you don't want to display the webcam image simply don't render it:

  background(0);
  
  // Draw the label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);

(you don't need flippedVideo.remove(); in this case).

If you want to mostly display the text label, instead of background(), but want a black background for the text, you can use a rect() that has roughly the dimensions of the text. You can do this with rectMode(CENTER); (which will help with the center aligned text):

// 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();
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

function draw() {
  let margin = 3;
  fill(0);
  rect(width, height - 0, 0, 0);
}

I changed this in the draw function and finally the entire canvas was gone.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda