// let clearButton;
let canvas;
let doodleClassifer;
let resultsDiv;
function setup() {
canvas = createCanvas(400, 400);
background(255);
// classify image
doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
divMessage = createDiv("Please doodle above, we will predict as you doodle");
}
function modelReady() {
console.log('Model ready');
// doodleClassifer.classify(canvas, getResults);
}
function getResults(error, results) {
if (error) {
console.error(error);
return;
} else {
console.log(results);
resultsDiv.html("Our guess is you drew a [" + results[0].label + "], our confidence is [" + nf(100*results[0].confidence, 2, 2) + "%] <br>");
}
}
function clearDoodle() {
background(255);
doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
resultsDiv.html("Model loaded, please doodle above");
}
function draw() {
if (mouseIsPressed) {
strokeweight(16);
line(mouseX, mouseY, pmouseX, pmouseY);
}
if (!mouseIsPressed) {
doodleClassifier.classify(canvas, getResults);
}
}
// 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 );