Heim >Web-Frontend >js-Tutorial >Bildklassifizierung mit JavaScript
Bildklassifizierung mit JavaScript
- WBOYnach vorne
- 2023-09-09 13:01:02661Durchsuche
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 Bibliothekml5.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!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse