Przewodnik po segmentacji obrazów w internecie

Zadanie MediaPipe Image Segmenter umożliwia dzielenie obrazów na regiony na podstawie zdefiniowanych wstępnie kategorii, aby stosować efekty wizualne, takie jak rozmycie tła. Z tych instrukcji dowiesz się, jak używać narzędzia do podziału obrazu w przypadku aplikacji Node i internetowych. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Przegląd.

Przykładowy kod

Przykładowy kod segmentacji obrazu zawiera kompletną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i rozpocząć tworzenie własnej aplikacji do segmentacji obrazu. Możesz wyświetlać, uruchamiać i edytować przykładowy kod Image Segmenter za pomocą przeglądarki internetowej. Kod tego przykładu znajdziesz też na GitHub.

Konfiguracja

W tej sekcji opisaliśmy kluczowe kroki konfigurowania środowiska programistycznego i projektów kodu w celu korzystania z 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 w wersji internetowej.

Pakiety JavaScript

Kod Image Segmenter jest dostępny w pakiecie NPM MediaPipe @mediapipe/tasks-vision. 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 Image Segmenter wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach usługi 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 do podziału obrazu 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 do segmentacji obrazu za pomocą opcji konfiguracji. Więcej informacji o konfiguracji zadań znajdziesz w sekcji Opcje konfiguracji.

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

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 kompletne wdrożenie zadania segmentacji obrazu znajdziesz w przykładzie kodu.

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, w którym każda wartość piksela wskazuje zwycięską kategorię. {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 mapę współczynnika zaufania danej kategorii. {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
resultListener Ustawia odbiornik wyników tak, aby asynchronicznie otrzymywał wyniki podziału na segmenty, gdy segmentator obrazu jest w trybie LIVE_STREAM. Można go używać tylko wtedy, gdy tryb działania ma wartość LIVE_STREAM. Nie dotyczy Nie dotyczy

Przygotuj dane

Narzędzie do dzielenia obrazu może dzielić 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 segment() i segmentForVideo() w segmencie obrazu 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 obrazu używa metody segment() w trybie obrazu i metody segmentForVideo() w trybie video, aby wywołać wnioskowanie. Segmenter obrazu zwraca wykryte segmenty jako dane obrazu do funkcji wywołania zwrotnego skonfigurowanej podczas wykonywania wnioskowania w ramach zadania.

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

Bardziej kompletną implementację zadania segmentacji obrazu znajdziesz w przykładzie kodu.

Obsługa i wyświetlanie wyników

Po przeprowadzeniu wnioskowania zadanie segmentacji obrazu zwraca dane segmentu obrazu do funkcji wywołania zwrotnego. Treść danych wyjściowych zależy od wartości outputType ustawionej podczas konfigurowania zadania.

W następnych sekcjach znajdziesz przykłady danych wyjściowych z tego zadania:

Poziom ufności kategorii

Na poniższych obrazach widać wizualizację danych wyjściowych zadania dotyczącego maski ufności kategorii. Wyjście maski ufności zawiera wartości zmiennoprzecinkowe z zakresu [0, 1].

2 dziewczyny jeżdżą na koniu, a trzecia idzie obok Maska obrazu, która wyznacza kształt dziewczynek i konia z poprzedniego zdjęcia. Po lewej stronie konturu obrazu jest zarejestrowana, ale po prawej stronie nie

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

Wartość kategorii

Na poniższych obrazach widać wizualizację danych wyjściowych zadania w przypadku maski wartości kategorii. Zakres maski kategorii to [0, 255], a każda wartość piksela reprezentuje zwycięski indeks kategorii w wyniku modelu. Wybrany indeks kategorii ma najwyższą wartość spośród kategorii rozpoznawanych przez model.

2 dziewczyny jeżdżą na koniu, a trzecia idzie obok Maska obrazu, która wyznacza kształt dziewczynek i konia z poprzedniego obrazu. Kształty wszystkich trzech dziewczynek i konia są zasłonięte

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

Przykładowy kod narzędzia do segmentacji obrazu pokazuje, jak wyświetlić wyniki podziału na segmenty zwrócone przez zadanie. Szczegółowe informacje znajdziesz w przykładowym kodzie.