Anleitung für Edge TensorFlow.js

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:

Grafik: Screenshot des Exportierens eines TensorFlow.js-Modells

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
Beispiel für den Ordner Tensorflow.js

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:

  1. Öffnen Sie das lokale Verzeichnis, in dem die Modelldateien gespeichert sind, falls noch nicht geschehen.

  2. Erstellen Sie in demselben lokalen Verzeichnis eine index.html-Datei mit folgendem Inhalt:

    index.html

    Codebeispiele

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
<script>
async function run() {
  const model = await tf.automl.loadImageClassification('model.json');
  const image = document.getElementById('daisy');
  const predictions = await model.classify(image);
  console.log(predictions);
  // Show the resulting object on the page.
  const pre = document.createElement('pre');
  pre.textContent = JSON.stringify(predictions, null, 2);
  document.body.append(pre);
}
run();
</script>

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.

TensorFlow.js-Vorhersage im Browser

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.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

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:

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

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:

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

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