Leitfaden zur Erkennung von Sehenswürdigkeiten im Web

Mit der MediaPipe Face Landmark-Aufgabe können Sie Gesichtsmerkmale und Gesichtsausdrücke in Bildern und Videos erkennen. Sie können menschliche Gesichtsausdrücke erkennen, Gesichtsfilter und -effekte anwenden und virtuelle Avatare erstellen. Bei dieser Aufgabe werden Modelle für maschinelles Lernen (ML) verwendet, die mit einzelnen Bildern oder einem kontinuierlichen Bilderstream arbeiten können. Die Aufgabe gibt dreidimensionale Gesichtsmerkmale, Blendshape-Werte (Koeffizienten, die den Gesichtsausdruck darstellen) aus, um detaillierte Gesichtsflächen in Echtzeit abzuleiten, und Transformationsmatrizen, um die für das Rendern von Effekten erforderlichen Transformationen durchzuführen.

In dieser Anleitung erfahren Sie, wie Sie Face Landmark für Web- und JavaScript-Apps verwenden. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Face Landmarker bietet eine vollständige JavaScript-Implementierung dieser Aufgabe. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Face Landmarker-App beginnen. Sie können den Beispielcode für Face Landmarker nur in Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten der Entwicklungsumgebung speziell für die Verwendung von Face Landmark beschrieben. Allgemeine Informationen zum Einrichten der Web- und JavaScript-Entwicklungsumgebung, einschließlich der Plattformversionsanforderungen, finden Sie im Einrichtungsleitfaden für das Web.

JavaScript-Pakete

Face Landmark-Code ist über das @mediapipe/tasks-vision NPM-Paket von MediaPipe verfügbar. Folgen Sie der Anleitung im Einrichtungsleitfaden für die Plattform, um diese Bibliotheken zu suchen und herunterzuladen.

Mit dem folgenden Befehl können Sie die erforderlichen Pakete über NPM installieren:

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgabencode über einen Content Delivery Network-Dienst (CDN) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag Ihrer HTML-Datei ein:

<!-- 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>

Modell

Für die MediaPipe Face Landmark-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu verfügbaren trainierten Modellen für Face Landmarker finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.

Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es dann in Ihrem Projektverzeichnis:

<dev-project-root>/app/shared/models/

Aufgabe erstellen

Verwenden Sie eine der createFrom...()-Funktionen von Face Landmark, um die Aufgabe zum Ausführen von Inferenzen vorzubereiten. Verwenden Sie die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn das Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Das folgende Codebeispiel zeigt, wie Sie die Aufgabe mit der Funktion createFromOptions() einrichten. Mit der Funktion createFromOptions können Sie die Gesichtsmarkierung über Konfigurationsoptionen anpassen. Weitere Informationen finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie Sie die Aufgabe mit benutzerdefinierten Optionen erstellen und konfigurieren:

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
    });

Konfigurationsoptionen

Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen:

Option	Beschreibung	Wertebereich	Standardwert
`running_mode`	Legt den Ausführungsmodus für die Task fest. Es gibt zwei Modi: IMAGE: Der Modus für Einzelbildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder in einem Livestream mit Eingabedaten, z. B. von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	Die maximale Anzahl der Gesichter, die vom `FaceLandmarker` erkannt werden können. Die Glättung wird nur angewendet, wenn `num_faces` auf 1 gesetzt ist.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Der minimale Konfidenzwert, damit die Gesichtserkennung als erfolgreich gilt.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	Der minimale Konfidenzwert für die Gesichtserkennung bei der Erkennung von Sehenswürdigkeiten.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Der Mindestkonfidenzwert, der für eine erfolgreiche Gesichtserkennung erforderlich ist.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Legt fest, ob Gesichtsmarkierer Gesichtsverzerrungsformen ausgibt. Gesichtsmischformen werden für das Rendern des 3D-Gesichtsmodells verwendet.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Gibt an, ob FaceLandmarker die Matrix für die Gesichtstransformation ausgibt. FaceLandmarker verwendet die Matrix, um die Gesichtsmerkmale von einem kanonischen Gesichtsmodell in das erkannte Gesicht umzuwandeln, sodass Nutzer Effekte auf erkannte Orientierungspunkte anwenden können.	`Boolean`	`False`

Daten vorbereiten

Face Landmarker kann Gesichter auf Bildern in jedem Format erkennen, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertenormalisierung. Wenn du Gesichter in Videos mit einer Markierung versehen möchtest, kannst du die API nutzen, um Frame für Frame schnell zu verarbeiten und anhand des Zeitstempels des Frames zu bestimmen, wann die Gesichter im Video zu sehen sind.

Task ausführen

Face Landmarker verwendet die Methoden detect() (im Laufmodus IMAGE) und detectForVideo() (im Ausführungsmodus VIDEO), um Inferenzen auszulösen. Die Aufgabe verarbeitet die Daten, versucht, Gesichter mit einer Markierung zu versehen und meldet dann die Ergebnisse.

Aufrufe der Face Landmark-Methoden detect() und detectForVideo() werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Gesichter in Videoframes von der Kamera eines Geräts erkennen, blockiert jede Erkennung den Hauptthread. Sie können dies verhindern, indem Sie Web-Worker implementieren, um die Methoden detect() und detectForVideo() in einem anderen Thread auszuführen.

Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:

Bild

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

Video

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();
  });
}

Eine vollständigere Implementierung des Ausführens einer Face Landmark-Aufgabe finden Sie im Codebeispiel.

Ergebnisse verarbeiten und anzeigen

Face Landmarker gibt für jeden Erkennungslauf ein Ergebnisobjekt zurück. Das Ergebnisobjekt enthält ein Face Mesh für jedes erkannte Gesicht mit Koordinaten für jede Gesichtsmarkierung. Optional kann das Ergebnisobjekt auch Blendshapes (Mischformen) zur Darstellung von Gesichtsausdrücken und eine Gesichtstransformationsmatrix enthalten, um Gesichtseffekte auf die erkannten Sehenswürdigkeiten anzuwenden.

Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

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]
    ...

Die folgende Abbildung zeigt eine Visualisierung der Aufgabenausgabe:

Der Beispielcode für Face Landmarker zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden (siehe Codebeispiel).