Image Classification - Machine Learning in Javascript | DevsDay.ru

IT-блоги Image Classification - Machine Learning in Javascript

dev.to 4 мая 2021 г.


Hello readers, recently I came to know about an awesome machine learning library for Javascript.

Any guess? No, it is not tensorflow.js.

It is ml5.js. So what is ml5.js?

Before proceeding, I would like to mention that I am not a machine learning expert. I just have some basic knowledge and try out these kinds of stuff in my free time with the help of external libraries.

In this article, I will brief about the library and show some examples.

What is ml5.js?

ml5.js is a machine learning library built on top of tensorflow.js which we can use in our web browser. It is being developed to make machine learning more accessible and life easier for people who are new to the Machine Learning arena.

It uses the browser's GPU to run all the calculations. Getting started with the library is very easy.

Just include the package link in your project and you are good to go.

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Example

Let's implement something to understand the library.

We will implement Image Classification using this library.

What is Image Classification?

Image Classification is a computer vision technique in which we classify images according to the visual content in it. We train the Image Classifier with crafted data so that it can predict what type of object is in an Image. If we train the classifier with dog's images, it will be able to identify a dog in a photo very easily.

We will create a webpage where user can upload an image or paste an image link, and our classifier will classify what type of object is in the image.

Prerequisite

- HTML
- CSS
- Javascript

Code Implementation

First, we will be implementing the index.html page, which is our main web page.
On this page, we will have two buttons:

  • Upload Image to upload an image from your local drive
  • Paste Link to use hosted image from external server

On uploading or pasting a link of an image, the image will get rendered on the screen. After that on clicking the button What is in the image?, the result will be shown below it.

Some external links of the images will not work because of cors policy.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Classifier</title>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body onload="main()">
    <div class="loader-view" id="loaderView">
        <h3>Initializing ...</h3>
    </div>
    <div class="main" id="mainView">
        <h1 class="heading">Image Classifier</h1>
        <div class="select-image">
            <input type="file" name="Image" id="selectImage" accept="jpg,jpeg,png" hidden>
            <button class="upload-button button" id="uploadButton">Upload Image</button>
            <button class="link-button button" id="linkButton">Paste Link</button>
        </div>
        <div class="image-view" id="imageViewContainer">
            <img src="" alt="" class="image" id="imageView" crossorigin="anonymous">

            <button class="button" id="classifyButton">What is in the image ?</button>
            <h2 class="result" id="result"></h2>
        </div>

    </div>

    <script src="./script.js"></script>
</body>

</html>

CSS

Just some styling for our webpage.

body {
    background-color: #000;
    color: #f0f8ff;
}

.main,
.loader-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.main {
    display: none;
}

.button {
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 8px;
}

.upload-button {
    color: #f0f8ff;
    background: #ff7b00;
}

.link-button {
    color: #1f1f1f;
    background: #fdf8f4;
}

.upload-button:hover {
    background: #f0f8ff;
    color: #ff7b00;
}

.link-button:hover {
    color: #ff7b00;
}

.image-view {
    margin-top: 50px;
    width: 50vw;
    height: 60vh;
    display: none;
    flex-direction: column;
}

.image {
    max-width: 100%;
    max-height: 100%;
    border: solid #f0f8ff 6px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.result {
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

Javascript

Calling the main function from index.html when body loads.

function main() {
    const classifier = ml5.imageClassifier("MobileNet", modelLoaded);

    const uploadButton = document.getElementById("uploadButton");
    const linkButton = document.getElementById("linkButton");
    const classifyButton = document.getElementById("classifyButton");
    const selectImage = document.getElementById("selectImage");
    const imageViewContainer = document.getElementById("imageViewContainer");
    const imageView = document.getElementById("imageView");
    const result = document.getElementById("result");
    const loaderView = document.getElementById("loaderView");
    const mainView = document.getElementById("mainView");

    uploadButton.onclick = function (e) {
        selectImage.click();
    };

    classifyButton.onclick = function (e) {
        classify(imageView);
    };

    linkButton.onclick = function (e) {
        const link = prompt("Paste Image Link Here");
        if (link != null && link != undefined) {
            imageView.src = link;
            imageViewContainer.style.display = "flex";
            result.innerText = "";
        }
    };

    selectImage.onchange = function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                imageView.src = e.target.result;
                imageViewContainer.style.display = "flex";
                result.innerText = "";
            };
            reader.readAsDataURL(this.files[0]);
        }
    };

    function modelLoaded() {
        loaderView.style.display = "none";
        mainView.style.display = "flex";
    }

    function classify(img) {
        classifier.predict(img, function (err, results) {
            if (err) {
                return alert(err);
            } else {
                result.innerText = results[0].label;
            }
        });
    }
}

Javascript Explanation

const classifier = ml5.imageClassifier("MobileNet", modelLoaded);

ml5.imageClassifier method is called to initialize the machine learning model.
Passing two arguments to the method first is the model which is MobileNet and a callback modelLoaded which will get invoked once the initialization is completed.

MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases including image classification, object detection, and image segmentation. This particular MobileNet model was trained for Image Classification.

We have some other choices too for the model like:

  • Darknet
  • DoodleNet

You can use your own image classification model trained in Teachable Machine.

Then we are getting some references to buttons and views of our HTML file to listen for events and manipulate content and CSS styling.

uploadButton.onclick = function (e) {
        selectImage.click();
    };

On clicking the Upload Image button, it will click the image selector input element selectImage.

    selectImage.onchange = function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                imageView.src = e.target.result;
                imageViewContainer.style.display = "flex";
                result.innerText = "";
            };
            reader.readAsDataURL(this.files[0]);
        }
    };

When the user selects the image, selectImage.onchange listener will get invoked and it will set the image in imageView src.

linkButton.onclick = function (e) {
        const link = prompt("Paste Image Link Here");
        if (link != null && link != undefined) {
            imageView.src = link;
            imageViewContainer.style.display = "flex";
            result.innerText = "";
        }
    };

On clicking the Paste Link button, linkButton.onclick listener will get invoked and it will ask the user for the image link and if a link is provided, it will set the link in the imageView src.

classifyButton.onclick = function (e) {
        classify(imageView);
    };

On clicking the What is in the image? button, classifyButton.onclick listener will get invoked and it will call the classify method, which is responsible for image classification. Will pass the image element reference i.e, imageView to the classify method.

function modelLoaded() {
        loaderView.style.display = "none";
        mainView.style.display = "flex";
    }

This method will get invoked when our model is initialized and it is manipulating some CSS style to hide the loader.

function classify(img) {
        classifier.predict(img, function (err, results) {
            if (err) {
                return alert(err);
            } else {
                result.innerText = results[0].label;
            }
        });
    }

This method is the important method that is calling the predict method of classifier object. The predict method expects two arguments:

  • input which is a reference to the image element
  • callback function to handle results and error

On error, we are throwing it in an alert box.

Accessing the result from the results array, which contains multiple objects with label and confidence level.

Result

imgclassifier.png

You can find the files here: Github Repo

Enjoyed? Give it a thumbs-up.

Thank you for reading | Feel free to connect 👋

Buy Me A Coffee

Источник: dev.to

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

javascript machinelearning webdev html

Читайте также


Five reasons to use Full Stack React Node js for your next project!

Разработка dev.to 13 мая 2021 г. 4:35
React js and Node js is considered one of the exceptional technologies of javascript. The main objective of ReactJS is to provide rapidness, scalability and flexibility to the large size of applications as a robust frontend technology. Whereas, Nod...... читать далее
javascript node devops

Journey to the real world by cloning DEV.to backend server(part 3)

Разработка dev.to 13 мая 2021 г. 4:15
In the last series we have installed the required minimum dependencies to setup our project as we will move further in this project we will install our required dependencies according to requirement. Apollo server use schema first approach to write...... читать далее
node apollo express prisma

Разработка dev.to 13 мая 2021 г. 3:56

Interviewer: Tell me, what is variable hoisting in JS? devDood: The concept of variable and function declarations to physically moved to the top of your code is called hoisting Is this factually right??🤔 Absolute...... читать далее

javascript beginners tutorial webdev

Разработка dev.to 13 мая 2021 г. 3:43

Detecting the user's state of being online or offline is very important for a progressive web app to develop it tells the if a person is online or offline without importing any file and in a less time period. The question is how do we detect that?...... читать далее

html javascript showdev webdev

Разработка dev.to 12 мая 2021 г. 22:49

One of my favorite features of (the now General Available) Azure Static Web Apps (SWA) is that in the Standard Tier you can now provide a custom OpenID Connect (OIDC) provider. This gives you a lot more control over who can and can’t access your app...... читать далее

javascript react web security

Разработка dev.to 12 мая 2021 г. 21:15

While JavaScript frameworks come and go, a change has been brewing over the last several years that will permanently change what it means to be a modern developer: how our code goes from our laptops to the wild. The widespread adoption of containers,...... читать далее

Разработка dev.to 12 мая 2021 г. 20:44

Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML CSS & Bootstrap. The circular progress bars present you with a beautiful and visually compelling way to showcase a single statistic. In this program [Circ...... читать далее

html css javascript webdev

Популярные темы

новости (402) javascript (401) ux (381) design (349) headline (303) python (295) devops (255) ubuntu (240) tutorial (226) ux-design (225) programming (216) security (211) новость (204) web dev (196) webdev (180) working in tech (153) seo (152) дайджесты вакансий от new.hr (150) статьи (144) ui (135) testing roundup (122) software testing (121) css (118) react (117) user-experience (116) java (114) дизайн (102) google (100) beginners (99) product-design (94) игровые проекты (90) ui-design (88) productivity (86) design-thinking (85) php (84) technology (83) primary (81) движки и конструкторы игр (80) прочее (80) job hunting (78) cloud (77) api5 (76) технологии (76) windows 10 (74) бизнес (73) docker (72) laravel (71) bash programming (69) debian (68) android (68) uncategorized (68) tutorials (68) hardware (67) news (60) мероприятия (60) linux mint (59) обучение (58) linux (57) kubernetes (57) networking (56) работа (56) ios (55) games (54) art (54) инструкции (53) machine learning (53) angular (52) español (51) aws (51) api (51) html (51) ux-research (50) git (50) node (50) linux commands (50) case-study (50) covid-19 (50) apple (50) разработчики (50) web design and applications (50) обзоры (49) cybersecurity (49) data (49) chrome (48) engineering (48) турбо-страницы (47) typescript (47) job skills (47) inspiration (47) web (46) dotnet (45) home page stories (45) publication (45) mobile (44) powershell (44) c++ (43) tools (43) навыки алисы (43) testing (42) codenewbie (42)