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.