Maison > Article > interface Web > Classification d'images à l'aide de JavaScript

Classification d'images à l'aide de JavaScript

WBOYavant: 2023-09-09 13:01:02621parcourir

使用 JavaScript 进行图像分类

Le sens de la classification d'images est d'extraire autant d'informations que possible de l'image. Par exemple, lorsque vous téléchargez une image sur Google Photos, celui-ci extrait des informations de l'image et suggère un emplacement en fonction de ces informations.

Nous pouvons utiliser OpenCV pour détecter chaque petite information dans l'image et prédire l'image.

Former et tester un modèle à partir de zéro à l'aide de JavaScript nécessite beaucoup d'efforts et nécessite le bon ensemble de données contenant différentes images. Ainsi, dans ce didacticiel, nous utiliserons le modèle pré-entraîné de ml5.js pour classer les images.

La bibliothèque

ml5.js contient divers modèles pré-entraînés pour faciliter la vie des développeurs. De plus, il utilise le GPU du navigateur pour effectuer des opérations mathématiques, ce qui le rend plus efficace.

Grammaire

Les utilisateurs peuvent utiliser la bibliothèque ml5.js pour classer les images selon la syntaxe suivante.

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

Dans la syntaxe ci-dessus, "image_classifier" est un modèle de classification d'images pré-entraîné importé de la bibliothèque ml5.js. Nous appelons la méthode "predict" en passant l'image comme premier paramètre et la fonction de rappel comme deuxième paramètre. Dans la fonction de rappel, nous obtenons la sortie ou l'erreur.

Étapes

Étape 1 - Ajoutez la bibliothèque "ml5.js" au code de la page Web à l'aide du CDN.
Étape 2 - Ajoutez une entrée pour télécharger des fichiers et catégoriser les boutons.
Étape 3 - En JavaScript, accédez aux éléments HTML requis et au modèle "MobileNet" depuis ml5.js. De plus, la fonction modelLoad() est exécutée une fois le modèle chargé.
Étape 4 - Après cela, chaque fois que l'utilisateur télécharge une image, l'événement est déclenché et l'image est lue dans la fonction de rappel. Affichez également l’image à l’écran.
Étape 5 - Lorsque l'utilisateur appuie sur le bouton de classification d'image, utilisez la méthode de prédiction du classificateur d'image pour prédire les informations sur l'image.

Exemple 1

Dans l'exemple ci-dessous, nous ajoutons la bibliothèque "ml5.js" à la section

via CDN. Après cela, chaque fois que l'utilisateur télécharge une image, nous la lisons et l'affichons à l'écran. Ensuite, nous utilisons une méthode de prédiction pour extraire les caractéristiques de l'image lorsque l'utilisateur appuie sur le bouton de classification. Dans la sortie, l'utilisateur peut afficher des informations sur l'image sous l'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>

Exemple

Dans l'exemple ci-dessous, l'utilisateur peut coller un lien d'image dans le champ de saisie. Après cela, chaque fois qu’ils appuieront sur le bouton Obtenir une image, l’image sera affichée sur la page Web. Ensuite, lorsque l'utilisateur clique sur le bouton Classifier les images, il peut voir la sortie contenant les informations sur l'image à l'écran.

<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>

L'utilisateur a appris à classer les images à l'aide d'un modèle pré-entraîné en JavaScript. Nous utilisons la bibliothèque « ml5.js » pour extraire les fonctionnalités de l'image. Nous pouvons classer les images en utilisant la classification d'images réelles. De plus, il existe de nombreux autres cas d’utilisation pour la classification d’images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 回调函数 JS 事件 opencv

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment trier les chaînes en JavaScript ?Article suivant：Comment trier les chaînes en JavaScript ?

Articles Liés

Voir plus