p5.js Web Editor | Shape Classifier Testing

xxxxxxxxxx
// https://editor.p5js.org/kreier/sketches/jJXV1ycLp
let circles   = [];
let squares   = [];
let triangles = [];
​
let shapeClassifier;
let rowIndex = 0;
let previewHeight = 20;
let NUM_OF_IMAGES = 20;
var loopCount = 0;
var currentImageIndex = 0;
var resultsMatrix = []
​
var categories  = ['triangle','square','circle']
var currentMode = categories[0];
​
var canvas;
var inputImage;
​
function preload(){
  for(let i = 0; i < NUM_OF_IMAGES; i++) {
    triangles[i] = loadImage('testing/triangle-' + (i+1) + '.png');
    squares[i]   = loadImage('testing/square-'   + (i+1) + '.png');
    circles[i]   = loadImage('testing/circle-'   + (i+1) + '.png');
    // index = nf(i, 4, 0);
    // triangles[i] = loadImage(`testing/triangle${index}.png`);
    // squares[i]   = loadImage('testing/square${index}.png');
    // circles[i]   = loadImage('testing/circle${index}.png');
  }
}
​
function setup() {
  canvas = createCanvas(400, 400);
  pixelDensity(1.0);
  let options = {
    inputs: [64, 64, 4],
    task: "imageClassification",
    debug: true
  }
  shapeClassifier = ml5.neuralNetwork(options)
  const modelInfo = {
    model:    'model/model.json',
    metadata: 'model/model_meta.json',
    weights:  'model/model.weights.bin',
  };
  shapeClassifier.load(modelInfo, modelLoaded);
  
  resultsDiv1 = createDiv('loading model')
  resultsDiv2 = createDiv('...')
  resultsDiv3 = createDiv('...')
  inputImage  = createGraphics(64,64);
  
  // Build a confusion matrix for each element of the categories array.
  for (var i = 0; i < categories.length; i++) {
    let newRow = [];
    for (var j = 0; j < categories.length; j++) {
      newRow.push(0);
    }
    resultsMatrix.push(newRow);
  }
}
​
function modelLoaded(){
  console.log("Trained model is loaded");
  //classifyImage();
}
​
function gotResults(err,results){
  if(err){
    console.log(err);
    return
  }
  let label = results[0].label;
  let confidence = Math.round(100*results[0].confidence)
  resultsDiv1.html(label + " , " + confidence + "% confident")
  label = results[1].label;
  confidence = Math.round(100*results[1].confidence)
  resultsDiv2.html(label + " , " + confidence + "% confident")
  label = results[2].label;
  confidence = Math.round(100*results[2].confidence)
  resultsDiv3.html(label + " , " + confidence + "% confident")
  //console.log(results)
    
  let targetIndex = categories.indexOf(currentMode)
  let classifiedIndex = categories.indexOf(results[0].label)
​
  resultsMatrix[classifiedIndex][targetIndex] += 1
}
​
// This function takes the canvas, copies it into a 64 x 64 pixel image, and asks the model to try to predict what is on the canvas.
  
function classifyImage(){
  inputImage.copy(canvas,0,0,400,400,0,0,64,64);
  shapeClassifier.classify({image: inputImage},gotResults)
}
​
function draw() {
  if(loopCount >= 2){
    loopCount = 0;
    if(currentMode == 'triangle'){
      image(triangles[currentImageIndex], 0, 0, width, height)
    }
    else if(currentMode == 'square'){
      image(squares[currentImageIndex], 0, 0, width, height)
    }
    else{
      image(circles[currentImageIndex], 0, 0, width, height)
    }
    
    classifyImage();
    currentImageIndex += 1
  }
  else{
    loopCount += 1;
  }
  
  if(currentMode == "triangle" && currentImageIndex == NUM_OF_IMAGES){
    currentMode = "square";
    currentImageIndex = 0;
  } 
  else if ( currentMode == "square" && currentImageIndex == NUM_OF_IMAGES){
    currentMode = "circle";
    currentImageIndex = 0;
  }
  else if ( currentMode == "circle" && currentImageIndex == NUM_OF_IMAGES){
    noLoop();
    currentImageIndex = 0;
    console.log("done with all images")
    console.table(resultsMatrix)
  }
}
Cookies

Sketch Files

Console

Preview
