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. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Przegląd.
Przykładowy kod
Przykładowy kod narzędzia do segmentowania obrazów zapewnia pełną implementację tego parametru w JavaScripcie. 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. 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 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.
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 zadaniem. 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() z ś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ć funkcji
Metoda createFromModelBuffer().
Poniższy przykładowy kod pokazuje użycie funkcji createFromOptions() do
skonfiguruj zadanie. Funkcja createFromOptions umożliwia dostosowanie narzędzia do segmentacji obrazu za pomocą opcji konfiguracji. Więcej informacji o zadaniu
konfiguracji 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 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 ustawisz tę opcję na True, dane wyjściowe będą zawierać maskę segmentacji w postaci obrazu uint8, gdzie każda wartość piksela 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 w przypadku języka angielskiego. Możesz dodawać zlokalizowane etykiety do metadanych niestandardowego modelu za pomocą 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.
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.
Wywołania metod segment() i segmentForVideo() w segmencie obrazu są wykonywane synchronicznie i blokują 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. 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. 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:
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 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. Wyjście maski ufności zawiera wartości zmiennoprzecinkowe z zakresu [0, 1].
Wyjście maski oryginalnego obrazu i pewności kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.
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ć.
Wyjście oryginalnej maski obrazu i 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, wyświetl przykładowy kod .