Przewodnik po segmentacji obrazów w internecie

Zadanie MediaPipe Image segmenter umożliwia podział obrazów na regiony na podstawie wstępnie zdefiniowanych kategorii, w których można zastosować efekty wizualne, np. rozmycie tła. Te znajdziesz instrukcje korzystania z narzędzia Image segmenter dla aplikacji węzłów i aplikacji internetowych. Dla: więcej informacji o możliwościach, modelach i opcjach konfiguracji to zadanie znajdziesz w artykule Omówienie.

Przykładowy kod

Przykładowy kod segmentacji obrazów zapewnia pełną implementację tego parametru w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i Rozpocznij tworzenie własnej aplikacji do podziału obrazu na segmenty. Możesz wyświetlać, uruchamiać i edytuj segmentację obrazów. przykładowy kod tylko za pomocą przeglądarki. Możesz również przejrzeć kod tego przykładu na stronie GitHub

Konfiguracja

W tej sekcji opisujemy najważniejsze czynności związane z konfigurowaniem środowiska programistycznego oraz w projektach kodu, w których używa się Segmentowania obrazów. Ogólne informacje na temat: skonfigurować środowisko programistyczne do korzystania z zadań MediaPipe, w tym wymagań wersji platformy, patrz Przewodnik po konfiguracji w kampaniach internetowych

Pakiety JavaScript

Kod segmentacji obrazów jest dostępny przez platformę MediaPipe @mediapipe/tasks-vision Pakiet NPM. Dostępne opcje znajdź i pobierz te biblioteki, korzystając z linków dostępnych na platformie Przewodnik po konfiguracji

Wymagane pakiety możesz zainstalować za pomocą tego kodu lokalnego środowiska przejściowego. za pomocą tego polecenia:

npm install --save @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania przez sieć dostarczania treści (CDN) , dodaj ten kod w 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 zadanie. Więcej informacji na temat dostępnych wytrenowanych modeli dla narzędzia do segmentowania obrazów znajdziesz w artykule zapoznaj się z omówieniem zadania sekcją Modele.

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 segmentacji obrazów createFrom...(), aby przygotować zadanie do uruchamiania wniosków. Użyj funkcji createFromModelPath() ze ścieżką względną lub bezwzględną do pliku wytrenowanego modelu. Jeśli model jest już załadowany do pamięci, możesz użyć funkcji Metoda createFromModelBuffer().

Poniższy przykładowy kod pokazuje użycie funkcji createFromOptions() do skonfigurować zadanie. Funkcja createFromOptions umożliwia dostosowanie parametru Segmentacja obrazów z opcjami konfiguracji. Więcej informacji o zadaniu konfiguracji znajdziesz w sekcji Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z niestandardowym użyciem opcje:

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ółowe informacje o tworzeniu zadania segmentacji obrazów znajdziesz w tych artykułach: przykładowego kodu.

Opcje konfiguracji

To zadanie zawiera te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
outputCategoryMask Jeśli ma wartość True, dane wyjściowe będą zawierały maskę podziału na segmenty. jako obraz uint8, gdzie każda wartość w pikselach wskazuje zwycięską kategorię . {True, False} False
outputConfidenceMasks Jeśli ma wartość True, dane wyjściowe będą zawierały maskę podziału na segmenty. jako obraz wartości zmiennoprzecinkowej, gdzie każda wartość zmiennoprzecinkowa odzwierciedla poziom ufności punktację danej kategorii. {True, False} True
displayNamesLocale Ustawia język etykiet, które mają być używane w przypadku nazw wyświetlanych w kolumnie metadane modelu zadania, jeśli są dostępne. Wartość domyślna to en dla Angielski. Do metadanych modelu niestandardowego możesz dodać zlokalizowane etykiety za pomocą interfejsu TensorFlow Lite Metadata Writer API. Kod języka en
resultListener Konfiguruje detektor wyników, który ma otrzymywać wyniki segmentacji asynchronicznie, gdy segmenter obrazów działa w trybie LIVE_STREAM. Tej opcji można używać tylko wtedy, gdy tryb działania jest ustawiony na LIVE_STREAM Nie dotyczy Nie dotyczy

Przygotuj dane

Narzędzie do segmentowania obrazów pozwala segmentować obiekty w obrazach w dowolnym formacie obsługiwanym przez przeglądarki hosta. Zadanie obsługuje również wstępne przetwarzanie danych wejściowych, w tym: zmiany rozmiaru, obrót i normalizację wartości.

Uruchomione wywołania metod segmentowania obrazu segment() i segmentForVideo() synchronicznie i zablokować wątek interfejsu użytkownika. Jeśli posegmentujesz obiekty w klatek wideo z kamery urządzenia, każde zadanie segmentacji blokuje główny w wątku. Możesz temu zapobiec, implementując instancje internetowe do uruchamiania segment() i segmentForVideo() w innym wątku.

Uruchamianie zadania

Segmentacja obrazów korzysta z metody segment() z trybem obrazu i funkcją Metoda segmentForVideo() z trybem video do aktywowania wnioskowania. Segmentator obrazów zwraca wykryte segmenty jako dane obrazu w odpowiedzi na wywołanie zwrotne. wyznaczoną podczas uruchamiania wnioskowania dla danego zadania.

Ten kod pokazuje, jak wykonywać przetwarzanie za pomocą modelu zadań:

Obraz

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

Video

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

Bardziej wyczerpujące instrukcje uruchamiania zadania segmentowania obrazów znajdziesz tutaj: przykładowego kodu.

Obsługa i wyświetlanie wyników

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

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

Poziom ufności kategorii

Te obrazy przedstawiają wizualizację danych wyjściowych zadania dla kategorii maską ufności. Dane wyjściowe maski ufności zawierają wartości zmiennoprzecinkowe między [0, 1]

Oryginalny obraz i maska zaufania kategorii. Obraz źródłowy z Pascal VOC 2012 w zbiorze danych.

Wartość kategorii

Te obrazy przedstawiają wizualizację danych wyjściowych zadania dla kategorii maską wartości. Zakres maski kategorii wynosi [0, 255] i każda wartość piksela reprezentuje indeks zwycięskiej kategorii danych wyjściowych modelu. Zwycięska kategoria indeks ma najwyższy wynik spośród kategorii, które model może rozpoznać.

Oryginalny obraz i maska kategorii. Obraz źródłowy z Pascal VOC 2012 w zbiorze danych.

Przykładowy kod segmentacji obrazów pokazuje, jak wyświetlić podział na segmenty wyników zwróconych przez zadanie, patrz przykładowy kod .