Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Maschinelles Lernen ist eine grundlegende Technologie in der modernen Welt. Computer können lernen, Bilder zu erkennen, Kunstwerke zu erstellen und sogar ihren eigenen Code zu schreiben, und das alles mit minimalem menschlichen Eingriff.
Doch wie funktioniert maschinelles Lernen und wie kann man es selbst nutzen?
Was ist maschinelles Lernen?
Maschinelles Lernen ist ein relativ einfaches Konzept. Computersysteme können lernen und sich anpassen, indem sie vorhandene Datenmuster aus Informationspools analysieren. Dies geschieht normalerweise ohne ausdrückliche Anweisungen von Menschen.
Ein gutes Beispiel sind Tools für virtuelle Assistenten. Siri, Cortana und Google Assistant nutzen alle intensiv maschinelles Lernen, um die menschliche Sprache zu verstehen. Dies beginnt mit einem Pool bestehender Audioaufnahmen, aber diese Tools können auch aus den Interaktionen lernen, die sie mit Ihnen haben. Dadurch können sie sich selbst verbessern.
Was ist ml5.js?
Die meisten Algorithmen und Tools für maschinelles Lernen verwenden R oder Python für ihren Code, aber ml5.js ist anders. Als Schnittstelle für die Tensorflow.js-Bibliothek von Google ist ml5.js ein Open-Source-Projekt, das maschinelles Lernen in die Hände von JavaScript-Entwicklern legt.
Sie können mit der Verwendung von ml5.js für Ihre eigene Webanwendung beginnen, indem Sie ein einzelnes externes Skript in Ihren HTML-Code einfügen.
Erste Schritte mit maschinellem Lernen: Der Lernprozess
Das Trainieren eines maschinellen Lernalgorithmus braucht Zeit. Computer lernen viel schneller als Menschen, aber sie lernen auch auf unterschiedliche Weise. Glücklicherweise enthält ml5.js jedoch eine Auswahl vortrainierter Modelle, sodass Sie diesen Schritt überspringen können.
Lernen wie maschinelle Lernalgorithmen trainieren ist eine großartige Möglichkeit, solche Tools besser zu verstehen.
ml5.js macht es einfach, ein Bildklassifizierungstool zu erstellen, das auf Ihrer Website ausgeführt werden kann. Die HTML-Seite in diesem Beispiel enthält ein Dateieingabefeld zur Auswahl eines Bildes. Hochgeladene Bilder werden in einem vorbereiteten HTML-Element angezeigt, damit ml5.js sie scannen und identifizieren kann.
Schritt 1: Binden Sie die ml5.js-Bibliothek ein
Für dieses Projekt sind zwei Bibliotheken erforderlich: ml5.js und p5.js. ml5.js ist die Bibliothek für maschinelles Lernen, während p5.js es ermöglicht, richtig mit Bildern zu arbeiten. Sie benötigen zwei HTML-Zeilen, um diese Bibliotheken hinzuzufügen:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>Schritt 2: Erstellen Sie einige HTML-Elemente
Als nächstes ist es an der Zeit, einige HTML-Elemente zu erstellen. Das wichtigste ist ein div mit einer ID und einer Klasse namens imageResult, das das Endergebnis speichert:
<h1>MakeUseOf-Bildklassifizierer</h1><h2>Klicken "Datei wählen" um ein Bild hinzuzufügen</h2>
<div-Klasse="Bildergebnis" id="Bildergebnis"></div>
Fügen Sie anschließend ein Dateieingabeelement hinzu, um das Bild für das zu klassifizierende Programm zu sammeln.
<div-Klasse="Bildeingabe">
<Eingabetyp="Datei"
oninput="uploadedImage.src=Fenster. URL.createObjectURL(this.files[0]); startImageScan()">
</div>
Die Eingabe wartet auf ein oninput-Ereignis und führt als Antwort zwei Anweisungen aus, die durch ein Semikolon getrennt sind. Die erste erstellt eine Objekt-URL für das Bild, mit der Sie mit den Daten arbeiten können, ohne sie auf einen Server hochladen zu müssen. Die zweite ruft eine startImageScan()-Funktion auf, die Sie im nächsten Schritt erstellen werden.
Fügen Sie schließlich ein img-Element hinzu, um das Bild anzuzeigen, das der Benutzer hochgeladen hat:
<img class="hochgeladenes Bild" id="hochgeladenes Bild" />Schritt 3: Erstellen Sie eine Image-Scanning JS-Funktion
Jetzt, da Sie etwas HTML haben, ist es an der Zeit, der Mischung etwas JS hinzuzufügen. Fügen Sie zunächst eine const-Variable hinzu, um das im letzten Schritt erstellte imageResult-Element zu speichern.
konst Element = dokumentieren.getElementById("Bildergebnis");Fügen Sie als Nächstes eine Funktion namens startImageScan() hinzu und initialisieren Sie darin den Bildklassifizierer ml5.js mithilfe von MobileNet.
Folgen Sie diesem mit dem Befehl classifier.classify. Übergeben Sie ihm einen Verweis auf das zuvor hinzugefügte uploadedImage-Element zusammen mit einer Callback-Funktion, um das Ergebnis zu verarbeiten.
FunktionstartImageScan() {
// Erstellen A VariableZu Initialisieren Sie den ml5.js-Bildklassifizierer mit MobileNet
konstanter Klassifikator = ml5.imageClassifier('MobileNet');
classifier.classify (document.getElementById("hochgeladenes Bild"), imageScanResult);
element.innerHTML = "...";
}Schritt 4: Erstellen Sie eine Ergebnisanzeigefunktion
Außerdem benötigen Sie eine Funktion, um die Ergebnisse der von Ihnen durchgeführten Bildklassifizierung anzuzeigen. Diese Funktion enthält eine einfache if-Anweisung, um nach Fehlern zu suchen.
FunktionimageScanResult(Fehler, Ergebnisse) {
wenn (Fehler) {
element.innerHTML = Fehler;
} anders {
lassen num = Ergebnisse[0].Vertrauen * 100;
element.innerHTML = Ergebnisse[0].Label + "<Br>Vertrauen: " + num.toFixed (0) + "%";
}
}Schritt 5: Alles zusammenfügen
Schließlich ist es an der Zeit, all diesen Code zusammenzustellen. Es ist wichtig, darauf zu achten
,