Mit der Aufgabe „MediaPipe-Bildsegmentierung“ können Sie Bilder anhand vordefinierter Kategorien in Regionen unterteilen, um visuelle Effekte wie das Weichzeichnen des Hintergrunds anzuwenden. In dieser Anleitung erfahren Sie, wie Sie den Image Segmenter für Node- und Web-Apps verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für Image Segmenter bietet eine vollständige Implementierung dieser Aufgabe in JavaScript als Referenz. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Anwendung zur Bildsegmentierung beginnen. Sie können den Beispielcode für die Image Segmentierung 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 von 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 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-Bildsegmentierungsaufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für 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 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 Image Segmenter mit Konfigurationsoptionen anpassen. Weitere Informationen zur Aufgabenkonfiguration finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
Eine vollständigere Implementierung zum Erstellen einer Aufgabe zur Bildsegmentierung 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 |
outputCategoryMask |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als uint8-Bild, wobei jeder Pixelwert den Wert der erfolgreichen Kategorie angibt. |
{True, False} |
False |
outputConfidenceMasks |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als Gleitkommazahlbild, wobei jeder Gleitkommawert die Konfidenzwertzuordnung der Kategorie darstellt. |
{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
Mit dem Image Segmenter können Objekte in Bildern in jedem Format segmentiert werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung.
Aufrufe der Image Segmenter-Methoden segment() und segmentForVideo() 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 Image Segmenter verwendet die Methode segment() mit dem Bildmodus und die Methode segmentForVideo() mit dem Modus video, um Inferenzen auszulösen. Der 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:
Bild
const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void {
const video = document.getElementById("video");
let startTimeMs = performance.now();
imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);
requestAnimationFrame(() => {
renderLoop();
});
}
Eine vollständigere Implementierung zum Ausführen einer Image Segmenter-Aufgabe finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Beim Ausführen der Inferenz gibt die Aufgabe zur Segmentierung von Bildern segmentierte Bilddaten an eine Callback-Funktion zurück. Der Inhalt der Ausgabe hängt von dem outputType ab, den Sie bei der Konfiguration der Aufgabe festgelegt haben.
Die folgenden Abschnitte enthalten Beispiele für die Ausgabedaten dieser Aufgabe:
Kategorie Konfidenz
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategorie-Konfidenzmaske. Die Ausgabe der Konfidenzmaske enthält Gleitkommawerte zwischen [0, 1].
Ausgabe der Originalbild- und Kategorie-Konfidenzmaske. Quellbild aus dem Dataset Pascal VOC 2012.
Kategoriewert
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategoriewertmaske. Der Kategoriemaskenbereich ist [0, 255] und jeder Pixelwert stellt den erfolgreichen Kategorieindex der Modellausgabe dar. Der Index der erfolgreichen Kategorie hat den höchsten Wert unter den Kategorien, die das Modell erkennen kann.
Ausgabe des Originalbilds und der Kategoriemaske. Quellbild aus dem Dataset Pascal VOC 2012.
Der Beispielcode für die Bildsegmentierung zeigt, wie die von der Aufgabe zurückgegebenen Segmentierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.