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