Mit der Aufgabe „MediaPipe Object Detector“ können Sie das Vorhandensein und den Standort mehrerer Klassen von -Objekten. Bei dieser Aufgabe wird anhand von Bilddaten eine Liste der Erkennungsmechanismen ausgegeben. , die jeweils ein im Bild identifiziertes Objekt darstellen. Das Codebeispiel in dieser Anleitung beschrieben wird, ist auf CodePen herunter.
Sie können diese Aufgabe in Aktion sehen, indem Sie die Demo ansehen. Weitere Informationen zu den Funktionen, Modellen und Die Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den Objektdetektor bietet eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Textklassifizierungs-App beginnen. Sie können Daten abrufen, ausführen und Bearbeiten Sie den Beispielcode für die Objekterkennung. ganz einfach in Ihrem Webbrowser.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. zur Verwendung des Objektdetektors. Allgemeine Informationen zu Ihre Web- und JavaScript-Entwicklungsumgebung einrichten, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web
JavaScript-Pakete
Der Objektdetektorcode ist über MediaPipe @mediapipe/tasks-vision verfügbar
NPM-Paket. Sie können
Sie können diese Bibliotheken finden und herunterladen, indem Sie der Anleitung auf der Plattform folgen.
Leitfaden für die Einrichtung
Sie können die erforderlichen Pakete über NPM installieren mit dem folgenden Befehl:
npm install @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten
fügen Sie 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 „MediaPipe Object Detector“ ist ein trainiertes Modell erforderlich, das mit dieser für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für die Objekterkennung finden Sie unter 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 für die Ausführung von Inferenzen vorbereiten. createFromModelPath() verwenden
mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den
createFromModelBuffer()-Methode. Im Codebeispiel unten wird gezeigt, wie Sie
der Funktion createFromOptions(), mit der Sie mehr Konfigurationseinstellungen
Optionen. Weitere Informationen zu den verfügbaren Konfigurationsoptionen finden Sie unter
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 vollständigere Implementierung der Erstellung einer Objekterkennungsaufgabe finden Sie in der Codebeispiel an.
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 einer Video oder in einem Livestream mit Eingabedaten, etwa von einer Kamera. |
{IMAGE, VIDEO} |
IMAGE |
displayNamesLocale |
Legt die Sprache der Labels fest, die für Anzeigenamen in der
Metadaten des Aufgabenmodells, falls verfügbar. Standardwert ist en für
Englisch. Sie können den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen
mit der TensorFlow Lite Metadata Writer API
|
Gebietsschemacode | de |
maxResults |
Legt die optionale maximale Anzahl der am besten bewerteten Erkennungsergebnisse fest auf zurückgeben. | Beliebige positive Zahlen | -1 (alle Ergebnisse werden zurückgegeben) |
scoreThreshold |
Legt den Schwellenwert für die Vorhersagepunktzahl fest, der den Wert in die Modellmetadaten (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,
Erkennungsergebnisse, deren Kategoriename nicht in dieser Liste enthalten ist, werden
herausgefiltert. Doppelte oder unbekannte Kategorienamen werden ignoriert.
Diese Option schließt sich mit categoryDenylist gegenseitig aus und verwendet
führt beides zu einem Fehler. |
Alle Strings | Nicht festgelegt |
categoryDenylist |
Legt die optionale Liste der unzulässigen Kategorienamen fest. Wenn
nicht leer ist, werden Erkennungsergebnisse gefiltert, deren Kategoriename in dieser Gruppe enthalten ist
aus. Doppelte oder unbekannte Kategorienamen werden ignoriert. Diese Option
ausschließlich mit categoryAllowlist und die Verwendung beider führt zu einem Fehler. |
Alle Strings | Nicht festgelegt |
Daten vorbereiten
Mit der Objekterkennung können Objekte in Bildern in jedem vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung. Um Objekte in Videos zu erkennen, einen Frame nach dem anderen schnell verarbeiten kann. Dazu verwenden wir den Zeitstempel des um zu bestimmen, wann die Gesten im Video vorkommen.
Aufgabe ausführen
Die Objekterkennung nutzt detect(), um an einzelnen Bildern und
detectForVideo() erkennt Objekte in Videoframes. Die Aufgabe verarbeitet
versucht, Objekte zu erkennen, und meldet dann die Ergebnisse.
Aufrufe der Methoden detect() und detectForVideo() werden ausgeführt
und den Benutzeroberflächen-Thread blockieren. Wenn Sie Objekte in
der Kamera eines Geräts teilen, blockiert jede Klassifizierung die wichtigsten
Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker zur Ausführung der Erkennung auf
in einem anderen Thread.
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 ausführlichere Implementierung der Ausführung einer Objekterkennungsaufgabe finden Sie in der Codebeispiel an.
Ergebnisse verarbeiten und anzeigen
Der Objektdetektor generiert für jeden Erkennungslauf ein Erkennungsergebnisobjekt. Das Ergebnisobjekt enthält eine Liste von Erkennungen, wobei für jede Erkennung Folgendes angegeben ist: einen Begrenzungsrahmen und Kategorieinformationen über das erkannte Objekt, einschließlich des Name des Objekts und einen Konfidenzwert.
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:
Im Beispielcode für die Objekterkennung wird veranschaulicht, wie die Erkennung der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel .