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

Zadanie MediaPipe Face wygenerowane przez punkt orientacyjny pozwala wykrywać punkty orientacyjne i wyrazy twarzy (zdjęcia i filmy). Możesz używać tego zadania do rozpoznawania wyrazu twarzy ludzi, dodawać filtry i efekty twarzy oraz tworzyć wirtualne awatary; To zadanie używa modeli systemów uczących się, które mogą pracować z pojedynczymi obrazami wiele obrazów. Zadanie zwraca trójwymiarowe punkty orientacyjne płaszczyzny, kształt połączenia wyniki (współczynniki reprezentujące wyraz twarzy) pozwalające ocenić powierzchnie w czasie rzeczywistym oraz macierze transformacji, aby przeprowadzić przekształcenia wymagane do renderowania efektów.

Te instrukcje pokazują, jak korzystać z znacznika twarzy w przeglądarce internetowej i 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 znacznika twarzy zapewnia pełną implementację tego w JavaScripcie. Ten kod pomoże Ci przetestować to zadanie i uzyskać rozpoczął tworzenie własnej aplikacji do rozpoznawania twarzy. Możesz wyświetlać, uruchamiać edytuj przykładowy kod znacznika twarzy. tylko za pomocą przeglądarki.

Konfiguracja

W tej sekcji znajdziesz najważniejsze czynności, które musisz wykonać, aby skonfigurować środowisko programistyczne. konkretnie w celu korzystania z funkcji rozpoznawania 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 Face orientacyjnego 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 MediaPipe Face Markuper wymaga wytrenowanego modelu zgodnego z tym zadanie. Więcej informacji o dostępnych wytrenowanych modelach na potrzeby rozpoznawania 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 oznaczenia 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 Punkt orientacyjny twarzy z opcjami konfiguracji. Więcej informacji: 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 faceLandmarker = await faceLandmarker.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
running_mode 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
numFaces Maksymalna liczba twarzy, które mogą wykryć FaceLandmarker. Wygładzanie jest stosowane tylko wtedy, gdy num_faces ma wartość 1. Integer > 0 1
minFaceDetectionConfidence Minimalny poziom ufności wymagany do wykrywania twarzy została uznana za udaną. Float [0.0,1.0] 0.5
minFacePresenceConfidence Minimalny wskaźnik ufności obecności twarzy punkty w wykrywaniu punktów orientacyjnych twarzy. Float [0.0,1.0] 0.5
minTrackingConfidence Minimalny wskaźnik ufności dla śledzenia twarzy można uznać za udany. Float [0.0,1.0] 0.5
outputFaceBlendshapes Określa, czy narzędzie Rozpoznania twarzy generuje połączenia kształtów twarzy. Połączenie kształtów twarzy służy do renderowania modelu twarzy 3D. Boolean False
outputFacialTransformationMatrixes Określa, czy FaceLandmarker wyświetla twarz macierz przekształceń. FaceLandmarker używa do przekształcenia punktów orientacyjnych twarzy z kanonicznego modelu twarzy na wykrytej twarzy, dzięki czemu użytkownicy mogą stosować efekty na wykrytych punktach orientacyjnych. Boolean False

Przygotuj dane

Narzędzie do określania 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 zobaczyć 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

Oznaczenie twarzy używa tych parametrów: detect() (w trybie uruchamiania IMAGE) i Metody do aktywowania: detectForVideo() (z trybem uruchamiania VIDEO) danych. Zadanie przetworzy dane, próbuje wyznaczyć punkt orientacyjny twarze, i raportuje wyniki.

Uruchomione są wywołania metody pomiaru 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 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łną implementację uruchamiania zadania określania punktów orientacyjnych twarzy znajdziesz w przykładowego kodu.

Obsługa i wyświetlanie wyników

Znacznik twarzy zwraca obiekt wynikowy przy każdym wykryciu bieganie. Obiekt wynikowy zawiera siatkę twarzy dla każdej wykrytej twarzy, w której dla każdego punktu orientacyjnego twarzy. Opcjonalnie obiekt wyniku może też zawierają elementy łączące mimikę macierz przekształceń pozwalającą zastosować efekty twarzy do wykrytych punktów orientacyjnych.

Poniżej znajdziesz przykładowe dane wyjściowe 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]
    ...

Ten obraz przedstawia wizualizację danych wyjściowych zadania:

Przykładowy kod znacznika twarzy pokazuje, jak wyświetlać wyników zwróconych przez zadanie, patrz przykładowy kod