Leitfaden zur Bildsegmentierung für das Web

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. 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. 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 sich den Code für dieses Beispiel auch auf GitHub ansehen.

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 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 Staging-Umgebung 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 Aufgabe „MediaPipe Image Segmenter“ ist ein trainiertes Modell erforderlich, für die Aufgabe. 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 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. 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 die Image Segmenter mit Konfigurationsoptionen 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 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. Der 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 dem Bildsegmentierungstool können Objekte in Bildern in jedem vom Host-Browser unterstützten Format segmentiert werden. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation 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 aus 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. 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 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 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. Quell-Image von 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 Kategorie, die in der Modellausgabe als Gewinner ausgewählt wurde. Der Index der Gewinnerkategorie hat die höchste Punktzahl unter den Kategorien, die das Modell erkennen kann.

Ausgabe des Originalbilds und der Kategoriemaske. Quell-Image von 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 .