Google AI Edge Portal: Edge-KI im großen Maßstab benchmarken. Melden Sie sich an, um während der privaten Vorschau Zugriff anzufordern.

Leitfaden zur Erkennung von Sehenswürdigkeiten im Web

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

In dieser Anleitung erfahren Sie, wie Sie den Face Landmarker 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 enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Face Landmarker-App beginnen. Sie können das Beispiel für Face Landmarker einfach in Ihrem Webbrowser ansehen, ausführen und bearbeiten.

Einrichtung

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

JavaScript-Pakete

Der Code für Face Landmarker ist über das MediaPipe-@mediapipe/tasks-vision-NPM-Paket verfügbar. Sie können diese Bibliotheken gemäß der Anleitung im Einrichtungsleitfaden der Plattform suchen und herunterladen.

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

npm install @mediapipe/tasks-vision

Wenn Sie den Aufgaben-Code über einen CDN-Dienst (Content Delivery Network) importieren möchten, fügen Sie den folgenden Code in das <head>-Tag in 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.mjs"
    crossorigin="anonymous"></script>
</head>

Modell

Für die MediaPipe Face Landmarker-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den 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 in Ihrem Projektverzeichnis:

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

Aufgabe erstellen

Verwenden Sie eine der Face Landmarker-createFrom...()-Funktionen, um die Aufgabe für die Ausführung von Inferenz zu vorbereiten. Verwenden Sie die createFromModelPath()-Funktion mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Wenn Ihr Modell bereits in den Arbeitsspeicher geladen ist, können Sie die Methode createFromModelBuffer() verwenden.

Im folgenden Codebeispiel wird die Verwendung der Funktion createFromOptions() zum Einrichten der Aufgabe veranschaulicht. Mit der Funktion createFromOptions können Sie den Face Landmarker mit 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

Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen verfügbar:

Option	Beschreibung	Wertebereich	Standardwert
`running_mode`	Legt den Ausführungsmodus für die Aufgabe fest. Es gibt zwei Modi: IMAGE: Der Modus für einzelne Bildeingaben. VIDEO: Der Modus für decodierte Frames eines Videos oder eines Livestreams von Eingabedaten, z. B. von einer Kamera.	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	Die maximale Anzahl von Gesichtern, die von der `FaceLandmarker` erkannt werden können. Die Glättung wird nur angewendet, wenn `num_faces` auf 1 gesetzt ist.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Der Mindestkonfidenzwert, 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 Gesichts-Landmarks.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Der Mindest-Konfidenzwert, damit das Gesichtstracking als erfolgreich gilt.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Gibt an, ob Face Landmarker Gesichts-Blendshapes ausgibt. Gesichts-Blendshapes werden zum Rendern des 3D-Gesichtsmodells verwendet.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Gibt an, ob FaceLandmarker die Transformationsmatrix für das Gesicht ausgibt. Mit FaceLandmarker werden die markanten Stellen im Gesicht aus einem kanonischen Gesichtsmodell in das erkannte Gesicht transformiert. So können Nutzer Effekte auf die erkannten markanten Stellen anwenden.	`Boolean`	`False`

Daten vorbereiten

Mit Face Landmarker können Gesichter in Bildern in jedem Format erkannt werden, das vom Hostbrowser unterstützt wird. Die Aufgabe übernimmt auch die Vorverarbeitung der Dateneingabe, einschließlich Größenanpassung, Drehung und Wertnormalisierung. Um Gesichter in Videos mit Markierungen zu versehen, können Sie die API verwenden, um jeweils einen Frame schnell zu verarbeiten. Anhand des Zeitstempels des Frames lässt sich ermitteln, wann die Gesichter im Video zu sehen sind.

Aufgabe ausführen

Der Face Landmarker verwendet die Methoden detect() (mit dem Ausführungsmodus IMAGE) und detectForVideo() (mit dem Ausführungsmodus VIDEO), um Inferenzvorgänge auszulösen. Bei der Aufgabe werden die Daten verarbeitet, es wird versucht, Gesichter zu markieren, und dann werden die Ergebnisse gemeldet.

Aufrufe der Methoden detect() und detectForVideo() von Face Landmarker werden synchron ausgeführt und blockieren den Thread der Benutzeroberfläche. Wenn Sie Gesichter in Videobildern 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 der Ausführung einer Face Landmarker-Aufgabe finden Sie im Beispiel.

Ergebnisse verarbeiten und anzeigen

Der Face Landmarker gibt für jeden Erkennungslauf ein Ergebnisobjekt zurück. Das Ergebnisobjekt enthält ein Gesichts-Mesh für jedes erkannte Gesicht mit Koordinaten für jedes Gesichtsmerkmal. Optional kann das Ergebnisobjekt auch Blendshapes enthalten, die Gesichtsausdrücke darstellen, sowie eine Gesichtstransformationsmatrix, mit der Gesichtseffekte auf die erkannten Landmarken angewendet werden können.

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

Das folgende Bild zeigt eine Visualisierung der Aufgabenausgabe:

Ein Mann, dessen Gesicht in geometrische Regionen unterteilt ist, um die Form und Abmessungen seines Gesichts darzustellen

Der Beispielcode für Face Landmarker zeigt, wie die von der Aufgabe zurückgegebenen Ergebnisse angezeigt werden. Beispiel ansehen