Cette page a été traduite par l'API Cloud Translation.

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émonstration de Google Lens, qui vous permet de pointer l'appareil photo de votre téléphone vers un objet et de trouver où l'acheter en ligne ? Si vous souhaitez savoir 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 explique comment 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 de la création d'une fonctionnalité de recherche d'images de produits: comment détecter des objets dans des images et laisser l'utilisateur choisir les objets qu'il souhaite rechercher. Vous allez utiliser la fonctionnalité de détection et de suivi des objets ML Kit pour créer cette fonctionnalité.

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

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 les 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.
Vous devriez voir quelque chose de 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, 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 décompresse un dossier racine (odml-pathways-main) contenant toutes les ressources dont vous avez besoin. Pour cet atelier de programmation, vous n'avez 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 final de l'exemple d'application terminée.

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

Importer l'application dans Android Studio

Commencez par importer l'application de starter dans Android Studio.

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

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

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

Accédez au fichier app/build.gradle de votre projet et vérifiez que la dépendance y figure 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) dans la barre d'outils d'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 à votre hôte via USB ou démarrez l'émulateur Android Studio,puis cliquez sur Run ( Exécuter) 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 standard 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 ( ) en bas de l'écran permet de

lancer 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émarrage ;
afficher l'image

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

Vous avez le choix entre trois images prédéfinies. Vous pourrez utiliser ces images plus tard pour tester le code de détection d'objets si vous exécutez le code sur un émulateur Android.

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

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

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

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

À 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 sur une image

La configuration de l'ODT ML Kit ne nécessite 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)

Vous pouvez le faire 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 l'ODT 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éer une 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 en acquérir un détecteur. Vous pouvez configurer trois options (celle en gras est utilisée dans l'atelier de programmation):

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

Cet atelier de programmation concerne la détection et la classification d'objets multiples dans une seule image. Commençons:

// 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 des objets sont des traitements asynchrones:

Vous envoyez une image au détecteur (via process()).
Le détecteur s'en occupe.
Le détecteur vous renvoie le résultat via un rappel.

Le code suivant fait exactement cela (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 une notification avec :

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

trackingId: entier que vous utilisez pour le suivre entre les 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 (Obtenir 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 de programmation en cliquant sur Run ( Exécuter) dans la barre d'outils d'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:

sont Articles de mode et Articles pour la maison.
Aucune catégorie n'est renvoyée pour le second, car il s'agit d'une classe inconnue.
pas de trackingId (car il s'agit du mode de détection d'une seule image)
position dans le rectangle boundingBox (par exemple, (481, 2021) – (2426, 3376))
Le détecteur est assez sûr que le premier est un bien 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 vous faut pour le moment ! Félicitations !

Oui, du côté de l'interface utilisateur, vous êtes toujours au stade où vous avez commencé, mais vous pouvez utiliser les résultats détectés dans l'interface utilisateur, par exemple en dessinant le cadre de délimitation pour améliorer l'expérience. L'étape suivante consiste à visualiser les résultats détectés.

6. Post-traitement des 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 de l'image:

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

Comprendre les utilitaires de visualisation

L'atelier de programmation contient du code générique pour vous aider à visualiser le résultat de la détection. Exploitez ces utilitaires pour simplifier le 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 pour 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 la 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(), puis ajoutez l'extrait de code suivant en dessous:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Exécuter le code

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

Une fois l'application chargée, appuyez sur le bouton avec l'icône Appareil photo, pointez l'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. 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 l'ODT ML Kit.

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 une 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 des 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

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

En savoir plus

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