Guide de style de visage pour le Web

La tâche MediaPipe Face Sylizer vous permet d'appliquer des styles aux visages sur une image. Vous pouvez utiliser cette tâche pour créer des avatars virtuels de différents styles.

L'exemple de code décrit dans ces instructions est disponible sur GitHub. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la présentation.

Exemple de code

L'exemple de code de Face Sylizer fournit une implémentation complète de cette tâche en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à créer votre propre application de stylisation des visages. Vous pouvez afficher, exécuter et modifier l'exemple de code Face Stylist à l'aide de votre navigateur Web.

Préparation

Cette section décrit les étapes clés pour configurer votre environnement de développement de manière spécifique afin d'utiliser Face Stylizer. Pour obtenir des informations générales sur la configuration de votre environnement de développement Web et JavaScript, y compris sur les versions de la plate-forme requises, consultez le guide de configuration pour le Web.

Packages JavaScript

Le code de Face Stylizer est disponible via le package MediaPipe @mediapipe/tasks-vision NPM. Vous pouvez trouver et télécharger ces bibliothèques en suivant les instructions du guide de configuration de la plate-forme.

Vous pouvez installer les packages requis via NPM à l'aide de la commande suivante:

npm install @mediapipe/tasks-vision

Si vous souhaitez importer le code de la tâche avec un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans la balise <head> de votre fichier 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>

Modèle

La tâche MediaPipe Face Sylizer nécessite un modèle entraîné compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour Face Sylizer, 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...() de Face Sylizer pour préparer la tâche à l'exécution d'inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au fichier du modèle entraîné. Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la méthode 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 le stylet de visage à l'aide d'options de configuration.

Le code suivant montre comment créer et configurer la tâche avec des options personnalisées:

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"
      },
    });

Préparation des données

Face Stylizer peut styliser les visages dans les images dans n'importe quel format compatible avec le navigateur hôte. Cette tâche gère également le prétraitement des entrées de données, y compris le redimensionnement, la rotation et la normalisation des valeurs.

Exécuter la tâche

Face Stylizer utilise la méthode stylize() pour déclencher des inférences. La tâche traite les données, tente de styliser les visages, puis consigne les résultats. Les appels à la méthode stylize() de Face Sylizer s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur.

Le code suivant montre comment exécuter le traitement avec le modèle de tâche:

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

Gérer et afficher les résultats

Face Sylizer renvoie un objet MPImage stylisé le visage le plus proéminent dans l'image d'entrée.

Voici un exemple des données de sortie de cette tâche:

La sortie ci-dessus a été créée en appliquant le modèle Color sketch à l'image d'entrée suivante: