Zadanie segmentacji obrazów MediaPipe pozwala dzielić obrazy na regiony na podstawie wstępnie zdefiniowanych kategorii do stosowania efektów wizualnych, takich jak rozmycie tła. Z tych instrukcji dowiesz się, jak korzystać z Podziału obrazów na segmenty w przypadku węzłów i aplikacji internetowych. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod narzędzia do segmentowania obrazów prezentuje pełną implementację tego zadania w JavaScript. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej aplikacji do segmentacji obrazów. Przykładowy kod do segmentacji obrazów możesz wyświetlać, uruchamiać i edytować tylko w przeglądarce. Kod tego przykładu możesz też sprawdzić na GitHub.
Konfiguracja
W tej sekcji znajdziesz najważniejsze czynności, jakie musisz wykonać, aby skonfigurować środowisko programistyczne i projekty kodu związane z korzystaniem z narzędzia do segmentacji obrazów. Ogólne informacje o konfigurowaniu środowiska programistycznego na potrzeby zadań MediaPipe, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku konfiguracji dla aplikacji internetowych.
Pakiety JavaScript
Kod narzędzia do segmentacji obrazów jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision
NPM. Te biblioteki możesz znaleźć i pobrać za pomocą linków dostępnych w przewodniku po konfiguracji platformy.
Wymagane pakiety możesz zainstalować za pomocą tego polecenia na potrzeby lokalnego środowiska wykonawczego, korzystając z tego polecenia:
npm install --save @mediapipe/tasks-vision
Jeśli chcesz zaimportować kod zadania przez usługę sieci dostarczania 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 segmentacji obrazów MediaPipe wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach służących do segmentowania obrazów znajdziesz w sekcji przeglądu zadań w sekcji poświęconej modelom.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Użyj 1 z funkcji segmentacji obrazów createFrom...()
, aby przygotować zadanie do uruchamiania 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 segmentowania obrazów za pomocą opcji konfiguracji. Więcej informacji o konfiguracji zadań znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak skompilować 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();
Pełną implementację tworzenia zadania segmentacji obrazów znajdziesz w przykładowym kodzie.
Opcje konfiguracji
To zadanie ma następujące opcje konfiguracji aplikacji internetowych:
Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
---|---|---|---|
runningMode |
Ustawia tryb działania zadania. Są 2 tryby: IMAGE: tryb wprowadzania pojedynczych obrazów. WIDEO: tryb dla zdekodowanych klatek filmu lub strumienia danych wejściowych na żywo, np. z kamery. |
{IMAGE, VIDEO } |
IMAGE |
outputCategoryMask |
Jeśli ma wartość True , dane wyjściowe zawierają maskę podziału jako obraz uint8, w którym każda wartość piksela wskazuje zwycięską kategorię. |
{True, False } |
False |
outputConfidenceMasks |
Jeśli ustawiona jest wartość True , dane wyjściowe zawierają maskę podziału w postaci obrazu z wartością zmiennoprzecinkową, w którym każda wartość zmiennoprzecinkowa reprezentuje mapę wskaźnika ufności kategorii. |
{True, False } |
True |
displayNamesLocale |
Ustawia język etykiet, które mają być używane w przypadku nazw wyświetlanych w metadanych modelu zadania (jeśli są dostępne). Wartość domyślna w języku angielskim to en . Za pomocą TensorFlow Lite MetadataWriter API możesz dodawać zlokalizowane etykiety do metadanych modelu niestandardowego.
| Kod języka | en |
Przygotuj dane
Narzędzie do segmentowania obrazów może dzielić na segmenty obiekty w obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadaniem tego zadania jest również wstępne przetwarzanie danych wejściowych, w tym zmiana rozmiaru, rotacja i normalizacja wartości.
Wywołania metod segment()
i segmentForVideo()
Kreatora segmentów obrazów są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli posegmentujesz obiekty w klatkach wideo pochodzących z kamery urządzenia, każde zadanie podziału na segmenty zablokuje wątek główny. Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają segment()
i segmentForVideo()
w innym wątku.
Uruchamianie zadania
Do aktywowania wnioskowania służy do segmentowania obrazów metoda segment()
z trybem obrazu oraz metoda segmentForVideo()
z trybem video
. Narzędzie do segmentacji obrazów zwraca wykryte segmenty jako dane obrazu do funkcji wywołania zwrotnego ustawionej podczas wykonywania wnioskowania dla 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(); }); }
Pełną implementację uruchamiania zadania segmentacji obrazów znajdziesz w przykładowym kodzie.
Obsługa i wyświetlanie wyników
Po uruchomieniu wnioskowania zadanie segmentowania obrazów zwraca dane obrazu segmentu do funkcji wywołania zwrotnego. Zawartość danych wyjściowych zależy od ustawienia outputType
ustawionego podczas konfigurowania zadania.
W sekcjach poniżej znajdziesz przykłady danych wyjściowych z tego zadania:
Poziom ufności kategorii
Na poniższych obrazach pokazano wizualizację wyników zadania dla maski ufności kategorii. Dane wyjściowe maski ufności zawierają wartości zmiennoprzecinkowe między [0, 1]
.
Oryginalny obraz i wyjście maski ufności kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.
Wartość kategorii
Na poniższych obrazach pokazano wizualizację danych wyjściowych zadania w przypadku maski wartości kategorii. Zakres maski kategorii to [0, 255]
, a każda wartość w pikselu reprezentuje zwycięski indeks kategorii danych wyjściowych modelu. Indeks zwycięskiej kategorii ma najwyższy wynik spośród kategorii rozpoznawanych przez model.
Oryginalny obraz i maska kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.
Przykładowy kod narzędzia do segmentacji obrazów pokazuje, jak wyświetlać wyniki podziału na segmenty zwracane przez zadanie. Szczegółowe informacje znajdziesz w przykładowym kodzie.