Zadanie MediaPipe Face Detector umożliwia wykrywanie twarzy na obrazie lub w filmie. Możesz użyć tego zadania, aby zlokalizować twarze i cechy twarzy w ramce. To zadanie wykorzystuje model uczenia maszynowego, który działa z pojedynczymi obrazami lub ciągłym strumieniem obrazów. Zadanie zwraca lokalizacje twarzy wraz z tymi punktami kluczowymi twarzy: lewe oko, prawe oko, czubek nosa, usta, lewy i prawy punkt tragion.
Z tych instrukcji dowiesz się, jak używać detektora twarzy w aplikacjach internetowych i aplikacjach napisanych w JavaScript. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w Przeglądzie.
Przykładowy kod
Przykładowy kod wykrywacza twarzy zawiera pełną implementację tego zadania w JavaScript. Ten kod pomoże Ci przetestować to zadanie i zacząć tworzyć własną aplikację do wykrywania twarzy. Możesz wyświetlać, uruchamiać i edytować przykład wykrywania twarzy w przeglądarce internetowej.
Konfiguracja
W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego, które jest przeznaczone do korzystania z detektora twarzy. 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 twarzy 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 dystrybucji 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 Face Detector wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach wykrywania twarzy znajdziesz w sekcji Modele w omówieniu zadania.
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 createFrom...() detektora twarzy, 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ładowy kod pokazuje, jak skonfigurować zadanie za pomocą funkcji createFromOptions(). Funkcja createFromOptions umożliwia dostosowanie wykrywacza twarzy za pomocą opcji konfiguracji. Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z opcjami niestandardowymi:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
Opcje konfiguracji
To zadanie ma te opcje konfiguracji w przypadku aplikacji internetowych i aplikacji napisanych w języku JavaScript:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
option_var_1_web_js |
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 |
minDetectionConfidence |
Minimalny poziom ufności, przy którym wykrywanie twarzy jest uznawane za udane. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Minimalny próg tłumienia niemaksymalnego, przy którym wykrywanie twarzy jest uznawane za nakładające się. | Float [0,1] |
0.3 |
Przygotuj dane
Interfejs Face Detector może wykrywać twarze 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ć twarze w filmach, możesz użyć interfejsu API do szybkiego przetwarzania pojedynczych klatek. Sygnatura czasowa klatki pozwala określić, kiedy twarze pojawiają się w filmie.
Uruchamianie zadania
Detektor twarzy używa metod detect() (w trybie działania image) i detectForVideo() (w trybie działania video) do wywoływania wnioskowań. Zadanie przetwarza dane, próbuje wykryć twarze, a następnie zgłasza wyniki.
Wywołania metod Face Detector detect() i detectForVideo() działają synchronicznie i blokują wątek interfejsu użytkownika. Jeśli wykryjesz twarze w klatkach wideo z kamery urządzenia, każde wykrycie blokuje główny wątek. Możesz temu zapobiec, wdrażając procesy robocze, które będą uruchamiać metody detect() i detectForVideo() w innym wątku.
Poniższy kod pokazuje, jak wykonać przetwarzanie za pomocą modelu zadań:
Obraz
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
Wideo
await faceDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = faceDetector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Bardziej szczegółową implementację zadania wykrywania twarzy znajdziesz w przykładzie.
Obsługa i wyświetlanie wyników
Detektor twarzy generuje obiekt wyniku wykrywania twarzy dla każdego uruchomienia wykrywania. Obiekt wyniku zawiera twarze w współrzędnych obrazu i w współrzędnych świata.
Poniżej znajdziesz przykład danych wyjściowych tego zadania:
FaceDetectionResult:
Detections:
Detection #0:
BoundingBox:
origin_x: 126
origin_y: 100
width: 463
height: 463
Categories:
Category #0:
index: 0
score: 0.9729152917861938
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.18298381567001343
y: 0.2961040139198303
NormalizedKeypoint #1:
x: 0.3302789330482483
y: 0.29289937019348145
... (6 keypoints for each face)
Detection #1:
BoundingBox:
origin_x: 616
origin_y: 193
width: 430
height: 430
Categories:
Category #0:
index: 0
score: 0.9251380562782288
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.6151331663131714
y: 0.3713381886482239
NormalizedKeypoint #1:
x: 0.7460576295852661
y: 0.38825345039367676
... (6 keypoints for each face)
Obraz poniżej przedstawia wizualizację wyniku zadania:
Obraz bez ramek ograniczających znajdziesz w oryginalnym obrazie.
Przykładowy kod wykrywacza twarzy pokazuje, jak wyświetlać wyniki zwrócone przez zadanie. Zobacz przykład.