Jetzt neu: LiteRT: Die leistungsstarke Laufzeit von Google für On-Device-KI, ehemals TensorFlow Lite.

Diese Seite wurde von der Cloud Translation API übersetzt.

Leitfaden zur Bildklassifizierung für das Web

Mit der Aufgabe „MediaPipe-Bildklassifikator“ können Sie Bilder klassifizieren. Mit dieser Aufgabe können Sie angeben, was ein Bild aus einer Reihe von Kategorien darstellt, die beim Training definiert wurden. In dieser Anleitung erfahren Sie, wie Sie den Bildklassifikator für Node- und Webanwendungen verwenden.

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

Codebeispiel

Der Beispielcode für den Bildklassifikator enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Bildklassifizierungs-App beginnen. Sie können den Beispielcode für den Bildklassifikator ganz einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

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

JavaScript-Pakete

Der Code für den Bildklassifikator ist über das @mediapipe/tasks-vision MediaPipe-NPM-Paket verfügbar. Sie finden diese Bibliotheken und können sie über die Links im Einrichtungsleitfaden herunterladen.

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

npm install @mediapipe/tasks-vision

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

<!-- 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 MediaPipe-Bildklassifizierungsaufgabe 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 in Ihrem Projektverzeichnis:

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

Aufgabe erstellen

Verwenden Sie eine der createFrom...()-Funktionen des Bildklassifikators, um die Aufgabe für die Ausführung von Inferenzen vorzubereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur Datei des trainierten Modells. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Im folgenden Codebeispiel wird gezeigt, wie die Aufgabe mit der Funktion createFromOptions() eingerichtet wird. Mit der Funktion createFromOptions können Sie den Bildklassifikator mit Konfigurationsoptionen anpassen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.

Im folgenden Code wird gezeigt, 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

Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Webanwendungen verfügbar:

Option	Beschreibung	Wertebereich	Standardwert
`runningMode`	Legt den Ausführungsmodus für die Aufgabe fest. Es gibt zwei Modi: IMAGE: Der Modus für einzelne Bildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder eines Livestreams von Eingabedaten, z. B. von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	Legt die Sprache der Labels fest, die für die Anzeigenamen verwendet werden, die in den Metadaten des Modells der Aufgabe angegeben sind, sofern verfügbar. Der Standardwert ist `en` für Englisch. Mit der TensorFlow Lite Metadata Writer API können Sie den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen.	Gebietscode	de
`maxResults`	Legt die optionale maximale Anzahl der Klassifizierungsergebnisse mit der höchsten Punktzahl fest, die zurückgegeben werden sollen. Wenn der Wert kleiner als 0 ist, werden alle verfügbaren Ergebnisse zurückgegeben.	Beliebige positive Zahlen	`-1`
`scoreThreshold`	Legt den Schwellenwert für die Vorhersagebewertung fest, der den in den Modellmetadaten angegebenen Wert (falls vorhanden) überschreibt. Ergebnisse unter diesem Wert werden abgelehnt.	Beliebiger Float	Nicht festgelegt
`categoryAllowlist`	Legt die optionale Liste der zulässigen Kategorienamen fest. Wenn die Liste nicht leer ist, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename nicht in dieser Liste enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt `categoryDenylist` aus. Die Verwendung beider Optionen führt zu einem Fehler.	Beliebige Strings	Nicht festgelegt
`categoryDenylist`	Hiermit wird eine optionale Liste der nicht zulässigen Kategorienamen festgelegt. Wenn der Wert nicht leer ist, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename in diesem Set enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt `categoryAllowlist` aus. Die Verwendung beider Optionen führt zu einem Fehler.	Beliebige Strings	Nicht festgelegt
`resultListener`	Legt fest, dass der Ergebnisempfänger die Klassifizierungsergebnisse asynchron empfängt, wenn sich der Bildklassifikator im Livestream-Modus befindet. Kann nur verwendet werden, wenn der Ausführungsmodus auf `LIVE_STREAM` festgelegt ist.	–	Nicht festgelegt

Daten vorbereiten

Der Bildklassifikator kann Objekte in Bildern in jedem vom Host-Browser unterstützten Format klassifizieren. Die Aufgabe umfasst auch die Vorverarbeitung der Dateneingabe, einschließlich Größenänderung, Drehung und Wertnormalisierung.

Aufrufe der Methoden classify() und classifyForVideo() des Bildklassifikators werden synchron ausgeführt und blockieren den Benutzeroberflächen-Thread. Wenn Sie Objekte in Videoframes von der Kamera eines Geräts klassifizieren, wird der Haupt-Thread durch jede Klassifizierung blockiert. Sie können dies verhindern, indem Sie Webworker implementieren, um classify() und classifyForVideo() in einem anderen Thread auszuführen.

Aufgabe ausführen

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

Im folgenden Code wird gezeigt, 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 vollständigere Implementierung zum Ausführen einer Aufgabe vom Typ „Bildklassifikator“ finden Sie im Codebeispiel.

Ergebnisse verarbeiten und anzeigen

Nach der Ausführung der Inferenz gibt die Aufgabe „Bildklassifikator“ ein ImageClassifierResult-Objekt zurück, das die Liste der möglichen Kategorien für die Objekte im Eingabebild oder -Frame enthält.

Im Folgenden finden 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 mit dem Vogelklassifikator für folgende Bilder erzielt:

Nahaufnahme eines Hausspatzes

Im Beispielcode für den Bildklassifikator wird gezeigt, wie die Klassifizierungsergebnisse angezeigt werden, die von der Aufgabe zurückgegeben werden. Weitere Informationen finden Sie im Codebeispiel.