// Cloned by Cian on 4 Dec 2021 from World "Recognise any image (clone by Cian)" by Cian 
// Please leave this clone trail here.
 



// Cloned by Cian on 4 Dec 2021 from World "Recognise any image" by Starter user 
// Please leave this clone trail here.



// ML5 image recognition using MobileNet 
// uses AB framework
// enter URL of image at runtime


// no run, pause, step
AB.drawRunControls = false;

let classifier;
let img;

let clearButton;
let canvas;
let doodleClassifier;

// display Pr, pass it into a html elem to display



// asynchronous loads of resources, with callback functions when ready 
var classifierLoaded = false;
var imgLoaded = false;



AB.world.newRun = function () {

    ABWorld.init('lightblue')
    ABWorld.canvas;
    
   
    //AB.headerRHS();   
    // uisng splash screen for clear button
   // AB.newSplash();
   // AB.splashHtml(" <button onclick='clearCanvas();'  class=ab-normbutton >Clear</button> <p> " );

    // DoodleNet load pretrained
    doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady)
    AB.msg('model loading')


    function modelReady() {
        console.log('model loaded');
        // generate res
        doodleClassifier.classify(ABWorld.p5canvas, gotResults);
    }
    
    // results----------------------------------------- could use AB.newDiv(id) rather than AB.msg https://ancientbrain.com/docs.ab.php
    AB.headerRHS();   
    AB.msg ( "Running image recognition ... <br> ", 1 );
    AB.runReady = true;  
    
    
    function gotResults(error, results){
        if (error){ 
            console.log(error);
            AB.msg ( "<font color=red> <B> Error recognising doodle. See console for details. </b></font> <br> ", 2 );
            return;
        }
    // display top 2 results
    let content = ` ${results[0].label} 
                    ${nf(100 * results[0].confidence, 2, 1)}%<br/>
                    ${results[1].label} 
                    ${nf(100 * results[1].confidence, 2, 1)}%`;

  AB.msg(content);
  console.log(content);
  doodleClassifier.classify(ABWorld.p5canvas, gotResults);
}
    

};

// clear func for button
function clearCanvas() {
     
     //ABWorld.canvas('lightblue');
     console.log('button pressed')
     ABWorld.p5canvas('lightblue');
    
    }

//---- setup -------------------------------------------------------
// Do NOT make a setup function.
// This is done for you in the API. The API setup just creates a canvas.
// Anything else you want to run at the start should go into the following two functions.



function beforesetup()      // Optional 
{
    // Anything you want to run at the start BEFORE the canvas is created 
   // canvas = createCanvas(400, 400);
    // clearButton = createButton('clear');
    
    

}





function aftersetup()       // Optional
{
    // Anything you want to run at the start AFTER the canvas is created 
}


//---- draw -------------------------------------------------------

function draw()             // Optional
{
    // Can put P5 instructions to be executed every step here, or in AB.world.nextStep()  
    // below line thickness could be affecting classification (overfot to line thickness on train set), originally 8 stroke
    if (mouseIsPressed) {
        strokeWeight(16);
        line(mouseX, mouseY, pmouseX, pmouseY);
    }
    
    
    
}