Zadanie MediaPipe Interactive Image Segmenter pobiera lokalizację na obrazie, szacuje granice obiektu w tej lokalizacji i zwraca segmentację obiektu jako dane obrazu. Z tych instrukcji dowiesz się, jak korzystać z interaktywnego 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 interaktywnego podziału obrazów na segmenty zawiera pełną implementację tego zadania w JavaScript. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej interaktywnej aplikacji do segmentacji obrazów. Możesz wyświetlać, uruchamiać i edytować przykładowy kod interaktywnego narzędzia do segmentacji obrazów bezpośrednio w przeglądarce. Kod tego przykładu możesz też sprawdzić na GitHub.
Konfiguracja
W tej sekcji znajdziesz najważniejsze czynności, jakie należy wykonać, aby skonfigurować środowisko programistyczne i projekty kodu na potrzeby interaktywnego podziału obrazów na segmenty. 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 interaktywnego 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 MediaPipe Interactive Image Segmenter wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach do interaktywnego segmentowania obrazów znajdziesz w sekcji poświęconej modelom na temat zadań.
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 interaktywnego podziału obrazów na segmenty 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 interaktywnego podziału obrazów na segmenty za pomocą opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak skompilować i skonfigurować zadanie z opcjami niestandardowymi:
async function createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
Opcje konfiguracji
To zadanie ma następujące opcje konfiguracji aplikacji internetowych:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
outputCategoryMask |
Jeśli ustawisz wartość True, dane wyjściowe będą zawierały maskę segmentacji w postaci obrazu uint8, w którym każda wartość piksela wskazuje, czy piksel jest częścią obiektu znajdującego się w ciekawym obszarze. |
{True, False} |
False |
outputConfidenceMasks |
Jeśli ma wartość True, dane wyjściowe zawierają maskę podziału w postaci obrazu z wartościami zmiennoprzecinkowymi, w których każda wartość zmiennoprzecinkowa reprezentuje stopień pewności, że piksel jest częścią obiektu znajdującego się w ciekawym obszarze. |
{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
Interaktywny podział obrazów na segmenty może segmentować 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 interaktywnego segmentacji obrazów segment() i segmentForVideo() 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
Interaktywny podział obrazów na segmenty używa metody segment() do aktywowania wnioskowania. Interaktywny segment 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ń:
const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
image,
{
keypoint: {
x: event.offsetX / event.target.width,
y: event.offsetY / event.target.height
}
},
callback);
Pełną implementację uruchamiania zadania interaktywnego segmentowania obrazów znajdziesz w przykładowym kodzie.
Obsługa i wyświetlanie wyników
Po uruchomieniu wnioskowania zadanie Interaktywny podział obrazów na segmenty zwraca dane obrazu segmentu do funkcji wywołania zwrotnego. Dane wyjściowe to dane graficzne i mogą zawierać maskę kategorii, maski ufności lub oba te elementy w zależności od ustawień ustawionych podczas konfigurowania zadania.
W sekcjach poniżej objaśniamy szczegółowo dane wyjściowe z tego zadania:
Maska kategorii
Na poniższych obrazach pokazano wizualizację wyników zadania w przypadku maski wartości kategorii ze wskazanym ważnym obszarem. Każdy piksel to wartość uint8 wskazująca, czy jest on częścią obiektu znajdującego się w danym obszarze. Czarno-białe kółko na drugim zdjęciu
wskazuje wybrany obszar zainteresowań.
Oryginalny obraz i maska kategorii. Obraz źródłowy ze zbioru danych Pascal VOC 2012.
Maska ufności
Dane wyjściowe maski ufności zawierają wartości zmiennoprzecinkowe między [0, 1] dla każdego kanału wejściowego obrazu. Wyższe wartości oznaczają większą pewność, że piksel obrazu jest częścią obiektu znajdującego się w ciekawym obszarze.
Przykładowy kod interaktywnego podziału obrazów na segmenty pokazuje, jak wyświetlać wyniki klasyfikacji zwrócone z zadania. Więcej informacji znajdziesz w przykładowym kodzie.