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

1. Avant de commencer

727608486a28395d.png

Avez-vous vu la démonstration de Google Lens, qui vous permet de diriger l'appareil photo de votre téléphone vers un objet et de savoir où l'acheter en ligne ? Si vous souhaitez découvrir comment ajouter la même fonctionnalité à votre application, cet atelier de programmation est fait pour vous. Cet atelier de programmation fait partie d'un parcours de formation qui vous explique comment créer une fonctionnalité de recherche d'images 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 produit: comment détecter des objets dans des images et laisser l'utilisateur choisir les objets qu'il recherche. Vous utiliserez ML Kit Object Detection and Tracking pour créer cette fonctionnalité.

Pour découvrir les étapes restantes, y compris comment créer un backend de recherche de produits avec la recherche de produits de l'API Vision, vous pouvez découvrir 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 de suivi et de détection d'objets de ML Kit pour détecter des objets dans une image donnée. L'utilisateur sélectionne ensuite un objet qu'il recherche dans notre base de données de produits.
  • À la fin, vous devriez voir une image semblable à la droite.

Points abordés

  • Intégrer le SDK ML Kit dans votre application Android
  • API ML Kit Object Detection et Tracking

Prérequis

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

Cet atelier de programmation porte sur ML Kit. Les autres concepts et les blocs de code ne sont pas étudiés, et 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 permet de décompresser un dossier racine (odml-pathways-main) contenant toutes les ressources dont vous avez besoin. Pour cet atelier de programmation, vous n'aurez besoin que des sources dans le sous-répertoire product-search/codelab1/android.

Le sous-répertoire de détection d'objets du dépôt mlkit-android contient deux répertoires:

  • android_studio_folder.pngstarter : code de démarrage sur lequel s'appuie cet atelier de programmation.
  • android_studio_folder.pngfinal : code final de l'exemple d'application terminée

3. Ajouter l'API de détection d'objets et de suivi ML Kit au projet

Importer l'application dans Android Studio

Commencez par importer l'application starter dans Android Studio.

Accédez à Android Studio, sélectionnez "Import Project (Gradle), Eclipse ADT, etc., puis sélectionnez le dossier starter dans le code source que vous avez téléchargé précédemment.

7c0f27882a2696ac.png

Ajouter les dépendances nécessaires à la détection et au suivi des objets ML Kit

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

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

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) (B451AB2D04D835f9.png) dans la barre d'outils d'Android Studio.

(Si ce bouton est désactivé, veillez à n'importer que le déclencheur/l'application/le build.gradle, et pas le dépôt complet.)

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

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

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

Exécuter et explorer l'application

L'application devrait se lancer sur votre appareil Android. Elle inclut un code récurrent permettant de prendre une photo ou de sélectionner une image prédéfinie, et de l'insérer dans un pipeline de détection et de suivi des objets que vous créerez dans cet atelier de programmation. Explorez l'application un peu avant d'écrire du code:

Tout d'abord, un bouton ( C6d965d639c3646.png) apparaît en bas de l'écran.

  • lancez l'application Appareil photo intégrée à votre appareil ou votre émulateur.
  • prendre une photo dans l'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 et observez-la dans l'application de démarrage.

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

  1. Sélectionnez une image parmi les trois images prédéfinies.
  2. L'image s'affiche en plein écran.

1290481786af21b9.png

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

Dans cette étape, vous allez ajouter la fonctionnalité à l'application de démarrage pour détecter les objets dans des images. Comme vous l'avez vu à l'étape précédente, l'application de démarrage contient un code récurrent permettant de prendre des photos avec l'application Appareil photo de l'appareil. Si vous exécutez l'atelier de programmation sur un émulateur Android, vous pouvez essayer trois images prédéfinies dans l'application :

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

Au cours de cette étape, vous allez ajouter du code à la méthode runObjectDetection afin de détecter des objets.

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

Il n'y a que trois étapes simples avec trois API pour configurer un ML ODT de ML Kit

  • préparer une image: InputImage
  • Créez un objet détecteur: ObjectDetection.getClient(options)
  • connectez les deux objets ci-dessus: process(image)

Vous devez procéder de cette manière 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 à la procédure suivante pour intégrer le ML ODT de ML Kit. 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 une InputInput

ML Kit fournit une API simple pour créer un InputImage à partir d'un Bitmap. Vous pouvez ensuite insérer un InputImage dans les 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 modèle de conception de constructeur, vous transmettez la configuration au compilateur, puis vous en achetez un détecteur. 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 (un seul ou plusieurs détection d'objets ).
  • mode de classification (activé ou désactivé)

Cet atelier de programmation s'applique à une seule image : il s'agit d'effectuer la détection et la classification d'objets multiples.

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

Étape 3: Ajoutez des images au détecteur

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

  • vous envoyez une image au détecteur (via process()).
  • le détecteur fonctionne correctement
  • le détecteur vous renvoie le résultat via un rappel

C'est exactement ce que fait le code suivant (copiez-le dans le 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'opération terminée, le détecteur vous envoie une notification

  1. Nombre total d'objets détectés
  2. Chaque objet détecté est décrit avec l'attribut
  • trackingId: nombre entier que vous utilisez pour effectuer le suivi de plusieurs cadres (PAS 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 (ajoutez le texte de cette étiquette, y compris "Fashion Goods", "Food", "Home Goods", "Place", "Plant")
  • confidence (valeur flottante comprise entre 0,0 et 1,0 avec 1,0 signifie 100%)

Comme vous l'avez probablement remarqué, le code a détecté des résultats 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 de programmation en cliquant sur Run (Exécuter) (execute.png) dans la barre d'outils d'Android Studio. Essayez de sélectionner une image prédéfinie ou de prendre une photo, puis regardez leFenêtre logcat(16bd6ea224cf8cf1.png). 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

Cela signifie que le détecteur a détecté trois objets:

  • les catégories sont Bonnes tendances et Bonne maison.
  • aucune catégorie n'a été renvoyée pour la deuxième, car il s'agit d'une classe inconnue.
  • aucun trackingId (car il s'agit du mode de détection d'images unique)
  • position dans le rectangle boundingBox (par exemple, (481, 2021) – (2426, 3376))
  • le détecteur indique clairement qu'il s'agit du premier mode (90%) (il s'agit d'une robe).

Techniquement, vous n'avez besoin que de la détection d'objets ML Kit pour réussir. Félicitations !

Du côté de l'interface utilisateur, vous êtes toujours à l'étape de démarrage, mais vous pouvez utiliser les résultats détectés dans l'interface utilisateur, par exemple pour tracer le cadre de délimitation afin d'améliorer l'expérience. L'étape suivante consiste à visualiser les résultats détectés.

6. Post-traiter les résultats de détection

Au cours des étapes précédentes, vous avez imprimé le résultat détecté dans logcat: simple et rapide.

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

  • dessiner le cadre de délimitation sur l'image
  • indiquer le nom de la catégorie et la confiance dans le cadre de délimitation

Comprendre les utilitaires de visualisation

L'atelier de programmation inclut un code récurrent permettant de visualiser le résultat de la détection. Utilisez ces utilitaires pour simplifier le code de visualisation:

  • class ImageClickableView Cette classe d'affichage d'images fournit des utilitaires pratiques permettant de visualiser et d'interagir 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 allez envoyer 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 détection du ML Kit

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

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

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Exécuter le code

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

Une fois l'application chargée, appuyez sur le bouton avec l'icône de l'appareil photo, dirigez l'appareil photo vers un objet, prenez une photo, acceptez la photo (dans l'application Appareil photo) ou appuyez simplement sur une image prédéfinie. Le résultat de la détection devrait s'afficher. Appuyez de nouveau sur le bouton ou sélectionnez une autre image pour répéter la procédure plusieurs fois et testez la dernière mise à jour MLT de ML !

5027148750dc0748.png

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 l'image au détecteur

Vous avez terminé la configuration.

Points abordés

  • Ajouter le suivi des objets et le suivi 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

  • Suivez cet atelier de programmation pour apprendre à envoyer l'objet détecté à un backend de recherche de produits et à afficher les résultats de recherche.
  • Exploitez tout le potentiel de ML Kit ODT avec des images et des vidéos en direct pour améliorer la détection et la classification
  • Consultez le parcours de formation Aller plus loin avec la détection d'objets pour apprendre à entraîner un modèle personnalisé.
  • Consultez les recommandations Material Design pour la détection d'objets live-camera et static-image.
  • Appliquer le SDK ODT de ML Kit dans votre propre application Android

En savoir plus