Mit der MediaPipe-Aufgabe „Bildsegmentierung“ können Sie Bilder basierend auf vordefinierten Kategorien in Regionen unterteilen, um visuelle Effekte wie das Weichzeichnen des Hintergrunds anzuwenden. In dieser Anleitung wird gezeigt, wie Sie den 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 Bildsegmentierer bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen App zur Bildsegmentierung beginnen. Sie können den Beispielcode für den Bildsegmenter ganz einfach in Ihrem Webbrowser aufrufen, 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 Bildsegmentierungstools vorgesehen sind. 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 Bildsegmenter ist über das @mediapipe/tasks-vision
NPM-Paket von MediaPipe 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 MediaPipe-Aufgabe „Bildsegmentierung“ ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für den 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 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 Bildsegmenter mit Konfigurationsoptionen anpassen. Weitere Informationen zur Aufgabenkonfiguration finden Sie unter Konfigurationsoptionen.
Im folgenden Code wird gezeigt, wie die Aufgabe mit benutzerdefinierten Optionen erstellt und konfiguriert wird:
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 Image Segmenter-Aufgabe finden Sie im Codebeispiel.
Konfigurationsoptionen
Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Webanwendungen verfügbar:
| Option | Beschreibung | Wertebereich | Standardwert |
|---|---|---|---|
outputCategoryMask |
Wenn dieser Wert auf True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als uint8-Bild, bei der jeder Pixelwert den Wert der Gewinnerkategorie angibt. |
{True, False} |
False |
outputConfidenceMasks |
Wenn dieser Parameter auf True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als Bild mit Gleitkommawerten. Dabei steht jeder Gleitkommawert für die Konfidenzkarte der Kategorie. |
{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 |
resultListener |
Legt fest, dass der Ergebnisempfänger die Segmentierungsergebnisse asynchron empfängt, wenn sich der Bildsegmenter im Modus LIVE_STREAM befindet.
Kann nur verwendet werden, wenn der Ausführungsmodus auf LIVE_STREAM festgelegt ist. |
– | – |
Daten vorbereiten
Mit dem 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 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 Bildsegmenter verwendet die Methode segment() mit dem Bildmodus und die Methode segmentForVideo() mit dem Modus video, um Inferenzen auszulösen. Der Bildsegmentierungsalgorithmus 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:
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 Aufgabe des Bildsegmentierungstools finden Sie im Codebeispiel.
Ergebnisse verarbeiten und anzeigen
Nach der Ausführung der Inferenz gibt die Aufgabe „Bildsegmentierung“ Segmentbilddaten an eine Rückruffunktion zurück. Der Inhalt der Ausgabe hängt von der outputType ab, die Sie bei der Konfiguration der Aufgabe festgelegt haben.
In den folgenden Abschnitten finden Sie Beispiele für die Ausgabedaten dieser Aufgabe:
Kategoriesicherheit
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategorie-Konfidenzmaske. Die Ausgabe der Konfidenzmaske enthält Gleitkommawerte zwischen [0, 1].
Originalbild und Ausgabe der Kategorie-Konfidenzmaske. Quellbild aus dem Pascal VOC 2012-Dataset.
Kategoriewert
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategoriewertmaske. Der Bereich der Kategoriemaske ist [0, 255] und jeder Pixelwert entspricht dem Index der Gewinnerkategorie der Modellausgabe. Der Index der Gewinnerkategorie hat die höchste Punktzahl unter den Kategorien, die das Modell erkennen kann.
Originalbild und Kategoriemaskenausgabe. Quellbild aus dem Pascal VOC 2012-Dataset.
Im Beispielcode für den Bildsegmenter wird gezeigt, wie die von der Aufgabe zurückgegebenen Segmentierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Codebeispiel.