Mit der MediaPipe Object Detector-Aufgabe können Sie das Vorhandensein und die Position mehrerer Objektklassen erkennen. Bei dieser Aufgabe werden Bilddaten verwendet und eine Liste mit Erkennungsergebnissen ausgegeben, die jeweils ein im Bild identifiziertes Objekt darstellen. Sie können das Beispiel für den Objekterkennungs-Detektor einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.
Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von Object Detector beschrieben. Allgemeine Informationen zum Einrichten Ihrer Web- und JavaScript-Entwicklungsumgebung, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der Object Detector-Code ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken gemäß der Anleitung im Einrichtungsleitfaden der Plattform suchen und herunterladen.
Sie können die erforderlichen Pakete über NPM 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 <head>-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.mjs"
crossorigin="anonymous"></script>
</head>
Modell
Für die MediaPipe Object Detector-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für den Objektdetektor 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 ObjectDetector.createFrom...()-Funktionen des Objekterkennungsmodells, um die Aufgabe für die Ausführung von Inferenzvorgängen vorzubereiten. 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. Das folgende Codebeispiel zeigt die Verwendung der Funktion createFromOptions(), 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 Sie diese Aufgabe erstellen und konfigurieren:
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 vollständigere Implementierung zum Erstellen einer Object Detector-Aufgabe finden Sie im Codebeispiel.
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 Erkennungsergebnisse mit den höchsten Punktzahlen fest. | Beliebige positive Zahlen | -1 (alle Ergebnisse werden zurückgegeben) |
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 Erkennungsergebnisse 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 Erkennungsergebnisse 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 |
Daten vorbereiten
Mit Object Detector können Objekte in Bildern in jedem Format erkannt werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung. Wenn Sie Objekte in Videos erkennen möchten, können Sie mit der API jeweils einen Frame schnell verarbeiten. Anhand des Zeitstempels des Frames lässt sich ermitteln, wann die Gesten im Video auftreten.
Aufgabe ausführen
Der Objektdetektor verwendet detect() für die Verarbeitung einzelner Bilder und detectForVideo() für die Erkennung von Objekten in Videoframes. Die Aufgabe verarbeitet die Daten, versucht, Objekte zu erkennen, und gibt dann die Ergebnisse aus.
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 Haupt-Thread. 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 der Ausführung einer Object Detector-Aufgabe finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Der Objektdetektor generiert für jeden Erkennungslauf ein Erkennungsergebnisobjekt. Das Ergebnisobjekt enthält eine Liste von Erkennungen, wobei jede Erkennung einen Begrenzungsrahmen und Kategorieinformationen zum erkannten 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
Das folgende Bild zeigt eine Visualisierung der Aufgabenausgabe:
Der Beispielcode für den Objekterkennung zeigt, wie die von der Aufgabe zurückgegebenen Erkennungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.