p5.js Web Editor | Testing Transfer Learning Models

xxxxxxxxxx
let models = [
  {
    name: "Andy1",
    url: "https://teachablemachine.withgoogle.com/models/4APr30zJB/",
  },
  {
    name: "Andy2",
    url: "https://teachablemachine.withgoogle.com/models/wbLQWLeMQ/",
  },
  {
    name: "Emy",
    url: "https://teachablemachine.withgoogle.com/models/1DjkqKk7K/",
  },
  {
    name: "Evelyn",
    url: "https://teachablemachine.withgoogle.com/models/oXglbc2vY/",
  },
  {
    name: "Fan",
    url: "https://teachablemachine.withgoogle.com/models/16ulmP1F7/",
  },
  {
    name: "Ivy-Maria",
    url: "https://teachablemachine.withgoogle.com/models/PHndrmH9j/",
  },
  {
    name: "Jiayue",
    url: "https://teachablemachine.withgoogle.com/models/HFryE18P2/",
  },
  {
    name: "Linda",
    url: "https://teachablemachine.withgoogle.com/models/l-twAN4Oc/",
  },
  {
    name: "Lucas",
    url: "https://teachablemachine.withgoogle.com/models/2Tu-lTwiW/",
  },
  {
    name: "Miranda",
    url: "https://teachablemachine.withgoogle.com/models/DZ77hGlS1/",
  },
  {
    name: "Renna",
    url: "https://teachablemachine.withgoogle.com/models/Bbvj9dhgj/",
  },
  {
    name: "Sid",
    url: "https://teachablemachine.withgoogle.com/models/rHBm8Ga3P/",
  },
  {
    name: "Tania",
    url: "https://teachablemachine.withgoogle.com/models/IttZnUMy7/",
  },
  {
    name: "Tiffany",
    url: "https://teachablemachine.withgoogle.com/models/e06eTo0XK/",
  }
];
​
let loaded = 0; // how many models are loaded
let imgs = []; // array of test images
let curImg = 0; // index of current test image
let classifyImg; // image to be classifying
let finished = 0; // how many results are in
​
function modelReady() {
  if (loaded == models.length) {
    return;
  }
​
  console.log("Finished loading model by " + models[loaded].name);
​
  loaded++;
  if (loaded < models.length) {
    // load next model
    models[loaded].classifier = ml5.imageClassifier(
      models[loaded].url,
      modelReady
    );
  } else {
    console.log("Done loading models");
  }
}
​
function gotResults(error, results) {
  if (error) {
    console.error(models[finished].name + " failed");
  } else {
    models[finished].label = results[0].label;
    models[finished].confidence = results[0].confidence;
  }
​
  finished++;
  if (finished < models.length) {
    models[finished].classifier.classify(classifyImg, gotResults);
  }
}
​
function preload() {
  console.log("Loading images");
  for (let i = 0; i < 7; i++) {
    imgs.push(loadImage("test/input" + i + ".png"));
  }
  console.log("Done loading images");
}
​
function setup() {
  createCanvas(640, 480);
​
  // start loading models
  models[0].classifier = ml5.imageClassifier(models[0].url, modelReady);
}
​
function draw() {
  background(255);
  image(imgs[curImg], 0, 0, width, height);
​
  fill(255, 0, 0);
  textSize(18);
  for (let i = 0; i < finished; i++) {
    text(
      models[i].name +
        ": " +
        models[i].label +
        " @ " +
        nfs(models[i].confidence * 100, 0, 2) +
        "%",
      20,
      30 + i * 30
    );
  }
}
​
function keyPressed() {
  if (keyCode == LEFT_ARROW) {
    curImg = (--curImg + imgs.length) % imgs.length;
    finished = 0;
  } else if (keyCode == RIGHT_ARROW) {
    curImg = ++curImg % imgs.length;
    finished = 0;
  } else if (keyCode == ENTER) {
    classifyImg = get();
    models[0].classifier.classify(classifyImg, gotResults);
  }
}
​
Cookies

Sketch Files

Console

Preview
