Leitfaden zur Bildklassifizierung für das Web

Mit der Aufgabe „MediaPipe Image Classifier“ können Sie Bilder klassifizieren. Mit dieser Aufgabe können Sie ermitteln, was ein Bild aus einer Reihe von Kategorien darstellt, die zum Zeitpunkt des Trainings definiert wurden. In dieser Anleitung erfahren Sie, wie Sie den Bildklassifikator für Knoten- und Webanwendungen verwenden.

In der Demo können Sie diese Aufgabe in Aktion sehen. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für den Bildklassifikator bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und Ihre eigene Anwendung zur Bildklassifizierung erstellen. Sie können den Beispielcode für den Bildklassifikator nur in Ihrem Webbrowser ansehen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte speziell für die Verwendung des Bildklassifikators beschrieben. Allgemeine Informationen zum Einrichten der Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.

JavaScript-Pakete

Der Bildklassifikatorcode ist über das MediaPipe-Paket @mediapipe/tasks-vision NPM verfügbar. Sie können diese Bibliotheken über Links im Einrichtungsleitfaden der Plattform herunterladen.

Mit dem folgenden Befehl können Sie die erforderlichen Pakete mit dem folgenden Code für das lokale Staging installieren:

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgabencode über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das Tag in Ihrer HTML-Datei ein:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modell

Für die Aufgabe „MediaPipe Image Classifier“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den Bildklassifikator finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.

Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:

<dev-project-root>/app/shared/models/

Aufgabe erstellen

Mit einer der createFrom...()-Funktionen für Bildklassifikatoren bereiten Sie die Aufgabe für die Ausführung von Inferenzen vor. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie die Methode createFromModelBuffer() verwenden.

Das folgende Codebeispiel zeigt, wie die Funktion createFromOptions() zum Einrichten der Aufgabe verwendet wird. Mit der Funktion createFromOptions können Sie den Bildklassifikator mit Konfigurationsoptionen anpassen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie die Aufgabe mit benutzerdefinierten Optionen erstellt und konfiguriert wird:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

Konfigurationsoptionen

Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Webanwendungen:

Option	Beschreibung	Wertebereich	Standardwert
`runningMode`	Legt den Ausführungsmodus für die Task fest. Es gibt zwei Modi: IMAGE: Der Modus für Einzelbildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder einen Livestream mit Eingabedaten, z. B. von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	Legt die Sprache der Labels fest, die für Anzeigenamen verwendet werden sollen, die in den Metadaten des Aufgabenmodells angegeben sind, sofern verfügbar. Der Standardwert für Englisch ist `en`. Mit der TensorFlow Lite Metadata Writer API können Sie den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen	Gebietsschemacode	en
`maxResults`	Legt die optionale maximale Anzahl der am besten bewerteten Klassifizierungsergebnisse fest, die zurückgegeben werden sollen. Wenn < 0, werden alle verfügbaren Ergebnisse zurückgegeben.	Beliebige positive Zahlen	`-1`
`scoreThreshold`	Legt den Schwellenwert für die Vorhersagepunktzahl fest, der den in den Modellmetadaten angegebenen Wert überschreibt (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt.	Beliebiger Gleitkommawert	Nicht festgelegt
`categoryAllowlist`	Legt die optionale Liste der zulässigen Kategorienamen fest. Wenn das Feld nicht leer ist, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename nicht in diesem Satz enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt sich mit `categoryDenylist` gegenseitig aus und die Verwendung beider führt zu einem Fehler.	Alle Strings	Nicht festgelegt
`categoryDenylist`	Legt die optionale Liste der unzulässigen Kategorienamen fest. Ist dieses Feld nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename in diesem Satz enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt sich mit `categoryAllowlist` gegenseitig aus und die Verwendung beider führt zu einem Fehler.	Alle Strings	Nicht festgelegt
`resultListener`	Legt fest, dass der Ergebnis-Listener die Klassifizierungsergebnisse asynchron empfängt, wenn sich der Bildklassifikator im Livestreammodus befindet. Kann nur verwendet werden, wenn der Ausführungsmodus auf `LIVE_STREAM` festgelegt ist	–	Nicht festgelegt

Daten vorbereiten

Mit dem Bildklassifikator können Objekte in Bildern in jedem vom Hostbrowser unterstützten Format klassifiziert werden. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung.

Aufrufe der Bildklassifikatormethoden classify() und classifyForVideo() werden synchron ausgeführt und blockieren den Benutzeroberflächen-Thread. Wenn Sie Objekte in Videoframes von der Kamera eines Geräts klassifizieren, wird der Hauptthread von jeder Klassifizierung blockiert. Sie können dies verhindern, indem Sie Web Worker so implementieren, dass classify() und classifyForVideo() in einem anderen Thread ausgeführt werden.

Aufgabe ausführen

Der Bildklassifikator verwendet die Methode classify() mit dem Bildmodus und die Methode classifyForVideo() mit dem Modus video, um Inferenzen auszulösen. Die Image Classifier API gibt die möglichen Kategorien für die Objekte im Eingabebild zurück.

Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:

Bild

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Video

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Eine ausführlichere Implementierung der Ausführung einer Bildklassifikatoraufgabe finden Sie im Codebeispiel.

Ergebnisse verarbeiten und anzeigen

Beim Ausführen einer Inferenz gibt die Aufgabe des Bildklassifikators ein ImageClassifierResult-Objekt zurück, das die Liste der möglichen Kategorien für die Objekte im Eingabebild oder -frame enthält.

Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Dieses Ergebnis wurde erhalten, indem der Vogelklassifikator auf folgenden Geräten ausgeführt wurde:

Der Beispielcode für Bildklassifikatoren veranschaulicht, wie die von der Aufgabe zurückgegebenen Klassifizierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.