Interaktywny przewodnik po segmentacji obrazu w internecie

Zadanie MediaPipe Interactive Image Segmenter przyjmuje lokalizację na obrazie, szacuje granice obiektu w tej lokalizacji i zwraca podział obiektu na segmenty jako dane obrazu. Te instrukcje pokazują, jak używać narzędzia do segmentacji interaktywnych obrazów w Node i aplikacji internetowych. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.

Przykładowy kod

Przykładowy kod segmentatora interaktywnych obrazów zawiera kompletną implementację tego zadania w języku JavaScript. Ten kod pomoże Ci przetestować to zadanie i rozpocząć tworzenie własnej aplikacji do segmentacji obrazów. Możesz wyświetlać, uruchamiać i edytować przykładowy kod segmentera interaktywnych obrazów, korzystając tylko z przeglądarki internetowej. Kod tego przykładu znajdziesz też na GitHub.

Konfiguracja

W tej sekcji opisaliśmy najważniejsze kroki konfigurowania środowiska programistycznego i projektów kodu na potrzeby korzystania z segmentatora interaktywnych obrazów. Ogólne informacje o konfigurowaniu środowiska programistycznego do korzystania z zadań MediaPipe, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku po konfiguracji w wersji internetowej.

Pakiety JavaScript

Kod segmentacji interaktywnych obrazów jest dostępny w pakiecie @mediapipe/tasks-vision NPM MediaPipe. Te biblioteki znajdziesz i pobierzesz, klikając linki podane w przewodniku po konfiguracji platformy.

Wymagające pakiety możesz zainstalować za pomocą tego kodu do lokalnego publikowania: za pomocą tego polecenia:

npm install --save @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania za pomocą usługi sieci dystrybucji treści (CDN), dodaj ten kod do tagu w pliku HTML:

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

Model

Zadanie MediaPipe Interactive Image Segmenter wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach narzędzia Interactive Image Segmenter znajdziesz w sekcji Modele w omówieniu zadania.

Wybierz i pobierz model, a potem zapisz go w katalogu projektu:

<dev-project-root>/app/shared/models/

Tworzenie zadania

Użyj jednej z funkcji narzędzia Interactive Image Segmenter createFrom...(), aby przygotować zadanie do wykonywania wnioskowań. Użyj funkcji createFromModelPath() z ścieżką względną lub bezwzględną do wytrenowanego pliku modelu. Jeśli model został już załadowany do pamięci, możesz użyć metody createFromModelBuffer().

Przykładowy kod poniżej pokazuje użycie funkcji createFromOptions() do konfigurowania zadania. Funkcja createFromOptions umożliwia dostosowanie narzędzia Interactive Image Segmenter za pomocą opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie za pomocą opcji niestandardowych:

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();

Opcje konfiguracji

W tym zadaniu dostępne są te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
outputCategoryMask Jeśli ustawisz tę opcję na True, dane wyjściowe będą zawierać maskę segmentacji w postaci obrazu uint8, gdzie każda wartość piksela wskazuje, czy dany piksel należy do obiektu znajdującego się w obszarze zainteresowania. {True, False} False
outputConfidenceMasks Jeśli ustawisz tę opcję na True, dane wyjściowe będą zawierać maskę segmentacji w postaci obrazu z wartością zmiennoprzecinkową, gdzie każda wartość zmiennoprzecinkowa reprezentuje poziom pewności, że piksel należy do obiektu znajdującego się w obszarze zainteresowania. {True, False} True
displayNamesLocale Określa język etykiet, których należy używać do wyświetlanych nazw podanych w metadanych modelu zadania (jeśli są dostępne). Wartość domyślna to en w przypadku języka angielskiego. Możesz dodawać zlokalizowane etykiety do metadanych modelu niestandardowego, korzystając z interfejsu TensorFlow Lite Metadata Writer API. Kod języka en

Przygotuj dane

Narzędzie do segmentacji obrazów może dzielić na segmenty obiekty na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadanie to obejmuje też wstępną obróbkę danych wejściowych, w tym ich zmianę rozmiaru, obrót i normalizację wartości.

Wywołania metod interfejsu do segmentacji interaktywnego obrazu segment() i segmentForVideo() są wykonywane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli segmentujesz obiekty na klatkach wideo z kamery urządzenia, każde zadanie podziału blokuje główny wątek. Aby temu zapobiec, możesz zaimplementować web workery, aby wykonywały funkcje segment() i segmentForVideo() w innym wątku.

Uruchamianie zadania

Segmentator interaktywnych obrazów używa metody segment() do wywoływania wniosków. Interaktywny segmentator obrazu zwraca wykryte segmenty jako dane obrazu do funkcji wywołania, którą ustawisz podczas wykonywania wnioskowania w ramach zadania.

Ten kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadania:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

Pełnięszą implementację zadania segmentacji interaktywnych obrazów znajdziesz w przykładzie kodu.

Obsługa i wyświetlanie wyników

Po wykonaniu wnioskowania zadanie Interactive Image Segmenter zwraca dane segmentu obrazu do funkcji wywołania zwrotnego. Treść danych wyjściowych to dane obrazu i może zawierać maskę kategorii, maski wiarygodności lub oba te elementy, w zależności od tego, co zostało ustawione podczas konfigurowania zadania.

W następnych sekcjach znajdziesz więcej informacji o danych wyjściowych z tego zadania:

Maska kategorii

Na poniższych obrazach pokazano wizualizację wyniku zadania w przypadku maski kategorii i wartości z wskazanym punktem zainteresowania. Każdy piksel to wartość uint8, która wskazuje, czy piksel jest częścią obiektu znajdującego się w obszarze zainteresowania. Czarny i biały okrąg na drugim obrazie wskazuje wybrany obszar zainteresowania.

Pies stojący na stosie liści Zarysowany kształt psa z poprzedniego obrazu

Wyjście oryginalnej maski obrazu i kategorii. Obraz źródłowy z danych Pascal VOC 2012.

Maska ufności

Dane wyjściowe maski ufności zawierają wartości zmiennoprzecinkowe z zakresu [0, 1] dla każdego kanału wejściowego obrazu. Wyższe wartości wskazują na większą pewność, że piksel obrazu jest częścią obiektu znajdującego się w obszarze zainteresowania.

Przykładowy kod interfejsu Segmenter obrazów pokazuje, jak wyświetlać wyniki podziału na segmenty zwracane przez zadanie. Szczegółowe informacje znajdziesz w przykładowym kodzie.