La tâche d'intégration d'images MediaPipe vous permet de convertir des données d'image en représentation numérique afin d'effectuer des tâches de traitement d'images liées au ML, telles que la comparaison de la similarité de deux images. Ces instructions vous expliquent comment utiliser l'outil d'intégration 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 de l'outil d'intégration d'images (Image Embedder) 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 d'intégration d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code de l'outil d'intégration d'images à l'aide de votre navigateur Web.
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 l'outil d'intégration 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 l'intégrateur d'images est disponible via le package MediaPipe @mediapipe/tasks-vision
NPM. 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 @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:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modèle
La tâche d'intégration d'images 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 l'outil d'intégration 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
Spécifier un chemin d'accès au modèle
Vous pouvez créer une tâche avec les options par défaut à l'aide de la méthode createFromModelPath():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
Spécifier le tampon du modèle
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la méthode createFromModelBuffer():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
Spécifier des options personnalisées
La tâche de l'outil d'intégration d'images MediaPipe utilise la fonction createFromOptions pour configurer la tâche. La fonction createFromOptions accepte des valeurs pour les options de configuration. Pour en savoir plus sur les options de configuration, consultez la section 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 imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
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 |
|---|---|---|---|
running_mode |
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 |
l2Normalize |
Indique s'il faut normaliser le vecteur de caractéristiques renvoyé avec la norme L2. N'utilisez cette option que si le modèle ne contient pas encore d'opération TFLite L2_NORMALIZATION native. Dans la plupart des cas, c'est déjà le cas et la normalisation L2 est donc obtenue via l'inférence TFLite sans utiliser cette option. | Boolean |
False |
quantize |
Indique si la représentation vectorielle continue renvoyée doit être quantifiée en octets via une quantification scalaire. Les représentations vectorielles continues sont implicitement considérées comme de norme unitaire. Par conséquent, la valeur de toute dimension est forcément comprise dans [-1.0, 1.0]. Si ce n'est pas le cas, utilisez l'option l2Normalize. | Boolean |
False |
Préparation des données
L'outil d'intégration d'images peut intégrer 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 embed() et embedForVideo() de l'outil d'intégration d'images s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous souhaitez extraire des vecteurs de caractéristiques à partir d'images vidéo, chaque représentation vectorielle continue bloquera le thread principal.
Vous pouvez éviter cela en implémentant des workers Web pour qu'ils exécutent les méthodes embed() et embedForVideo() sur un autre thread.
Exécuter la tâche
L'outil d'intégration d'images utilise les méthodes embed() (en mode d'exécution image) et embedForVideo() (avec le mode d'exécution video) pour déclencher des inférences. L'API Image Embedder renvoie les vecteurs de représentation vectorielle continue de l'image d'entrée.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Images
const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);
Vidéo
const video = document.getElementById("webcam");
const startTimeMs = performance.now();
const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Gérer et afficher les résultats
Lors de l'exécution de l'inférence, la tâche de l'outil d'intégration d'images renvoie un objet ImageEmbedderResult contenant les vecteurs de représentation vectorielle continue de l'image ou du cadre d'entrée.
Voici un exemple des données de sortie de cette tâche:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
Ce résultat a été obtenu en intégrant l'image suivante:
Vous pouvez comparer la similarité sémantique de deux représentations vectorielles continues à l'aide de la fonction ImageEmbedder.cosineSimilarity. Consultez le code suivant pour obtenir un exemple.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
L'exemple de code de l'outil d'intégration d'images montre comment afficher les résultats de l'outil d'intégration renvoyés par la tâche. Pour en savoir plus, consultez cet exemple de code.