Przewodnik po wykrywaniu obiektów w przeglądarkach internetowych

Zadanie MediaPipe Object Detector umożliwia wykrywanie obecności i lokalizacji wielu klas obiektów. To zadanie przyjmuje dane obrazu i zwraca listę wyników wykrywania, z których każdy reprezentuje obiekt zidentyfikowany na obrazie. Możesz wyświetlać, uruchamiać i edytować przykład wykrywania obiektów w przeglądarce.

Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w omówieniu.

Konfiguracja

W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego, które będzie używane do wykrywania obiektów. Ogólne informacje o konfigurowaniu środowiska programistycznego dla sieci i JavaScriptu, w tym wymagania dotyczące wersji platformy, znajdziesz w przewodniku konfiguracji dla sieci.

Pakiety JavaScript

Kod detektora obiektów jest dostępny w pakiecie MediaPipe @mediapipe/tasks-vision NPM. Te biblioteki możesz znaleźć i pobrać, postępując zgodnie z instrukcjami w przewodniku konfiguracji platformy.

Wymagane pakiety możesz zainstalować za pomocą NPM, używając tego polecenia:

npm install @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania za pomocą usługi sieci dostarczania treści (CDN), dodaj ten kod w tagu <head> w pliku HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Zadanie MediaPipe Object Detector wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach detektora obiektów znajdziesz w omówieniu zadania w sekcji 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 ObjectDetector.createFrom...() detektora obiektów, aby przygotować zadanie do uruchomienia 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ład kodu pokazuje, jak używać funkcji createFromOptions(), która umożliwia ustawienie większej liczby opcji konfiguracji. Więcej informacji o dostępnych opcjach konfiguracji znajdziesz w sekcji Opcje konfiguracji.

Poniższy kod pokazuje, jak utworzyć i skonfigurować to zadanie:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

Bardziej szczegółową implementację tworzenia zadania wykrywania obiektów znajdziesz w przykładzie kodu.

Opcje konfiguracji

To zadanie ma te opcje konfiguracji aplikacji internetowych:

Nazwa opcji Opis Zakres wartości Wartość domyślna
runningMode Ustawia tryb uruchamiania zadania. Dostępne są 2 tryby:

OBRAZ: tryb dla pojedynczych obrazów.

WIDEO: tryb dla zdekodowanych klatek filmu lub transmisji na żywo danych wejściowych, np. z kamery.		 {IMAGE, VIDEO} IMAGE
displayNamesLocale Ustawia język etykiet, które mają być używane w przypadku wyświetlanych nazw podanych w metadanych modelu zadania (jeśli są dostępne). Wartość domyślna to en w przypadku języka angielskiego. Możesz dodać zlokalizowane etykiety do metadanych modelu niestandardowego za pomocą interfejsu TensorFlow Lite Metadata Writer API. Kod języka en
maxResults Ustawia opcjonalną maksymalną liczbę wyników wykrywania o najwyższych wynikach, które mają zostać zwrócone. dowolne liczby dodatnie, -1 (zwracane są wszystkie wyniki)
scoreThreshold Ustawia próg wyniku prognozy, który zastępuje próg podany w metadanych modelu (jeśli taki istnieje). Wyniki poniżej tej wartości są odrzucane. Dowolna liczba zmiennoprzecinkowa Nie ustawiono
categoryAllowlist Ustawia opcjonalną listę dozwolonych nazw kategorii. Jeśli nie jest pusta, wyniki wykrywania, których nazwa kategorii nie znajduje się w tym zbiorze, zostaną odfiltrowane. Zduplikowane lub nieznane nazwy kategorii są ignorowane. Ta opcja wyklucza się wzajemnie z opcją categoryDenylist, a użycie obu powoduje błąd. Dowolne ciągi Nie ustawiono
categoryDenylist Ustawia opcjonalną listę nazw kategorii, które są niedozwolone. Jeśli ten zbiór nie jest pusty, wyniki wykrywania, których nazwa kategorii znajduje się w tym zbiorze, zostaną odfiltrowane. Zduplikowane lub nieznane nazwy kategorii są ignorowane. Ta opcja wyklucza się wzajemnie z opcją categoryAllowlist, a użycie obu powoduje błąd. Dowolne ciągi Nie ustawiono

Przygotuj dane

Wykrywacz obiektów może wykrywać obiekty na obrazach w dowolnym formacie obsługiwanym przez przeglądarkę hosta. Zadanie to obejmuje też wstępne przetwarzanie danych wejściowych, w tym zmianę rozmiaru, obracanie i normalizację wartości. Aby wykrywać obiekty w filmach, możesz użyć interfejsu API do szybkiego przetwarzania klatek pojedynczo. Sygnatura czasowa klatki pozwala określić, kiedy gesty występują w filmie.

Uruchamianie zadania

Wykrywacz obiektów używa detect() do pracy z pojedynczymi obrazami i detectForVideo() do wykrywania obiektów w klatkach wideo. Zadanie przetwarza dane, próbuje rozpoznać obiekty, a następnie raportuje wyniki.

Wywołania metod detect() i detectForVideo() działają synchronicznie i blokują wątek interfejsu użytkownika. Jeśli rozpoznajesz obiekty w klatkach wideo z kamery urządzenia, każda klasyfikacja blokuje główny wątek. Możesz temu zapobiec, wdrażając web workerów, aby wykrywanie odbywało się w innym wątku.

Poniższy kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadań:

Obraz

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

Wideo

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Bardziej szczegółową implementację zadania wykrywania obiektów znajdziesz w przykładzie kodu.

Obsługa i wyświetlanie wyników

Detektor obiektów generuje obiekt wyników wykrywania dla każdego uruchomienia wykrywania. Obiekt wyników zawiera listę wykrytych obiektów, z których każdy ma ramkę ograniczającą i informacje o kategorii wykrytego obiektu, w tym nazwę obiektu i wskaźnik ufności.

Poniżej znajdziesz przykład danych wyjściowych tego zadania:

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

Obraz poniżej przedstawia wizualizację wyniku zadania:

Dwa psy wyróżnione ramkami ograniczającymi

Przykładowy kod detektora obiektów pokazuje, jak wyświetlać wyniki wykrywania zwrócone przez zadanie. Więcej informacji znajdziesz w przykładzie kodu.