How to Perform Image Classification with ml5.js? - Coding

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.

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
How to Use Moment.js with Vuejs?
Build a News Aggregator Using Next.js
How to Switch the First Element of an Arrays Sub Array in PHP?
How To Modify Content-Type in Postman?
Guards in NestJS

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	26