//This code works for one image, but we want it to work for many.

//With your instructor, complete the following:

​

//1. Create an array that can hold your images

//2. Select from the array, first manually by changing the code

//3. Adjust slider value to be based on the length of the array

//4. Review the code in mouseReleased to allow the slider to choose the image

//5. Commence with experiment!

​

console.log('ml5 version:', ml5.version)

​

var mobilenet

var theImg

var slider

​

//ADDING

var images = ['cat.jpg', 'robin.jpg', 'mouse.jpg', 'dog.jpg'] //add in code along?

​

function setup(){

    var c =createCanvas(400,400)

    c.parent("forCanvas")

​

    slider = createSlider(0,4,1) //adjust for length of array in code along?

    slider.parent("forCanvas")

    slider.position(75,300)

    slider.size(170)

    theImg = createImg('robin.jpg', "Test Image", "", imageReady);

    theImg.hide()

    mobilenet = ml5.imageClassifier('MobileNet', modelReady);

​

}

​

// function draw(){

​

// }

​

function mouseReleased(){

    //Comment in once your array is working and read each line for meaning!

​

    // theImg = createImg(images[slider.value()], "Test Image", "", imageReady);

    // theImg.hide()

    // mobilenet = ml5.imageClassifier('MobileNet', modelReady);

}

​

//Don't touch these!

​

function modelReady(){

    console.log("model ready")

    mobilenet.predict(theImg, gotResults)

}

​

function gotResults(error, results){

    if (error){

        console.error(error)

    }

    else{

        var label = results[0].label

        var confidence = Math.round(results[0].confidence*100)

        console.log(label, confidence)

        forResults.innerHTML = `<h3>I think that is a ${label} with a confidence of ${confidence}%.</h3>`

    }

}

​

function imageReady(){

    image(theImg,0,0,200,200)

}