Guide de classification d'images pour le Web

La tâche "Classificateur d'images MediaPipe" vous permet de classer des images. Vous pouvez utiliser cette tâche pour identifier ce qu'une image représente parmi un ensemble de catégories définies au moment de l'entraînement. Ces instructions vous expliquent comment utiliser le classificateur d'images pour les applications Node et Web.

Pour voir cette tâche en action, regardez la démonstration. 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 classificateur d'images 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 classification d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code du classificateur d'images à l'aide de votre navigateur Web.

Configuration

Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement et vos projets de code spécifiquement pour utiliser le classificateur d'images. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour utiliser les tâches MediaPipe, y compris les exigences concernant les versions de la plate-forme, consultez le guide de configuration pour le Web.

Packages JavaScript

Le code du classificateur 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 le préproduction local à l'aide de la commande suivante:

npm install @mediapipe/tasks-vision

Si vous souhaitez importer le code de tâche via un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans la balise de votre fichier HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modèle

La tâche de classification 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 le classificateur d'images, 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...() du classificateur d'images pour préparer la tâche à l'exécution d'inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au 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 classificateur d'images avec des 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:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

Options de configuration

Cette tâche propose les 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 des images décodées d'une vidéo ou d'un flux en direct de données d'entrée, par exemple d'une caméra.
{IMAGE, VIDEO} IMAGE
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 libellés localisés aux métadonnées d'un modèle personnalisé à l'aide de l'API TensorFlow Lite Metadata Writer. Code de paramètres régionaux en
maxResults Définit le nombre maximal facultatif de résultats de classification les plus élevés à renvoyer. Si la valeur est inférieure à 0, tous les résultats disponibles sont renvoyés. N'importe quel nombre positif -1
scoreThreshold Définit le seuil de score de prédiction qui remplace celui fourni dans les métadonnées du modèle (le cas échéant). Les résultats inférieurs à cette valeur sont rejetés. N'importe quelle superposition Non défini
categoryAllowlist Définit la liste facultative des noms de catégories autorisés. Si cet ensemble n'est pas vide, les résultats de classification dont le nom de catégorie ne figure pas dans cet ensemble seront filtrés. Les noms de catégories en double ou inconnus sont ignorés. Cette option s'exclut mutuellement avec categoryDenylist. L'utilisation des deux entraîne une erreur. N'importe quelle chaîne Non défini
categoryDenylist Définit la liste facultative des noms de catégories non autorisés. Si cet ensemble n'est pas vide, les résultats de classification dont le nom de catégorie figure dans cet ensemble seront filtrés. Les noms de catégories en double ou inconnus sont ignorés. Cette option s'exclut mutuellement avec categoryAllowlist. L'utilisation des deux entraîne une erreur. N'importe quelle chaîne Non défini
resultListener Définit l'écouteur de résultats pour qu'il reçoive les résultats de classification de manière asynchrone lorsque le classificateur d'images est en mode streaming en direct. Ne peut être utilisé que lorsque le mode d'exécution est défini sur LIVE_STREAM. N/A Non défini

Préparer les données

Le classificateur d'images peut classer les objets 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.

Les appels aux méthodes classify() et classifyForVideo() du classificateur d'images s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous classifiez des objets dans des images vidéo à partir de la caméra d'un appareil, chaque classification bloquera le thread principal. Pour éviter cela, implémentez des travailleurs Web pour exécuter classify() et classifyForVideo() sur un autre thread.

Exécuter la tâche

Le classificateur d'images utilise la méthode classify() avec le mode image et la méthode classifyForVideo() avec le mode video pour déclencher des inférences. L'API Image Classifier renvoie les catégories possibles pour les objets de l'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 imageClassifierResult = imageClassifier.classify(image);

Vidéo

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Pour une implémentation plus complète de l'exécution d'une tâche de classification d'images, consultez l'exemple de code.

Gérer et afficher les résultats

Lors de l'exécution de l'inférence, la tâche de classification d'images renvoie un objet ImageClassifierResult contenant la liste des catégories possibles pour les objets de l'image ou du frame d'entrée.

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

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Ce résultat a été obtenu en exécutant le classificateur d'oiseaux sur:

Photographie en gros plan d&#39;un moineau domestique

L'exemple de code du classificateur d'images montre comment afficher les résultats de classification renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.