Image classification using JavaScript-JS Tutorial-php.cn

Image classification using JavaScript

WBOY

Release： 2023-09-09 13:01:02

forward

655 people have browsed it

使用 JavaScript 进行图像分类

The meaning of image classification is to extract as much information as possible from the image. For example, when you upload an image to Google Photos, it extracts information from the image and suggests a location based on that information.

We can use OpenCV to detect every tiny information in the image and predict the image.

Training and testing a model from scratch using JavaScript requires a lot of effort and requires the right dataset containing different images. So, in this tutorial, we will use the pre-trained model of ml5.js to classify images.

ml5.js library contains various pre-trained models to make the developer's life easier. Additionally, it uses the browser's GPU to perform mathematical operations, making it more efficient.

grammar

Users can use the ml5.js library to classify images according to the following syntax.

image_classifier.predict(image, function (err, outputs) {
   if (err) {
      return alert(err);
   } else {
      output.innerText = outputs[0].label;
   }
});

Copy after login

In the above syntax, "image_classifier" is a pre-trained image classification model imported from the ml5.js library. We call the "predict" method by passing the image as the first parameter and the callback function as the second parameter. In the callback function we get the output or error.

step

Step 1 - Use CDN to add the "ml5.js" library in the web page code.
Step 2 - Add input to upload files and categorize buttons.
Step 3 - In JavaScript, access the required HTML elements and "MobileNet" model from ml5.js. In addition, the modelLoad() function is executed after the model is loaded.
Step 4 - After that, whenever the user uploads an image, the event is triggered and the image is read in the callback function. Also, display the image on the screen.
Step 5 - When the user presses the classify image button, use the image classifier's prediction method to predict information about the image.

Example 1

In the example below, we add the "ml5.js" library to the section via CDN. After that, whenever the user uploads an image, we read it and display it on the screen. Next, we use a prediction method to extract features from the image when the user presses the classification button. In the output, the user can display information about the image below the image.

<html>
<head>
   <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
   <h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
   <h4 id = "content"> Wait until model loads. </h4>
   <input type = "file" name = "Image" id = "upload_image" accept = "jpg,jpeg,png">
   <br> <br>
   <img src = "" class = "image" id = "show_image" width = "300px" height = "300px">
   <br>
   <button class = "button" id = "triggerClassify"> Classify the image </button>
   <br>
   <h2 id = "output"> </h2>
   <script>
      window.onload = function () {
         // access all HTML elements and image classifier
         const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
         const triggerClassify = document.getElementById("triggerClassify");
         const upload_image = document.getElementById("upload_image");
         const show_image = document.getElementById("show_image");
         const output = document.getElementById("output");
         
         // when the model is loaded, show the message
         function modelLoaded() {
            let content = document.getElementById("content");
            content.innerText = "Model is loaded! Now, test it by uploading the image.";
         }
         
         // When the user uploads the image, show it on the screen
         upload_image.onchange = function () {
            if (this.files && this.files[0]) {
            
               // using FileReader to read the image
               var reader = new FileReader();
               reader.onload = function (e) {
                  show_image.src = e.target.result;
               };
               reader.readAsDataURL(this.files[0]);
            }
         };
         
         // classify the image when the user clicks the button
         triggerClassify.onclick = function (e) {
         
            // predict the image using the model
            image_classifier.predict(show_image, function (err, outputs) {
               if (err) {
                  return err;
               } else {
               
                  // show the output
                  output.innerText = outputs[0].label;
               }
            });
         };
      }
   </script>
</body>
</html>

Copy after login

Example

In the example below, the user can paste an image link into the input field. After that, whenever they press the get image button, it will display the image on the web page. Next, when the user clicks the Classify Images button, they can see the output containing the image information on the screen.

<html>
<head>
   <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
   <h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
   <h4 id = "content"> Wait until model loads. </h4>
   <input type = "text" id = "link_input" placeholder = "Paste image link here">
   <button id = "fetch_image"> Fetch Image </button>
   <br> <br>
   <img src = "" id = "show_image" width = "300px" height = "300px" crossorigin = "anonymous">
   <img src = "" class = "image" id = "imageView">
   <br>
   <button class = "button" id = "triggerClassify"> Classify the image </button>
   <br>
   <h2 id = "output"> </h2>
   <script>
      window.onload = function () {
         // access all HTML elements and image classifier
         const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
         const triggerClassify = document.getElementById("triggerClassify");
         let link_input = document.getElementById("link_input");
         const show_image = document.getElementById("show_image");
         const output = document.getElementById("output");
         
         // when the model is loaded, show the message
         function modelLoaded() {
            let content = document.getElementById("content");
            content.innerText = "Model is loaded! Now, test it by uploading the image.";
         }
         fetch_image.onclick = function (e) {
            let link = link_input.value;
            console.log(link);
            if (link != null && link != undefined) {
               show_image.src = link;
            }
         };
         triggerClassify.onclick = function (e) {
            image_classifier.predict(show_image, function (err, outputs) {
               if (err) {
                  console.error(err);
               } else {
                  output.innerText = outputs[0].label;
               }
            });
         };
      }
   </script>
</body>
</html>

Copy after login

Users learned to classify images using a pre-trained model in JavaScript. We use “ml5.js” library to extract image features. We can classify images using real-life image classification. Additionally, there are many other use cases for image classification.

The above is the detailed content of Image classification using JavaScript. For more information, please follow other related articles on the PHP Chinese website!