La tâche de l'intégrateur d'images MediaPipe vous permet de convertir des données d'image en représentation numérique pour effectuer des tâches de traitement d'images liées au ML, telles que la comparaison de la similarité entre deux images. Ces instructions vous expliquent comment utiliser l'intégrateur 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 section Présentation.
Exemple de code
L'exemple de code pour l'outil d'intégration d'images fournit une implémentation complète de ce en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et commencez à créer votre propre application d'intégration d'images. Vous pouvez afficher, exécuter et modifiez le Exemple de code de l'outil d'intégration d'images en utilisant uniquement votre navigateur Web.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement projets de code spécifiques pour utiliser l'outil d'intégration d'images. Pour obtenir des informations générales sur configurer votre environnement de développement pour utiliser les tâches MediaPipe, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web
Packages JavaScript
Le code de l'intégrateur d'images est disponible via MediaPipe @mediapipe/tasks-vision
NPM. Vous pouvez
rechercher et télécharger ces bibliothèques à partir des liens fournis sur la plate-forme ;
Guide de configuration
Vous pouvez installer les packages requis avec le code suivant pour la préproduction locale en exécutant la commande suivante:
npm install @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un réseau de diffusion de contenu (CDN) ajoutez le code suivant dans la balise 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 de l'intégrateur d'images MediaPipe nécessite un modèle entraîné compatible avec tâche. Pour en savoir plus sur les modèles entraînés disponibles pour l'intégrateur 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 l'createFromModelPath()
méthode:
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'intégrateur d'images MediaPipe utilise la fonction createFromOptions pour définir
la tâche. La fonction createFromOptions accepte les valeurs
options de configuration. Pour en savoir plus sur
de configuration, consultez la section 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 imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
Options de configuration
Cette tâche comporte les 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 y a deux
modes: IMAGE: mode utilisé pour la saisie d'une seule image. VIDÉO: mode utilisé pour les images décodées d'une image vidéo ou sur un flux en direct de données d'entrée, comme celles d'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'élément natif L2_NORMALIZATION TFLite Op. Dans la plupart des cas, c'est déjà le cas et La normalisation L2 est ainsi obtenue via l'inférence TFLite sans avoir besoin pour cette option. | Boolean |
False |
quantize |
Indique si la représentation vectorielle continue renvoyée doit être quantifiée en octets via la quantification scalaire. Les représentations vectorielles continues sont implicitement considérées comme étant une norme unitaire Par conséquent, toute dimension aura une valeur comprise dans [-1.0, 1.0]. Utilisez utilisez l'option l2Normalize si ce n'est pas le cas. | Boolean |
False |
Préparer les données
L'outil d'intégration d'images peut intégrer des images dans n'importe quel format compatible avec navigateur hôte. Elle gère également le prétraitement des entrées de données, le redimensionnement, la rotation et la normalisation des valeurs.
Les appels des méthodes embed() et embedForVideo() de l'intégrateur d'images s'exécutent
de manière synchrone et
bloquent le thread de l'interface utilisateur. Si vous souhaitez extraire
vecteurs de caractéristiques provenant d'images vidéo, chaque représentation vectorielle continue bloquera le thread principal.
Pour éviter cela, implémentez des nœuds de calcul Web pour exécuter embed() et
embedForVideo() sur un autre thread.
Exécuter la tâche
L'outil d'intégration d'images utilise embed() (avec le mode d'exécution image) et
embedForVideo() (avec le mode d'exécution video) pour déclencher
les inférences. L'API Image Embedder renvoie les vecteurs de représentation vectorielle continue pour le
image d'entrée.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Image
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 d'intégration d'images renvoie une
Un objet ImageEmbedderResult contenant les vecteurs de représentation vectorielle continue de l'entrée
comme une image ou un cadre.
Voici un exemple de 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
fonction ImageEmbedder.cosineSimilarity. Consultez le code suivant pour obtenir
à titre d'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 ce dernier. renvoyés par la tâche, consultez la exemple de code pour en savoir plus.