Heim > Artikel > Web-Frontend > Bildklassifizierung mit JavaScript

Bildklassifizierung mit JavaScript

WBOYnach vorne: 2023-09-09 13:01:02621Durchsuche

使用 JavaScript 进行图像分类

Die Bedeutung der Bildklassifizierung besteht darin, so viele Informationen wie möglich aus dem Bild zu extrahieren. Wenn Sie beispielsweise ein Bild auf Google Fotos hochladen, werden Informationen aus dem Bild extrahiert und auf der Grundlage dieser Informationen ein Standort vorgeschlagen.

Wir können OpenCV verwenden, um jede noch so kleine Information im Bild zu erkennen und das Bild vorherzusagen.

Das Trainieren und Testen eines Modells von Grund auf mit JavaScript erfordert viel Aufwand und erfordert den richtigen Datensatz mit verschiedenen Bildern. In diesem Tutorial verwenden wir daher das vorab trainierte Modell von ml5.js, um Bilder zu klassifizieren.

Die Bibliothek

ml5.js enthält verschiedene vorab trainierte Modelle, um dem Entwickler das Leben zu erleichtern. Darüber hinaus nutzt es die GPU des Browsers, um mathematische Operationen auszuführen, was es effizienter macht.

Grammatik

Benutzer können die ml5.js-Bibliothek verwenden, um Bilder gemäß der folgenden Syntax zu klassifizieren.

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

In der obigen Syntax ist „image_classifier“ ein vorab trainiertes Bildklassifizierungsmodell, das aus der ml5.js-Bibliothek importiert wurde. Wir rufen die Methode „predict“ auf, indem wir das Bild als ersten Parameter und die Callback-Funktion als zweiten Parameter übergeben. In der Callback-Funktion erhalten wir die Ausgabe oder den Fehler.

Schritte

Schritt 1 – Fügen Sie die Bibliothek „ml5.js“ mithilfe von CDN zum Webseitencode hinzu.
Schritt 2 – Eingabe hinzufügen, um Dateien hochzuladen und Schaltflächen zu kategorisieren.
Schritt 3 – Greifen Sie in JavaScript auf die erforderlichen HTML-Elemente und das „MobileNet“-Modell von ml5.js zu. Darüber hinaus wird die Funktion modelLoad() ausgeführt, nachdem das Modell geladen wurde.
Schritt 4 – Danach wird jedes Mal, wenn der Benutzer ein Bild hochlädt, das Ereignis ausgelöst und das Bild in der Callback-Funktion gelesen. Zeigen Sie das Bild auch auf dem Bildschirm an.
Schritt 5 – Wenn der Benutzer auf die Schaltfläche „Bild klassifizieren“ klickt, verwenden Sie die Vorhersagemethode des Bildklassifikators, um Informationen über das Bild vorherzusagen.

Beispiel 1

Im folgenden Beispiel fügen wir die Bibliothek „ml5.js“ über CDN zum Abschnitt

hinzu. Wenn der Benutzer danach ein Bild hochlädt, lesen wir es und zeigen es auf dem Bildschirm an. Als Nächstes verwenden wir eine Vorhersagemethode, um Merkmale aus dem Bild zu extrahieren, wenn der Benutzer die Klassifizierungstaste drückt. In der Ausgabe kann der Benutzer unterhalb des Bildes Informationen zum Bild anzeigen.

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

Beispiel

Im folgenden Beispiel kann der Benutzer einen Bildlink in das Eingabefeld einfügen. Wenn Sie danach auf die Schaltfläche „Bild abrufen“ klicken, wird das Bild auf der Webseite angezeigt. Wenn der Benutzer als Nächstes auf die Schaltfläche „Bilder klassifizieren“ klickt, kann er die Ausgabe mit den Bildinformationen auf dem Bildschirm sehen.

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

Der Benutzer hat gelernt, Bilder mithilfe eines vorab trainierten Modells in JavaScript zu klassifizieren. Wir verwenden die Bibliothek „ml5.js“, um Bildfunktionen zu extrahieren. Wir können Bilder mithilfe der realen Bildklassifizierung klassifizieren. Darüber hinaus gibt es viele weitere Anwendungsfälle für die Bildklassifizierung.

Das obige ist der detaillierte Inhalt vonBildklassifizierung mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 回调函数 JS 事件 opencv

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie sortiere ich Strings in JavaScript?Nächster Artikel：Wie sortiere ich Strings in JavaScript?

In Verbindung stehende Artikel

Mehr sehen