1. Einführung

Zuletzt aktualisiert: 11.04.2022
In diesem Codelab erfahren Sie, wie Sie mit Teachable Machine ein Bildklassifizierungsmodell trainieren und es mit Coral-Hardwarebeschleunigung und TensorFlow.js ausführen. TensorFlow.js ist eine leistungsstarke und flexible Bibliothek für maschinelles Lernen in JavaScript. Sie erstellen eine Electron-App, die Bilder von einer Webcam anzeigt und sie mithilfe einer Coral Edge TPU klassifiziert. Eine vollständig funktionierende Version dieses Codelabs ist im GitHub-Repository von sig-tfjs verfügbar.
Benötige ich ein Coral-Gerät?
Nein. Sie können dieses Codelab auch ohne Coral-Gerät ausprobieren und trotzdem eine gute Leistung auf einem Desktop-Computer erzielen, indem Sie stattdessen den WebNN-Beschleuniger verwenden.
Umfang
In diesem Codelab erstellen Sie eine Electron-App, die Bilder klassifiziert. Ihre App:
- Klassifiziert Bilder von der Webcam in die Kategorien, die im von Ihnen trainierten Modell definiert sind.
- Verwendet einen Coral-Beschleuniger, um die Leistung zu steigern, falls einer verfügbar ist.
- Verwendet WebNN, um die Leistung zu steigern, sofern dies auf Ihrer Plattform unterstützt wird.
Lerninhalte
- So installieren und richten Sie das NPM-Paket tfjs-tflite-node ein, um TFLite-Modelle in Node.js auszuführen.
- Hier erfahren Sie, wie Sie die Edge TPU-Laufzeitbibliothek installieren, um Modelle auf einem Coral-Gerät auszuführen.
- So beschleunigen Sie die Modellinferenz mit einer Coral Edge TPU.
- WebNN zur Beschleunigung der Modellinferenz verwenden
In diesem Codelab geht es um TFLite in Node.js. Auf irrelevante Konzepte und Codeblöcke wird nicht genauer eingegangen. Sie können die entsprechenden Codeblöcke einfach kopieren und einfügen.
Voraussetzungen
Für dieses Codelab benötigen Sie Folgendes:
- Einen Computer mit einer Webcam.
- Für Coral empfehlen wir einen Raspberry Pi mit Raspberry Pi OS (64-Bit) mit Desktop.
- Für WebNN empfehlen wir einen Intel x86-64-Computer mit Ubuntu 20.04 oder Windows 10.
- Node.js-Version >= 12.
- JavaScript-Kenntnisse.
- (Empfohlen) Ein Coral USB Accelerator, um das Modell zu beschleunigen.
2. Einrichten
Code abrufen
Wir haben den gesamten Code, den Sie für dieses Projekt benötigen, in ein Git-Repository gestellt. Kopieren Sie den Code und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung. Für dieses Codelab empfehlen wir die Verwendung eines Raspberry Pi mit Raspberry Pi OS (64-Bit) mit Desktop. So lässt sich ein Coral-Beschleuniger ganz einfach anschließen.
Dringend empfohlen: Git zum Klonen des Repositorys auf einem Raspberry Pi verwenden
Um den Code zu erhalten, öffnen Sie ein neues Terminalfenster und klonen Sie das Repository:
git clone https://github.com/tensorflow/sig-tfjs.git
Alle Dateien, die Sie für das Codelab bearbeiten müssen, befinden sich im Verzeichnis tfjs-tflite-node-codelab (innerhalb von sig-tfjs). In diesem Verzeichnis finden Sie die Unterverzeichnisse starter_code, cpu_inference_working, coral_inference_working und webnn_inference_working. Dies sind Kontrollpunkte für die einzelnen Schritte dieses Codelabs.
Zu den anderen Dateien im Repository gehören die NPM-Pakete, von denen tfjs-tflite-node-codelab abhängt. Sie müssen keine dieser Dateien bearbeiten, aber Sie müssen einige der Tests ausführen, um sicherzustellen, dass Ihre Umgebung richtig eingerichtet ist.
Edge TPU-Laufzeitbibliothek installieren
Auf Coral-Geräten muss vor der Verwendung die Edge TPU-Laufzeitbibliothek installiert werden. Installieren Sie es gemäß der Anleitung für Ihre Plattform.
Unter Linux / Raspberry Pi
Unter Linux ist die Bibliothek über das PPA von Google als Debian-Paket libedgetpu1-std für x86-64- und Armv8-Architekturen (64-Bit) verfügbar. Wenn Ihr Prozessor eine andere Architektur verwendet, müssen Sie ihn aus dem Quellcode kompilieren.
Führen Sie diesen Befehl aus, um das Coral-PPA von Google hinzuzufügen und die Edge TPU-Laufzeitbibliothek zu installieren.
# None of this is needed on Coral boards
# This repo is needed for almost all packages below
echo "deb https://packages.cloud.google.com/apt coral-edgetpu-stable main" | sudo tee /etc/apt/sources.list.d/coral-edgetpu.list
# This repo is needed for only python3-coral-cloudiot and python3-coral-enviro
echo "deb https://packages.cloud.google.com/apt coral-cloud-stable main" | sudo tee /etc/apt/sources.list.d/coral-cloud.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
sudo apt-get update
sudo apt-get install libedgetpu1-std
Unter Windows / anderen Betriebssystemen
Vorkompilierte Binärdateien sind für x86-64-Versionen von MacOS und Windows verfügbar. Sie können installiert werden, indem Sie das Skript install.sh oder install.bat im Archiv ausführen, sobald es heruntergeladen wurde.
Gerät neu starten
Nachdem die Edge TPU-Laufzeit installiert wurde, starten Sie das Gerät neu, um die neue Coral-Udev-Regel zu aktivieren, die vom Installationsprogramm hinzugefügt wurde.
Prüfen, ob Ihr Coral-Gerät erkannt wird
Führen Sie die Integrationstests für das coral-tflite-delegate-Paket aus, um zu prüfen, ob Ihr Coral-Gerät erkannt wird und funktioniert. Dieses Paket befindet sich im Stammverzeichnis des Repositorys. Schließen Sie zum Ausführen der Integrationstests Ihren Coral-Beschleuniger an und führen Sie die folgenden Befehle im Verzeichnis des Pakets aus:
npx yarn
npx yarn build-deps
npx yarn test-integration
Die Ausgabe sollte in etwa so aussehen:
yarn run v1.22.17
$ yarn build && yarn test-integration-dev
$ tsc
$ jasmine --config=jasmine-integration.json
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 78904
Started
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
WARNING: converting 'int32' to 'uint8'
.
1 spec, 0 failures
Finished in 2.777 seconds
Randomized with seed 78904 (jasmine --random=true --seed=78904)
Done in 6.36s.
Sie müssen @tensorflow/tfjs-node,nicht installieren, wie in den Logs erwähnt, da Sie das Modell in TFLite ausführen.
Wenn die Ausgabe stattdessen Encountered unresolved custom op: edgetpu-custom-op enthält, wurde Ihr Coral-Gerät nicht erkannt. Achten Sie darauf, dass Sie die Edge TPU-Laufzeitbibliothek installiert und das Coral-Gerät an Ihren Computer angeschlossen haben. Sie können auch der Anleitung für die ersten Schritte mit Coral folgen, um die Python-Version der Coral-Bindungen zu testen. Wenn die Python-Version funktioniert, diese Tests aber weiterhin fehlschlagen, melden Sie den Fehler bitte.
Starter-Code ausführen
Jetzt können Sie den Startcode ausführen. So gehts:
- Wechseln Sie zum Verzeichnis
starter_codeim Verzeichnistfjs-tflite-node-codelab. - Führen Sie
npm installaus, um Abhängigkeiten zu installieren. - Führen Sie
npm startaus, um das Projekt zu starten. Eine App mit einem Videofeed von der Webcam Ihres Computers sollte geöffnet werden.
Was ist unser Ausgangspunkt?
Ausgangspunkt ist eine einfache Electron-Kamera-App, die für dieses Codelab entwickelt wurde. Der Code wurde vereinfacht, um die Konzepte im Codelab zu veranschaulichen. Er enthält nur wenig Fehlerbehandlung. Wenn Sie Code in einer Produktions-App wiederverwenden möchten, müssen Sie alle Fehler beheben und den gesamten Code gründlich testen.

Startcode ausprobieren
Dieser Startcode enthält viele Dateien, aber Sie müssen nur renderer.js bearbeiten. Sie steuert, was auf der Seite angezeigt wird, einschließlich des Videofeeds und der HTML-Elemente. Außerdem fügen Sie hier Ihr Machine-Learning-Modell in die App ein. Zu den anderen Dateien gehört eine index.html-Datei, die jedoch nur die renderer.js-Datei lädt. Außerdem gibt es eine main.js-Datei, die den Einstiegspunkt für Electron darstellt. Sie steuert den Lebenszyklus der App, einschließlich der Anzeige beim Öffnen und der Aktionen beim Schließen. Sie müssen keine Änderungen daran vornehmen.
Debugger öffnen
Möglicherweise müssen Sie Ihre App debuggen, während Sie dieses Codelab durcharbeiten. Da diese App auf Electron basiert, ist der Chrome-Debugger integriert. Auf den meisten Plattformen können Sie sie mit Strg + Umschalt + i öffnen. Klicken Sie auf den Tab Konsole, um Logs und Fehlermeldungen der App aufzurufen.
Es gibt hier nicht viel mehr zu entdecken. Beginnen wir also gleich mit dem Training des Bildklassifikators.
3. Bildklassifikator trainieren
In diesem Abschnitt trainieren Sie TFLite- und Coral-Versionen eines benutzerdefinierten Bildklassifizierungsmodells.
Klassifikator trainieren
Ein Bildklassifikator nimmt Eingabebilder entgegen und weist ihnen Labels zu. In diesem Codelab verwenden Sie Teachable Machine, um ein Modell in Ihrem Browser zu trainieren. Um das Training für diesen Abschnitt zu beschleunigen, können Sie anstelle eines Raspberry Pi einen Desktop- oder Laptop-Computer verwenden. Die resultierenden Dateien müssen Sie dann jedoch auf den Pi kopieren.
Jetzt können Sie ein Modell trainieren. Wenn Sie nicht sicher sind, welche Art von Modell Sie trainieren sollen, ist ein Personendetektor eine gute Wahl. Er erkennt einfach, ob sich eine Person im Bild befindet.
- Öffnen Sie die Trainingsseite für Teachable Machine in einem neuen Tab.
- Wählen Sie Image Project (Bildprojekt) und dann Standard image model (Standardbildmodell) aus.
- Fügen Sie für jede Klasse Bildbeispiele hinzu. Am einfachsten geht das mit dem Webcam-Eingang. Sie können die Klassen auch umbenennen.
- Wenn Sie genügend Daten für jede Klasse gesammelt haben (normalerweise reichen 50 Beispiele aus), klicken Sie auf Modell trainieren.
Wenn das Training des Modells abgeschlossen ist, sollte eine Vorschau der Ausgabe des Modells angezeigt werden.

Geben Sie dem Modell andere Eingaben. Wenn Sie eine Eingabe finden, die falsch klassifiziert wurde, fügen Sie sie den Trainingsdaten hinzu und trainieren Sie das Modell neu.
- Wenn Sie mit der Genauigkeit des Modells zufrieden sind, klicken Sie auf Modell exportieren. Sie müssen zwei separate Versionen des Modells herunterladen.
- Exportieren Sie Ihr Modell als TensorFlow Lite-Gleitkomma-Modell. Dadurch wird eine Datei mit dem Namen
converted_tflite.zipheruntergeladen. die auf der CPU ausgeführt wird. - Exportieren Sie das Modell als Tensorflow Lite EdgeTPU-Modell. Dadurch wird eine Datei namens
converted_edgetpu.zipheruntergeladen, die auf der Coral Edge TPU ausgeführt wird.
4. CPU-Modell in Ihrer App ausführen
Nachdem Sie ein Modell trainiert haben, können Sie es in Ihre App einfügen. Am Ende dieses Abschnitts kann die App Ihr Modell mit der CPU des Geräts ausführen.
Modelldatei der App hinzufügen
Entpacken Sie die Modelldatei converted_tflite.zip, die Sie beim Trainieren des Klassifikators heruntergeladen haben. Das Archiv enthält zwei Dateien. model_uquant.tflite ist das gespeicherte TFLite-Modell, einschließlich des Modellgraphen und der Gewichte. labels.txt enthält die für Menschen lesbaren Labels für die Klassen, die das Modell vorhersagt. Speichern Sie beide Dateien im modeldirectory.
Abhängigkeiten installieren
Zum Laden eines Modells und Vorverarbeiten von Eingaben sind einige Abhängigkeiten von TensorFlow.js erforderlich:
tfjs-tflite-node: Das TensorFlow.js-Paket zum Ausführen von TFLite-Modellen in Node.js.@tensorflow/tfjs: Das Hauptpaket von TensorFlow.js.
@tensorflow/tfjs ist bereits installiert, aber Sie müssen tfjs-tflite-node mit diesem Befehl installieren:
npm install --save tfjs-tflite-node
Fügen Sie es nach der Installation oben in renderer.js hinzu:
CODELAB-Teil 1: tfjs-tflite-node importieren
const {loadTFLiteModel} = require('tfjs-tflite-node');
Modell laden
Jetzt können Sie das Modell laden. tfjs-tflite-node bietet die Funktion loadTFLiteModel, um dies zu tun. Es kann Modelle aus einem Dateipfad, einem ArrayBuffer oder einer TFHub-URL laden. Wenn Sie Ihr Modell und seine Gewichte laden möchten, fügen Sie Folgendes der Funktion main hinzu:
CODELAB, Teil 1: Laden Sie das Modell hier.
const modelPath = './model/model_unquant.tflite';
const model = await loadTFLiteModel(modelPath);
const labels = fs.readFileSync('./model/labels.txt', 'utf8')
.split('\n');
Modell ausführen
Das Ausführen Ihres Modells erfolgt in drei Schritten. Zuerst wird ein Eingabe-Frame von der Webcam abgerufen und vorverarbeitet. Anschließend führen Sie das Modell für diesen Frame aus und erhalten eine Vorhersage. Danach zeigen Sie die Vorhersage auf der Seite an.
Webcam-Eingabe vorverarbeiten
Derzeit ist die Webcam nur ein HTML-Element und die angezeigten Frames sind für die JavaScript-Datei „renderer.js“ nicht verfügbar. Um Frames von der Webcam abzurufen, bietet TensorFlow.js tf.data.webcam, das eine benutzerfreundliche capture()-Methode zum Erfassen von Frames von der Kamera bietet.
Fügen Sie diesen Einrichtungscode in main() ein, um ihn zu verwenden:
CODELAB, Teil 1: tf.data.webcam einrichten
const tensorCam = await tf.data.webcam(webcam);
Wenn Sie dann für jeden Frame ein Bild aufnehmen möchten, fügen Sie run() Folgendes hinzu:
CODELAB, Teil 1: Webcam-Frames erfassen
const image = await tensorCam.capture();
Außerdem müssen Sie jeden Frame vorverarbeiten, damit er mit dem Modell kompatibel ist. Das Modell in diesem Codelab hat die Eingabeform [1, 224, 224, 3]. Es wird also ein RGB-Bild mit 224 × 224 Pixeln erwartet. tensorCam.capture()gibt die Form [224, 224, 3] zurück. Sie müssen dem Tensor also mit tf.expandDims eine zusätzliche Dimension voranstellen. Außerdem erwartet das CPU-Modell eine Float32-Eingabe zwischen -1 und 1, aber die Webcam erfasst Werte zwischen 0 und 255. Sie können den Eingabetensor durch 127 teilen, um den Bereich von [0, 255] in [0, ~2] zu ändern, und dann 1 subtrahieren, um den gewünschten Bereich [–1, ~1] zu erhalten. Fügen Sie diese Zeilen in der Funktion run() zu tf.tidy() hinzu:
CODELAB, Teil 1: Webcam-Frames vorverarbeiten
const expanded = tf.expandDims(image, 0);
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
Es ist wichtig, Tensoren nach der Verwendung zu entsorgen. tf.tidy() führt dies automatisch für den Code aus, der in seinem Callback enthalten ist, unterstützt aber keine asynchronen Funktionen. Sie müssen den zuvor erstellten Bildtensor manuell freigeben, indem Sie seine dispose()-Methode aufrufen.
CODELAB, Teil 1: Webcam-Frames hier verwerfen.
image.dispose();
Modell ausführen und Ergebnisse anzeigen
Rufen Sie model.predict() für den normalisierten Tensor auf, um das Modell für die vorverarbeitete Eingabe auszuführen. Dadurch wird ein eindimensionaler Tensor mit der vorhergesagten Wahrscheinlichkeit für jedes Label zurückgegeben. Multiplizieren Sie diese Wahrscheinlichkeit mit 100, um die prozentuale Wahrscheinlichkeit für jedes Label zu erhalten, und verwenden Sie die Funktion showPrediction, die im Startercode enthalten ist, um die Vorhersage des Modells auf dem Bildschirm anzuzeigen.
In diesem Code wird auch stats.js verwendet, um die Dauer der Vorhersage zu messen. Dazu werden Aufrufe von stats.begin und stats.end um model.predict herum platziert.
CODELAB Teil 1: Modell ausführen und Ergebnisse hier anzeigen.
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
Führen Sie die App noch einmal mit yarn start aus. Sie sollten jetzt Klassifizierungen aus Ihrem Modell sehen.

Leistung
In der aktuellen Konfiguration wird das Modell auf der CPU ausgeführt. Das ist für Desktop-Computer und die meisten Laptops in Ordnung, aber möglicherweise nicht wünschenswert, wenn Sie es auf einem Raspberry Pi oder einem anderen Gerät mit geringem Stromverbrauch ausführen. Auf einem Raspberry Pi 4 werden wahrscheinlich etwa 10 FPS erreicht, was für einige Anwendungen möglicherweise nicht schnell genug ist. Wenn Sie eine bessere Leistung erzielen möchten, ohne einen schnelleren Computer zu verwenden, können Sie anwendungsspezifische Siliziumchips in Form einer Coral Edge TPU verwenden.
5. Coral-Modell in Ihrer App ausführen
Wenn Sie kein Coral-Gerät haben, können Sie diesen Abschnitt überspringen.
Dieser Schritt des Codelabs basiert auf dem Code, den Sie im letzten Abschnitt geschrieben haben. Sie können aber auch den Prüfpunkt cpu_inference_working verwenden, wenn Sie von vorn beginnen möchten.
Die Schritte zum Ausführen des Coral-Modells sind fast identisch mit den Schritten zum Ausführen des CPU-Modells. Der Hauptunterschied liegt im Modellformat. Da Coral nur uint8-Tensoren unterstützt, wird das Modell quantisiert. Dies wirkt sich auf die Eingabetensoren aus, die an das Modell übergeben werden, und auf die Ausgabetensoren, die es zurückgibt. Ein weiterer Unterschied besteht darin, dass Modelle mit dem Edge TPU-Compiler kompiliert werden müssen, damit sie auf einer Coral TPU ausgeführt werden können. Teachable Machine hat diesen Schritt bereits ausgeführt. In der Coral-Dokumentation erfahren Sie, wie Sie dies für andere Modelle tun können.
Coral-Modelldatei zur App hinzufügen
Entpacken Sie die Modelldatei converted_edgetpu.zip, die Sie beim Trainieren des Klassifikators heruntergeladen haben. Das Archiv enthält zwei Dateien. model_edgetpu.tflite ist das gespeicherte TFLite-Modell, einschließlich des Modellgraphen und der Gewichte. labels.txt enthält die für Menschen lesbaren Labels für die Klassen, die das Modell vorhersagt. Platzieren Sie die Modelldatei im Verzeichnis coral_model.
Abhängigkeiten installieren
Für die Ausführung von Coral-Modellen ist die Edge TPU-Laufzeitbibliothek erforderlich. Folgen Sie der Installationsanleitung, bevor Sie fortfahren.
Auf Coral-Geräte wird als TFLite-Delegates zugegriffen. Wenn Sie von JavaScript aus darauf zugreifen möchten, installieren Sie das Paket coral-tflite-delegate:
npm install --save coral-tflite-delegate
Importieren Sie dann den Delegaten, indem Sie diese Zeile oben in die Datei renderer.js einfügen:
CODELAB-Teil 2: Importieren Sie den Delegaten hier.
const {CoralDelegate} = require('coral-tflite-delegate');
Modell laden
Jetzt können Sie das Coral-Modell laden. Das funktioniert genauso wie beim CPU-Modell. Sie übergeben jetzt jedoch Optionen an die Funktion loadTFLiteModel, um den Coral-Delegate zu laden.
CODELAB-Teil 2: Delegiertes Modell hier laden.
const coralModelPath = './coral_model/model_edgetpu.tflite';
const options = {delegates: [new CoralDelegate()]};
const coralModel = await loadTFLiteModel(coralModelPath, options);
Sie müssen die Labels nicht laden, da sie mit denen des CPU-Modells identisch sind.
Schaltfläche zum Wechseln zwischen CPU und Coral hinzufügen
Sie fügen das Coral-Modell neben dem CPU-Modell hinzu, das Sie im letzten Abschnitt hinzugefügt haben. Wenn beide gleichzeitig ausgeführt werden, sind Leistungsunterschiede schwer zu erkennen. Daher kann mit einer Ein/Aus-Schaltfläche zwischen der Ausführung auf Coral und der CPU gewechselt werden.
Fügen Sie die Schaltfläche mit diesem Code hinzu:
CODELAB, Teil 2: Erstellen Sie hier die Schaltfläche für den Bevollmächtigten.
let useCoralDelegate = false;
const toggleCoralButton = document.createElement('button');
function toggleCoral() {
useCoralDelegate = !useCoralDelegate;
toggleCoralButton.innerText = useCoralDelegate
? 'Using Coral. Press to switch to CPU.'
: 'Using CPU. Press to switch to Coral.';
}
toggleCoralButton.addEventListener('click', toggleCoral);
toggleCoral();
document.body.appendChild(toggleCoralButton);
Wir fügen diese Bedingung in die run()-Funktion ein. Wenn useCoralDelegate „false“ ist, sollte die CPU-Version ausgeführt werden. Andernfalls wird die Coral-Version ausgeführt (derzeit passiert aber nichts). Code für die Ausführung des CPU-Modells in eine if-Anweisung einfügen: Der Tensor expanded wird in der if-Anweisung nicht berücksichtigt, da er vom Coral-Modell verwendet wird.
CODELAB-Teil 2: Prüfen, ob der Delegat hier verwendet werden soll.
// NOTE: Don't just copy-paste this code into the app.
// You'll need to edit the code from the CPU section.
const expanded = tf.expandDims(image, 0);
if (useCoralDelegate) {
// CODELAB part 2: Run Coral prediction here.
} else {
const divided = tf.div(expanded, tf.scalar(127));
const normalized = tf.sub(divided, tf.scalar(1));
stats.begin();
const prediction = model.predict(normalized);
stats.end();
const percentage = tf.mul(prediction, tf.scalar(100));
showPrediction(percentage.dataSync(), labels);
}
Modell ausführen
Die Coral-Version des Modells erwartet uint8-Tensoren von 0 bis 255. Die Eingabe muss also nicht normalisiert werden. Die Ausgabe ist jedoch auch ein uint8-Tensor im Bereich von 0 bis 255. Er muss in einen Gleitkommawert zwischen 0 und 100 umgewandelt werden, bevor er angezeigt wird.
CODELAB-Teil 2: Führen Sie hier die Coral-Vorhersage aus. (Das ist Teil des Code-Snippets oben.)
stats.begin();
const prediction = coralModel.predict(expanded);
stats.end();
const percentage = tf.div(tf.mul(prediction, tf.scalar(100)), tf.scalar(255));
showPrediction(percentage.dataSync(), labels);
Führen Sie die App noch einmal mit yarn start aus. Es sollten Klassifizierungen vom Coral-Beschleuniger angezeigt werden.

Sie können zwischen Coral- und CPU-Inferenz wechseln, indem Sie die Taste drücken. Die Konfidenzwerte des Coral-Modells sind möglicherweise weniger präzise als die des CPU-Modells und enden in der Regel mit einer geraden Dezimalstelle. Dieser Genauigkeitsverlust ist ein Kompromiss, der beim Ausführen eines quantisierten Modells auf Coral eingegangen wird. In der Praxis spielt das in der Regel keine Rolle, aber es ist gut, sich dessen bewusst zu sein.
Hinweis zur Leistung
Die angezeigte Framerate umfasst Vor- und Nachbearbeitung. Sie ist also nicht repräsentativ für die Leistungsfähigkeit der Coral-Hardware. Sie können sich ein besseres Bild von der Leistung machen, indem Sie auf das FPS-Messgerät klicken, bis die Latenz (in Millisekunden) angezeigt wird. Diese misst nur den Aufruf von model.predict. Darin ist jedoch immer noch die Zeit enthalten, die benötigt wird, um Tensoren zu den nativen C-Bindungen von TFLite und dann zum Coral-Gerät zu verschieben. Es ist also keine perfekte Messung. Genauere Leistungsbenchmarks in C++ finden Sie auf der EdgeTPU-Benchmarkseite.
Das Video wurde auf einem Laptop und nicht auf einem Raspberry Pi aufgenommen. Daher kann die FPS abweichen.
Vorverarbeitung von Coral beschleunigen
In einigen Fällen können Sie die Vorverarbeitung beschleunigen, indem Sie die TFJS-Backends wechseln. Das Standard-Backend ist WebGL, das sich gut für große, parallelisierbare Vorgänge eignet. In der Vorverarbeitungsphase werden in dieser App jedoch nicht viele solcher Vorgänge ausgeführt. Der einzige Vorgang, der verwendet wird, ist expandDims, der nicht parallel ist. Sie können zum CPU-Backend wechseln, um die zusätzliche Latenz beim Verschieben von Tensoren zur und von der GPU zu vermeiden. Fügen Sie dazu diese Zeile nach den Importen oben in der Datei ein.
tf.setBackend(‘cpu');
Dies wirkt sich auch auf die Vorverarbeitung für das TFLite-CPU-Modell aus, die parallelisiert wird. Das Modell wird durch diese Änderung also viel langsamer ausgeführt.
6. CPU-Modell mit WebNN beschleunigen
Wenn Sie keinen Coral-Beschleuniger haben oder einfach eine andere Möglichkeit ausprobieren möchten, das Modell zu beschleunigen, können Sie den WebNN TFLite-Delegate verwenden. Dieser Delegate verwendet in Intel-Prozessoren integrierte Hardware für maschinelles Lernen, um die Modellinferenz mit dem OpenVINO-Toolkit zu beschleunigen. Daher gelten zusätzliche Anforderungen, die im Einrichtungsabschnitt dieses Codelabs nicht behandelt wurden. Sie müssen das OpenVINO-Toolkit installieren. Prüfen Sie vor dem Fortfahren, ob Ihre Einrichtung den unterstützten Zielsystemplattformen entspricht. Der WebNN-Delegate wird jedoch noch nicht unter macOS unterstützt.
OpenVINO-Toolkit installieren
Das OpenVINO-Toolkit nutzt in Intel-Prozessoren integrierte Hardware für maschinelles Lernen, um Modelle zu beschleunigen. Sie können eine vorkompilierte Version von Intel herunterladen oder aus dem Quellcode erstellen. Es gibt mehrere Möglichkeiten, OpenVINO zu installieren. Für dieses Codelab empfehlen wir jedoch, das Installationsskript für Windows oder Linux zu verwenden. Installieren Sie unbedingt die LTS-Laufzeitversion 2021.4.2, da andere Versionen möglicherweise nicht kompatibel sind. Nachdem Sie das Installationsprogramm ausgeführt haben, müssen Sie die Umgebungsvariablen Ihrer Shell konfigurieren. Folgen Sie dazu der Installationsanleitung für Linux oder Windows ( permanente Lösung) oder führen Sie den Befehl setupvars.sh (Linux) oder setupvars.bat (Windows) im Verzeichnis webnn-tflite-delegate aus.
Prüfen, ob der WebNN-Delegate funktioniert
Führen Sie die Integrationstests für das webnn-tflite-delegate-Paket im Stammverzeichnis des Repositorys aus, um zu prüfen, ob der WebNN-Delegate ordnungsgemäß funktioniert. Führen Sie zum Ausführen der Integrationstests die folgenden Befehle im Verzeichnis des Pakets aus:
# In webnn-tflite-delegate/
npx yarn
npx yarn test-integration
Die Ausgabe sollte in etwa so aussehen:
WebNN delegate: WebNN device set to 0.
INFO: Created TensorFlow Lite WebNN delegate for device Default and power Default.
============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
label: wine bottle
score: 0.934505045413971
.
1 spec, 0 failures
Finished in 0.446 seconds
Randomized with seed 58441 (jasmine --random=true --seed=58441)
Done in 8.07s.
Wenn Sie eine solche Ausgabe sehen, deutet das auf einen Konfigurationsfehler hin:
Platform node has already been set. Overwriting the platform with node.
Randomized with seed 05938
Started
error Command failed with exit code 3221225477.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Diese Ausgabe bedeutet höchstwahrscheinlich, dass Sie die Umgebungsvariablen von OpenVINO nicht festgelegt haben. Derzeit können Sie sie festlegen, indem Sie den Befehl setupvars.sh (Linux) oder setupvars.bat (Windows) ausführen. Wenn Sie sie dauerhaft festlegen möchten, folgen Sie der Anleitung für Linux oder Windows ( dauerhafte Lösung). Wenn Sie Windows verwenden, können Sie
setupvars.bat
Dieser Befehl unterstützt Git Bash nicht. Führen Sie ihn und andere Befehle aus diesem Codelab daher über die Windows-Eingabeaufforderung aus.
WebNN-Delegate installieren
Nach der Installation von OpenVINO können Sie das CPU-Modell mit WebNN beschleunigen. Dieser Abschnitt des Codelabs basiert auf dem Code, den Sie im Abschnitt „CPU-Modell in Ihrer App ausführen“ geschrieben haben. Sie können den Code aus diesem Schritt verwenden. Wenn Sie den Coral-Abschnitt jedoch bereits abgeschlossen haben, verwenden Sie stattdessen den Prüfpunkt cpu_inference_working, damit Sie mit einem sauberen Zustand beginnen.
Der Node.js-Teil des WebNN-Delegaten wird auf npmjs verteilt. Führen Sie den folgenden Befehl aus, um es zu installieren:
npm install --save webnn-tflite-delegate
Importieren Sie dann den Delegaten, indem Sie diese Zeile oben in die Datei renderer.js einfügen:
CODELAB-Teil 2: Importieren Sie den Delegaten hier.
const {WebNNDelegate, WebNNDevice} = require('webnn-tflite-delegate');
Der WebNN-Delegate unterstützt die Ausführung auf der CPU oder der GPU. Mit WebNNDevice können Sie auswählen, welche verwendet werden soll.
Modell laden
Jetzt können Sie das Modell mit dem aktivierten WebNN-Delegate laden. Bei Coral mussten Sie eine andere Modelldatei laden, WebNN unterstützt jedoch dasselbe Modellformat wie TFLite. Fügen Sie den WebNNDelegate der Liste der Delegates hinzu, die an das Modell übergeben werden, um ihn zu aktivieren:
CODELAB-Teil 2: Delegiertes Modell hier laden.
let webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice: WebNNDevice.DEFAULT})],
});
Sie müssen die Labels nicht noch einmal laden, da es sich um dasselbe Modell handelt.
Schaltfläche zum Wechseln zwischen TfLite CPU und WebNN hinzufügen
Nachdem die WebNN-Version des Modells fertig ist, fügen Sie eine Schaltfläche hinzu, um zwischen WebNN und TfLite-CPU-Inferenz zu wechseln. Wenn Sie beide gleichzeitig ausführen, sind Leistungsunterschiede schwer zu erkennen.
Fügen Sie die Schaltfläche mit diesem Code hinzu. Beachten Sie, dass die Modelle noch nicht gewechselt werden:
CODELAB, Teil 2: Erstellen Sie hier die Schaltfläche für den Bevollmächtigten.
let useWebNNDelegate = false;
const divElem = document.createElement('div');
const toggleWebNNButton = document.createElement('button');
function toggleWebNN() {
useWebNNDelegate = !useWebNNDelegate;
toggleWebNNButton.innerHTML = useWebNNDelegate
? 'Using WebNN. Press to switch to TFLite CPU.'
: 'Using TFLite CPU. Press to switch to WebNN.';
divElem.hidden = useWebNNDelegate ? false : true;
}
toggleWebNNButton.addEventListener('click', toggleWebNN);
toggleWebNN();
document.body.appendChild(toggleWebNNButton);
document.body.appendChild(divElem);
Mit diesem Code wird auch ein div-Element hinzugefügt, mit dem Sie im nächsten Abschnitt WebNN-Einstellungen konfigurieren.
Dropdown-Menü zum Wechseln zwischen WebNN-Geräten hinzufügen
WebNN unterstützt die Ausführung auf CPU und GPU. Fügen Sie daher ein Drop-down-Menü hinzu, um zwischen den beiden Optionen zu wechseln. Fügen Sie diesen Code nach dem Code ein, mit dem die Schaltfläche erstellt wird:
// Create elements for WebNN device selection
divElem.innerHTML = '<br/>WebNN Device: ';
const selectElem = document.createElement('select');
divElem.appendChild(selectElem);
const webnnDevices = ['Default', 'GPU', 'CPU'];
// append the options
for (let i = 0; i < webnnDevices.length; i++) {
var optionElem = document.createElement('option');
optionElem.value = i;
optionElem.text = webnnDevices[i];
selectElem.appendChild(optionElem);
}
Wenn Sie die App jetzt ausführen, wird ein Drop-down-Menü mit den Optionen „Standard“, „GPU“ und „CPU“ angezeigt. Wenn Sie eine der Optionen auswählen, passiert derzeit nichts, da das Drop-down-Menü noch nicht verknüpft ist. 
Gerät über das Drop-down-Menü ändern
Um das Drop-down-Menü so einzurichten, dass sich das verwendete WebNN-Gerät ändert, fügen Sie dem change-Ereignis des Drop-down-Auswahlelements einen Listener hinzu. Wenn sich der ausgewählte Wert ändert, erstellen Sie das WebNN-Modell mit dem entsprechenden WebNN-Gerät neu, das in den Delegierungsoptionen ausgewählt ist.
Fügen Sie den folgenden Code nach dem Code ein, mit dem das Drop-down-Menü hinzugefügt wurde:
selectElem.addEventListener('change', async () => {
let webnnDevice;
switch(selectElem.value) {
case '1':
webnnDevice = WebNNDevice.GPU;
break;
case '2':
webnnDevice = WebNNDevice.CPU;
break;
default:
webnnDevice = WebNNDevice.DEFAULT;
break;
}
webnnModel = await loadTFLiteModel(modelPath, {
delegates: [new WebNNDelegate({webnnDevice})],
});
});
Durch diese Änderung wird jedes Mal, wenn das Drop-down-Menü geändert wird, ein neues Modell mit den richtigen Einstellungen erstellt. Jetzt ist es an der Zeit, das WebNN-Modell einzubinden und für die Inferenz zu verwenden.
WebNN-Modell ausführen
Das WebNN-Modell ist bereit für die Verwendung, aber mit der Schaltfläche zum Wechseln zwischen WebNN und TfLite CPU wird das Modell noch nicht gewechselt. Wenn Sie das Modell wechseln möchten, müssen Sie zuerst die model-Variable umbenennen, die Sie im ersten Abschnitt des Codelabs beim Laden des TfLite-CPU-Modells verwendet haben.
Ändern Sie die folgende Zeile…
const model = await loadTFLiteModel(modelPath);
...damit sie mit dieser Zeile übereinstimmt.
const cpuModel = await loadTFLiteModel(modelPath);
Nachdem die Variable model in cpuModel umbenannt wurde, fügen Sie sie der Funktion run hinzu, um das richtige Modell basierend auf dem Status der Schaltfläche auszuwählen:
CODELAB-Teil 2: Prüfen, ob der Delegat hier verwendet werden soll.
let model;
if (useWebNNDelegate) {
model = webnnModel;
} else {
model = cpuModel;
}
Wenn Sie die App jetzt ausführen, wechselt die Schaltfläche zwischen TfLite CPU und WebNN. 
Wenn Sie eine integrierte Intel-GPU haben, können Sie auch zwischen WebNN-CPU- und GPU-Inferenz wechseln.
Hinweis zur Leistung
Die angezeigte Framerate umfasst Vor- und Nachbearbeitung. Sie ist also nicht repräsentativ für die Leistungsfähigkeit von WebNN. Sie können sich ein besseres Bild von der Leistung machen, indem Sie auf das FPS-Messgerät klicken, bis die Latenz (in Millisekunden) angezeigt wird. Diese misst nur den Aufruf von model.predict. Darin ist jedoch immer noch die Zeit enthalten, die zum Verschieben von Tensoren zu den nativen C-Bindungen von TFLite benötigt wird. Es ist also keine perfekte Messung.
7. Glückwunsch
Glückwunsch! Sie haben gerade Ihr erstes Coral-/WebNN-Projekt mit tfjs-tflite-node in Electron abgeschlossen.
Probieren Sie es aus und testen Sie es mit verschiedenen Bildern. Sie können auch ein neues Modell in Teachable Machine trainieren, um etwas völlig anderes zu klassifizieren.
Zusammenfassung
In diesem Codelab haben Sie Folgendes gelernt:
- So installieren und richten Sie das npm-Paket tfjs-tflite-node ein, um TFLite-Modelle in Node.js auszuführen.
- Hier erfahren Sie, wie Sie die Edge TPU-Laufzeitbibliothek installieren, um Modelle auf einem Coral-Gerät auszuführen.
- So beschleunigen Sie die Modellinferenz mit einer Coral Edge TPU.
- Modellinferenz mit WebNN beschleunigen
Nächste Schritte
Jetzt haben Sie eine funktionierende Grundlage. Welche kreativen Ideen haben Sie, um diesen Runner für maschinelles Lernen auf einen realen Anwendungsfall zu erweitern, an dem Sie vielleicht gerade arbeiten? Vielleicht können Sie mit schneller und kostengünstiger Inferenz die Branche, in der Sie arbeiten, revolutionieren oder einen Toaster so modifizieren, dass er aufhört zu toasten, wenn das Brot genau richtig aussieht. Die Möglichkeiten sind praktisch endlos.
Wenn Sie mehr darüber erfahren möchten, wie das von Ihnen verwendete Modell in Teachable Machine trainiert wurde, sehen Sie sich unser Codelab zum Lerntransfer an. Wenn Sie nach anderen Modellen suchen, die mit Coral funktionieren, z. B. für die Spracherkennung und die Schätzung von Körperhaltungen, sehen Sie sich coral.ai/models an. CPU-Versionen dieser und vieler anderer Modelle finden Sie auch auf TensorFlow Hub.
Teilen Sie uns mit, was Sie erstellen
Sie können Ihre heutigen Kreationen ganz einfach für andere kreative Anwendungsfälle erweitern. Wir möchten Sie ermutigen, kreativ zu werden und weiter zu experimentieren.
Vergessen Sie nicht, uns in den sozialen Medien mit dem Hashtag #MadeWithTFJS zu taggen. So haben Sie die Chance, dass Ihr Projekt in unserem TensorFlow-Blog oder sogar bei zukünftigen Veranstaltungen vorgestellt wird. Wir sind gespannt auf Ihre Kreationen.