Détectez 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 ? Elle vous permet de diriger l'appareil photo de votre téléphone vers un objet et de trouver 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. 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: détecter des objets dans des images et laisser l'utilisateur choisir ceux qu'il souhaite rechercher. Vous allez utiliser ML Kit Object Detection and Tracking pour développer cette fonctionnalité.

Pour connaître les étapes restantes, y compris la création d'un backend de recherche de produits avec la recherche de produits de l'API Vision, vous pouvez suivre 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 détection et de suivi des objets ML Kit pour détecter les objets dans une image donnée. Ensuite, l'utilisateur choisira un objet qu'il souhaite rechercher dans notre base de données de produits.
  • Au bout du compte, 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)
  • Android Studio Emulator ou un appareil Android physique
  • L'exemple de code
  • Vous disposez de connaissances de base en développement Android en Kotlin.

Cet atelier de programmation est consacré à ML Kit. D'autres concepts et blocs de code ne sont pas étudiés. Ils 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é. Cette opération a pour effet 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 du 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'application exemple terminée.

3. Ajouter l'API de détection et de suivi des objets 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 choisissez le dossier starter dans le code source que vous avez téléchargé précédemment.

7c0f27882a2698ac.png

Ajouter les dépendances pour la détection et le suivi d'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 est déjà présente:

build.gradle

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

Synchroniser votre projet avec des fichiers Gradle

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

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 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 des objets ML Kit, vous êtes prêt à exécuter l'application pour la première fois.

Connectez votre appareil Android à votre hôte via USB ou lancez l'émulateur Android Studio,puis cliquez sur Run ( execute.png) dans la barre d'outils d'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'alimenter dans un pipeline de détection et de suivi d'objets que vous allez créer dans cet atelier de programmation. Explorez l'application avant d'écrire du code:

Tout d'abord, il y a un Button ( c6d965d639c3646.png) en bas de l'écran.

  • lancer l'application Appareil photo intégrée à votre appareil/émulateur
  • prenez une photo dans l'application Appareil photo
  • recevoir l'image capturée dans l'application de démarrage ;
  • afficher l'image

Essayez Prendre une photo. . Suivez les instructions pour prendre une photo, acceptez la photo et observez-la s'afficher 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 utilisez un émulateur Android.

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

1290481786af21b9.png

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

Au cours de cette étape, vous allez ajouter la fonctionnalité à l'application de démarrage afin de détecter des objets dans des images. Comme vous l'avez vu à l'étape précédente, l'application de démarrage contient du 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 également essayer la détection d'objets avec trois images prédéfinies dans l'application.

Lorsque vous sélectionnez une image, que ce soit à partir des images prédéfinies ou en prenant une photo avec l'application Appareil photo, le code récurrent la décode dans une 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 une détection d'objets.

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

La configuration de ML Kit ODT ne comporte que trois étapes simples avec trois API.

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

Ces opérations sont effectuées 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. En cours de route, Android Studio vous invite à 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 InputImage

ML Kit fournit une API simple pour créer un InputImage à partir d'un Bitmap. Vous pouvez ensuite alimenter 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 du compilateur, vous devez transmettre la configuration au compilateur, puis vous procurer un détecteur. Vous pouvez configurer trois options (celle en gras est utilisée dans l'atelier de programmation):

  • mode détecteur (image unique ou flux)
  • le mode de détection (détection une ou plusieurs objets) ;
  • Mode de classification (activé ou désactivé)

Cet atelier de programmation concerne une seule image : détection de plusieurs objets la classification, 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: Importez les images dans le détecteur

La détection et la classification d'objets sont un traitement asynchrone:

  • vous envoyez une image au détecteur (via process())
  • le détecteur travaille assez dur pour le résoudre
  • le détecteur vous renvoie le résultat via un rappel

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

  1. Nombre total d'objets détectés
  2. Chaque objet détecté est décrit
  • trackingId: nombre entier que vous utilisez pour suivre le nombre de cadres (NON utilisé dans cet atelier de programmation)
  • boundingBox: cadre de délimitation de l'objet
  • labels: liste des libellés de l'objet détecté (uniquement lorsque la classification est activée)
  • index (obtenir l'index de ce libellé)
  • text (Récupérer le texte de ce libellé, y compris "Fashion Goods" (Articles de mode), "Food", "Home Goods" (Articles ménagers), "Place" (Place) et "Plant" (Plante)
  • confidence (une valeur flottante comprise 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 pouvez désormais détecter des images !

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 prenez une photo, puis regardez la fenê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

ce qui signifie que le détecteur a détecté 3 objets:

  • sont Produits à la mode et Articles pour la maison.
  • aucune catégorie n'est renvoyée pour le 2ème car il s'agit d'une classe inconnue.
  • pas de trackingId (car il s'agit d'un mode de détection d'image unique)
  • position à l'intérieur du rectangle boundingBox (par exemple, (481, 2021) – (2426, 3376))
  • est convaincu que le premier est un article de mode (90%) (c'est une robe).

Techniquement, c'est tout ce dont vous avez besoin pour faire fonctionner la détection d'objets ML Kit. Vous savez tout pour le moment. Félicitations !

Côté interface utilisateur, vous êtes toujours à l'étape au début, mais vous pouvez utiliser les résultats détectés dans l'interface utilisateur, par exemple en dessinant le cadre de délimitation pour créer une meilleure expérience. L'étape suivante consiste à visualiser les résultats détectés.

6. Post-traiter les résultats de la 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 de l'image:

  • tracer le cadre de délimitation sur l'image
  • tracer le nom de la catégorie et le niveau de confiance dans le cadre de délimitation.

Comprendre les utilitaires de visualisation

Cet atelier de programmation inclut du code récurrent qui vous aidera à 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 de ML Kit

Utilisez les utilitaires de visualisation pour afficher le résultat de la détection d'objets de 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 à présent 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 votre appareil photo vers un objet, prenez une photo, acceptez la photo (dans l'application Appareil photo) ou appuyez facilement sur n'importe quelle image prédéfinie. Le résultat de la détection doit s'afficher. appuyez à nouveau sur le bouton ou sélectionnez une autre image à répéter plusieurs fois, et découvrez la dernière version de ML Kit ODT !

5027148750dc0748.png

7. Félicitations !

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

  • 3 étapes avec 3 API
  • Créer une image d'entrée
  • Créer un détecteur
  • Envoyer l'image au détecteur

C'est tout ce dont vous avez besoin pour le mettre en service !

Points abordés

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

Étapes suivantes

  • Suivez cet codelab pour découvrir comment envoyer l'objet détecté à un backend de recherche de produits et afficher les résultats de recherche.
  • Explorez davantage avec ML Kit ODT avec plus d'images et de vidéos en direct pour tester la détection et la précision et les performances de la classification
  • Pour apprendre à entraîner un modèle personnalisé, consultez le parcours de formation Allez plus loin avec la détection d'objets.
  • Découvrez les recommandations Material Design pour la détection d'objets live-camera et static-image.
  • Appliquer ML Kit ODT dans votre propre application Android

En savoir plus