Guía de estilización de rostros para la Web

La tarea Estilizador de rostros de MediaPipe te permite aplicar estilizaciones de rostros a los rostros de una imagen. Puedes usar esta tarea para crear avatares virtuales con varios estilos.

La muestra de código descrita en estas instrucciones está disponible en GitHub: Para obtener más información sobre las capacidades, los modelos y las opciones de configuración para completar esta tarea, consulta la Descripción general.

Ejemplo de código

El código de ejemplo para el estilizador de rostros brinda una implementación completa de esto. en JavaScript para tu referencia. Este código te ayuda a probar la tarea y comienza a compilar tu propia app de estilización de rostros. Puedes ver, ejecutar y Edita el ejemplo del Estilizador de rostros . código de sitios web solo con tu navegador.

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 cómo configurar tu entorno de desarrollo web y JavaScript, incluida 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 de MediaPipe @mediapipe/tasks-vision. NPM. Puedes encontrar y descarga estas bibliotecas siguiendo las instrucciones que se indican en la página Configuración de la guía de YouTube.

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 con 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 -->
<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. Para obtener más información sobre los modelos entrenados disponibles para el Estilizador de rostros, 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 Estilizador de rostros para preparar la tarea. ejecutar inferencias. Usa la función createFromModelPath() con un valor relativo absoluta al archivo del modelo entrenado. Si tu modelo ya está cargado en puedes usar el método 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 Estilizador de rostros con 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 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 rostros en imágenes en cualquier formato que admita el host. navegador. La tarea también maneja el procesamiento previo de la entrada de datos, lo que incluye el cambio de tamaño, 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 estilizar 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 las 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 resultados

El estilizador de rostros muestra un objeto MPImage con una estilización de lo más prominente 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ó con la aplicación del Boceto de color modelo a la siguiente imagen de entrada: