La tâche MediaPipe Face Markerer vous permet de détecter des repères de visage et des expressions faciales dans des images et des vidéos. Vous pouvez l'utiliser pour identifier des expressions faciales, appliquer des filtres et des effets sur le visage, créer des avatars virtuels, etc. Cette tâche utilise des modèles de machine learning (ML) capables de fonctionner avec des images uniques ou un pipeline d'images. La tâche génère des repères de visage en 3 dimensions, "Blendshape" (coefficients représentant l'expression faciale) pour déduire des expressions faciales détaillées surfaces en temps réel, et des matrices de transformation pour effectuer la et les transformations requises pour le rendu des effets.
Ces instructions vous expliquent comment utiliser le repère de visage pour le Web et JavaScript. applications. Pour en savoir plus sur les fonctionnalités, les modèles et la configuration options de cette tâche, consultez la section Présentation.
Exemple de code
L'exemple de code pour Face Markerer fournit une implémentation complète de cette en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à obtenir vous avez commencé à créer votre propre application de repère de visages. Vous pouvez afficher, exécuter modifier l'exemple de code Face Markerer. en utilisant uniquement votre navigateur Web.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement en particulier pour utiliser Face Markerer. Pour obtenir des informations générales sur à configurer votre environnement de développement Web et JavaScript, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web
Packages JavaScript
Le code Face Markerer est disponible via MediaPipe @mediapipe/tasks-vision.
NPM. Vous pouvez
recherchez et téléchargez ces bibliothèques en suivant les instructions
Guide de configuration
Vous pouvez installer les packages requis via NPM en exécutant la commande suivante:
npm install @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un réseau de diffusion de contenu (CDN) ajoutez le code suivant dans la section <head> dans votre fichier 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>
Modèle
La tâche MediaPipe Face Markerer nécessite un modèle entraîné et compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour Face Markerer, consultez la section Modèles de la présentation des tâches.
Sélectionnez et téléchargez un modèle, puis stockez-le dans le répertoire de votre projet:
<dev-project-root>/app/shared/models/
Créer la tâche
Utilisez l'une des fonctions createFrom...() Face Markerer pour :
préparer la tâche à exécuter des inférences. Utiliser le createFromModelPath()
avec un chemin d'accès relatif ou absolu vers le fichier de modèle entraîné.
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la
createFromModelBuffer().
L'exemple de code ci-dessous montre comment utiliser la fonction createFromOptions() pour
configurer la tâche. La fonction createFromOptions vous permet de personnaliser
Utilisez le repère de reconnaissance du visage avec des options de configuration. Pour en savoir plus, consultez
Options de configuration.
Le code suivant montre comment compiler et configurer la tâche avec des options:
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
});
Options de configuration
Cette tâche comporte les options de configuration suivantes pour le Web et JavaScript applications:
| Nom de l'option | Description | Plage de valeurs | Valeur par défaut |
|---|---|---|---|
running_mode |
Définit le mode d'exécution de la tâche. Il y a deux
modes: IMAGE: mode utilisé pour la saisie d'une seule image. VIDÉO: mode utilisé pour les images décodées d'une image vidéo ou sur un flux en direct de données d'entrée, comme celles d'une caméra. |
{IMAGE, VIDEO} |
IMAGE |
numFaces |
Nombre maximal de visages pouvant être détectés par le
le FaceLandmarker. Le lissage n'est appliqué
num_faces est défini sur 1.
|
Integer > 0 |
1 |
minFaceDetectionConfidence |
Score de confiance minimal pour la détection de visages considéré comme réussi. | Float [0.0,1.0] |
0.5 |
minFacePresenceConfidence |
Score de confiance minimal de présence du visage dans la détection de points de repère faciales. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
Score de confiance minimal pour le suivi du visage pour être considéré réussi. | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
Indique si Face Markerer génère des propriétés de fusion des visages. Les formes de visages sont utilisées pour le rendu du modèle de visage en 3D. | Boolean |
False |
outputFacialTransformationMatrixes |
Indique si FaceLandmarker renvoie les résultats de transformation numérique. FaceLandMarker utilise la paire valeur/clé pour transformer les repères de visage d'une empreinte faciale canonique en visage détecté, afin que les utilisateurs puissent appliquer des effets aux points de repère détectés. | Boolean |
False |
Préparer les données
Face Markerer peut détecter les visages dans les images dans n'importe quel format compatible avec le navigateur hôte. Elle gère également le prétraitement des entrées de données, le redimensionnement, la rotation et la normalisation des valeurs. Pour marquer des visages dans vos vidéos : vous pouvez utiliser l'API pour traiter rapidement une image à la fois, à l'aide du code temporel du cadre pour déterminer à quel moment les visages apparaissent dans la vidéo.
Exécuter la tâche
Face Markerer utilise le detect() (avec le mode d'exécution IMAGE) et
detectForVideo() (avec le mode d'exécution VIDEO) pour déclencher
les inférences. La tâche traite les données,
essaie de marquer des visages et
puis génère un rapport présentant les résultats.
Les appels vers les méthodes detect() et detectForVideo() du repère de visage s'exécutent
de manière synchrone et
bloquent le thread de l'interface utilisateur. Si vous détectez des visages
dans les images vidéo de la caméra d'un appareil, chaque détection bloque
thread. Pour éviter cela, implémentez des nœuds de calcul Web afin d'exécuter detect().
et detectForVideo() sur un autre thread.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Image
const image = document.getElementById("image") as HTMLImageElement; const faceLandmarkerResult = faceLandmarker.detect(image);
Vidéo
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(); }); }
Pour une implémentation plus complète de l'exécution d'une tâche Face Markerer, consultez la exemple de code.
Gérer et afficher les résultats
Face Markerer renvoie un objet de résultat pour chaque détection exécuter. L'objet du résultat contient une grille pour chaque visage détecté, avec les coordonnées géographiques de chaque repère de visage. L'objet de résultat peut aussi contiennent des mélanges de formes, qui représentent les expressions faciales et une pour appliquer des effets de visage aux points de repère détectés.
Voici un exemple de données de sortie de cette tâche:
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]
...
L'image suivante montre une visualisation du résultat de la tâche:
L'exemple de code Face Markerer montre comment afficher le renvoyés par la tâche, consultez la exemple de code