La tâche de détection d'objets MediaPipe vous permet de détecter la présence et l'emplacement de plusieurs d'objets. Cette tâche prend des données d'image et génère une liste chacun représentant un objet identifié dans l'image. Exemple de code décrites dans ces instructions est disponible sur CodePen :
Pour voir concrètement en quoi consiste cette tâche, consultez le demo. Pour en savoir plus sur les fonctionnalités, les modèles et de configuration de cette tâche, consultez la Présentation.
Exemple de code
L'exemple de code pour le détecteur d'objets fournit une implémentation complète de ce en JavaScript pour référence. Ce code vous aide à tester cette tâche et commencez à créer votre propre application de classification de texte. Vous pouvez afficher, exécuter modifier l'exemple de code du détecteur d'objets. en utilisant uniquement votre navigateur Web.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiquement pour utiliser le détecteur d'objets. Pour obtenir des informations générales sur à configurer votre environnement de développement Web et JavaScript, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web
Packages JavaScript
Le code du détecteur d'objets est disponible via MediaPipe @mediapipe/tasks-vision
NPM. Vous pouvez
recherchez et téléchargez ces bibliothèques en suivant les instructions
Guide de configuration
Vous pouvez installer les packages requis via NPM 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 <head> 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 détection d'objets 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 détecteur d'objets, consultez la présentation des tâches dans la section Modèles.
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 ObjectDetector.createFrom...() du détecteur d'objets pour :
préparer la tâche à exécuter des inférences. Utiliser le createFromModelPath()
avec un chemin d'accès 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
createFromModelBuffer(). L'exemple de code ci-dessous illustre l'utilisation
La fonction createFromOptions(), qui vous permet de définir davantage de configurations
options. Pour en savoir plus sur les options de configuration disponibles, consultez
Section Options de configuration
Le code suivant montre comment créer et configurer cette tâche:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
},
scoreThreshold: 0.5,
runningMode: runningMode
});
Pour une implémentation plus complète de la création d'une tâche de détection d'objets, consultez la exemple de code.
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 |
|---|---|---|---|
runningMode |
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 |
displayNamesLocale |
Définit la langue des libellés à utiliser pour les noms à afficher fournis dans les
les métadonnées du modèle de la tâche, le cas échéant. La valeur par défaut est en pour
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 des paramètres régionaux | en |
maxResults |
Définit le nombre maximal facultatif de résultats de détection les mieux notés sur retour. | Tous les nombres positifs | -1 (tous les résultats sont renvoyés) |
scoreThreshold |
Définit le seuil de score de prédiction qui remplace celui indiqué dans les métadonnées du modèle (le cas échéant). Les résultats inférieurs à cette valeur sont refusés. | N'importe quel nombre décimal | Non défini |
categoryAllowlist |
Définit la liste facultative des noms de catégories autorisés. Si ce champ n'est pas vide,
les résultats de détection dont le nom de catégorie ne figure pas dans cet ensemble sont
filtrées. Les noms de catégories en double ou inconnus sont ignorés.
Cette option s'exclue mutuellement avec categoryDenylist et utilise
génèrent une erreur. |
Toutes les chaînes | Non défini |
categoryDenylist |
Définit la liste facultative des noms de catégories non autorisés. Si
non vide, les résultats de détection dont le nom de catégorie se trouve dans cet ensemble seront filtrés
s'affiche. Les noms de catégories en double ou inconnus sont ignorés. Cette option est mutuellement
exclusive avec categoryAllowlist et l'utilisation des deux entraîne une erreur. |
Toutes les chaînes | Non défini |
Préparer les données
Le détecteur d'objets peut détecter des objets dans des images dans n'importe quel format compatible avec le 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. Pour détecter des objets dans des vidéos : vous pouvez utiliser l'API pour traiter rapidement une image à la fois, à l'aide du code temporel du pour déterminer quand les gestes se produisent pendant la vidéo.
Exécuter la tâche
Le détecteur d'objets utilise detect() pour travailler sur des images uniques et
detectForVideo() détecte les objets dans les images vidéo. Les processus de la tâche
les données, tente de reconnaître des objets, puis renvoie les résultats.
Les appels aux méthodes detect() et detectForVideo() s'exécutent
de manière synchrone et
bloquent le thread de l'interface utilisateur. Si vous reconnaissez
des objets dans
d'images vidéo provenant de l'appareil photo d'un appareil, chaque classification bloque
thread. Pour éviter cela, implémentez des nœuds de calcul Web afin d'exécuter la détection sur
un autre fil de discussion.
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 detections = objectDetector.detect(image);
Vidéo
await objectDetector.setOptions({ runningMode: "video" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const detections = detector.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
Pour une implémentation plus complète de l'exécution d'une tâche de détection d'objets, consultez la exemple de code.
Gérer et afficher les résultats
Le détecteur d'objets génère un objet de résultats de détection pour chaque exécution de détection. L'objet "results" contient une liste de détections, chacune incluant un cadre de délimitation et des informations sur la catégorie concernant l'objet détecté, y compris le nom de l'objet et un score de confiance.
Voici un exemple de données de sortie de cette tâche:
ObjectDetectorResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : dog
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : dog
L'image suivante montre une visualisation du résultat de la tâche:
L'exemple de code du détecteur d'objets montre comment afficher la détection renvoyés par la tâche, consultez la exemple de code pour en savoir plus.