Guide de style de visage pour le Web

<ph type="x-smartling-placeholder">

La tâche MediaPipe "Face Stylizer" (Stylet de visage MediaPipe) vous permet d'appliquer des stylisations aux visages dans 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 section Présentation.

Exemple de code

L'exemple de code pour le styliseur de visage fournit une implémentation complète de cette en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et commencez à créer votre propre application de stylisation des visages. Vous pouvez afficher, exécuter Modifier le styliseur de visage exemple du code uniquement en utilisant votre code navigateur.

Configuration

Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiquement pour utiliser la fonction Styliseur de visage. Pour obtenir des informations générales sur la configuration développement Web et JavaScript, y compris la version de la plate-forme configuration requise, consultez le guide de configuration pour le Web.

Packages JavaScript

Le code du stylet de visage est disponible via MediaPipe @mediapipe/tasks-vision NPM. Vous pouvez trouver et téléchargez ces bibliothèques en suivant les instructions du guide de configuration guide de démarrage.

<ph type="x-smartling-placeholder">

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 réseau de diffusion de contenu (CDN) ajoutez le code suivant dans la section <head> dans 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 Stylizer nécessite un modèle entraîné et compatible avec ce tâche. Pour en savoir plus sur les modèles entraînés disponibles pour le styliseur de visage, 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

Utiliser l'une des fonctions createFrom...() du styliseur de visage pour préparer la tâche pour exécuter des inférences. Utilisez la fonction createFromModelPath() avec un opérateur relatif un chemin d'accès absolu au fichier de modèle entraîné. Si votre modèle est déjà chargé 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 Styliseur de visage avec options de configuration.

Le code suivant montre comment compiler et configurer la tâche avec des options:

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éparer les données

Styliseur de visage peut styliser les visages sur les images dans tous les formats acceptés par l'hôte navigateur. Elle gère aussi le prétraitement des données d'entrée, y compris le redimensionnement, la rotation et la normalisation des valeurs.

Exécuter la tâche

Le styliseur de visage utilise la méthode stylize() pour déclencher des inférences. La tâche traite les données, tente de styliser les visages, puis transmet les résultats. Les appels à la méthode stylize() du styliseur de visage s'exécutent de manière synchrone et bloquent thread d'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

L'outil de stylisation de visages renvoie un objet MPImage avec une stylisation des un visage proéminent dans l'image d'entrée.

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

La sortie ci-dessus a été créée en appliquant le croquis des couleurs. à l'image d'entrée suivante: