Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Image Classification using JavaScript
Image classification is a machine learning technique that identifies and categorizes objects within digital images. When you upload a photo to Google Photos, for instance, it uses image classification to suggest locations, identify people, or tag objects automatically.
We can use OpenCV to detect detailed information from images and make predictions. However, training models from scratch requires extensive datasets and computational resources. This tutorial demonstrates using ml5.js, a JavaScript library with pre-trained models that leverages browser GPU for efficient image classification.
What is ml5.js?
The ml5.js library provides various pre-trained machine learning models, making AI accessible to web developers. It uses MobileNet, a lightweight deep neural network designed for mobile and embedded vision applications, to classify images with high accuracy.
Syntax
Here's the basic syntax for image classification using ml5.js:
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
classifier.predict(imageElement, function(err, results) {
if (err) {
console.error(err);
} else {
console.log(results[0].label); // Top prediction
}
});
The imageClassifier method creates a pre-trained model instance. The predict method takes an image element and returns predictions with confidence scores in descending order.
Implementation Steps
Step 1 ? Include the ml5.js library via CDN in your HTML head section.
Step 2 ? Create HTML elements for image upload/display and classification controls.
Step 3 ? Initialize the MobileNet model and handle the model loading completion.
Step 4 ? Implement image upload/URL functionality to display images on screen.
Step 5 ? Use the classifier's predict method to analyze and display image classification results.
Example 1: File Upload Classification
This example demonstrates image classification using file uploads. Users can select local images, view them, and get AI-powered classification results:
<!DOCTYPE html>
<html>
<head>
<title>Image Classification with File Upload</title>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<style>
.container { max-width: 600px; margin: 20px auto; padding: 20px; }
.image-display { border: 2px dashed #ccc; margin: 10px 0; }
.result { background: #f0f8f0; padding: 10px; margin: 10px 0; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<h2>Image Classification using ml5.js</h2>
<h4 id="status">Loading MobileNet model...</h4>
<input type="file" id="imageUpload" accept="image/*" style="margin: 10px 0;">
<br>
<img id="imageDisplay" class="image-display" width="300" height="300" style="display:none;">
<br>
<button id="classifyBtn" disabled>Classify Image</button>
<div id="results" class="result" style="display:none;"></div>
</div>
<script>
let classifier;
// Initialize the image classifier
function initClassifier() {
classifier = ml5.imageClassifier('MobileNet', modelReady);
}
// Model ready callback
function modelReady() {
document.getElementById('status').innerText = 'Model loaded! Upload an image to classify.';
}
// Handle file upload
document.getElementById('imageUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('imageDisplay');
img.src = e.target.result;
img.style.display = 'block';
document.getElementById('classifyBtn').disabled = false;
};
reader.readAsDataURL(file);
}
});
// Classify image
document.getElementById('classifyBtn').addEventListener('click', function() {
const img = document.getElementById('imageDisplay');
classifier.predict(img, function(err, results) {
if (err) {
console.error(err);
return;
}
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = `
<h3>Classification Results:</h3>
<p><strong>Top prediction:</strong> ${results[0].label}</p>
<p><strong>Confidence:</strong> ${(results[0].confidence * 100).toFixed(2)}%</p>
`;
resultsDiv.style.display = 'block';
});
});
// Initialize when page loads
window.addEventListener('load', initClassifier);
</script>
</body>
</html>
Example 2: URL-based Image Classification
This example allows users to classify images by entering image URLs. This method is useful for analyzing images from the web:
<!DOCTYPE html>
<html>
<head>
<title>Image Classification with URL</title>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<style>
.container { max-width: 600px; margin: 20px auto; padding: 20px; }
#urlInput { width: 70%; padding: 8px; margin: 10px 5px; }
#fetchBtn, #classifyBtn { padding: 8px 15px; margin: 5px; }
.result { background: #e8f4fd; padding: 15px; margin: 10px 0; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<h2>Image Classification from URL</h2>
<h4 id="status">Loading MobileNet model...</h4>
<input type="text" id="urlInput" placeholder="Paste image URL here">
<button id="fetchBtn" disabled>Load Image</button>
<br><br>
<img id="imageDisplay" width="300" height="300" style="display:none;" crossorigin="anonymous">
<br>
<button id="classifyBtn" disabled>Classify Image</button>
<div id="results" class="result" style="display:none;"></div>
</div>
<script>
let classifier;
function initClassifier() {
classifier = ml5.imageClassifier('MobileNet', modelReady);
}
function modelReady() {
document.getElementById('status').innerText = 'Model ready! Enter an image URL to get started.';
document.getElementById('fetchBtn').disabled = false;
}
document.getElementById('fetchBtn').addEventListener('click', function() {
const url = document.getElementById('urlInput').value.trim();
if (url) {
const img = document.getElementById('imageDisplay');
img.onload = function() {
img.style.display = 'block';
document.getElementById('classifyBtn').disabled = false;
};
img.onerror = function() {
alert('Failed to load image. Please check the URL.');
};
img.src = url;
}
});
document.getElementById('classifyBtn').addEventListener('click', function() {
const img = document.getElementById('imageDisplay');
classifier.predict(img, function(err, results) {
if (err) {
console.error(err);
return;
}
const resultsDiv = document.getElementById('results');
let resultHTML = '<h3>Classification Results:</h3><ul>';
// Show top 3 predictions
for (let i = 0; i < Math.min(3, results.length); i++) {
resultHTML += `<li><strong>${results[i].label}</strong> - ${(results[i].confidence * 100).toFixed(2)}%</li>`;
}
resultHTML += '</ul>';
resultsDiv.innerHTML = resultHTML;
resultsDiv.style.display = 'block';
});
});
window.addEventListener('load', initClassifier);
</script>
</body>
</html>
Key Features
The MobileNet model used in these examples can classify over 1,000 different object categories, including animals, vehicles, household items, and food. The classification results include confidence scores, helping you understand the model's certainty about each prediction.
Common Use Cases
Content Management: Automatically tag and organize image libraries
E-commerce: Product categorization and visual search features
Social Media: Automatic image tagging and content filtering
Medical Imaging: Preliminary screening and analysis support
Security: Object detection in surveillance systems
Conclusion
Image classification with ml5.js provides an accessible way to add AI-powered image recognition to web applications. The pre-trained MobileNet model offers excellent accuracy for general-purpose image classification without requiring extensive machine learning expertise or training infrastructure.
1K+ Views
