Skip to content

Teachable machine model is not working as intended with ml5.js #1496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erkaner opened this issue Mar 5, 2025 · 0 comments
Open

Teachable machine model is not working as intended with ml5.js #1496

erkaner opened this issue Mar 5, 2025 · 0 comments

Comments

@erkaner
Copy link

erkaner commented Mar 5, 2025

I have this model which identifies if person raises left or right arm, or points upward or downward. It seems to work in this url: https://teachablemachine.withgoogle.com/models/C0r5hkA8y/

I want to design a simple snake app using ml5.js. The app always classifies the webcam image as upward. You can test it out here: https://editor.p5js.org/erkaner/sketches/HZAx6jHua

I just do not understand why it works this way. Below is the complete ml5.js code:

let video;
let label = "waiting...";

// Classifier Variable
let classifier;
// Model URL
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/C0r5hkA8y/';

// STEP 1: Load the model!
function preload() {
  classifier = ml5.imageClassifier(imageModelURL + "model.json");
}

let snake;
let rez = 20;
let food;
let w;
let h;

function setup() {
  createCanvas(640, 480);
  // Create the video

  // Create the video
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.hide();

  // Start classifying
  classifyVideo();

  w = floor(width / rez);
  h = floor(height / rez);
  // frameRate(5);
  snake = new Snake();
  foodLocation();
}

// Get a prediction for the current video frame
function classifyVideo() {
  classifier.classify(video, gotResult);
}

// When we get a result
function gotResult(results, error) {
  /*
  // If there is an error
  if (error) {
    console.error(error);
    return;
  }
  // The results are in an array ordered by confidence.
  */
  label = results[0].label;
  console.log(results)
  
  
  // Classifiy again!  
  controlSnake();
  classifyVideo();
  
}

function foodLocation() {
  let x = floor(random(w));
  let y = floor(random(h));
  food = createVector(x, y);
}

function keyPressed() {
  if (keyboard_control) {
    if (keyCode == RIGHT_ARROW) snake.setDir(1, 0);
    if (keyCode == LEFT_ARROW) snake.setDir(-1, 0);
    if (keyCode == UP_ARROW) snake.setDir(0, -1);
    if (keyCode == DOWN_ARROW) snake.setDir(0, 1);
  }
}

function controlSnake() {
  console.log(label);
  if (!keyboard_control) {
    if (label === "yukari") {
      // UP
      snake.setDir(0, -1);
    } else if (label === "sag") {
      // RIGHT
      snake.setDir(1, 0);
    } else if (label === "sol") {
      // LEFT
      snake.setDir(-1, 0);
    } else if (label === "asagi") {
      // DOWN
      snake.setDir(0, 1);
    }
  }
}

function draw() {
  background(220);
  if (!keyboard_control) {
    image(video, 0, 0, 160, 120);
    textSize(32);
    fill(255);
    stroke(0);
    text(label, 10, 40);
  }

  scale(rez);
  if (snake.eat(food)) {
    foodLocation();
    snake.update();
  }
  if (frameCount % speed == 0) {
    snake.update();
  }
  snake.show();

  if (snake.endGame()) {
    print("END GAME");
    background(255, 0, 0);
    noLoop();
  }

  noStroke();
  fill(255, 0, 0);
  rect(food.x, food.y, 1, 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant