Code viewer [Ancient Brain]

Code viewer for World: Doodle Neural Network

// Cloned by Eoin Mc Cormack on 5 Dec 2021 from World "Test ML5 Works on AB" by Eoin Mc Cormack 
// Please leave this clone trail here.
 
let canvas; 
let doodleClassifier;
let divMessage;

let balls = [];
let houses = [];
let trees = [];
let ball;

let shapeClassifier;

function loadImages() {
    for (let i = 1; i <= 5; i++) {
        balls[i] = loadImage(`/uploads/moxpooer/ball${i}.png`);
        houses[i] = loadImage(`/uploads/moxpooer/house${i}.png`);
        trees[i] = loadImage(`/uploads/moxpooer/tree${i}.png`);
    }
}

// Setup the page for the user input
function setup() {
  canvas = createCanvas(400, 400);
  background(255);
  
  // classify image
  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
  divMessage = createDiv("Model loaded, please doodle above and click 'Get Result' when finished");
  
  // sets the dimensions of the image
  let options = {
    inputs: [128, 128, 4],
    task: 'imageClassification',
    debug: true
  };
  
  shapeClassifier = ml5.neuralNetwork(options);
  
  for (let i = 1; i <= 5; i++) {
      shapeClassifier.addData({image: balls[i] }, { label: "Ball" });
      shapeClassifier.addData({image: houses[i] }, { label: "House" });
      shapeClassifier.addData({image: trees[i] }, { label: "Tree" });
  }
  
  shapeClassifier.normalizeData();
  shapeClassifier.train({epochs: 50});
}


// Checks if the model is ready
function modelReady() {
    console.log("Model ready");
}

// Waits for click from user confirming they are finished their artwork
function finishedDrawing() {
    doodleClassifier.classify(canvas, getResults);
}

// Checks model for results when doodle has been compared to images in the model
function getResults(error, results) {
    if (error) {
        console.error(error);
        return;
    } else {
       console.log(results); 
       divMessage.html("Our guess is you drew a [" + results[0].label + "], our confidence is [" + nf(100*results[0].confidence, 2, 2) + "%]");
    }
}

// Clears the doodle to let user try again, also reloads the doodle classifier
function clearDoodle() {
  background(255);
  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
  divMessage.html("Model loaded, please doodle above and click 'Get Result' when finished");
}

// Tracks the mouse while the button is clicked to draw user image
function draw() {
  if (mouseIsPressed) {
    strokeWeight(8);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

// The HTML section
var thehtml;

// Imports ml5
thehtml = "<!DOCTYPE html>" +
            "<html>" +

            "<head>" +
            "<script src='https://unpkg.com/ml5@0.6.0/dist/ml5.min.js'></script>" +
            "<meta charset='utf-8' />" +
            "</head> </html>";
AB.msg ( thehtml, 1 );

// 1 Doodle header 
thehtml = "<hr> <h1> 1. Doodle </h1> Top row: Doodle (left). <br> " +
" Draw your doodle in top LHS. <button onclick='clearDoodle();' class='normbutton' >Clear Doodle</button> <br> ";
AB.msg ( thehtml, 2 );
   
// Wait for user input to be finished before checking results
thehtml = "<button onclick='finishedDrawing();' class='normbutton' >Get Result</button> <br> ";
AB.msg ( thehtml, 3 );