Die MediaPipe Interactive Image Segmenter-Aufgabe nimmt eine Position in einem Bild, schätzt die Grenzen eines Objekts an diesem Ort und gibt die Segmentierung für das Objekt als Bilddaten zurück. In dieser Anleitung erfahren Sie, wie Sie den Interactive Image Segmenter für Knoten und Webanwendungen verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für „Interactive Image Segmenter“ bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen interaktiven App zur Segmentierung von Bildern beginnen. Sie können den Beispielcode für den interaktiven Image Segmenter einfach in Ihrem Webbrowser aufrufen, ausführen und bearbeiten. Sie können den Code für dieses Beispiel auch auf GitHub ansehen.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte speziell für die Verwendung des Interactive Image Segmenter beschrieben. Allgemeine Informationen zum Einrichten der Entwicklungsumgebung für MediaPipe-Aufgaben, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.
JavaScript-Pakete
Der interaktive Image Segmenter-Code ist über das MediaPipe-@mediapipe/tasks-vision
NPM-Paket verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden für die Plattform herunterladen.
Mit dem folgenden Befehl können Sie die erforderlichen Pakete mit dem folgenden Code für das lokale Staging installieren:
npm install --save @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 Tag in Ihrer HTML-Datei ein:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modell
Für die MediaPipe Interactive Image Segmenter-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den Interactive Image Segmenter 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 createFrom...()-Funktionen des interaktiven Image Segmenters, 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.
Das folgende Codebeispiel zeigt, wie Sie die Aufgabe mit der Funktion createFromOptions() einrichten. Mit der Funktion createFromOptions können Sie den interaktiven Image-Segmenter 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 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
Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Webanwendungen:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
outputCategoryMask |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als uint8-Bild, wobei jeder Pixelwert angibt, ob das Pixel Teil des Objekts ist, das sich im betreffenden Bereich befindet. |
{True, False} |
False |
outputConfidenceMasks |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als Gleitkommazahlbild, wobei jeder Gleitkommawert die Konfidenz darstellt, dass das Pixel Teil des Objekts ist, das sich im relevanten Bereich befindet. |
{True, False} |
True |
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 |
Daten vorbereiten
Das interaktive Image Segmenter kann Objekte in Bildern in jedem Format segmentieren, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung.
Aufrufe der Methoden segment() und segmentForVideo() des Interactive Image Segmenters werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Objekte in Videoframes von der Kamera eines Geräts aus segmentieren, blockiert jede Segmentierungsaufgabe den Hauptthread. Sie können dies verhindern, indem Sie Web-Worker implementieren, um segment() und segmentForVideo() in einem anderen Thread auszuführen.
Task ausführen
Der Interactive Image Segmenter verwendet die segment()-Methode, um Inferenzen auszulösen. Der Interactive Image Segmenter gibt die erkannten Segmente als Bilddaten an eine Callback-Funktion zurück, die Sie beim Ausführen einer Inferenz für die Aufgabe festgelegt haben.
Der folgende Code zeigt, 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 zur interaktiven Bildsegmentierung finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Beim Ausführen der Inferenz gibt die Aufgabe zur interaktiven Bildsegmentierung weitere Segmentbilddaten an eine Callback-Funktion zurück. Der Inhalt der Ausgabe besteht aus Bilddaten und kann je nachdem, was Sie bei der Konfiguration der Aufgabe festgelegt haben, eine Kategoriemaske, Konfidenzmasken oder beides enthalten.
In den folgenden Abschnitten werden die Ausgabedaten dieser Aufgabe weiter erläutert:
Kategoriemaske
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategoriewertmaske, wobei ein POI-Bereich angegeben ist. Jedes Pixel ist ein uint8-Wert, der angibt, ob das Pixel Teil des Objekts ist, das sich am relevanten Bereich befindet. Der schwarz-weiße Kreis auf dem zweiten Bild zeigt den ausgewählten Bereich an, der von Interesse ist.
Ausgabe des Originalbilds und der Kategoriemaske. Quellbild aus dem Dataset Pascal VOC 2012.
Konfidenzmaske
Die Ausgabe für eine Konfidenzmaske enthält Gleitkommawerte zwischen [0, 1] für jeden Bildeingabekanal. Höhere Werte weisen auf eine höhere Wahrscheinlichkeit hin, dass das Bildpixel Teil des Objekts ist, das sich im betreffenden Bereich befindet.
Der Beispielcode des Interactive Image Segmenter zeigt, wie die von der Aufgabe zurückgegebenen Klassifizierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.