La tarea MediaPipe Face Landmarker te permite detectar puntos de referencia y expresiones faciales en imágenes y videos. Puedes usar esta tarea para identificar expresiones faciales humanas, aplicar filtros faciales y efectos, y crear avatares virtuales. En esta tarea, se utiliza modelos de aprendizaje automático (AA) que pueden funcionar con imágenes únicas o una flujo continuo de imágenes. La tarea genera puntos de referencia tridimensionales de rostros, puntuaciones (coeficientes que representan la expresión facial) para inferir los detalles faciales superficies en tiempo real, y matrices de transformación para realizar la transformaciones necesarias para la renderización de efectos.
En estas instrucciones, se muestra cómo usar Face Landmarker para la Web y JavaScript de Google Chat. Para obtener más información sobre las capacidades, los modelos y la configuración para realizar esta tarea, consulta la Descripción general.
Ejemplo de código
El ejemplo de código de Face Landmarker brinda una implementación completa de este en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y obtener empezaste a crear tu propia app de señalización de rostros. Puedes ver, ejecutar y editar el código de ejemplo del marcador de posición de rostro usando solo el navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar Face Landmarker. Para obtener información general configurar tu entorno de desarrollo web y de JavaScript, lo que incluye de la versión de la plataforma, consulta la Guía de configuración para la Web.
Paquetes de JavaScript
El código de Face Landmarker está disponible a través de MediaPipe @mediapipe/tasks-vision
NPM. Puedes
sigue las instrucciones de la plataforma para encontrar y descargar estas bibliotecas.
Guía de configuración.
Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:
npm install @mediapipe/tasks-vision
Si quieres importar el código de la tarea a través de una red de distribución de contenidos (CDN) agrega el siguiente código en la sección <head> etiqueta en tu archivo 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>
Modelo
Para la tarea MediaPipe Face Landmarker, se requiere un modelo entrenado compatible con tarea. Para obtener más información sobre los modelos entrenados disponibles para Face Landmarker, consulta la sección Modelos de la descripción general de la tarea.
Selecciona y descarga un modelo y, luego, guárdalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones createFrom...() del marcador de posición de rostro para hacer lo siguiente:
preparan la tarea para ejecutar inferencias. Usa el createFromModelPath()
con una ruta de acceso absoluta o relativa al archivo de modelo entrenado.
Si tu modelo ya está cargado en la memoria, puedes usar
createFromModelBuffer().
En el siguiente ejemplo de código, se demuestra el uso de la función createFromOptions() para
configurar la tarea. La función createFromOptions te permite personalizar la
Face Landmarker con opciones de configuración Para obtener más información, consulta
Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con Opciones:
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
});
Opciones de configuración
Esta tarea tiene las siguientes opciones de configuración para la Web y JavaScript aplicaciones:
| Nombre de la opción | Descripción | Rango de valores | Valor predeterminado |
|---|---|---|---|
running_mode |
Establece el modo de ejecución de la tarea. Existen dos
modos: IMAGE: Es el modo para entradas de una sola imagen. VIDEO: el modo para fotogramas decodificados de una o en una transmisión en vivo de datos de entrada, como los de una cámara. |
{IMAGE, VIDEO} |
IMAGE |
numFaces |
El número máximo de rostros que puede detectar el sistema
FaceLandmarker El suavizado solo se aplica cuando
num_faces se establece en 1.
|
Integer > 0 |
1 |
minFaceDetectionConfidence |
La puntuación de confianza mínima para la detección de rostro correctamente. | Float [0.0,1.0] |
0.5 |
minFacePresenceConfidence |
La puntuación de confianza mínima de la presencia facial en la detección de puntos de referencia faciales. | Float [0.0,1.0] |
0.5 |
minTrackingConfidence |
La puntuación de confianza mínima para el seguimiento de rostros para ser considerada exitosa. | Float [0.0,1.0] |
0.5 |
outputFaceBlendshapes |
Indica si Face Landmarker genera combinaciones de rostros. Las formas de combinación de rostros se utilizan para renderizar el modelo de rostro 3D. | Boolean |
False |
outputFacialTransformationMatrixes |
Si FaceLandmarker produce el rostro de transformación de datos. FaceLandmarker usa el elemento para transformar los puntos de referencia de los rostros de un modelo de rostro canónico para que los usuarios puedan aplicar efectos en los puntos de referencia detectados. | Boolean |
False |
Preparar los datos
Face Landmarker puede detectar rostros en imágenes en cualquier formato compatible con el navegador del host. La tarea también maneja el procesamiento previo de la entrada de datos, lo que incluye cambio de tamaño, rotación y normalización de valores. Como puntos de referencia en videos puedes usar la API para procesar rápidamente un fotograma a la vez, con la marca de tiempo del fotograma para determinar cuándo aparecen los rostros en el video.
Ejecuta la tarea
El marcador de posición Face usa el objeto detect() (con el modo de ejecución IMAGE) y
Métodos detectForVideo() (con el modo de ejecución VIDEO) para activar
para hacer inferencias. La tarea procesa los datos, intenta establecer puntos de referencia para los rostros y
y, luego, informa los resultados.
Se ejecutan las llamadas a los métodos detect() y detectForVideo() de Face Landmarker
de forma síncrona y bloquea el subproceso de la interfaz de usuario. Si detectas rostros
en fotogramas de video desde la cámara de un dispositivo, cada detección bloquea la principal
conversación. Para evitar esto, implementa trabajadores web para ejecutar detect().
y detectForVideo() en otro subproceso.
En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:
Imagen
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(); }); }
Para ver una implementación más completa de la ejecución de una tarea de Face Landmarker, consulta la ejemplo de código de barras.
Cómo controlar y mostrar resultados
El marcador de posición de rostro muestra un objeto de resultado para cada detección cuando se ejecute. El objeto resultante contiene una malla de rostros para cada rostro detectado, con coordenadas correspondientes a cada punto de referencia facial. Opcionalmente, el objeto resultante también puede contienen formas combinadas, que denotan expresiones faciales, y un de transformación para aplicar efectos faciales en los puntos de referencia detectados.
A continuación, se muestra un ejemplo de los datos de salida de esta tarea:
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]
...
En la siguiente imagen, se muestra una visualización del resultado de la tarea:
El código de ejemplo de Face Landmarker demuestra cómo mostrar la resultados que devolvió la tarea, consulta la ejemplo de código