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;

let alphaValue = 0;

let fadeInSpeed = 2;

let email;

​

// Load the model and text file

function preload() {

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

  data = loadStrings('data.txt');

  gif_loadImg = loadImage("glasses.gif");

  gif_createImg = createImg("glasses.gif");

  email = loadImage("images/Email.png");

}

​

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": "" };

  for (let line of data) {

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

      groups.push(tempGroup);

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

    } 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(12);

  textAlign(LEFT);

​

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

    background(255, 227, 241);

    image(email, width / 2 - 200, height / 2 - 200, 640, 200);

    text(groups[currentGroup]["Class 1"], 220, 175, 500);

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

    image(email, width / 2 - 200, height / 2 - 200, 640, 200);

    text(groups[currentGroup]["Class 2"], 220, 175, 500);

  }

​

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

  gif_createImg.position(20, windowHeight - 200);

  if (alphaValue < 255) {

    alphaValue += fadeInSpeed; // Adjust the speed as needed

  }

}

​

function nextGroup() {

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

  alphaValue = 0; // Reset alphaValue when the group changes

}

​

// 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();

}