Leitfaden zur Erkennung von Sehenswürdigkeiten im Web

Mit der Aufgabe „MediaPipe Face Landmarker“ können Sie Gesichtsmerkmale und Gesichtsausdrücke in Bilder und Videos. Mit dieser Aufgabe können Sie menschliche Gesichtsausdrücke, Filter und Effekte für das Gesicht anwenden und virtuelle Avatare erstellen. Bei dieser Aufgabe werden Modelle für maschinelles Lernen (ML), die mit einzelnen Bildern oder einem kontinuierlichen einen Stream von Bildern. Die Aufgabe gibt dreidimensionale Orientierungspunkte für Gesichter aus: blendshape Werte (Koeffizienten, die den Gesichtsausdruck repräsentieren) ableiten, um detaillierte Gesichtsausdrücke abzuleiten in Echtzeit und Transformationsmatrizen, um die Transformationen, die für das Effektrendering erforderlich sind.

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

Codebeispiel

Der Beispielcode für Face Landmarker bietet eine vollständige Implementierung dieses in JavaScript ausführen. Dieser Code hilft Ihnen, diese Aufgabe zu testen und mit der Entwicklung einer eigenen App für Sehenswürdigkeiten begonnen. Sie können Daten abrufen, ausführen und Bearbeiten Sie den Beispielcode für Face Landmarker. ganz einfach in Ihrem Webbrowser.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung beschrieben. zur Nutzung von Face Landmarker. Allgemeine Informationen zu Ihre Web- und JavaScript-Entwicklungsumgebung einrichten, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web

JavaScript-Pakete

Der Face Landmarker-Code ist über MediaPipe @mediapipe/tasks-vision verfügbar NPM-Paket. Sie können Sie können diese Bibliotheken finden und herunterladen, indem Sie der Anleitung auf der Plattform folgen. Leitfaden für die Einrichtung

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

npm install @mediapipe/tasks-vision

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

<!-- 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 Aufgabe „MediaPipe Face Landmarker“ ist ein trainiertes Modell erforderlich, das mit diesem für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für Face Landmarker finden Sie unter 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

Mit einer der createFrom...()-Funktionen für Face Landmarks können Sie die Aufgabe für die Ausführung von Inferenzen vorbereiten. createFromModelPath() verwenden mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen wurde, können Sie den createFromModelBuffer()-Methode.

Im Codebeispiel unten wird gezeigt, wie Sie mit der Funktion createFromOptions() die Aufgabe eingerichtet haben. Mit der Funktion createFromOptions können Sie die Face Landmarker mit Konfigurationsoptionen Weitere Informationen finden Sie unter Konfigurationsoptionen.

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

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 hat 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 einer Video oder in einem Livestream mit Eingabedaten, etwa von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	Die maximale Anzahl an Gesichtern, die von `FaceLandmarker`. Die Glättung wird nur angewendet, `num_faces` ist auf „1“ festgelegt.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Der minimale Konfidenzwert für die Gesichtserkennung als erfolgreich angesehen wird.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	Der minimale Konfidenzwert für die Anwesenheit von Gesichtern bei der Erkennung von Gesichtsmerkmalen.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Der minimale Konfidenzwert für die Gesichtserkennung um als erfolgreich zu gelten.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Gibt an, ob Face Landmarker Überblendungen von Gesichtern ausgibt. Mischformen für Flächen werden für das Rendern des 3D-Gesichtsmodells verwendet.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Gibt an, ob FaceLandmarker das Gesicht ausgibt Transformationsmatrix. FaceLandmarker verwendet die um die Orientierungspunkte von einem kanonischen Gesichtsmodell erkanntes Gesicht, sodass Nutzer Effekte auf die erkannten Sehenswürdigkeiten anwenden können.	`Boolean`	`False`

Daten vorbereiten

Mit der Funktion „Face Landmark“ können Gesichter in Bildern in jedem Format erkannt werden, das vom Host-Browser. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Rotation und Wertnormalisierung. Zur Erkennung von Gesichtern in Videos können Sie mit der API schnell einen Frame nach dem anderen verarbeiten, indem Sie den Zeitstempel des Frames, um zu bestimmen, wann die Gesichter im Video zu sehen sind.

Aufgabe ausführen

Der Face Landmarker verwendet detect() (mit dem Laufmodus IMAGE) und detectForVideo() (mit Ausführungsmodus VIDEO) zum Auslösen von Methoden Rückschlüsse. Die Aufgabe verarbeitet die Daten, versucht, Gesichter mit Markierungen zu versehen und und meldet dann die Ergebnisse.

Aufrufe der Face Landmarker-Methoden detect() und detectForVideo() und den Benutzeroberflächen-Thread blockieren. Wenn Gesichter erkannt werden in Videoframes der Kamera eines Geräts blockieren, blockiert jede Erkennung die wichtigsten Diskussions-Thread. Sie können dies verhindern, indem Sie Web Worker zur Ausführung von detect() implementieren und detectForVideo() in einem anderen Thread.

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 ausführlichere Implementierung der Ausführung einer Face Landmarker-Aufgabe finden Sie in der Codebeispiel an.

Ergebnisse verarbeiten und anzeigen

Der Face Landmarker gibt für jede Erkennung ein Ergebnisobjekt zurück ausführen. Das Ergebnisobjekt enthält für jedes erkannte Gesicht ein Face Mesh mit Koordinaten für jede Orientierungsstelle der Gesichter. Optional kann das Ergebnisobjekt auch Mimikformen enthalten, die Gesichtsausdrücke kennzeichnen, und eine Gesichtsform Transformationsmatrix, um Gesichtseffekte auf die erkannten Orientierungspunkte 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 der Aufgabe zurückgegebene Ergebnisse finden Sie in der Codebeispiel