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. 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 .