Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Image Classification using JavaScript
The meaning of image classification is to extract as much information from the image as possible. For example, when you upload an image to Google photos, it extracts information from the image and suggests the location based on that.
We can use OpenCV to detect every small information from the image and predict the image.
Training and testing models from scratch using JavaScript requires lots of effort, and also, it requires the proper dataset containing the different images. So, in this tutorial, we will use the pre-trained model of ml5.js to classify the image.
The ml5.js library contains various pre-trained models to make developers' life easier. Also, it uses the browser’s GPU to perform mathematical operations, making it more efficient.
Syntax
Users can follow the syntax below to classify the images using the ml5.js library.
image_classifier.predict(image, function (err, outputs) {
if (err) {
return alert(err);
} else {
output.innerText = outputs[0].label;
}
});
In the above syntax, ‘image_classifier’ is a pre-trained image classification model imported from the ml5.js library. We invoked the ‘predict’ method by passing the image as the first parameter and the callback function as a second parameter. In the callback function, we get the output or error.
Steps
Step 1 − Add the ‘ml5.js’ library in the web page code using the CDN.
Step 2 − Add input to upload the file and classify button.
Step 3 − In JavaScript, access the required HTML elements and the ‘MobileNet’ model from ml5.js. Also, execute the modelLoad() function when model loading completes.
Step 4 − After that, whenever the user uploads the image, trigger the event and read the image in the callback function. Also, show the image on the screen.
Step 5 − When the user presses the classify image button, use the image classifier’s prediction method to predict the information about the image.
Example 1
In the example below, we have added the ‘ml5.js’ library via CDN into the <head> section. After that, whenever the user uploads the image, we read it and show it on the screen. Next, when the user presses the classify button, we use the predict method to extract the features from the image. In the output, users can show information about the image below the image.
<html>
<head>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
<h4 id = "content"> Wait until model loads. </h4>
<input type = "file" name = "Image" id = "upload_image" accept = "jpg,jpeg,png">
<br> <br>
<img src = "" class = "image" id = "show_image" width = "300px" height = "300px">
<br>
<button class = "button" id = "triggerClassify"> Classify the image </button>
<br>
<h2 id = "output"> </h2>
<script>
window.onload = function () {
// access all HTML elements and image classifier
const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
const triggerClassify = document.getElementById("triggerClassify");
const upload_image = document.getElementById("upload_image");
const show_image = document.getElementById("show_image");
const output = document.getElementById("output");
// when the model is loaded, show the message
function modelLoaded() {
let content = document.getElementById("content");
content.innerText = "Model is loaded! Now, test it by uploading the image.";
}
// When the user uploads the image, show it on the screen
upload_image.onchange = function () {
if (this.files && this.files[0]) {
// using FileReader to read the image
var reader = new FileReader();
reader.onload = function (e) {
show_image.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
}
};
// classify the image when the user clicks the button
triggerClassify.onclick = function (e) {
// predict the image using the model
image_classifier.predict(show_image, function (err, outputs) {
if (err) {
return err;
} else {
// show the output
output.innerText = outputs[0].label;
}
});
};
}
</script>
</body>
</html>
Example
In the example below, users can paste the image link in the input field. After that, whenever they press the fetch image button, it shows the image on the web page. Next, when user clicks the classify image button, they can see the output containing the image information on the screen.
<html>
<head>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
<h4 id = "content"> Wait until model loads. </h4>
<input type = "text" id = "link_input" placeholder = "Paste image link here">
<button id = "fetch_image"> Fetch Image </button>
<br> <br>
<img src = "" id = "show_image" width = "300px" height = "300px" crossorigin = "anonymous">
<img src = "" class = "image" id = "imageView">
<br>
<button class = "button" id = "triggerClassify"> Classify the image </button>
<br>
<h2 id = "output"> </h2>
<script>
window.onload = function () {
// access all HTML elements and image classifier
const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
const triggerClassify = document.getElementById("triggerClassify");
let link_input = document.getElementById("link_input");
const show_image = document.getElementById("show_image");
const output = document.getElementById("output");
// when the model is loaded, show the message
function modelLoaded() {
let content = document.getElementById("content");
content.innerText = "Model is loaded! Now, test it by uploading the image.";
}
fetch_image.onclick = function (e) {
let link = link_input.value;
console.log(link);
if (link != null && link != undefined) {
show_image.src = link;
}
};
triggerClassify.onclick = function (e) {
image_classifier.predict(show_image, function (err, outputs) {
if (err) {
console.error(err);
} else {
output.innerText = outputs[0].label;
}
});
};
}
</script>
</body>
</html>
Users learned to classify the images using the pre-trained model in JavaScript. We used the ‘ml5.js’ library to extract image features. We can categorise the images using image classification in real-life. Also, there are lots of other use cases for image classification.
550 Views
