Leitfaden zur Objekterkennung für das Web

Mit der Aufgabe „MediaPipe-Objektdetektor“ können Sie das Vorhandensein und den Standort mehrerer Klassen von Objekten erkennen. Bei dieser Aufgabe wird anhand von Bilddaten eine Liste von Erkennungsergebnissen ausgegeben, die jeweils ein im Bild identifiziertes Objekt darstellen. Das in dieser Anleitung beschriebene Codebeispiel ist auf CodePen verfügbar.

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 die Objekterkennung enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und Ihre eigene Textklassifizierungsanwendung erstellen. Sie können den Beispielcode für die Objekterkennung einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten der Entwicklungsumgebung speziell für die Verwendung des Objektdetektors beschrieben. Allgemeine Informationen zum Einrichten der Web- und JavaScript-Entwicklungsumgebung, einschließlich der Plattformversionsanforderungen, finden Sie im Einrichtungsleitfaden für das Web.

JavaScript-Pakete

Der Objektdetektorcode ist über das MediaPipe-@mediapipe/tasks-vision NPM-Paket verfügbar. Folgen Sie der Anleitung im Einrichtungsleitfaden für die Plattform, um diese Bibliotheken zu suchen und herunterzuladen.

Mit dem folgenden Befehl können Sie die erforderlichen Pakete über NPM installieren:

npm install @mediapipe/tasks-vision

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

Modell

Für die Aufgabe des MediaPipe-Objektdetektors ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für Objektdetektor 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

Verwenden Sie eine der ObjectDetector.createFrom...()-Funktionen des Objektdetektors, um die Aufgabe zum Ausführen von Inferenzen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn das Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden. Im folgenden Codebeispiel wird die Verwendung der createFromOptions()-Funktion veranschaulicht, mit der Sie weitere Konfigurationsoptionen festlegen können. Weitere Informationen zu den verfügbaren Konfigurationsoptionen finden Sie im Abschnitt Konfigurationsoptionen.

Der folgende Code zeigt, wie diese Aufgabe erstellt und konfiguriert wird:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

Eine umfassendere Implementierung zum Erstellen einer Aufgabe zur Objekterkennung finden Sie im Codebeispiel.

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 in einem Livestream mit Eingabedaten, z. B. von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	Legt die Sprache von Labels fest, die für Anzeigenamen bereitgestellt werden, 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.	Sprachcode	en
`maxResults`	Legt die optionale maximale Anzahl der Ergebnisse mit den besten Bewertungen fest, die zurückgegeben werden sollen.	Beliebige positive Zahlen	-1 (alle Ergebnisse werden zurückgegeben)
`scoreThreshold`	Legt den Schwellenwert für den Vorhersagewert fest, der den in den Modellmetadaten angegebenen Grenzwert überschreibt (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt.	Beliebige Gleitkommazahl	Nicht festgelegt
`categoryAllowlist`	Legt die optionale Liste der zulässigen Kategorienamen fest. Wenn das Feld nicht leer ist, werden Erkennungsergebnisse herausgefiltert, deren Kategoriename nicht in diesem Satz enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option und `categoryDenylist` schließen sich gegenseitig aus und die Verwendung beider Werte führt zu einem Fehler.	Beliebige Strings	Nicht festgelegt
`categoryDenylist`	Legt die optionale Liste der nicht zulässigen Kategorienamen fest. Wenn das Feld nicht leer ist, werden Erkennungsergebnisse herausgefiltert, deren Kategoriename in diesem Satz enthalten ist. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option und `categoryAllowlist` schließen sich gegenseitig aus und die Verwendung beider Optionen führt zu einem Fehler.	Beliebige Strings	Nicht festgelegt

Daten vorbereiten

Der Objektdetektor kann Objekte in Bildern in jedem Format erkennen, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung. Um Objekte in Videos zu erkennen, können Sie die API verwenden, um einzelne Frames schnell zu verarbeiten. Verwenden Sie dabei den Zeitstempel des Frames, um zu bestimmen, wann die Gesten im Video ausgeführt werden.

Task ausführen

Der Objektdetektor verwendet detect(), um an Einzelbildern zu arbeiten, und detectForVideo(), um Objekte in Videoframes zu erkennen. Die Aufgabe verarbeitet die Daten, versucht, Objekte zu erkennen und meldet dann die Ergebnisse.

Aufrufe der Methoden detect() und detectForVideo() werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Objekte in Videoframes von der Kamera eines Geräts erkennen, blockiert jede Klassifizierung den Hauptthread. Sie können dies verhindern, indem Sie Web Worker implementieren, um die Erkennung in einem anderen Thread auszuführen.

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

Bild

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

Video

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Eine vollständigere Implementierung zum Ausführen einer Objekterkennungsaufgabe finden Sie im Codebeispiel.

Ergebnisse verarbeiten und anzeigen

Der Objektdetektor generiert für jeden Erkennungslauf ein Erkennungsergebnisobjekt. Das Ergebnisobjekt enthält eine Liste von Erkennungsvorgängen, wobei jede Erkennung einen Begrenzungsrahmen und Kategorieinformationen über das erkannte Objekt enthält, einschließlich des Namens des Objekts und eines Konfidenzwerts.

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:

Der Beispielcode des Objektdetektors zeigt, wie die von der Aufgabe zurückgegebenen Erkennungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.