Die MediaPipe-Aufgabe „Interaktiver Bildsegmenter“ nimmt einen Ort in einem Bild, schätzt die Grenzen eines Objekts an diesem Ort und gibt die Segmentierung des Objekts als Bilddaten zurück. In dieser Anleitung erfahren Sie, wie Sie den interaktiven Bildsegmenter für Node- und Webanwendungen verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den interaktiven Bildsegmentierer 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 interaktiven Bildsegmentierungs-App beginnen. Sie können den Beispielcode für den interaktiven Bildsegmentierer ganz einfach in Ihrem Webbrowser ansehen, ausführen und bearbeiten. Sie können sich den Code für dieses Beispiel auch auf GitHub ansehen.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte beschrieben, die speziell für die Verwendung des interaktiven Bildsegmentierungstools entwickelt wurden. 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 interaktiven Bildsegmenter 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 --save @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:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modell
Für die Aufgabe „MediaPipe Interactive Image Segmenter“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den interaktiven Bildsegmenter 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 interaktiven Bildsegmentierungstools, 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 interaktiven Bildsegmenter 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 createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
Konfigurationsoptionen
Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Webanwendungen verfügbar:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
outputCategoryMask |
Wenn dieser Wert auf True gesetzt ist, enthält die Ausgabe eine Segmentierungsmaske als uint8-Bild, bei der jeder Pixelwert angibt, ob das Pixel zum Objekt im Bereich von Interesse gehört. |
{True, False} |
False |
outputConfidenceMasks |
Wenn dieser Wert auf True gesetzt ist, enthält die Ausgabe eine Segmentierungsmaske als Bild mit Gleitkommawerten. Jeder Gleitkommawert gibt die Wahrscheinlichkeit an, dass das Pixel Teil des Objekts im interessierenden Bereich ist. |
{True, False} |
True |
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 |
Daten vorbereiten
Mit dem interaktiven Bildsegmentierungstool können Objekte in Bildern in jedem vom Host-Browser unterstützten Format segmentiert werden. Die Aufgabe umfasst auch die Vorverarbeitung der Dateneingabe, einschließlich Größenänderung, Drehung und Wertnormalisierung.
Aufrufe der Methoden segment() und segmentForVideo() des interaktiven Bildsegmentierungstools werden synchron ausgeführt und blockieren den Benutzeroberflächen-Thread. Wenn Sie Objekte in Videoframes von der Kamera eines Geräts segmentieren, blockiert jede Segmentierungsaufgabe den Hauptthread. Sie können dies verhindern, indem Sie Webworker implementieren, um segment() und segmentForVideo() in einem anderen Thread auszuführen.
Aufgabe ausführen
Der interaktive Bildsegmenter verwendet die Methode segment(), um Inferenzen auszulösen. Der interaktive Bildsegmentierer gibt die erkannten Segmente als Bilddaten an eine Rückruffunktion zurück, die Sie beim Ausführen einer Inferenz für die Aufgabe festgelegt haben.
Im folgenden Code wird gezeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);
Eine vollständigere Implementierung zum Ausführen einer Aufgabe des interaktiven Bildsegmentierungstools finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Nach der Ausführung der Inferenz gibt die Aufgabe „Interaktiver Bildsegmentierer“ Segmentbilddaten an eine Rückruffunktion zurück. Die Ausgabe enthält Bilddaten und kann eine Kategoriemaske, Konfidenzmasken oder beides enthalten, je nachdem, was Sie bei der Konfiguration der Aufgabe festgelegt haben.
In den folgenden Abschnitten werden die Ausgabedaten dieser Aufgabe näher erläutert:
Kategoriemaske
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategoriewertmaske mit einem Punktbereich von Interesse. Jeder Pixel hat einen uint8-Wert, der angibt, ob er zum Objekt im gewünschten Bereich gehört. Der schwarz-weiße Kreis auf dem zweiten Bild zeigt den ausgewählten Bereich an.
Originalbild und Kategoriemaskenausgabe. Quellbild aus dem Pascal VOC 2012-Dataset.
Konfidenzmaske
Die Ausgabe einer Konfidenzmaske enthält für jeden Bildeingabekanal Gleitkommawerte zwischen [0, 1]. Je höher der Wert, desto höher ist die Wahrscheinlichkeit, dass das Bildpixel Teil des Objekts ist, das sich im Bereich von Interesse befindet.
Im Beispielcode für den interaktiven Bildsegmenter wird gezeigt, wie die Klassifizierungsergebnisse angezeigt werden, die von der Aufgabe zurückgegeben werden. Weitere Informationen finden Sie im Codebeispiel.