Przedstawiamy Google AI Edge Portal: benchmark Edge AI na dużą skalę. Zarejestruj się, aby poprosić o dostęp podczas wersji prywatnej.

Przewodnik po wykrywaniu punktów orientacyjnych twarzy w przeglądarce

Zadanie MediaPipe Face Landmarker umożliwia wykrywanie punktów charakterystycznych twarzy i mimiki na obrazach i w filmach. Możesz używać tego interfejsu do rozpoznawania ludzkich wyrazów twarzy, stosowania filtrów i efektów oraz tworzenia wirtualnych awatarów. To zadanie wykorzystuje modele uczenia maszynowego, które mogą przetwarzać pojedyncze obrazy lub ciągły strumień obrazów. Zadanie zwraca trójwymiarowe punkty charakterystyczne twarzy, wyniki blendshape (współczynniki reprezentujące mimikę) do wnioskowania o szczegółowych powierzchniach twarzy w czasie rzeczywistym oraz macierze przekształceń do wykonywania przekształceń wymaganych do renderowania efektów.

Z tych instrukcji dowiesz się, jak używać narzędzia Face Landmarker 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 do wykrywania punktów charakterystycznych 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 punktów charakterystycznych twarzy. Możesz wyświetlać, uruchamiać i edytować przykład wykrywania punktów charakterystycznych twarzy w przeglądarce internetowej.

Konfiguracja

W tej sekcji opisujemy najważniejsze kroki konfigurowania środowiska programistycznego, które jest przeznaczone do korzystania z modelu Face Landmarker. 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 narzędzia Face Landmarker 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 Landmarker wymaga wytrenowanego modelu, który jest z nim zgodny. Więcej informacji o dostępnych wytrenowanych modelach do wykrywania punktów charakterystycznych 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...() Face Landmarker, 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 narzędzia Face Landmarker za pomocą opcji konfiguracji. Więcej informacji znajdziesz w sekcji 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 faceLandmarker = await faceLandmarker.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
`running_mode`	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`
`numFaces`	Maksymalna liczba twarzy, które może wykryć `FaceLandmarker`. Wygładzanie jest stosowane tylko wtedy, gdy wartość parametru `num_faces` wynosi 1.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Minimalny poziom ufności, przy którym wykrywanie twarzy jest uznawane za udane.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	Minimalny poziom ufności wykrycia twarzy w wykrywaniu punktów charakterystycznych twarzy.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Minimalny poziom ufności, przy którym śledzenie twarzy jest uznawane za udane.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Określa, czy funkcja Face Landmarker ma zwracać kształty twarzy. Kształty twarzy są używane do renderowania modelu twarzy 3D.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Określa, czy model FaceLandmarker ma zwracać macierz transformacji twarzy. FaceLandmarker używa macierzy do przekształcania punktów orientacyjnych twarzy z kanonicznego modelu twarzy na wykrytą twarz, dzięki czemu użytkownicy mogą stosować efekty do wykrytych punktów orientacyjnych.	`Boolean`	`False`

Przygotuj dane

Model Face Landmarker 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 oznaczyć punkty charakterystyczne twarzy w filmach, możesz użyć interfejsu API do szybkiego przetwarzania klatek pojedynczo. Sygnatura czasowa klatki pozwala określić, kiedy twarze pojawiają się w filmie.

Uruchamianie zadania

Model Face Landmarker używa metod detect() (w trybie IMAGE) i detectForVideo() (w trybie VIDEO) do wywoływania wnioskowania. Zadanie przetwarza dane, próbuje wyznaczyć punkty charakterystyczne twarzy, a następnie raportuje wyniki.

Wywołania metod Face Landmarker 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 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();
  });
}

Aby uzyskać bardziej szczegółowe informacje o wdrażaniu zadania wykrywania punktów charakterystycznych twarzy, zapoznaj się z tym przykładem.

Obsługa i wyświetlanie wyników

Detektor punktów charakterystycznych twarzy zwraca obiekt wyniku dla każdego wykrycia. Obiekt wyniku zawiera siatkę twarzy dla każdej wykrytej twarzy, z współrzędnymi każdego punktu charakterystycznego twarzy. Opcjonalnie obiekt wyniku może też zawierać kształty mieszane, które oznaczają mimikę, oraz macierz transformacji twarzy, która umożliwia stosowanie efektów twarzy do wykrytych punktów orientacyjnych.

Poniżej znajdziesz przykład danych wyjściowych 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]
    ...

Obraz poniżej przedstawia wizualizację wyniku zadania:

Mężczyzna z geometrycznie wyznaczonymi obszarami twarzy, które wskazują jej kształt i wymiary

Przykładowy kod Face Landmarker pokazuje, jak wyświetlać wyniki zwrócone przez zadanie. Zobacz przykład.