ml5 Example

Image classification using MobileNet and p5.js

This example uses a callback pattern to create the classifier

=== */

​

let img;

let classifier;

let label;

let confidence;

​

function preload() {

  classifier = ml5.imageClassifier('MobileNet'); 

}

​

function setup(){

  createP("Drop your image into the gray rectangle.");

  const canvas = createCanvas(400, 400);

  label = createDiv('Label: ');

  confidence = createDiv('Confidence: ')

  background('#eeeeee');

  canvas.drop(gotFile);

}

​

function changeBG() {

  background('#eeeeee');

}

​

​

function gotFile(file){

  changeBG()

  if (file.type == 'image') {  

    img = createImg(file.data).hide(); 

    classifier.classify(img, gotResult);

  }

  else   {

     print('Not an image file!');

  }      

}

​

function gotResult(error, results) {

  // Display error in the console

  if (error) {

    console.error(error);

  }

  // The results are in an array ordered by confidence.

  console.log(results);

  image(img, 0, 0, 400, 400);

  label.html('Label: ' + results[0].label)

  confidence.html('Confidence: ' + nf(results[0].confidence, 0, 2))

}

​

​

​

​

​

​

​

​