Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

135
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda