Google AI Edge Portal: Edge-KI im großen Maßstab benchmarken. Melden Sie sich an, um während der privaten Vorschau Zugriff anzufordern.

Interaktiver Leitfaden zur Bildsegmentierung für das Web

Die MediaPipe Interactive Image Segmenter-Aufgabe nimmt einen Ort in einem Bild entgegen, schätzt die Grenzen eines Objekts an diesem Ort und gibt die Segmentierung für das Objekt als Bilddaten zurück. In dieser Anleitung erfahren Sie, wie Sie den Interactive Image Segmenter für Node- und Web-Apps verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Interactive Image Segmenter enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen interaktiven Bildsegmentierungs-App beginnen. Sie können das Beispiel für den interaktiven Bildsegmentierer in Ihrem Webbrowser ansehen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Ihrer Codeprojekte für die Verwendung von Interactive 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 Einrichtungshandbuch für das Web.

JavaScript-Pakete

Der Code für den Interactive Image Segmenter ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden der Plattform aufrufen und herunterladen.

Sie können die erforderlichen Pakete mit dem folgenden Code für das lokale Staging mit dem folgenden Befehl installieren:

npm install --save @mediapipe/tasks-vision

Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <code><head></code>-Tag Ihrer HTML-Datei ein:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Modell

Für die MediaPipe Interactive Image Segmenter-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Interactive Image Segmenter finden Sie im Abschnitt „Modelle“ der Aufgabenübersicht.

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 createFrom...()-Funktionen von Interactive Image Segmenter, um die Aufgabe für die Ausführung von Inferenz zu vorbereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Im folgenden Codebeispiel wird die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe veranschaulicht. Mit der Funktion createFromOptions können Sie den interaktiven Bildsegmentierer mit Konfigurationsoptionen anpassen. Weitere Informationen zu Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:

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

Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Webanwendungen verfügbar:

Option	Beschreibung	Wertebereich	Standardwert
`outputCategoryMask`	Wenn der Wert auf `True` gesetzt ist, enthält die Ausgabe eine Segmentierungsmaske als uint8-Bild, wobei jeder Pixelwert angibt, ob das Pixel Teil des Objekts im relevanten Bereich ist.	{`True, False`}	`False`
`outputConfidenceMasks`	Wenn der Wert auf `True` festgelegt ist, enthält die Ausgabe eine Segmentierungsmaske als Gleitkommawertbild. Jeder Gleitkommawert gibt die Wahrscheinlichkeit an, dass das Pixel Teil des Objekts im Interessenbereich ist.	{`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 hinzufügen. Verwenden Sie dazu die TensorFlow Lite Metadata Writer API.	Gebietsschemacode	de

Daten vorbereiten

Mit Interactive Image Segmenter können Objekte in Bildern in jedem Format segmentiert werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung.

Aufrufe der Methoden segment() und segmentForVideo() des Interactive Image Segmenter 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 Workers implementieren, um segment() und segmentForVideo() in einem anderen Thread auszuführen.

Aufgabe ausführen

Der Interactive Image Segmenter verwendet die Methode segment(), um Inferenzvorgänge auszulösen. Der Interactive Image Segmenter gibt die erkannten Segmente als Bilddaten an eine Callback-Funktion zurück, die Sie beim Ausführen einer Inferenz für die Aufgabe 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);

Eine vollständige Implementierung zum Ausführen einer Aufgabe mit dem interaktiven Bildsegmentierer finden Sie im Beispiel.

Ergebnisse verarbeiten und anzeigen

Bei der Ausführung der Inferenz gibt die Aufgabe „Interactive Image Segmenter“ Segmentbilddaten an eine Callback-Funktion zurück. Die Ausgabe enthält Bilddaten und je nach Konfiguration der Aufgabe Kategorienmasken, Konfidenzmasken oder beides.

In den folgenden Abschnitten werden die Ausgabedaten dieser Aufgabe näher erläutert:

Kategoriemaske

Die folgenden Bilder zeigen eine Visualisierung der Aufgabenausgabe für eine Maske mit Kategorie-Werten mit einem angegebenen Punkt-Interessenbereich. Jedes Pixel hat einen uint8-Wert, der angibt, ob das Pixel Teil des Objekts im relevanten Bereich ist. Der schwarz-weiße Kreis auf dem zweiten Bild zeigt den ausgewählten Bereich von Interesse an.

Ein Hund, der inmitten eines Laubhaufens steht Die Umrissform des Hundes aus dem vorherigen Bild

Originalbild und Ausgabe der Kategorienmaske. Quellbild aus dem Pascal VOC 2012-Dataset.

Konfidenzmaske

Die Ausgabe für eine Konfidenzmaske enthält Gleitkommawerte zwischen [0, 1] für jeden Bild-Eingabechannel. Höhere Werte weisen auf eine höhere Konfidenz hin, dass das Bildpixel Teil des Objekts im Bereich von Interesse ist.

Im Beispielcode für den interaktiven Bildsegmentierer wird gezeigt, wie die von der Aufgabe zurückgegebenen Klassifizierungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Beispiel.