La tâche MediaPipe Image Segmenter vous permet de diviser les images en régions en fonction de catégories prédéfinies pour l'application d'effets visuels tels que le floutage de l'arrière-plan. Ces instructions vous expliquent comment utiliser le segmenteur d'images pour les applications Node et Web. 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 pour Image Segmenter 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 segmentation d'image. Vous pouvez afficher, exécuter et modifier l'exemple de code du Segment d'images à l'aide de votre navigateur Web. Vous pouvez également examiner le code de cet exemple sur GitHub.
Préparation
Cette section décrit les étapes clés de la configuration de votre environnement de développement et de vos projets de code spécifiquement pour l'utilisation de Segmenter d'images. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour l'utilisation des tâches MediaPipe, y compris sur les exigences de version de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code de segmentation d'images est disponible via le package @mediapipe/tasks-vision
NPM MediaPipe. Vous pouvez trouver et télécharger ces bibliothèques à partir des liens fournis dans le guide de configuration de la plate-forme.
Vous pouvez installer les packages requis avec le code suivant pour la préproduction locale à l'aide de la commande suivante:
npm install --save @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans le tag de votre fichier HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modèle
La tâche MediaPipe Image Segmenter 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 le Segment d'images, 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...() du segmenteur d'images pour préparer la tâche à l'exécution des 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 segmenteur d'images à l'aide d'options de configuration. Pour en savoir plus sur la configuration des tâches, consultez Options de configuration.
Le code suivant montre comment créer et configurer la tâche avec des options personnalisées:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
Pour une implémentation plus complète de la création d'une tâche de segmentation d'image, consultez l'exemple de code.
Options de configuration
Cette tâche dispose des options de configuration suivantes pour les applications Web:
| Nom de l'option | Description | Plage de valeurs | Valeur par défaut |
|---|---|---|---|
runningMode |
Définit le mode d'exécution de la tâche. Il existe deux modes: IMAGE: mode pour les entrées d'une seule image. VIDEO: mode pour les images décodées d'une vidéo ou d'une diffusion en direct de données d'entrée, par exemple depuis une caméra. |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
Si la valeur est True, la sortie inclut un masque de segmentation sous la forme d'une image uint8, où chaque valeur de pixel indique la valeur de la catégorie gagnante. |
{True, False} |
False |
outputConfidenceMasks |
Si la valeur est True, la sortie inclut un masque de segmentation sous la forme d'une image à valeur flottante, où chaque valeur flottante représente le tableau du score de confiance de la catégorie. |
{True, False} |
True |
displayNamesLocale |
Définit la langue des libellés à utiliser pour les noms à afficher fournis dans les métadonnées du modèle de la tâche, le cas échéant. La valeur par défaut est en pour l'anglais. Vous pouvez ajouter des thèmes localisés aux métadonnées d'un modèle personnalisé à l'aide de l'API TensorFlow Lite Metadata Writer.
| Code des paramètres régionaux | en |
Préparation des données
Image Segmenter peut segmenter des objets dans des images dans n'importe quel format compatible avec le navigateur hôte. Cette 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.
Les appels aux méthodes segment() et segmentForVideo() du segmenteur d'images s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous segmentez des objets dans des images vidéo à partir de l'appareil photo d'un appareil, chaque tâche de segmentation bloque le thread principal. Vous pouvez empêcher cela en implémentant des nœuds de calcul Web pour exécuter segment() et segmentForVideo() sur un autre thread.
Exécuter la tâche
Le segmenteur d'images utilise la méthode segment() avec le mode image et la méthode segmentForVideo() avec le mode video pour déclencher des inférences. Il renvoie les segments détectés sous forme de données d'image à une fonction de rappel que vous avez définie lors de l'exécution d'une inférence pour la tâche.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Images
const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void {
const video = document.getElementById("video");
let startTimeMs = performance.now();
imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);
requestAnimationFrame(() => {
renderLoop();
});
}
Pour une implémentation plus complète de l'exécution d'une tâche de segmentation d'image, consultez l'exemple de code.
Gérer et afficher les résultats
Lors de l'exécution de l'inférence, la tâche Image Segmenter renvoie les données d'image de segment à une fonction de rappel. Le contenu du résultat dépend de la outputType que vous avez définie lors de la configuration de la tâche.
Les sections suivantes présentent des exemples de données de sortie de cette tâche:
Fiabilité de la catégorie
Les images suivantes montrent une visualisation du résultat de la tâche pour un masque de confiance de catégorie. Le résultat du masque de confiance contient des valeurs flottantes comprises entre [0, 1].
Sortie du masque de confiance de la catégorie et de l'image d'origine. Image source de l'ensemble de données Pascal VOC 2012.
Valeur de la catégorie
Les images suivantes montrent une visualisation du résultat de la tâche pour un masque de valeur de catégorie. La plage du masque de catégorie est [0, 255], et chaque valeur de pixel représente l'index de catégorie gagnant de la sortie du modèle. L'indice des catégories gagnantes obtient le score le plus élevé parmi les catégories reconnues par le modèle.
Sortie de l'image d'origine et du masque de catégorie. Image source de l'ensemble de données Pascal VOC 2012.
L'exemple de code du Segment d'images montre comment afficher les résultats de segmentation renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.