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 r;

let g;

let b;

​

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

​

  fontRegular = loadFont('SF-Pro-Text-Regular.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(320, 240);

  video.hide();

  textFont(fontRegular);

  //  textWrap(WORD);

​

  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-200);

  button.mousePressed(nextGroup);

​

  classifyVideo();

}

​

function draw() {

    textAlign(CENTER);

    background(255);

      fill(233,233,235);

      rect(0, 0, width, 50);

fill(0);

  textStyle(BOLD);

  let header = groups[currentGroup]["Class 3"];

      text(header, width/2, 30);

      noStroke();

       fill(128,128,128);

    textStyle(NORMAL);

  text("iMessage", width/2, 80);

  text("Today 6:41 PM", width/2, 100);

​

  //your message

   fill(233,233,235);

    rect(35, 120, 60, 35, 20);

      rect(35, 165, 280, 130, 16);

  fill (0);

  text("Hi there", 65, 143);

  //your received message

​

​

​

​

  // Draw the label

  textSize(14);

  textAlign(LEFT);

​

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

     fill(214, 28, 137);

    text(groups[currentGroup]["Class 1"], 50, 190, 240);

    text ("much better...",width / 2 - button.width -10 / 2, height-170);

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

        fill(0);

      textStyle(NORMAL);

     fill(0,0,0);

    text(groups[currentGroup]["Class 2"], 50, 190, 240);

​

  }

    gif_createImg.position(20, windowHeight-100);

}

​

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

}