Interaktywny przewodnik po segmentacji obrazu w internecie

Zadanie MediaPipe Interactive Image segmenter pobiera lokalizację na obrazie i określa granice obiekt w tym miejscu i zwraca jego podział na segmenty jako obraz. i skalowalnych danych. Te instrukcje pokazują, jak korzystać z interaktywnego segmentowania obrazów w węzłach i w internecie aplikacji. Więcej informacji o możliwościach, modelach i konfiguracji opcji tego zadania znajdziesz w artykule Omówienie.

Przykładowy kod

Przykładowy kod Interactive Image Segmenter zapewnia pełną implementację tego parametru w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i zacznij tworzyć własną interaktywną aplikację do segmentowania obrazów. Dostępne opcje wyświetlanie, uruchamianie i edytowanie interaktywnego segmentowania 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 wykorzystano Interactive Image segmenter. 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 Interactive Image segmenter jest dostępny przez 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 Interactive Image segmenter wymaga wytrenowanego modelu zgodnego z tym zadanie. Więcej informacji o dostępnych wytrenowanych modelach na potrzeby interaktywnego 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 Interactive Image segmenter 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 Interaktywny segmenter obrazów z opcjami konfiguracji. Więcej informacji o konfiguracji Więcej informacji znajdziesz w sekcji Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z niestandardowym użyciem opcje:

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 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, czy piksel jest częścią i znajdź obiekt na danym obszarze. {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 że piksel jest częścią obiektu znajdującego się na danym obszarze. {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

Przygotuj dane

Interaktywny podział obrazów na segmenty może dzielić obiekty na 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 metody Interactive Image segmenter 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

Interaktywny podział obrazów na segmenty używa metody segment(), aby wywoływać wnioskowanie. Interactive Image segmenter 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ń:

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);