La tarea MediaPipe Face Stylizer te permite aplicar estilos de rostros a los rostros de una imagen. Puedes usar esta tarea para crear avatares virtuales en varios estilos.
La muestra de código que se describe en estas instrucciones está disponible en GitHub. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.
Ejemplo de código
El código de ejemplo de Face Stylizer proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y comenzar a compilar tu propia app para el estilo de rostro. Puedes ver, ejecutar y editar el código de ejemplo del estilizador de rostros solo con tu navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar el estilizador de rostros. Para obtener información general sobre la configuración de tu entorno de desarrollo web y de JavaScript, incluidos los requisitos de la versión de la plataforma, consulta la Guía de configuración para la Web.
Paquetes de JavaScript
El código del estilizador de rostros está disponible a través del paquete @mediapipe/tasks-vision
NPM de MediaPipe. Para encontrar y descargar estas bibliotecas, sigue las instrucciones de la Guía de configuración de la plataforma.
Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:
npm install @mediapipe/tasks-vision
Si deseas importar el código de la tarea con un servicio de red de distribución de contenidos (CDN), agrega el siguiente código a la etiqueta <head> de tu archivo HTML:
<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea MediaPipe Face Stylizer requiere un modelo entrenado que sea compatible con esta tarea. Si quieres obtener más información sobre los modelos entrenados disponibles para el Estilizador de rostros, consulta la descripción general de la tarea en la sección Modelos.
Selecciona y descarga un modelo, y almacénalo en el directorio del proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones createFrom...() del estilizador de rostros a fin de preparar la tarea para ejecutar inferencias. Usa la función createFromModelPath() con una ruta relativa o absoluta al archivo del modelo entrenado. Si tu modelo ya está cargado en la memoria, puedes usar el método createFromModelBuffer().
En el siguiente ejemplo de código, se muestra el uso de la función createFromOptions() para configurar la tarea. La función createFromOptions te permite personalizar el Estilizador de rostros con opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con opciones personalizadas:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
},
});
Preparar los datos
El Estilizador de rostros puede estilizar los rostros en imágenes en cualquier formato que admita el navegador host. La tarea también controla el procesamiento previo de entrada de datos, incluido el cambio de tamaño, la rotación y la normalización de valores.
Ejecuta la tarea
El estilizador de rostros usa el método stylize() para activar las inferencias. La tarea procesa los datos, intenta cambiar el estilo de los rostros y, luego, informa los resultados.
Las llamadas al método stylize() del estilizador de rostros se ejecutan de forma síncrona y bloquean el subproceso de interfaz de usuario.
En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
Cómo controlar y mostrar los resultados
El estilizador de rostros muestra un objeto MPImage con una estilización del rostro más destacado dentro de la imagen de entrada.
A continuación, se muestra un ejemplo de los datos de salida de esta tarea:
El resultado anterior se creó aplicando el modelo Boceto de color a la siguiente imagen de entrada:
