Subscribe
Home Craft Create an Image Classification Tool With ml5.js and HTML

Create an Image Classification Tool With ml5.js and HTML

by Staff
0 comment

Machine learning is a fundamental technology in the modern world. Computers can learn to recognize images, create artwork, and even write their own code, all with minimal human intervention.


But how does machine learning work and how can you use it yourself?


What Is Machine Learning?

Machine learning is a relatively simple concept. Computer systems can learn and adapt by analyzing existing data patterns from pools of information. This is usually done without explicit instructions from humans.

A good example comes in the form of virtual assistant tools. Siri, Cortana, and Google Assistant all make extensive use of machine learning to understand human speech. This starts with a pool of existing audio recordings, but these tools can also learn from the interactions they have with you. This enables them to improve on their own.

What Is ml5.js?

Most machine learning algorithms and tools use R or Python for their code, but ml5.js is different. Acting as an interface for Google’s Tensorflow.js library, ml5.js is an open-source project that puts machine learning into the hands of JavaScript developers.

You can start using ml5.js for your own web application by including a single external script in your HTML.

Getting Started With Machine Learning: The Learning Process

Training a machine learning algorithm takes time. Computers learn far faster than humans, but they also learn in different ways. Thankfully, though, ml5.js comes with a selection of pre-trained models so that you can skip this step.

Learning how machine learning algorithms train is a great way to better understand tools like this.

ml5.js makes it easy to create an image-classifying tool to run on your website. The HTML page in this example contains a file input field to select an image. Uploaded images display inside a prepared HTML element to enable ml5.js to scan and identify them.

Step 1: Include the ml5.js Library

This project requires 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. You need two lines of HTML to add these libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>

Step 2: Create Some HTML Elements

Next, it’s time to create some HTML elements. The most important is a div with an ID and class labeled imageResult that will store the final result:

<h1>MakeUseOf Image Classifier</h1>

<h2>Click "Choose File" to Add an Image</h2>

<div class="imageResult" id="imageResult"></div>

Following this, add a file input element to collect the image for the program to classify.

<div class="imageInput">
<input type="file"
oninput="uploadedImage.src=window.URL.createObjectURL(this.files[0]); startImageScan()">
</div>

The input listens for an oninput 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 calls a startImageScan() function that you will create in the next step.

Finally, add an img element to display the image the user has uploaded:

<img class="uploadedImage" id="uploadedImage" />

Step 3: Create an Image-Scanning JS Function

Now that you have some HTML, it’s time to add some JS to the mix. Start by adding a const variable to store the imageResult element you created in the last step.

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 4: Create a Result Display Function

You also need a function to display the results of the image classification you performed. This function contains a simple if statement to check for any errors.

function imageScanResult(error, results) {
if (error) {
element.innerHTML = error;
} else {
let num = results[0].confidence * 100;
element.innerHTML = results[0].label + "<br>Confidence: " + num.toFixed(0) + "%";
}
}

Step 5: Put It All Together

Finally, it’s time to put all this code together. It’s important to be mindful of the <body>, <script>, and <style> tags to make sure that your code works.

<!DOCTYPE html>
<html>
<head>
<!-- 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/[email protected]/dist/ml5.min.js"></script>
<style>
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%;}
</style>
</head>
<body>
<h1>MakeUseOf 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');


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 + "<br>Confidence: " + num.toFixed(0) + "%";
}
}
</script>
</body>
</html>

Now you can test your script with some images! ml5.js is great at classifying images of animals, like this cricket.

Unfortunately, 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.

Machine Learning: The Future of Computing

As you can see, working with machine learning tools in JavaScript is easier than you might expect. This type of technology is likely to be the future of computing, with ideas like strong AI relying on it to work.



Read the full article here

SaleBestseller No. 1
Apple AirPods Max Wireless Over-Ear Headphones. Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone - Green
Apple AirPods Max Wireless Over-Ear Headphones. Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone - Green
 Apple-designed dynamic driver provides high-fidelity audio; Active Noise Cancellation blocks outside noise, so you can immerse yourself in music
$479.00
SaleBestseller No. 3
Apple iPad Air 2, 64 GB, Space Gray (Renewed)
Apple iPad Air 2, 64 GB, Space Gray (Renewed)
Apple iOS 8; 9.7-Inch Retina Display; 2048x1536 Resolution; A8X Chip with 64-bit Architecture; M8 Motion Coprocessor
$141.99
Bestseller No. 4
2021 Apple 10.2-inch iPad (Wi-Fi, 64GB) - Silver
2021 Apple 10.2-inch iPad (Wi-Fi, 64GB) - Silver
Gorgeous 10.2-inch Retina display with True Tone; A13 Bionic chip with Neural Engine; 8MP Wide back camera, 12MP Ultra Wide front camera with Center Stage
$331.99
Bestseller No. 5
2022 Apple TV 4K Wi‑Fi with 64GB Storage (3rd Generation)
2022 Apple TV 4K Wi‑Fi with 64GB Storage (3rd Generation)
4K Dolby Vision and HDR10+ for vivid picture quality; Dolby Atmos for three-dimensional, theater-like sound
$123.49
Bestseller No. 7
Apple AirTag 4 Pack
Apple AirTag 4 Pack
Keep track of and find your items alongside friends and devices in the Find My app; Simple one-tap setup instantly connects AirTag with your iPhone or iPad
$94.98
Bestseller No. 8
Apple MacBook Air with Intel Core i5, 1.6GHz, (13-inch, 4GB,128GB SSD) - Silver (Renewed)
Apple MacBook Air with Intel Core i5, 1.6GHz, (13-inch, 4GB,128GB SSD) - Silver (Renewed)
1.6 GHz dual-core Intel Core i5 (Turbo Boost up to 2.7 GHz) with 3 MB shared L3 cache; 13.3-Inch (diagonal) LED-backlit Glossy Widescreen Display, 1440 x 900 resolution
$299.99
Bestseller No. 9
Apple Of My Eye
Apple Of My Eye
Amazon Prime Video (Video on Demand); Amy Smart, Burt Reynolds, Liam McIntyre (Actors); Castille Landon (Director) - Castille Landon (Writer) - Dori A. Rath (Producer)
$3.99
SaleBestseller No. 10
Apple 35W Dual USB-C Port Compact Power Adapter ​​​​​​​
Apple 35W Dual USB-C Port Compact Power Adapter ​​​​​​​
The compact size and folding prongs make it easy to pack and store.; Charging cable sold separately.
$52.00

You may also like

Leave a Comment

Iman Hearts is one of the biggest lifestyle news and articles portals, we provide the latest news and articles about family, lifestyle, entertainment, and many more, follow us to get the latest news about what matters to you.

 

© 2022 Iman Hearts. All rights reserved. Sitemap