Anleitung für Edge TensorFlow.js

Umfang

Bild der Webanwendung mit Vorhersagen

In dieser Anleitung laden Sie ein TensorFlow.js-Modell zur Objekterkennung 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-Modell zur Objekterkennung auf einer Webseite auszuführen.

Hinweis

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/iod/${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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
<script>
async function run() {
  const model = await tf.automl.loadObjectDetection('model.json');
  const img = document.getElementById('salad');
  const options = {score: 0.5, iou: 0.5, topk: 20};
  const predictions = await model.detect(img, options);
  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>

  3. (Optional): Ersetzen Sie das Pfadattribut src des Tags <img>, sodass es auf Ihr eigenes Bild verweist.

Webanwendung ausführen

Starten Sie aus dem Verzeichnis mit der Datei index.html einen einfachen HTTP-Server auf Port 8000:

Python

python -m http.server 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.

Das Ergebnis ist eine sortierte Liste von Vorhersageobjekten:

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

Weitere Informationen zur API finden Sie in der AutoML NPM-Paketdokumentation.

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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.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.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

Ein Modell geben Sie mit tf.automl.loadObjectDetection(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.detect(img, options). Diese Funktion lässt ein einzelnes Bild durch das Modell laufen und gibt die vorhergesagten Objekte zurück. Die Eingabe für diese Funktion ist ein Bildelement, ein Videoelement oder ein 3D-Tensor in HTML.

Die Funktion model.detect(img, options) berücksichtigt auch das optionale Argument options mit den möglichen Spezifikationen:

  • score – Wahrscheinlichkeitswert zwischen 0 und 1. Der Standardwert ist 0,5. Felder mit einem Wert unter diesem Grenzwert werden ignoriert.
  • topk – Nur die Objekte mit höchster Wahrscheinlichkeit werden zurückgegeben. Die tatsächliche Anzahl der Objekte ist möglicherweise geringer als diese Anzahl.

  • iou – IoU-Grenzwert (Intersection over Union). IoU ist ein Messwert zwischen 0 und 1, der verwendet wird, um die Überlappung zweier Felder zu messen. Die Felder, die vorhergesagt wurden, überschneiden sich nicht mehr als der angegebene Grenzwert.

    Auf der Seite Modelle auswerten erhalten Sie weitere Informationen zur Modellauswertung mit IoU.

Weitere Informationen zur API finden Sie in der AutoML NPM-Paketdokumentation.

Nächste Schritte

Sie haben eine Anleitung der TensorFlow.js-Webanwendung zur Objekterkennung mit einem Edge-Modell abgeschlossen. 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 Objekterkennungsvorhersage erstellt. Anschließend haben Sie Teile des Beispielcodes untersucht, um die zugrunde liegende Funktionalität zu verstehen.

Nächste Schritte