Mit der MediaPipe Image Segmenter-Aufgabe 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 Image Segmenter 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 Image Segmenter bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Bildsegmentierungsanwendung beginnen. Sie können das Image Segmenter Beispiel einfach in Ihrem Webbrowser ansehen, ausführen und bearbeiten.
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Ihrer Codeprojekte speziell für die Verwendung von Image Segmenter beschrieben. Allgemeine Informationen zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von 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
finden und herunterladen.
Sie können 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 CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code im -Tag in Ihrer HTML-Datei hinzu:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modell
Für die MediaPipe Image Segmenter-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Image Segmenter finden Sie unter Aufgabenübersicht 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 Image Segmenter-Funktionen createFrom...(), um die Aufgabe für die Ausführung von Inferenzvorgängen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie die Methode createFromModelBuffer() verwenden.
Das folgende Codebeispiel zeigt die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe. Mit der Funktion createFromOptions können Sie Image Segmenter mit Konfigurationsoptionen anpassen. Weitere Informationen zur Aufgaben
konfiguration 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 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 diese Option auf True gesetzt ist, enthält die Ausgabe eine Segmentierungsmaske
als ein uint8-Bild. Jeder Pixelwert gibt den Wert der Gewinnerkategorie
an. |
{True, False} |
False |
outputConfidenceMasks |
Wenn diese Option auf True gesetzt ist, enthält die Ausgabe eine Segmentierungsmaske
als Bild mit Gleitkommawerten. Jeder Gleitkommawert stellt die Konfidenz
Bewertungskarte der Kategorie dar. |
{True, False} |
True |
displayNamesLocale |
Legt die Sprache der Labels fest, die für Anzeigenamen verwendet werden sollen, die in den
Metadaten des Modells der Aufgabe angegeben sind, sofern verfügbar. Der Standardwert ist en für
Englisch. Sie können den Metadaten eines benutzerdefinierten Modells lokalisierte Labels mit der TensorFlow Lite Metadata Writer API hinzufügen. |
Ländercode | de |
resultListener |
Legt den Ergebnis-Listener fest, der die Segmentierungsergebnisse
asynchron empfängt, wenn sich Image Segmenter im Modus LIVE_STREAM befindet.
Kann nur verwendet werden, wenn der Ausführungsmodus auf LIVE_STREAM gesetzt ist. |
– | – |
Daten vorbereiten
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ößenänderung, Drehung und Wertnormalisierung.
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 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.
Aufgabe ausführen
Image Segmenter verwendet die segment() Methode im Bildmodus und die
segmentForVideo() Methode im video Modus, um Inferenzvorgänge auszulösen. Image Segmenter gibt die erkannten Segmente als Bilddaten an eine Callback-Funktion zurück, die Sie beim Ausführen eines Inferenzvorgangs für die Aufgabe festlegen.
Der folgende Code zeigt, wie Sie die Verarbeitung mit dem Aufgabenmodell ausführen:
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 Beispiel.
Ergebnisse verarbeiten und anzeigen
Nach der Ausführung des Inferenzvorgangs gibt die Image Segmenter-Aufgabe Segmentbilddaten an eine Callback-Funktion zurück. Der Inhalt der Ausgabe hängt vom outputType ab, den Sie festgelegt haben
, wenn Sie die Aufgabe konfiguriert haben.
In den folgenden Abschnitten finden Sie Beispiele für die Ausgabedaten dieser Aufgabe:
Konfidenz der Kategorie
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Maske der Konfidenz der Kategorie. Die Ausgabe der Konfidenzmaske enthält Gleitkommawerte zwischen [0, 1].
Originalbild und Ausgabe der Maske der Konfidenz der Kategorie. Quellbild aus dem PASCAL VOC 2012 Dataset.
Kategoriewert
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Maske des Kategoriewerts. Der Bereich der Kategorienmaske ist [0, 255] und jeder Pixelwert stellt den Index der Gewinnerkategorie der Modellausgabe dar. Der Index der Gewinnerkategorie hat die höchste Bewertung unter den Kategorien, die das Modell erkennen kann.
Originalbild und Ausgabe der Kategorienmaske. Quellbild aus dem PASCAL VOC 2012 Dataset.
Der Beispielcode für Image Segmenter zeigt, wie die von der Aufgabe zurückgegebenen Segmentierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Beispiel .