Umfang
In dieser Anleitung laden Sie ein TensorFlow.js-Bildklassifizierungsmodell herunter, das mit AutoML Vision Edge trainiert und exportiert wurde. Anschließend erstellen Sie eine Webseite, auf der das Modell geladen und eine Vorhersage für ein Bild erstellt wird.
Ziele
Sie schreiben JavaScript-Code, um
- mithilfe der TensorFlow.js-Bibliothek ein vortrainiertes AutoML Vision Edge-Bildklassifizierungsmodell auf einer Webseite auszuführen.
Vorbereitung
Modell über AutoML Vision Edge trainieren
Bevor Sie ein Modell auf einem Edge-Gerät bereitstellen können, müssen Sie zuerst ein TensorFlow.js-Modell über AutoML Vision Edge anhand der Kurzanleitung für Edge-Gerätemodelle trainieren und exportieren.
Exportieren Sie im letzten Schritt das Modell in TensorFlow.js:
Nach Abschluss der Kurzanleitung sollten Sie die folgenden exportierten Dateien in Google Cloud Storage haben:
- eine
dict.txt
-Datei mit Labels - eine
model.json
-Datei *.bin
-Gewichtungsdateien
Modelldateien herunterladen
Kopieren Sie die exportierten Dateien aus Google Cloud Storage in ein lokales Verzeichnis:
gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}
Kleine Webanwendung schreiben
Nachdem Sie Ihre TensorFlow.js-Modelldateien lokal gespeichert haben, können Sie die Webanwendung schreiben:
Öffnen Sie das lokale Verzeichnis, in dem die Modelldateien gespeichert sind, falls noch nicht geschehen.
Erstellen Sie in demselben lokalen Verzeichnis eine
index.html
-Datei mit folgendem Inhalt:index.html
Codebeispiele
Webanwendung ausführen
Starten Sie aus dem Verzeichnis mit der Datei index.html
einen einfachen HTTP-Server auf Port 8000:
Python
python3 -m SimpleHTTPServer 8000
Node.js
Wenn Sie Node.js verwenden, installieren Sie das Paket http-server global und führen Sie es so aus:
http-server -p 8000
Öffnen Sie http://localhost:8000 im Browser. Sie sehen das Vorhersageergebnis in der Konsole (Ansicht > Entwickler > JavaScript-Konsole) und auf der Seite.
Funktionsweise
Nachdem die App jetzt ausgeführt wird, können Sie den Code untersuchen.
Die ersten beiden Skript-Tags laden die TensorFlow.js-Bibliothek und die AutoML-Bibliothek, die im NPM-Paketmanager verfügbar sind.
Das AutoML NPM-Paket enthält eine Reihe von APIs zum Laden und Ausführen von Modellen, die mit AutoML Vision Edge erstellt wurden. Das Paket übernimmt die Vorverarbeitung oder Nachverarbeitung, die für die Ausführung des Modells erforderlich ist, z. B. die Übertragung eines Bild- oder Videoelements, die Normalisierung von Pixelwerten und die Rückgabe eines sortierten Objekts mit Labels und Scores.
Das Bild-Tag lädt ein Testbild aus einem öffentlichen Google Cloud Storage-Pfad:
Ersetzen Sie beim Testen des Modells das Bild src
durch den Pfad zu Ihrem eigenen Bild.
Als Nächstes laden Sie das Modell und erstellen eine Vorhersage mit dem Bild:
Ein Modell geben Sie mit tf.automl.loadImageClassification(url)
an.
Bei dieser Funktion wird eine absolute oder relative URL zur exportierten model.json
-Datei verwendet. In diesem Fall wird ein relativer Pfad verwendet, da die Datei index.html
und die Modelldateien im selben Verzeichnis gespeichert sind.
Sie erhalten Ihre Vorhersagen durch Aufrufen von model.classify(image)
. Diese Funktion lässt ein einzelnes Bild durch das Modell laufen und gibt die Vorhersage zurück. Die Eingabe für diese Funktion ist ein Bildelement, ein Videoelement oder ein 3D-Tensor in HTML.
Weitere Informationen
Sie haben jetzt eine Anleitung abgeschlossen, in der Sie eine TensorFlow.js-Webanwendung zur Bildklassifizierung mit einem Edge-Modell verwendet haben. Sie haben die Webanwendung in einem Webbrowser ausgeführt und mithilfe Ihres benutzerdefinierten Edge-Modells und eines Bildes, das Sie aus dem Web geladen haben, eine Klassifizierungsvorhersage erstellt. Anschließend haben Sie Teile des Beispielcodes untersucht, um die zugrunde liegende Funktionalität zu verstehen.
Nächste Schritte
- Sehen Sie sich eine Demo an, in der aus dem ES6-Code mit dem Parcel Bundler eine eigenständige Anwendung erstellt wird.
- Weitere Informationen zu TensorFlow.js finden Sie hier.
- Weitere Informationen zur AutoML NPM-Bibliothek finden Sie in der offiziellen Dokumentation.
- Weitere Informationen zu TensorFlow im Allgemeinen finden Sie in den Anleitungen.