Google AI Edge Portal: Edge-KI im großen Maßstab benchmarken. Melden Sie sich an, um während der privaten Vorschau Zugriff anzufordern.

Leitfaden zur Bildklassifizierung für das Web

Mit der MediaPipe Image Classifier-Aufgabe können Sie Bilder klassifizieren. Mit dieser Aufgabe können Sie ermitteln, was ein Bild aus einer Reihe von Kategorien darstellt, die während des Trainings definiert wurden. In dieser Anleitung erfahren Sie, wie Sie den Bildklassifikator für Node- und Web-Apps verwenden.

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

Codebeispiel

Der Beispielcode für Image Classifier enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Bildklassifizierungs-App beginnen. Sie können das Beispiel für die Bildklassifizierung einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und von Codeprojekten speziell für die Verwendung von Image Classifier beschrieben. Allgemeine Informationen zum Einrichten Ihrer 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 Image Classifier-Code ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden der Plattform aufrufen und herunterladen.

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

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <code><head></code>-Tag 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.mjs"
    crossorigin="anonymous"></script>
</head>

Modell

Für die MediaPipe Image Classifier-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Image Classifier 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 Inferenz zu vorbereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Im folgenden Codebeispiel wird die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe veranschaulicht. 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 Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:

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 Anzeigenamen verwendet werden sollen, die in den Metadaten des Modells der Aufgabe angegeben sind, sofern verfügbar. Der Standardwert ist `en` für Englisch. Sie können den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen. Verwenden Sie dazu die TensorFlow Lite Metadata Writer API.	Gebietsschemacode	de
`maxResults`	Legt die optionale maximale Anzahl der zurückzugebenden Klassifizierungsergebnisse mit der höchsten Punktzahl fest. Wenn der Wert < 0 ist, werden alle verfügbaren Ergebnisse zurückgegeben.	Beliebige positive Zahlen	`-1`
`scoreThreshold`	Legt den Vorhersagewert-Schwellenwert 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 nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename nicht in dieser Menge enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt `categoryDenylist` aus. Wenn Sie beide verwenden, wird ein Fehler ausgegeben.	Beliebige Strings	Nicht festgelegt
`categoryDenylist`	Legt die optionale Liste der Kategorienamen fest, die nicht zulässig sind. Wenn nicht leer, werden Klassifizierungsergebnisse herausgefiltert, deren Kategoriename in dieser Menge enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option schließt `categoryAllowlist` aus. Wenn Sie beide verwenden, wird ein Fehler ausgegeben.	Beliebige Strings	Nicht festgelegt
`resultListener`	Legt den Ergebnis-Listener fest, der die Klassifizierungsergebnisse asynchron empfängt, wenn sich der Image Classifier im Livestream-Modus befindet. Kann nur verwendet werden, wenn der Ausführungsmodus auf `LIVE_STREAM` festgelegt ist.	–	Nicht festgelegt

Daten vorbereiten

Mit Image Classifier können Objekte in Bildern in jedem Format klassifiziert werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung.

Aufrufe der Image Classifier-Methoden classify() und classifyForVideo() werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Objekte in Videoframes der Kamera eines Geräts klassifizieren, blockiert jede Klassifizierung den Hauptthread. Sie können dies verhindern, indem Sie Web Workers 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 Inferenzvorgänge 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 vollständigere Implementierung zum Ausführen einer Image Classifier-Aufgabe finden Sie im Beispiel.

Ergebnisse verarbeiten und anzeigen

Nach der Ausführung der Inferenz gibt die Aufgabe „Bildklassifizierung“ 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 durch Ausführen des Bird Classifier für Folgendes erzielt:

Nahaufnahme eines Haussperlings

Im Beispielcode für die Bildklassifizierung wird gezeigt, wie die von der Aufgabe zurückgegebenen Klassifizierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Beispiel.