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 .