La tarea Face Stylizer de MediaPipe te permite aplicar estilizaciones de rostro 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 funciones, 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 que la tengas como referencia. Este código te ayuda a probar esta tarea y comenzar a compilar tu propia app de estilización de rostros. Puedes ver, ejecutar y editar el código de ejemplo de Face Stylizer solo con tu navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo expresamente para usar Face Stylizer. Si deseas 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 de Face Stylizer 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 necesarios 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 contenido (CDN), agrega el siguiente código en 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 de Face Stylizer de MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Para obtener más información sobre los modelos entrenados disponibles para Face Stylizer, 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...() de Face Stylizer para preparar la tarea para ejecutar inferencias. Usa la función createFromModelPath() con una ruta de acceso relativa o
absoluta al archivo del modelo entrenado. Si tu modelo ya se cargó 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 Face Stylizer 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
Face Stylizer puede aplicar estilo a los rostros en imágenes en cualquier formato compatible con el navegador anfitrión. La tarea también controla el procesamiento previo de la entrada de datos, incluido el cambio de tamaño, la rotación y la normalización de valores.
Ejecuta la tarea
El Face Stylizer usa el método stylize() para activar inferencias. La tarea
procesa los datos, intenta estilizar los rostros y, luego, informa los resultados.
Las llamadas al método stylize() del Face Stylizer se ejecutan de forma síncrona y bloquean el subproceso de la 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 Face Stylizer muestra un objeto MPImage con una estilización del rostro más prominente de la imagen de entrada.
A continuación, se muestra un ejemplo de los datos de resultado de esta tarea:
El resultado anterior se creó aplicando el modelo Boceto de color a la siguiente imagen de entrada:
