​

This example was provided by Andreas Refsgaard using ML5.

https://editor.p5js.org/AndreasRef/sketches/Z2OChCuHk

*/

​

let featureExtractor;  

let regressor;

let video;

let loss;

let slider;

let samples = 0;

let rectSize = 50;

​

let lerpedResult = 0.5;

let allowedToPredict = true;

​

function setup() {

  createCanvas(640, 480);

  // Create a video element

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // Extract the features from MobileNet

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

  // Create a new regressor using those features and give the video we want to use

  regressor = featureExtractor.regression(video, videoReady);

  // Create the UI buttons

  setupButtons();

  rectMode(CENTER);

}

​

function draw() {

  image(video, 0, 0, width, height);

  noStroke();

  fill(255, 0, 0, 100);

  //slider.value() is  your key variable to do something with on prediction. 

  rect(width / 2, height / 2, slider.value() * 300, slider.value() * 300);

}

​

// A function to be called when the model has been loaded

function modelReady() {

  select('#modelStatus').html('Model loaded!');

}

​

// A function to be called when the video has loaded

function videoReady() {

  select('#videoStatus').html('Video ready!');

}

​

// Classify the current frame.

function predict() {

  allowedToPredict = true;

  regressor.predict(gotResults);

}

​

function stopPredicting() {

  allowedToPredict = false;

}

​

// A util function to create UI buttons

function setupButtons() {

  slider = select('#slider');

  select('#addSample').mousePressed(function() {

    regressor.addImage(slider.value());

    select('#amountOfSamples').html(samples++);

  });

​

  // Train Button

  select('#train').mousePressed(function() {

    regressor.train(function(lossValue) {

      if (lossValue) {

        loss = lossValue;

        select('#loss').html('Loss: ' + loss);

      } else {

        select('#loss').html('Done Training! Final Loss: ' + loss);

      }

    });

  });

​

  // Predict Button

  select('#buttonPredict').mousePressed(predict);

  select('#buttonStopPredict').mousePressed(stopPredicting);

​

  // Save model

  saveBtn = select('#save');

  saveBtn.mousePressed(function() {

    regressor.save();

  });

​

  // Load model

  loadBtn = select('#load');

  loadBtn.changed(function() {

    regressor.load(loadBtn.elt.files, function() {

      select('#modelStatus').html('Custom Model Loaded!');

    });

  });

}

​

// Show the results

function gotResults(err, result) {

  if (err) {

    console.error(err);

  }

  if (result && result.value && allowedToPredict) {

    lerpedResult = lerp(lerpedResult, result.value, 0.50);

    slider.value(lerpedResult); //update  the slider wiht the predicted result. !

    predict();

  }

}