In this tutorial, we will look into how to Create image classification using Javascript. The ideal match for machine learning is Python. There are numerous libraries that we can use along the way. Here we are going to use ML5.js to create an image classification model. So before going to the tutorial let’s see what is ML5.js?.
What is ML5.js?
ML5. js is the machine learning javascript library which is built on top of TensorFlow.js. This is used to get the machine learning algorithms and models in the browser using javascript. The best of ML5.js is all about any low-level details of Tensors or Optimizers of tensorflow.js.
What is image classification?
Image classification is a technique to detect a particular object from the image or video frames. This is a simple definition of image classification for example the most familiar facebook face detection.
Step 1
Create an index.html file, sketch.js and copy the code or if you want to do this in your existing project, include the ML5.js library source code in your project.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Classification Example</title>
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Image classification using MobileNet</h1>
<p>The MobileNet model labeled this as <span id="result">...</span> with a confidence of <span id="probability">...</span>.</p>
<img src="" id="output_image" width="400" height="400" accept="image/*" crossorigin="anonymous" alt="Upload image">
<form method="post" enctype="multipart/form-data">
<input type="file" id="file" onchange="detectImage()">
</form>
<script src="sketch.js">
</script>
</body>
</html>Step 2
Add the following code in your Sketch.js. If you are doing with your existing project add the following code in your script file.
let classifier;
preLoad();
// Initialize the Image Classifier method with MobileNet
// pretrained model
function preLoad() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
// predict the result after uploaded
function detectImage() {
var reader = new FileReader();
reader.onload = function () {
var output = document.getElementById('output_image');
output.src = reader.result;
classifier.classify(document.getElementById('output_image'), getResult);
}
reader.readAsDataURL(event.target.files[0]);
}
// result callback function
function getResult(err, results) {
alert(JSON.stringify(results, null, 2));
}Step 3
Now, open the index.html file in your browser, Click the choose upload file and upload any image and see the result in the browser alert dialog.
The Lines of Code Explained
You have to load the ML5.js library source code in our index.html file for access to the ML5.js APIs (Machine Learning Functionalities).
Load your image classification model by using the “ml5.imageClassifier(‘MobileNet’, modelLoaded);” modelloaded is the function definition which is used to know whether the model was loaded or not. Here we use ‘MobileNet’. A pre-trained model that is able to categorize or detect 1000 objects. If you want to detect new one you need to create your own model.
You can click this link for mobile net image categories.
Bind the detectImage function to upload file input onchange events. So When the image was uploaded the detectImage function will call and there our classify method will detect the image. After it will call our getResult function to get the detected image result.
Conclusion
The object detection method will help you to detect the image or categorize the image while uploading the image file or capture the image. I hope you find this blog useful. Leave your doubts in the comment or share it with your fellow programmer.
