Détectez des objets dans des images pour créer une recherche visuelle de produits avec ML Kit: Android

1. Avant de commencer

Avez-vous vu la démo de Google Lens, qui vous permet de pointer l'appareil photo de votre téléphone sur un objet et de trouver où l'acheter en ligne ? Si vous souhaitez apprendre à ajouter la même fonctionnalité à votre application, cet atelier de programmation est fait pour vous. Il fait partie d'un parcours de formation qui vous apprend à intégrer une fonctionnalité de recherche d'images de produits dans une application mobile.

Dans cet atelier de programmation, vous allez découvrir la première étape pour créer une fonctionnalité de recherche d'images de produits : comment détecter des objets dans des images et permettre à l'utilisateur de choisir les objets qu'il souhaite rechercher. Vous utiliserez ML Kit Object Detection and Tracking pour créer cette fonctionnalité.

Pour en savoir plus sur les étapes restantes, y compris sur la façon de créer un backend de recherche de produits avec la recherche de produits de l'API Vision, consultez le parcours de formation.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une application Android avec ML Kit. Votre application utilisera l'API ML Kit Object Detection and Tracking pour détecter des objets dans une image donnée. L'utilisateur sélectionne ensuite un objet qu'il souhaite rechercher dans notre base de données de produits.
Au final, vous devriez obtenir un résultat semblable à l'image de droite.

Points abordés

Intégrer le SDK ML Kit à votre application Android
API ML Kit Object Detection and Tracking

Prérequis

Une version récente d'Android Studio (version 4.1.2 ou ultérieure)
Émulateur Android Studio ou appareil Android physique
L'exemple de code
Connaissances de base du développement Android en Kotlin

Cet atelier de programmation est consacré à ML Kit. Les autres concepts et blocs de code ne sont pas étudiés, mais vous sont fournis afin que vous puissiez simplement les copier et les coller.

2. Configuration

Télécharger le code

Cliquez sur le lien ci-dessous pour télécharger l'ensemble du code de cet atelier de programmation :

Décompressez le fichier ZIP téléchargé. Cela a pour effet de décompresser un dossier racine (odml-pathways-main) contenant toutes les ressources dont vous aurez besoin. Pour cet atelier de programmation, vous n'aurez besoin que des sources du sous-répertoire product-search/codelab1/android.

Le sous-répertoire object-detection du dépôt mlkit-android contient deux répertoires :

starter : code de démarrage sur lequel s'appuie cet atelier de programmation.
final : code complet de l'exemple d'application finalisé.

3. Ajouter l'API ML Kit Object Detection and Tracking au projet

Importer l'application dans Android Studio

Commencez par importer l'application starter dans Android Studio.

Accédez à Android Studio, sélectionnez Importer un projet (Gradle, Eclipse ADT, etc.), puis choisissez le dossier starter à partir du code source que vous avez téléchargé précédemment.

Ajouter les dépendances pour la détection et le suivi d'objets ML Kit

Les dépendances ML Kit vous permettent d'intégrer le SDK ML Kit ODT à votre application.

Accédez au fichier app/build.gradle de votre projet et vérifiez que la dépendance est déjà présente :

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

Synchroniser votre projet avec les fichiers Gradle

Pour vous assurer que toutes les dépendances sont disponibles pour votre application, vous devez synchroniser votre projet avec les fichiers Gradle à ce stade.

Sélectionnez Sync Project with Gradle Files ( Synchroniser le projet avec les fichiers Gradle) dans la barre d'outils Android Studio.

(Si ce bouton est désactivé, assurez-vous d'importer uniquement starter/app/build.gradle, et non l'intégralité du dépôt.)

4. Exécuter l'application de démarrage

Maintenant que vous avez importé le projet dans Android Studio et ajouté les dépendances pour la détection et le suivi d'objets ML Kit, vous êtes prêt à exécuter l'application pour la première fois.

Connectez votre appareil Android via USB à votre hôte ou démarrez l'émulateur Android Studio,puis cliquez sur Run ( Exécuter) dans la barre d'outils Android Studio.

Exécuter et explorer l'application

L'application doit se lancer sur votre appareil Android. Il contient du code récurrent qui vous permet de prendre une photo ou de sélectionner une image prédéfinie, puis de l'envoyer à un pipeline de détection et de suivi d'objets que vous allez créer dans cet atelier de programmation. Explorez un peu l'application avant d'écrire du code :

Tout d'abord, un bouton ( ) se trouve en bas de l'écran pour

lancez l'application Appareil photo intégrée à votre appareil/émulateur ;
prendre une photo dans votre application Appareil photo ;
recevoir l'image capturée dans l'application de départ ;
afficher l'image

Essayez le bouton Prendre une photo. Suivez les instructions pour prendre une photo, acceptez la photo et regardez-la s'afficher dans l'application de démarrage.

Ensuite, vous pouvez choisir parmi trois images prédéfinies. Vous pourrez utiliser ces images ultérieurement pour tester le code de détection d'objets si vous exécutez un émulateur Android.

Sélectionnez une image parmi les trois prédéfinies.
Vérifiez que l'image s'affiche dans la vue agrandie.

5. Ajouter la détection d'objets sur l'appareil

Au cours de cette étape, vous allez ajouter la fonctionnalité de détection d'objets dans les images à l'application de démarrage. Comme vous l'avez vu à l'étape précédente, l'application de démarrage contient du code passe-partout permettant de prendre des photos avec l'application Appareil photo de l'appareil. L'application contient également trois images prédéfinies sur lesquelles vous pouvez essayer la détection d'objets si vous exécutez l'atelier de programmation sur un émulateur Android.

Lorsque vous sélectionnez une image, que ce soit parmi les images prédéfinies ou en prenant une photo avec l'application Appareil photo, le code standard décode cette image en instance Bitmap, l'affiche à l'écran et appelle la méthode runObjectDetection avec l'image.

Au cours de cette étape, vous allez ajouter du code à la méthode runObjectDetection pour effectuer la détection d'objets.

Configurer et exécuter la détection d'objets sur l'appareil dans une image

La configuration de ML Kit ODT ne nécessite que trois étapes simples et trois API.

préparer une image : InputImage
créer un objet détecteur : ObjectDetection.getClient(options)
connect the 2 objects above: process(image)

Vous allez effectuer ces opérations dans la fonction **runObjectDetection(bitmap: Bitmap)**du fichier MainActivity.kt.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

Pour le moment, la fonction est vide. Passez aux étapes suivantes pour intégrer ML Kit ODT. Android Studio vous invitera à ajouter les importations nécessaires.

com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

Étape 1 : Créez un InputImage

ML Kit fournit une API simple pour créer un InputImage à partir d'un Bitmap. Vous pouvez ensuite transmettre un InputImage aux API ML Kit.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

Ajoutez le code ci-dessus en haut de runObjectDetection(bitmap:Bitmap).

Étape 2 : Créez une instance de détecteur

ML Kit suit le schéma de conception du compilateur. Vous devez transmettre la configuration au compilateur, puis obtenir un détecteur à partir de celui-ci. Il existe trois options de configuration (celle en gras est utilisée dans l'atelier de programmation) :

mode détecteur (image unique ou flux)
mode de détection (détection d'un seul ou plusieurs objets)
mode de classification (activé ou désactivé)

Cet atelier de programmation est consacré à la détection et à la classification de plusieurs objets dans une seule image. C'est parti !

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

Étape 3 : Fournissez une ou plusieurs images au détecteur

La détection et la classification d'objets sont des processus asynchrones :

vous envoyez une image au détecteur (via process())
Le détecteur travaille assez dur sur ce point.
Le détecteur vous renvoie le résultat via un rappel.

Le code suivant effectue cette opération (copiez-le et ajoutez-le au code existant dans fun runObjectDetection(bitmap:Bitmap)):).

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

Une fois l'analyse terminée, le détecteur vous envoie une notification avec

Nombre total d'objets détectés
Chaque objet détecté est décrit avec

trackingId : entier utilisé pour le suivi entre les frames (NON utilisé dans cet atelier de programmation)
boundingBox : cadre de délimitation de l'objet
Liste labels: des libellés de l'objet détecté (uniquement lorsque la classification est activée)
index (obtenir l'index de ce libellé)
text (Obtenez le texte de ce libellé, y compris "Articles de mode", "Aliments", "Articles pour la maison", "Lieu", "Plante")
confidence (nombre à virgule flottante compris entre 0,0 et 1,0, où 1,0 correspond à 100 %)

Vous avez probablement remarqué que le code imprime les résultats détectés dans Logcat avec debugPrint(). Ajoutez-le à la classe MainActivity :

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

Vous êtes maintenant prêt à accepter des images pour la détection.

Exécutez l'atelier en cliquant sur Run ( Exécuter) dans la barre d'outils Android Studio. Essayez de sélectionner une image prédéfinie ou de prendre une photo, puis examinez la fenêtre Logcat) dans l'IDE. Le résultat doit ressembler à ceci :

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

ce qui signifie que le détecteur a vu trois objets de type :

Les catégories sont Produit de mode et Produit pour la maison.
Aucune catégorie n'est renvoyée pour le deuxième, car il s'agit d'une classe inconnue.
Non trackingId (car il s'agit du mode de détection d'une seule image)
position à l'intérieur du rectangle boundingBox (par exemple, (481, 2021) – (2426, 3376))
Le détecteur est presque certain que le premier résultat est un article de mode (90 %) (il s'agit d'une robe).

Techniquement, c'est tout ce dont vous avez besoin pour que la détection d'objets ML Kit fonctionne. Vous avez tout ce qu'il faut pour le moment ! Félicitations !

Oui, du côté de l'UI, vous en êtes toujours au même point qu'au début, mais vous pouvez utiliser les résultats détectés dans l'UI, par exemple en dessinant le cadre de sélection pour créer une meilleure expérience. L'étape suivante consiste à visualiser les résultats détectés.

6. Post-traitement des résultats de détection

Lors des étapes précédentes, vous avez imprimé le résultat détecté dans logcat, ce qui est simple et rapide.

Dans cette section, vous allez utiliser le résultat de l'image :

dessiner le cadre de délimitation sur l'image
dessine le nom de la catégorie et la confiance à l'intérieur du cadre de délimitation

Comprendre les utilitaires de visualisation

L'atelier de programmation contient du code récurrent pour vous aider à visualiser le résultat de la détection. Utilisez ces utilitaires pour simplifier notre code de visualisation :

class ImageClickableView Il s'agit d'une classe de vue d'image qui fournit des utilitaires pratiques pour la visualisation et l'interaction avec le résultat de la détection.
fun drawDetectionResults(results: List<DetectedObject>) : cette méthode dessine des cercles blancs au centre de chaque objet détecté.
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Il s'agit d'un rappel permettant de recevoir l'image recadrée qui ne contient que l'objet sur lequel l'utilisateur a appuyé. Vous enverrez cette image recadrée au backend de recherche d'images dans un prochain atelier de programmation pour obtenir un résultat visuellement similaire. Dans cet atelier de programmation, vous n'utiliserez pas encore cette méthode.

Afficher le résultat de la détection ML Kit

Utilisez les utilitaires de visualisation pour afficher le résultat de la détection d'objets ML Kit au-dessus de l'image d'entrée.

Accédez à l'endroit où vous appelez debugPrint() et ajoutez l'extrait de code suivant en dessous :

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Exécuter le code

Cliquez ensuite sur Run ( Exécuter) dans la barre d'outils Android Studio.

Une fois l'application chargée, appuyez sur le bouton avec l'icône de l'appareil photo, pointez l'appareil photo sur un objet, prenez une photo, acceptez la photo (dans l'application Appareil photo) ou appuyez simplement sur l'une des images prédéfinies. Vous devriez voir le résultat de la détection. Appuyez à nouveau sur le bouton ou sélectionnez une autre image pour répéter l'opération plusieurs fois et découvrir la dernière version de ML Kit ODT.

7. Félicitations !

Vous avez utilisé ML Kit pour ajouter des fonctionnalités de détection d'objets à votre application :

Trois étapes avec trois API
Créer une image d'entrée
Créer un détecteur
Envoyer une image au détecteur

Et voilà !

Points abordés

Ajouter la détection et le suivi d'objets ML Kit à votre application Android
Utiliser la détection et le suivi d'objets sur l'appareil dans ML Kit pour détecter des objets dans des images

Étapes suivantes

Essayez cet atelier de programmation pour découvrir comment envoyer l'objet détecté à un backend de recherche de produits et afficher les résultats de recherche.
Explorez davantage ML Kit ODT avec plus d'images et de vidéos en direct pour découvrir la précision et les performances de la détection et de la classification.
Consultez le parcours de formation Aller plus loin avec la détection d'objets pour découvrir comment entraîner un modèle personnalisé.
Découvrez les recommandations Material Design pour la détection d'objets dans les flux vidéo en direct et les images statiques.
Appliquer la reconnaissance optique de texte ML Kit dans votre propre application Android

En savoir plus

https://developers.google.com/ml-kit/vision/object-detection