Zadanie MediaPipe Face Markuper umożliwia wykrywanie punktów orientacyjnych i mimiki twarzy na zdjęciach i filmach. W tym zadaniu możesz rozpoznawać mimikę, stosować filtry i efekty oraz tworzyć wirtualne awatary. To zadanie wykorzystuje modele systemów uczących się, które mogą działać z pojedynczymi obrazami lub ciągłym strumieniem obrazów. Zadanie generuje trójwymiarowe punkty orientacyjne, wyniki mieszania (współczynniki reprezentujące wyraz twarzy), aby w czasie rzeczywistym określić szczegółowe dane o twarzach, oraz macierze przekształceń do wykonywania przekształceń wymaganych do renderowania efektów.
W tych instrukcjach pokazujemy, jak używać aplikacji Face Pointer w aplikacjach internetowych i JavaScript. Więcej informacji o możliwościach, modelach i opcjach konfiguracji tego zadania znajdziesz w sekcji Omówienie.
Przykładowy kod
Przykładowy kod aplikacji Face pointer zawiera pełną implementację tego zadania w języku JavaScript. Ten kod ułatwia przetestowanie tego zadania i rozpoczęcie tworzenia własnej aplikacji do oznaczania twarzy. Możesz wyświetlić, uruchomić i edytować przykładowy kod funkcji rozpoznawania twarzy tylko w przeglądarce.
Konfiguracja
W tej sekcji opisujemy najważniejsze czynności, jakie należy wykonać, aby skonfigurować środowisko programistyczne pod kątem korzystania z funkcji rozpoznawania twarzy. 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 aplikacji Face Pointer jest dostępny w pakiecie @mediapipe/tasks-vision
NPM MediaPipe. 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 do 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 MediaPipe Face Punkt orientacyjny wymaga wytrenowanego modelu zgodnego z tym zadaniem. Więcej informacji o dostępnych wytrenowanych modelach dla znacznika twarzy znajdziesz w omówieniem zadań w sekcji dotyczącej modeli.
Wybierz i pobierz model, a następnie zapisz go w katalogu projektu:
<dev-project-root>/app/shared/models/
Tworzenie zadania
Aby przygotować zadanie do uruchamiania wnioskowania, użyj jednej z funkcji createFrom...() oznaczenia twarzy. 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
punktu orientacyjnego twarzy za pomocą opcji konfiguracji. Więcej informacji znajdziesz w artykule Opcje konfiguracji.
Poniższy kod pokazuje, jak skompilować 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 faceLandmarker = await faceLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
Opcje konfiguracji
To zadanie ma następujące opcje konfiguracji dla aplikacji internetowych i JavaScript:
| Nazwa opcji | Opis | Zakres wartości | Wartość domyślna |
|---|---|---|---|
running_mode |
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 |
numFaces |
Maksymalna liczba twarzy, które może wykryć FaceLandmarker. Wygładzanie jest stosowane tylko wtedy, gdy num_faces ma wartość 1.
|
Integer > 0 |
1 |
minFaceDetectionConfidence |
Minimalny stopień pewności, że wykrywanie twarzy zostanie uznane za udane. | Float [0.0,1.0] |
0.5 |
minFacePresenceConfidence |
Minimalny wskaźnik ufności wykrywania obecności twarzy w przypadku wykrywania punktów orientacyjnych twarzy. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
Minimalny wynik pewności, że śledzenie twarzy zostanie uznane za udane. | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
Określa, czy kreator twarzy wyświetla kształty twarzy. Do renderowania 3D modelu twarzy używane są kształty mieszania twarzy. | Boolean |
False |
outputFacialTransformationMatrixes |
Określa, czy FaceLandmarker generuje macierz transformacji twarzy. FaceLandmarker wykorzystuje macierz do przekształcania punktów orientacyjnych twarzy z kanonicznego modelu twarzy w wykrytą twarz, dzięki czemu użytkownicy mogą stosować efekty na wykryte punkty orientacyjne. | Boolean |
False |
Przygotuj dane
Narzędzie do rozpoznawania twarzy może wykrywać twarze na zdjęciach 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 szybko rozpoznać twarze w filmie, możesz użyć interfejsu API i szybko przetwarzać kolejne klatki na podstawie sygnatury czasowej klatki, aby określić, kiedy w filmie występują twarze.
Uruchamianie zadania
Do wywoływania wnioskowania służy funkcja detect() (w trybie biegania IMAGE) i detectForVideo() (w trybie biegowym VIDEO). Zadanie przetwarza dane, próbuje rozpoznać twarze, a potem zgłasza wyniki.
Wywołania metod detect() i detectForVideo() związane z punktem orientacyjnym twarzy są uruchamiane synchronicznie i blokują wątek interfejsu użytkownika. Jeśli wykryjesz twarze w klatkach wideo pochodzącej z kamery urządzenia, każde wykryte wykrywanie blokuje wątek główny. Aby temu zapobiec, zaimplementuj instancje robocze, które uruchamiają metody 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 faceLandmarkerResult = faceLandmarker.detect(image);
Wideo
await faceLandmarker.setOptions({ runningMode: "VIDEO" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
Pełniejszą implementację znajdziesz w przykładowym kodzie.
Obsługa i wyświetlanie wyników
Punkt orientacyjny twarzy zwraca obiekt wyniku przy każdym uruchomieniu wykrywania. Wynikowy obiekt zawiera siatkę z twarzami dla każdej wykrytej twarzy oraz współrzędne każdego punktu orientacyjnego. Opcjonalnie obiekt wyniku może zawierać również kształty twarzy oznaczające wyraz twarzy oraz macierz przekształceń twarzy do zastosowania efektów twarzy na wykryte punkty orientacyjne.
Poniżej znajdziesz przykład danych wyjściowych z tego zadania:
FaceLandmarkerResult:
face_landmarks:
NormalizedLandmark #0:
x: 0.5971359014511108
y: 0.485361784696579
z: -0.038440968841314316
NormalizedLandmark #1:
x: 0.3302789330482483
y: 0.29289937019348145
z: -0.09489090740680695
... (478 landmarks for each face)
face_blendshapes:
browDownLeft: 0.8296722769737244
browDownRight: 0.8096957206726074
browInnerUp: 0.00035583582939580083
browOuterUpLeft: 0.00035752105759456754
... (52 blendshapes for each face)
facial_transformation_matrixes:
[9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
[1.66496094e-02, 9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
...
Poniższy obraz przedstawia wizualizację wyników zadania:
Przykładowy kod funkcji Face Pointer pokazuje, jak wyświetlać wyniki zwrócone z zadania; patrz przykładowy kod.