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 pobiera dane obrazu i zwraca listę funkcji wykrywania z których każdy reprezentuje obiekt zidentyfikowany na obrazie. Przykładowy kod opisanych w tych instrukcjach jest dostępna na CodePen,

Aby zobaczyć, jak działa to zadanie, wyświetl demo. Więcej informacji o możliwościach, modelach i modelach dotyczących opcji konfiguracji tego zadania, zobacz Omówienie.

Przykładowy kod

Przykładowy kod Detektora obiektów zapewnia pełną implementację w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i zacznij tworzyć własną aplikację do klasyfikacji tekstu. Możesz wyświetlać, uruchamiać zmień przykładowy kod wykrywania obiektów. tylko za pomocą przeglądarki.

Konfiguracja

W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. zwłaszcza pod kątem użycia wykrywania obiektów. Ogólne informacje na temat: konfigurację środowiska programistycznego strony internetowej i JavaScriptu, w tym wymagań wersji platformy, patrz Przewodnik po konfiguracji w kampaniach internetowych

Pakiety JavaScript

Kod wykrywania obiektów jest dostępny w MediaPipe @mediapipe/tasks-vision Pakiet NPM. Dostępne opcje jak znaleźć i pobrać te biblioteki, postępując zgodnie z instrukcjami na platformie. Przewodnik po konfiguracji

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

npm install @mediapipe/tasks-vision

Jeśli chcesz zaimportować kod zadania przez sieć dostarczania treści (CDN) w tagu <head> w pliku HTML dodaj ten kod:

<!-- 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 z nim zgodny zadanie. Więcej informacji o dostępnych wytrenowanych modelach z wykrywaniem obiektów znajdziesz w artykule omówienie 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 wykrywania obiektów ObjectDetector.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 funkcję createFromOptions(), która pozwala skonfigurować więcej ustawień . Więcej informacji o dostępnych opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.

Poniższy kod ilustruje, 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 Wykrywacz obiektów znajdziesz w przykładowego kodu.

Opcje konfiguracji

To zadanie zawiera te opcje konfiguracji aplikacji internetowych:

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

IMAGE: tryb wprowadzania pojedynczego obrazu.

WIDEO: tryb zdekodowanych klatek w filmie 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 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
maxResults Ustawia opcjonalną maksymalną liczbę wyników wykrywania na . Dowolne liczby dodatnie -1 (zostaną zwrócone wszystkie wyniki)
scoreThreshold Ustawia próg wyniku prognozy, który zastępuje próg podany w polu metadane modelu (jeśli występują). 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 nazwa kategorii nie znajduje się w tym zestawie, zostaną zostały odfiltrowane. Zduplikowane lub nieznane nazwy kategorii są ignorowane. Ta opcja nie działa z usługą categoryDenylist i korzysta z funkcji skutkuje to błędem. Dowolne ciągi Nie ustawiono
categoryDenylist Ustawia opcjonalną listę nazw kategorii, które nie są dozwolone. Jeśli niepuste, wyniki wykrywania, których nazwa kategorii znajduje się w tym zbiorze, zostaną odfiltrowane na zewnątrz. Zduplikowane lub nieznane nazwy kategorii są ignorowane. Ta opcja jest wzajemna tylko w polu categoryAllowlist, co spowoduje błąd. Dowolne ciągi Nie ustawiono

Przygotuj dane

Detektor obiektów może wykrywać 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. Aby wykrywać obiekty w filmach: mogą użyć interfejsu API, aby szybko przetworzyć klatkę, używając sygnatury czasowej aby określić, w którym momencie filmu są wykonywane gesty.

Uruchamianie zadania

Wykrywacz obiektów używa detect() do pracy z pojedynczymi obrazami i detectForVideo() wykrywa obiekty w klatkach wideo. Przetwarzanie zadania próbuje rozpoznać obiekty, a następnie zgłasza wyniki.

Uruchomione są wywołania metod detect() i detectForVideo() synchronicznie i zablokować wątek interfejsu użytkownika. Jeśli rozpoznajesz obiekty w klatek wideo z kamery urządzenia, każda klasyfikacja blokuje główne w wątku. Aby temu zapobiec, zaimplementuj instancje robocze, które będą uruchamiać wykrywanie kolejny wątek.

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 Wykrywacz obiektów zawiera przykładowego 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ę wykrywania, z której każde wykrycie obejmuje ramki ograniczającej i informacje o kategorii wykrytego obiektu, w tym nazwę obiektu i wskaźnik ufności.

Poniżej znajdziesz przykładowe dane wyjściowe 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

Ten obraz przedstawia wizualizację danych wyjściowych zadania:

Przykładowy kod wykrywania obiektów pokazuje, jak wyświetlić wykrywanie wyników zwróconych przez zadanie, patrz przykładowy kod .