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.