Przewodnik po wykrywaniu obiektów w przeglądarkach internetowych

Zadanie wykrywania obiektów MediaPipe umożliwia wykrywanie obecności i lokalizacji wielu klas obiektów. To zadanie pobiera dane obrazu i generuje listę wyników wykrywania, z których każdy reprezentuje obiekt wskazany na obrazie. Przykładowy kod opisany w tych instrukcjach jest dostępny na stronie CodePen.

Aby zobaczyć, jak działa to zadanie, obejrzyj prezentację. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w artykule Omówienie.

Przykładowy kod

Przykładowy kod detektora obiektów zawiera pełną implementację tego zadania w JavaScripcie jako odniesienie. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej aplikacji do klasyfikacji tekstu. Możesz wyświetlać, uruchamiać i edytować przykładowy kod detektora obiektów tylko w przeglądarce.

Konfiguracja

W tej sekcji opisujemy najważniejsze czynności, jakie należy wykonać, aby skonfigurować środowisko programistyczne pod kątem wykrywania obiektów. Ogólne informacje o konfigurowaniu środowiska programistycznego do obsługi stron internetowych i JavaScript, w tym o wymaganiach dotyczących wersji platformy, znajdziesz w przewodniku po konfiguracji na potrzeby stron internetowych.

Pakiety JavaScript

Kod do wykrywania obiektów jest dostępny w pakiecie NPM MediaPipe @mediapipe/tasks-vision. Aby znaleźć i pobrać te biblioteki, wykonaj instrukcje podane w przewodniku po konfiguracji dotyczącym platformy.

Wymagane pakiety możesz zainstalować za pomocą NPM za pomocą tego polecenia:

npm install @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania przez usługę 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.js"
    crossorigin="anonymous"></script>
</head>

Model

Zadanie wykrywania obiektów MediaPipe wymaga wytrenowanego modelu, który jest zgodny z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach dotyczących wykrywania obiektów znajdziesz w omówieniu zadań w sekcji modeli.

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 wykrywania obiektów ObjectDetector.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(). W poniższym przykładzie kodu pokazano użycie 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.

Ten kod pokazuje, jak skompilować 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
});

Pełną implementację tworzenia zadania wykrywania obiektó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`
`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
`maxResults`	Określa opcjonalną maksymalną liczbę wyników wykrywania o najwyższych wynikach do zwrócenia.	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 istnieją). Wyniki poniżej tej wartości zostały odrzucone.	Dowolna liczba zmiennoprzecinkowa	Nie ustawiono
`categoryAllowlist`	Ustawia opcjonalną listę dozwolonych nazw kategorii. Jeśli pole nie jest puste, wyniki wykrywania, których nazwy kategorii nie ma w tym zbiorze, zostaną odfiltrowane. Zduplikowane i nieznane nazwy kategorii są ignorowane. Ta opcja wzajemnie się wyklucza, `categoryDenylist` i ich użycie kończy się błędem.	Dowolne ciągi	Nie ustawiono
`categoryDenylist`	Ustawia opcjonalną listę niedozwolonych nazw kategorii. Jeśli pole nie jest puste, wyniki wykrywania, których nazwa kategorii znajduje się w tym zbiorze, zostaną odfiltrowane. Zduplikowane i nieznane nazwy kategorii są ignorowane. Ta opcja wzajemnie się wyklucza z `categoryAllowlist`, a korzystanie z obu daje błąd.	Dowolne ciągi	Nie ustawiono

Przygotuj dane

Detektor obiektów może wykrywać 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. Aby wykrywać obiekty w filmach, za pomocą interfejsu API możesz szybko przetworzyć klatkę poklatkową, używając sygnatury czasowej klatki, aby określić, kiedy w filmie występują gesty.

Uruchamianie zadania

Wykrywacz obiektów używa detect() do pracy na pojedynczych obrazach i detectForVideo() do wykrywania obiektów w klatkach wideo. Zadanie przetwarza dane, próbuje rozpoznać obiekty i raportuje wyniki.

Wywołania metod detect() i detectForVideo() są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli rozpoznasz obiekty w klatkach wideo pochodzących z kamery urządzenia, każda klasyfikacja zablokuje wątek główny. Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają wykrywanie w innym wątku.

Ten kod pokazuje, jak wykonywać 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();
  });
}

Pełną implementację uruchamiania zadania wykrywania obiektów znajdziesz w przykładowym kodzie.

Obsługa i wyświetlanie wyników

Przy każdym uruchomieniu detektor obiektów generuje obiekt wyników wykrywania. Obiekt wyników zawiera listę wykrytych obiektów, z których każde obejmuje 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 z 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

Poniższy obraz przedstawia wizualizację wyników zadania:

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