Code viewer for World: Character recognition neur...
// ml5.js: Classifying Drawings with DoodleNet (Template)
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/learning/ml5/9.1-doodlenet.html
// https://youtu.be/ABN_DWnM5GQ

// Template: https://editor.p5js.org/codingtrain/sketches/AHgkwgPdc
// Mouse: https://editor.p5js.org/codingtrain/sketches/6LLnGY1VY
// Video: https://editor.p5js.org/codingtrain/sketches/fxFKOn3il

// import ML5 library 


let clearButton;
let canvas;

let doodleClassifier

// create canvas 400 x 400 
// AB Automatically creates a canvas in a div in the run window? can specify P5 and default is 2-D
// "newRun" and "nextStep" conflicts with the P5 way of doing things ("setup" and "draw"). So this is really for writing new P5/ML5 Worlds for this platform

function setup() {
  canvas = createCanvas(400, 400);
  clearButton = createButton('clear');
  clearButton.mousePressed(clearCanvas);
  background(255);
  
  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady)
}

function modelReady(){
    console.log('model loaded');
    doodleClassifier.classify(canvas, gotResults);
}

function gotResults(error, results){
    if (error) {
        console.error(error)
        return;
    }
    console.log(results);
}

// clear any doodle from canvas
function clearCanvas() {
  background(255);
}

// when mouse is pressed leave trail from prev to curr position
function draw() {
  if (mouseIsPressed) {
    strokeWeight(8);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

// import ML5 ?
var thehtml;

thehtml = "<html> <head> " 

thehtml = "<script src='https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js'></script>"
  
thehtml = "<script src='https://unpkg.com/ml5@0.6.0/dist/ml5.min.js'></script>"

thehtml = "<meta charset='utf-8'/>"

thehtml = "</head> <body> <script src='sketch.js'></script></body></html>"