How to do it
To build our application, we will use ml5.js. Thanks to that, we won't need to code anything, since this JS library has a lot of functions already written by others.
Here are the steps:
First, we need to give access to this library in our code. In order to do so, we must give an instruction in the header of our code, to tell it that want to use ml5.js.
Here it goes :
Then, if we want to create an Image / Video Classification app, we can use this code. We'll only need to get pictures and videos.
// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
const classifier = ml5.imageClassifier('MobileNet', modelReady);
// A variable to hold the image we want to classify
let img;
function setup() {
noCanvas();
// Load the image
img = createImg('images/bird.jpg', imageReady);
img.size(400, 400);
}
// Change the status when the model loads.
function modelReady(){
document.getElementById('status').html('Model Loaded')
}
// When the image has been loaded,
// get a prediction for that image
function imageReady() {
classifier.predict(img, gotResult);
// You can also specify the amount of classes you want
// classifier.predict(img, 10, gotResult);
}
// A function to run when we get any errors and the results
function gotResult(err, results) {
if (err) {
console.error(err);
}
// The results are in an array ordered by probability.
select('#result').html(results[0].className);
select('#probability').html(nf(results[0].probability, 0, 2));
}