Przewodnik po segmentacji obrazów w internecie

Zadanie MediaPipe Image Segmenter umożliwia dzielenie obrazów na regiony na podstawie wstępnie zdefiniowanych kategorii w celu stosowania efektów wizualnych, takich jak rozmycie tła. Te instrukcje pokazują, jak używać narzędzia Image Segmenter 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 segmentacji obrazu zawiera kompletną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i zacząć tworzyć własną aplikację do segmentacji obrazów. Możesz wyświetlać, uruchamiać i edytować przykład segmentatora obrazów w przeglądarce internetowej.

Konfiguracja

W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego i projektów kodu pod kątem korzystania z interfejsu 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 jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision NPM. 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 Image Segmenter wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach segmentacji obrazów 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 createFrom...() Image Segmenter, 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 dostosowanie narzędzia do segmentacji obrazów za pomocą opcji konfiguracji. Więcej informacji o konfiguracji zadań znajdziesz w sekcji Opcje konfiguracji.

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

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

Bardziej szczegółową implementację tworzenia zadania Image Segmenter znajdziesz w przykładzie kodu.

Opcje konfiguracji

To zadanie ma te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
outputCategoryMask Jeśli ustawisz wartość True, dane wyjściowe będą zawierać maskę segmentacji w postaci obrazu uint8, w którym każda wartość piksela wskazuje wartość zwycięskiej kategorii. {True, False} False
outputConfidenceMasks Jeśli ta opcja jest ustawiona na True, dane wyjściowe zawierają maskę segmentacji jako obraz z wartościami zmiennoprzecinkowymi, gdzie każda wartość zmiennoprzecinkowa reprezentuje mapę wyników ufności kategorii. {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
resultListener Ustawia odbiornik wyników, aby asynchronicznie odbierać wyniki segmentacji, gdy segmentator obrazów jest w trybie LIVE_STREAM. Można go używać tylko wtedy, gdy tryb uruchamiania ma wartość LIVE_STREAM. Nie dotyczy Nie dotyczy

Przygotuj dane

Interfejs Image Segmenter 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 Image Segmenter segment() i segmentForVideo() działają synchronicznie i blokują wątek interfejsu użytkownika. 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

Segmentator obrazów używa metody segment() w trybie obrazu i metody segmentForVideo() w trybie video do wywoływania wnioskowania. Interfejs Image Segmenter zwraca wykryte segmenty jako dane obrazu do funkcji zwrotnej, którą ustawisz podczas przeprowadzania wnioskowania dla zadania.

Poniższy kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadania:

Obraz

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

Wideo

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Aby zobaczyć pełniejszą implementację zadania Image Segmenter, zapoznaj się z przykładem.

Obsługa i wyświetlanie wyników

Po uruchomieniu wnioskowania zadanie Image Segmenter zwraca dane obrazu segmentu do funkcji wywołania zwrotnego. Zawartość danych wyjściowych zależy od outputType, które ustawisz podczas konfigurowania zadania.

W sekcjach poniżej znajdziesz przykłady danych wyjściowych tego zadania:

Poziom ufności kategorii

Obrazy poniżej przedstawiają wizualizację wyniku zadania dla maski ufności kategorii. Dane wyjściowe maski ufności zawierają wartości zmiennoprzecinkowe z zakresu [0, 1].

Dwie dziewczynki jadące na koniu i jedna dziewczynka idąca obok konia maskę obrazu, która wyznacza kształt dziewczynek i konia z poprzedniego zdjęcia; Lewa połowa konturu obrazu jest widoczna, ale prawa nie.

Oryginalny obraz i maska ufności kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.

Wartość kategorii

Poniższe obrazy przedstawiają wizualizację wyniku zadania dla maski wartości kategorii. Zakres maski kategorii to [0, 255], a każda wartość piksela reprezentuje indeks zwycięskiej kategorii w danych wyjściowych modelu. Indeks zwycięskiej kategorii ma najwyższy wynik spośród kategorii, które model może rozpoznać.

Dwie dziewczynki jadące na koniu i jedna dziewczynka idąca obok konia Maska obrazu, która wyznacza kształt dziewczynek i konia z poprzedniego obrazu. Kształty wszystkich trzech dziewczynek i konia są dokładnie zamaskowane.

Oryginalny obraz i maska kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.

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