Interaktywny przewodnik po segmentacji obrazu w internecie

Zadanie MediaPipe Interactive Image Segmenter przyjmuje lokalizację na obrazie, szacuje granice obiektu w tej lokalizacji i zwraca segmentację obiektu jako dane obrazu. Poniżej znajdziesz instrukcje korzystania z interaktywnego segmentatora obrazów w przypadku aplikacji Node.js i aplikacji internetowych. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w Przeglądzie.

Przykładowy kod

Przykładowy kod do interaktywnego segmentatora obrazów zawiera kompletną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i zacząć tworzyć własną interaktywną aplikację do segmentacji obrazów. Możesz wyświetlać, uruchamiać i edytować przykład interaktywnego segmentatora obrazów w przeglądarce.

Konfiguracja

W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego i projektów kodu pod kątem korzystania z narzędzia Interactive Image Segmenter. Ogólne informacje o konfigurowaniu środowiska programistycznego do korzystania z zadań MediaPipe, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku po konfiguracji na potrzeby internetu.

Pakiety JavaScript

Kod segmentatora obrazów interaktywnych jest dostępny w pakiecie @mediapipe/tasks-vision NPM MediaPipe. Te biblioteki możesz znaleźć i pobrać, korzystając z linków podanych w przewodniku po konfiguracji platformy.

Wymagane pakiety możesz zainstalować za pomocą tego kodu w przypadku lokalnego środowiska testowego 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 w tagu w pliku HTML:

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

Model

Zadanie MediaPipe Interactive Image Segmenter wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach do segmentacji obrazów interaktywnych znajdziesz w sekcji Modele w omówieniu zadania.

Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:

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

Tworzenie zadania

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

Poniższy przykładowy kod pokazuje, jak skonfigurować zadanie za pomocą funkcji createFromOptions(). Funkcja createFromOptions umożliwia dostosowywanie interaktywnego segmentatora obrazów za pomocą opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z opcjami niestandardowymi:

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

To zadanie ma te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
outputCategoryMask Jeśli wartość jest ustawiona na True, dane wyjściowe zawierają maskę segmentacji jako obraz uint8, w którym każda wartość piksela wskazuje, czy piksel jest częścią obiektu znajdującego się w obszarze zainteresowania. {True, False} False
outputConfidenceMasks Jeśli wartość tego parametru to True, dane wyjściowe zawierają maskę segmentacji w postaci obrazu z wartościami zmiennoprzecinkowymi, gdzie każda wartość zmiennoprzecinkowa reprezentuje pewność, że piksel jest częścią obiektu znajdującego się w obszarze zainteresowania. {True, False} True
displayNamesLocale Ustawia język etykiet, które mają być używane w przypadku 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 dodać zlokalizowane etykiety do metadanych modelu niestandardowego za pomocą interfejsu TensorFlow Lite Metadata Writer API. Kod języka en

Przygotuj dane

Interaktywny segmentator obrazów może segmentować obiekty na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadanie to obejmuje też wstępne przetwarzanie danych wejściowych, w tym zmianę rozmiaru, obracanie i normalizację wartości.

Wywołania metod Interactive Image Segmenter segment() i segmentForVideo() działają synchronicznie i blokują wątek interfejsu. Jeśli segmentujesz obiekty w klatkach wideo z kamery urządzenia, każde zadanie segmentacji blokuje wątek główny. Możesz temu zapobiec, wdrażając web workerów, aby uruchamiać segment() i segmentForVideo() w innym wątku.

Uruchamianie zadania

Interaktywny segmentator obrazów używa segment() do wywoływania wnioskowania. Interaktywny segmentator obrazów zwraca wykryte segmenty jako dane obrazu do funkcji wywołania zwrotnego, którą ustawiasz podczas przeprowadzania wnioskowania dla zadania.

Poniższy 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);

Aby zobaczyć pełniejszą implementację zadania uruchamiania segmentatora obrazów interaktywnych, zapoznaj się z tym przykładem.

Obsługa i wyświetlanie wyników

Po uruchomieniu wnioskowania zadanie interaktywnego segmentatora obrazu zwraca dane obrazu segmentu do funkcji wywołania zwrotnego. Dane wyjściowe to dane obrazu, które mogą zawierać maskę kategorii, maski ufności lub obie te maski, w zależności od tego, co ustawisz podczas konfigurowania zadania.

W sekcjach poniżej znajdziesz więcej informacji o danych wyjściowych tego działania:

Maska kategorii

Na poniższych obrazach przedstawiono wizualizację wyniku zadania dla maski wartości kategorii ze wskazanym punktowym obszarem zainteresowania. Każdy piksel to uint8wartość wskazująca, czy piksel jest częścią obiektu znajdującego się w obszarze zainteresowania. Czarno-białe kółko na drugim obrazie wskazuje wybrany obszar zainteresowań.

Pies stojący na stercie liści Obrys psa z poprzedniego obrazu

Oryginalny obraz i maska kategorii. Obraz źródłowy ze zbioru 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. Im wyższe wartości, tym większa pewność, że piksel obrazu jest częścią obiektu znajdującego się w obszarze zainteresowania.

Przykładowy kod segmentatora obrazów interaktywnych pokazuje, jak wyświetlać wyniki klasyfikacji zwrócone przez zadanie. Szczegółowe informacje znajdziesz w przykładzie.