How to Perform Image Classification with ml5.js?
Last Updated :
30 Jul, 2024
ML5.js is a user-friendly library developed based on Tensorflow.js, and heavily influenced by P5.js. As the mix of the two, ML5.js aims to make Machine Learning more accessible for designers, artists, and other members of the creative community. It provides access to many pre-trained machine-learning models with a few lines of Javascript code.
Image classification is a computer vision task where the goal is to assign a label or category to an image based on its visual content. For example, given an image of a dog, an image classification system would label it as "dog." ml5.js simplifies the use of machine learning models for image classification by providing a high-level API that runs directly in the browser using JavaScript. It is built on top of TensorFlow.js, which allows for efficient processing and model execution on the client side.
Steps to Build an Image Classifying Tool
Step 1: Create index.html file
Create an index.html file in any IDE of your choice or you can also use an online compiler Write down the template boilerplate code for any HTML5 file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Creating an Image classification TOOl</title>
</head>
<body>
</body>
</html>
Step 2: Add the CDN links
For the tool, two libraries to work: ml5.js and p5.js. ml5.js is the machine learning library, while p5.js makes it possible to work with images properly. Include the following script in your head tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
Step 3: Structure the HTML page
Create basic HTML elements so that you can work with the tool in your web browser. The input listens for an on-input event and executes two statements in response, separated by a semi-colon. The first creates an object URL for the image, which lets you work with the data without having to upload it to a server. The second is called a startImageScan() function.
<h1>Our Image Classifier</h1>
<h2>Click "Choose File" to Add an Image</h2>
<!-- Container for image classification result -->
<div class="imageResult" id="imageResult"></div>
<div class="imageInput">
<input type="file" oninput="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>
<!-- Container for the uploaded image -->
<img class="uploadedImage" id="uploadedImage" />
Step 4: Add Styles
Add Styles ( here I have added basic styling for image rendering, you can add styles as per your need) to your html file inside the head tag.
/* Set styles for HTML elements */
h1, h2 {font-family: arial; text-align: center;}
.imageInput {width: 100%; text-align: center;}
.imageResult {font-family: arial; width: 100%; text-align: center; text-transform: uppercase;}
.uploadedImage {width: 50%; height: auto; margin-left: 25%;}
Step 5: Load and Initialize the Model
To create an Image-Scanning JS Function, first create a variable to store the imageResult element.
const element = document.getElementById("imageResult");Next, add a function called startImageScan() and, inside it, initialize the ml5.js image classifier using MobileNet.
Follow this with the classifier.classify command. Pass it a reference to the uploadedImage element you added earlier, along with a callback function to process the result.
function startImageScan() {
// Create a variable to initialize the ml5.js image classifier with MobileNet
const classifier = ml5.imageClassifier('MobileNet');
classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
element.innerHTML = "...";
}Step 6: Create a Result Display Function
To display the results of the image classification you performed. This function contains a simple if statement to check for any errors that may have occurred.
function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + "Confidence: " + num.toFixed(0) + "%";
}
}
The tool is now ready to be used. Here's a summed-up code of the entire process containing the script and styling in a single html file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Our image-classification tool</title>
<!-- Include the p5.js library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<!-- Include the ml5.js library -->
<script src=
"https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<style>
/* Set styles for HTML elements */
h1,
h2 {
font-family: sans-serif;
text-align: center;
}
.imageInput {
width: 100%;
text-align: center;
}
.imageResult {
font-family: arial;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.uploadedImage {
width: 50%;
height: auto;
margin-left: 25%;
}
</style>
</head>
<body>
<h1>Image Classifier</h1>
<h2>Click "Choose File" to Add an Image</h2>
<!-- Container for image classification result -->
<div class="imageResult" id="imageResult"></div>
<div class="imageInput">
<input type="file"
oninput="
uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>
<!-- Container for the uploaded image -->
<img class="uploadedImage" id="uploadedImage" />
<script>
// Create a variable containing the result container
const element = document.getElementById("imageResult");
function startImageScan() {
// Create a variable to initialize the
// ml5.js image classifier with MobileNet
const classifier = ml5.imageClassifier('MobileNet');
// Scan the uploaded image
classifier.classify(document.getElementById("uploadedImage"), imageScanResult);
element.innerHTML = "...";
}
// Check for errors and display the results if there aren't any
function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label +
"Confidence: " + num.toFixed(0) + "%";
}
}
</script>
</body>
</html>
Output:
Note: The library can struggle when it comes to images with greater complexity. A lot of mobile devices come with this sort of technology built-in to work with the device's camera. Image classification is less than perfect on iPhones and Android phones, with a reputation for inaccuracies. But, this is something that will only improve with time, making it worth using the latest version of ml5.js for your project.
Similar Reads
How to Perform Sound Classification with ml5.js?
ml5.js is a JavaScript library that makes machine learning easy and accessible to use in web applications. This is a beginner-friendly library that provides an API that you can include in your project to use pre-trained machine-learning models in web projects. So, even if you are a beginner to machi
3 min read
How to Implement Pose Estimation with ml5.js?
Pose estimation is a technology that can detect human poses in images or videos by identifying key body points like the head, shoulders, elbows, and knees. It has many applications, such as in fitness apps, gaming, and human-computer interaction. In this article, we'll learn how to implement pose es
4 min read
Basic Image Classification with keras in R
Image classification is a computer vision task where the goal is to assign a label to an image based on its content. This process involves categorizing an image into one of several predefined classes. For example, an image classification model might be used to identify whether a given image contains
10 min read
What is Image Classification?
In today's digital era, where visual data is abundantly generated and consumed, image classification emerges as a cornerstone of computer vision. It enables machines to interpret and categorize visual information, a task that is pivotal for numerous applications, from enhancing medical diagnostics t
10 min read
How to Perform Image Regression with ml5JS?
Imagine you have a photo, and you want to predict a continuous value from that image like estimating the brightness or calculating an age based on someone's face. That's what image regression is all about. Today, we're going to explore how you can perform image regression using a pre-trained model i
3 min read
Image Classification using JavaScript
Image Classification is one of the most common applications of machine learning. Image classification is a computer vision technique in which we classify images according to the visual content in it. The example we can train an image classifier that can predict if a given image is a dog or not. In t
3 min read
Image Classification Using PyTorch Lightning
Image classification is one of the most common tasks in computer vision and involves assigning a label to an input image from a predefined set of categories. While PyTorch is a powerful deep learning framework, PyTorch Lightning builds on it to simplify model training, reduce boilerplate code, and i
5 min read
CIFAR-10 Image Classification in TensorFlow
Prerequisites:Image ClassificationConvolution Neural Networks including basic pooling, convolution layers with normalization in neural networks, and dropout.Data Augmentation.Neural Networks.Numpy arrays.In this article, we are going to discuss how to classify images using TensorFlow. Image Classifi
8 min read
Dataset for Image Classification
The field of computer vision has witnessed remarkable progress in recent years, largely driven by the availability of large-scale datasets for image classification tasks. These datasets play a pivotal role in training and evaluating machine learning models, enabling them to recognize and categorize
12 min read
How to Train a Custom Model in ml5.js?
In machine learning, custom model training helps programmers create models that are optimized for tasks, enhancing the precision of AI systems. This article guides you to training a custom model using ml5.js demonstrating how to capture images using a webcam. ApproachSet up the basic structure of th
4 min read