let canvas;
let doodleClassifier;
let divMessage;
// 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");
}
// 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(20);
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 );