Mit der Aufgabe MediaPipe Image Segmenter können Sie Bilder basierend auf vordefinierten Kategorien für visuelle Effekte wie das Weichzeichnen des Hintergrunds. Diese Anleitung zur Verwendung des Image Segmenters für Node.js- und Web-Apps. Für über die Funktionen, Modelle und Konfigurationsoptionen finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für Image Segmenter bietet eine vollständige Implementierung dieses in JavaScript ausführen. Dieser Code hilft Ihnen, diese Aufgabe zu testen und Erstellen Sie Ihre eigene App zur Bildsegmentierung. Sie können Daten abrufen, ausführen, und bearbeiten Sie den Bildsegmenter Beispielcode ganz einfach in Ihrem Webbrowser. Sie können den Code für dieses Beispiel auch GitHub
Einrichtung
In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Code-Projekte zur Verwendung des Image Segmenter erstellen. Allgemeine Informationen zu Einrichten Ihrer Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web
JavaScript-Pakete
Der Bildsegmentierungs-Code ist über MediaPipe @mediapipe/tasks-vision
verfügbar
NPM-Paket. Sie können
Sie können diese Bibliotheken über die auf der Plattform bereitgestellten Links finden und herunterladen.
Leitfaden für die Einrichtung
Sie können die erforderlichen Pakete mit dem folgenden Code für das lokale Staging installieren mit dem folgenden Befehl:
npm install --save @mediapipe/tasks-vision
Wenn Sie den Aufgabencode über ein Content Delivery Network (CDN) importieren möchten fügen Sie 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 Aufgabe „MediaPipe Image Segmenter“ ist ein trainiertes Modell erforderlich, . Weitere Informationen zu verfügbaren trainierten Modellen für den Bildsegmentator finden Sie unter 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
Mit einer der createFrom...()
-Funktionen des Bildsegmenters
die Aufgabe für die Ausführung von Inferenzen vorbereiten. createFromModelPath()
verwenden
mit einem relativen oder absoluten Pfad zur trainierten Modelldatei.
Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den
createFromModelBuffer()
-Methode.
Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions()
die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions
können Sie die
Image Segmenter mit Konfigurationsoptionen Weitere Informationen zur Aufgabe
finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie die Aufgabe mit benutzerdefinierten Optionen:
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 ausführlichere Implementierung der Erstellung einer Bildsegmentierungs-Aufgabe finden Sie in der Codebeispiel an.
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 die Gewinnerkategorie angibt
Wert. |
{True, False } |
False |
outputConfidenceMasks |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske
als Gleitkommawert, wobei jeder Gleitkommawert den Konfidenzwert darstellt
Kurzübersicht der Kategorie. |
{True, False } |
True |
displayNamesLocale |
Legt die Sprache der Labels fest, die für Anzeigenamen in der
Metadaten des Aufgabenmodells, falls verfügbar. Standardwert ist en für
Englisch. Sie können den Metadaten eines benutzerdefinierten Modells lokalisierte Labels hinzufügen
mit der TensorFlow Lite Metadata Writer API |
Gebietsschemacode | de |
resultListener |
Legt den Ergebnis-Listener fest, der die Segmentierungsergebnisse empfangen soll
asynchron, wenn sich der Bildsegmentierer im LIVE_STREAM -Modus befindet.
Kann nur verwendet werden, wenn der Ausführungsmodus auf LIVE_STREAM festgelegt ist |
– | – |
Daten vorbereiten
Mit der Bildsegmentierung können Objekte in Bildern in jedem Format segmentiert werden, das vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung.
Aufrufe der Bildsegmentierungsmethoden segment()
und segmentForVideo()
und den Benutzeroberflächen-Thread blockieren. Wenn Sie Objekte in
der Kamera eines Geräts teilen, blockiert jede Segmentierungsaufgabe die Haupt-
Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker so implementieren,
segment()
und segmentForVideo()
in einem anderen Thread.
Aufgabe ausführen
Für die Bildsegmentierung wird die segment()
-Methode mit dem Bildmodus und den
segmentForVideo()
mit dem Modus video
, um Inferenzen auszulösen. Die
Die Bildsegmentierung gibt die erkannten Segmente als Bilddaten an einen Callback zurück.
-Funktion, die Sie beim Ausführen einer Inferenz für die Task festlegen.
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 ausführlichere Implementierung der Ausführung einer Bildsegmentierungs-Aufgabe finden Sie in der Codebeispiel an.
Ergebnisse verarbeiten und anzeigen
Beim Ausführen einer Inferenz gibt die Bildsegmentierungs-Aufgabe Segmentbilddaten an ein
Callback-Funktion verwendet werden. Der Inhalt der Ausgabe hängt von der von Ihnen festgelegten outputType
ab
bei der Konfiguration der Aufgabe.
In den folgenden Abschnitten finden Sie 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 Konfidenzmaske des Originalbilds und der Kategorie. Quellbild aus Pascal VOC 2012 Dataset.
Kategoriewert
Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Kategorie
Wertmaske. Der Bereich der Kategoriemaske ist [0, 255]
und jeder Pixelwert
stellt den erfolgreichen Kategorieindex der Modellausgabe dar. Die Gewinnerkategorie
Index die höchste Punktzahl unter den Kategorien hat, die das Modell erkennen kann.
Ausgabe des Originalbilds und der Kategoriemaske. Quellbild aus Pascal VOC 2012 Dataset.
Der Beispielcode für die Bildsegmentierung zeigt, wie die Segmentierung angezeigt wird. der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel .