ML5 Image classification using MobileNet and p5.js
For details and information, please refer the YouTube Video.
Video URL: https://youtu.be/wQ7q62tXkxo
Overview
In this tutorial, we are actually going to make a code example that does image classification.
ml5.js library is built on top of TensorFlow.js and allows you to access machine learning algorithms and models in your browser without any other external dependencies.
We’re just going to use a pre-trained model. Machine learning model that knows how to recognize the contents of images and ML5 is providing us access to it within JavaScript to use with the p5 library. We can know the confidence of the image with the use of MobileNet.
Let us see the code in the p5.js web editor.
let classifier; // Initialize the Image Classifier method with MobileNet and a callback needs to be passed.let img; // A variable to hold the image we want to classify.// The function below will determine the specified source by comparing it with the model called MobileNet that has been prepared in advance.function preload() {
classifier = ml5.imageClassifier('MobileNet');
img = loadImage('https://raw.githubusercontent.com/setapolo/fbxes/main/kit.png');
}// The function below will determine and setup the image sizes, get the results as image.function setup() {
createCanvas(400, 400);
classifier.classify(img, gotResult);
image(img, 0, 0);
}// A function to run when we get any errors in console and the results.function gotResult(error, results) {
if (error) {
console.error(error);
}// The results are in an array ordered by confidence.console.log(results);
createDiv('Label: ' + results[0].label);
createDiv('Confidence: ' + nf(results[0].confidence, 0, 2));
}
After running the code, we will get the image with it’s Label as tabby, tabby cat and the Confidence or accuracy as 0.63.
That’s all for this tutorial.
