Zadanie MediaPipe Wykrywanie twarzy umożliwia wykrywanie twarzy na zdjęciach lub filmach. Za pomocą to zadanie, aby znajdować twarze i twarze w kadrze. To zadanie używa model uczenia maszynowego, który działa z pojedynczymi obrazami lub wiele obrazów. Zadanie generuje lokalizacje twarzy, a także: charakterystyczne elementy twarzy: lewe i prawe oko, czubek nosa, usta, uraz lewego oka oraz do urazu prawego oka.
Te instrukcje pokazują, jak używać Wykrywania twarzy w przeglądarce i języku JavaScript aplikacji. Więcej informacji o możliwościach, modelach i konfiguracji opcji tego zadania znajdziesz w artykule Omówienie.
Przykładowy kod
Przykładowy kod wykrywania twarzy zapewnia pełną implementację tego w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i uzyskać stworzyliśmy własną aplikację do wykrywania twarzy. Możesz wyświetlać, uruchamiać edytuj przykładowy kod wykrywania twarzy tylko za pomocą przeglądarki.
Konfiguracja
W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. specjalnie po to, aby używać Wykrywania twarzy. 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 twarzy 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) , dodaj następujący kod do sekcji <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 twarzy MediaPipe wymaga wytrenowanego modelu, który jest z nim zgodny zadanie. Więcej informacji o dostępnych wytrenowanych modelach z wykrywaniem twarzy znajdziesz tutaj: zapoznaj się z omówieniem zadania sekcją 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 twarzy 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 funkcji createFromOptions() do
skonfigurować zadanie. Funkcja createFromOptions umożliwia dostosowanie parametru
Wykrywanie twarzy z opcjami konfiguracji. Więcej informacji o konfiguracji
Więcej informacji znajdziesz w sekcji Opcje konfiguracji.
Poniższy kod pokazuje, jak utworzyć i skonfigurować zadanie z niestandardowym użyciem opcje:
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 zawiera poniższe opcje konfiguracji dla stron internetowych i JavaScriptu aplikacje:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
option_var_1_web_js |
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 |
minDetectionConfidence |
Minimalny wskaźnik ufności, który musi spełniać, aby wykrywanie twarzy zostało uznane za udane. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Minimalny niemaksymalny próg wyłączenia funkcji wykrywania twarzy, który może zostać uznany za pokrywający się. | Float [0,1] |
0.3 |
Przygotuj dane
Wykrywanie twarzy może wykrywać twarze na zdjęciach 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ć twarze w filmach: możesz za pomocą interfejsu API szybko przetworzyć pojedynczą klatkę, wykorzystując sygnaturę czasową pozwala określić, w którym momencie filmu pojawiają się twarze.
Uruchamianie zadania
Wykrywanie twarzy używa tych funkcji: detect() (w trybie biegania image) i
Metody do aktywowania: detectForVideo() (z trybem uruchamiania video)
danych. Zadanie przetworzy dane, spróbuje wykryć twarze
i raportuje wyniki.
Uruchomione są wywołania funkcji Wykrywania twarzy detect() i detectForVideo()
synchronicznie i zablokować wątek interfejsu użytkownika. Jeśli wykryjesz twarze
w przypadku klatek wideo z kamery urządzenia, każde wykrycie blokuje główny
w wątku. Możesz temu zapobiec, implementując instancje internetowe do uruchamiania interfejsu detect()
i detectForVideo() w innym wątku.
Ten kod pokazuje, jak wykonywać 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(); }); }
Pełną implementację uruchamiania zadania Wykrywacz twarzy znajdziesz w przykładowego kodu.
Obsługa i wyświetlanie wyników
Wykrywanie twarzy generuje obiekt wyniku wykrywania twarzy przy każdym wykryciu bieganie. Obiekt wynikowy zawiera twarze we współrzędnych obrazu i twarze w świecie .
Poniżej znajdziesz przykładowe dane wyjściowe 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)
Ten obraz przedstawia wizualizację danych wyjściowych zadania:
Zobacz oryginalny obraz obrazu bez ramek ograniczających.
Przykładowy kod Wykrywania twarzy pokazuje, jak wyświetlać wyników zwróconych przez zadanie, patrz przykładowy kod