let imageModelURL = 'https://teachablemachine.withgoogle.com/models/HtQ_CmGrb/';

​

// Video

let video;

let flippedVideo;

// To store the classification

let label = "";

let data;

let groups = [];

let currentGroup = 0;

let button;

​

// Images for different classes

let images = {};

​

function preload() {

  classifier = ml5.imageClassifier(imageModelURL + 'model.json');

  data = loadStrings('data.txt');

  // Preload images for different classes

  images["Class 1"] = loadImage("images/Email.png"); // For Class 1

  images["Class 2"] = loadImage("images/Email.png"); // For Class 2

  images["Class 3"] = loadImage("images/Email.png"); // For Class 3

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(320, 240);

  video.hide();

  textFont('Verdana');

​

  flippedVideo = ml5.flipImage(video);

​

  // Parse the text file into groups

  let tempGroup = { "Class 1": "", "Class 2": "", "Class 3": "" };

  for (let line of data) {

    if (line.trim() === "---") {

      groups.push(tempGroup);

      tempGroup = { "Class 1": "", "Class 2": "", "Class 3": "" };

    } else {

      let parts = line.split(": ");

      tempGroup[parts[0].trim()] = parts[1].trim();

    }

  }

  groups.push(tempGroup); // Add the last group

​

  button = createButton('Next');

  button.position(width / 2 - button.width / 2, height - 300);

  button.mousePressed(nextGroup);

​

  classifyVideo();

}

​

function draw() {

  background(255);

  textSize(14);

  textAlign(CENTER);

​

  if (label === "Class 1") {

    background(255, 227, 241);

    fill(252, 3, 123);

    text(groups[currentGroup]["Class 1"], width / 2 - 250, height / 2 - 100, 500);

    image(images["Class 1"], 20, windowHeight - 200);

  } else if (label === "Class 2") {

    fill(0);

    textStyle(NORMAL);

    text(groups[currentGroup]["Class 2"], width / 2 - 250, height / 2 - 100, 500);

    image(images["Class 2"], 20, windowHeight - 200);

  } else if (label === "Class 3") {

    fill(0);

    textStyle(NORMAL);

    text(groups[currentGroup]["Class 3"], width / 2 - 250, height / 2 - 100, 500);

    image(images["Class 3"], 20, windowHeight - 200);

  }

​

  text("See the world how you want to see it", 150, windowHeight - 225);

}

​

function nextGroup() {

  currentGroup = (currentGroup + 1) % groups.length;

}

​

// 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 (error) {

    console.error(error);

    return;

  }

  label = results[0].label;

  console.log(label);

  classifyVideo();

}

​