let featureExtractor;

let capture;

let addSampleButton;

let trainButton;

let predictButton;

let numSamples = 0;

let paragraph;

let slider;

let positionX = 140;

​

function setup() {

  createCanvas(400, 300);

  capture = createCapture(VIDEO);

  capture.size(400, 300);

  capture.hide();

  featureExtractor = ml5.featureExtractor('MobileNet', modelReady);

  regressor = featureExtractor.regression(capture, videoReady);

  setupButtons();

}

​

function draw() {

  push()

    translate(capture.width,0);

    scale(-1.0,1.0);

    image(capture, 0, 0, 400, 300);

  pop();

  noStroke();

  fill(255, 0, 0);

  rect(positionX, 120, 50, 50);

}

​

function modelReady() {

    print('Model is ready!');

}

​

function videoReady() {

    print('Video is ready!'); 

}

​

function setupButtons() {

  slider = createSlider(0, 1, 0.5, 0.01);

    addSampleButton = createButton('add sample');

  addSampleButton.mousePressed(function() {

    numSamples++;

    print(numSamples);

    regressor.addImage(slider.value());

  });

    trainButton = createButton('train'); 

  trainButton.mousePressed(function() {

    regressor.train(function(lossValue) {

        if (lossValue) {

        print(lossValue);

      } else {

        print('Done Training!'); 

      }

    });

  });

  predictButton = createButton('predict');

  predictButton.mousePressed(predict);

}

​

function predict() {

    regressor.predict(processResults); 

}

​

function processResults(err, result) {

  if (err) { 

    console.error(err)

  } else {

    slider.value(result);

    positionX = map(result, 0, 1, 0, width);

    predict();

  }

}