La tâche "Styleur de visage MediaPipe" vous permet d'appliquer des stylisations aux visages d'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 Face Stylizer fournit une implémentation complète de cette tâche en JavaScript pour référence. Ce code vous aide à tester cette tâche et à commencer à créer votre propre application de stylisation de visage. Vous pouvez afficher, exécuter et modifier l'exemple de code du styliseur de visage à l'aide de votre navigateur Web.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiquement pour utiliser Face Stylister. Pour obtenir des informations générales sur la configuration de votre environnement de développement Web et JavaScript, y compris les exigences concernant les versions de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code du styliseur de visage est disponible via le package @mediapipe/tasks-vision
NPM MediaPipe. Pour trouver et télécharger ces bibliothèques, suivez les instructions du guide de configuration de la plate-forme.
Vous pouvez installer les paquets requis via NPM à l'aide de la commande suivante:
npm install @mediapipe/tasks-vision
Si vous souhaitez importer le code de 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 de stylisation du visage MediaPipe 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 Stylist, consultez la section Modèles de la présentation de la tâche.
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 Stylister pour préparer la tâche à l'exécution d'inférences. Utilisez la fonction createFromModelPath() avec un chemin relatif ou absolu vers le fichier de 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 styliseur de visage avec des 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éparer les données
Face Stylister peut styliser les visages dans les images dans n'importe quel format compatible avec le navigateur hôte. La tâche gère également le prétraitement de l'entrée des données, 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 indique les résultats.
Les appels à la méthode stylize() du styliseur de visage 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
Le styliseur de visage renvoie un objet MPImage avec une stylisation du visage le plus proéminent dans l'image d'entrée.
Voici un exemple des données de sortie de cette tâche:
Le résultat ci-dessus a été créé en appliquant le modèle Croquis de couleur à l'image d'entrée suivante:
