Mit der Aufgabe „Interactive Image Segmenter“ von MediaPipe wird eine Position in einem Bild ermittelt, die Begrenzungen an diesem Ort und gibt die Segmentierung für das Objekt als Bild zurück Daten. In dieser Anleitung erfahren Sie, wie Sie den Interactive Image Segmenter für Node und Web verwenden Apps. Weitere Informationen zu Funktionen, Modellen und Konfiguration Weitere Informationen finden Sie in der Übersicht.
Codebeispiel
Der Beispielcode für den interaktiven Image-Segmenter bietet eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und beginnen Sie mit der Entwicklung Ihrer eigenen interaktiven App zur Bildsegmentierung. Sie können Interaktive Bildsegmentierung Beispielcode ganz einfach in Ihrem Webbrowser. Sie können sich 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 interaktiven 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
Interaktiver Bildsegmentierungscode 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 „Interactive Image Segmenter“ von MediaPipe ist ein trainiertes Modell erforderlich, für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für den Interactive Image Segmenter 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 den createFrom...()-Funktionen des interaktiven Bildsegmentierers
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
Interaktive Bildsegmentierung mit Konfigurationsoptionen Weitere Informationen zur Konfiguration
finden Sie unter Konfigurationsoptionen.
Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen:
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 eines
das Objekt, das sich im gewünschten Bereich befindet. |
{True, False} |
False |
outputConfidenceMasks |
Wenn True festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske
als Gleitkommawert, wobei jeder Gleitkommawert den Konfidenzwert darstellt
Das Pixel ist Teil des Objekts, das sich im gewünschten Bereich befindet. |
{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 |
Daten vorbereiten
Mit der interaktiven 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 Methoden segment() und segmentForVideo() des interaktiven Bildsegmenters
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
Die interaktive Bildsegmentierung verwendet die Methode segment(), um Inferenzen auszulösen. Die
Die interaktive 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:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);