Backend de produit de l'API Call Vision sur Android

Backend de produit de l'API Call Vision sur Android

À propos de cet atelier de programmation

subjectDernière mise à jour : nov. 3, 2021
account_circleRédigé par Khanh leviet

1. Avant de commencer

bd8c01b2f8006c6d.png

Avez-vous vu la démo Google Lens, où vous pouvez pointer l'appareil photo de votre téléphone vers un objet et 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 apprendre à appeler un backend créé à l'aide de la recherche de produits de l'API Vision à partir d'une application mobile. Ce backend peut récupérer une image de requête et rechercher des produits visuellement similaires dans un catalogue de produits.

Vous découvrirez les autres étapes pour créer une fonctionnalité de recherche de produits visuelle, y compris comment utiliser la détection et le suivi des objets du ML Kit pour détecter des objets dans l'image de la requête et permettre aux utilisateurs de choisir le produit qu'ils recherchent. , dans le parcours de formation.

Objectifs de l'atelier

  • Dans cet atelier de programmation, vous commencerez avec l'application Android capable de détecter des objets à partir d'une image d'entrée. Vous allez écrire du code pour récupérer l'objet sélectionné par l'utilisateur, l'envoyer au backend de recherche de produits et afficher le résultat de recherche à l'écran.
  • À la fin, vous devriez voir une image semblable à la droite.

Points abordés

  • Appeler et analyser la réponse des API Product Search de l'API Vision à partir d'une application Android

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 la recherche de produits avec l'API Vision. Les concepts et les blocs de codes non pertinents ne sont pas explorés, et vous sont fournis afin que vous puissiez simplement les copier et les coller.

2. À propos de la recherche de produits avec l'API Vision

La recherche de produits de l'API Vision est une fonctionnalité de Google Cloud qui permet aux utilisateurs de rechercher des produits visuellement similaires dans un catalogue de produits. Les marchands peuvent créer des produits, chacun contenant des images de référence qui décrivent visuellement le produit sous différents angles. Vous pouvez ensuite ajouter ces produits aux ensembles de produits (catalogue de produits, par exemple). Actuellement, la recherche de produits de l'API Vision accepte les catégories de produits suivantes: articles ménagers, vêtements, jouets, produits emballés et articles généraux.

Lorsque les utilisateurs interrogent l'ensemble de produits avec leurs propres images, la recherche de produits de l'API Vision applique le machine learning pour comparer le produit dans l'image de la requête de l'utilisateur avec les images de l'ensemble de produits du marchand, puis renvoie une liste classée de résultats visuellement et sémantiquement similaires.

3. Télécharger et exécuter l'application de départ

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/codelab2/android.

Le sous-répertoire codelab2 du dépôt odml-pathways 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

L'application de départ est celle que vous avez créée dans Détecter des objets dans des images pour créer une recherche visuelle de produits sur Android. Il utilise ML Kit Object Detection and Tracking pour détecter des objets à partir d'une image et les afficher à l'écran.

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.) (Importer un projet (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

Exécuter l'application de départ

Maintenant que vous avez importé le projet dans Android Studio, 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.

(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.)

L'application devrait maintenant se lancer sur votre appareil Android. Cet outil dispose déjà de la fonctionnalité de détection d'objets: il détecte les articles de mode présents sur l'image et vous indique où ils se trouvent. Essayez avec les photos prédéfinies pour confirmer.

C6102a808fdfcb11.png

Capture d'écran de l'application de démarrage qui peut détecter des objets dans une image.

Vous allez ensuite étendre l'application pour envoyer les objets détectés au backend de recherche de produits de l'API Vision et afficher les résultats de recherche à l'écran.

4. Gérer la sélection d'objets

Autoriser les utilisateurs à appuyer sur un objet détecté pour le sélectionner

Vous allez maintenant ajouter du code pour permettre aux utilisateurs de sélectionner un objet dans l'image et de lancer une recherche de produits. L'application de départ peut déjà détecter des objets dans l'image. Il est possible que l'image contienne plusieurs objets ou qu'elle n'occupe qu'une petite partie de l'image. Vous devez donc demander à l'utilisateur d'appuyer sur l'un des objets détectés pour indiquer l'objet qu'il souhaite utiliser pour la recherche de produits.

9cdfcead6d95a87.png

Une capture d'écran des articles de mode détectés sur l'image

Pour faciliter l'atelier de programmation et se concentrer sur le machine learning, du code Android récurrent a été ajouté dans l'application de départ pour vous permettre de détecter l'objet sur lequel l'utilisateur a appuyé. La vue qui affiche l'image dans l'activité principale (ObjectDetectorActivity) est en fait une vue personnalisée (ImageClickableView) qui étend la ImageView par défaut d'Android. Implémente des utilitaires pratiques, y compris les suivants:

  • 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 de produits.

Ajoutez un code pour gérer le fait que l'utilisateur appuie sur les objets détectés.

Accédez à la méthode initViews dans la classe ObjectDetectorActivity, puis ajoutez les lignes suivantes à la fin de la méthode: (Android Studio vous indique qu'elle ne peut pas trouver la startProductImageSearch }. Ne vous inquiétez pas, vous allez l'implémenter un peu plus tard.)

// Callback received when the user taps on any of the detected objects.
ivPreview.setOnObjectClickListener { objectImage ->
    startProductImageSearch(objectImage)
}

La onObjectClickListener est appelée chaque fois que l'utilisateur appuie sur l'un des objets détectés à l'écran. Elle reçoit l'image recadrée qui ne contient que l'objet sélectionné. Par exemple, si l'utilisateur appuie sur la personne portant la robe à droite, l'écouteur est déclenché avec objectImage comme ci-dessous.

9cac8458d0f326e6.png

Exemple d'image recadrée transmise à l'objet onObjectClickListener

Envoyer l'image recadrée à l'activité de recherche de produits

Vous allez à présent implémenter la logique d'envoi de l'image de la requête au backend de la recherche de produits de l'API Vision dans une activité séparée (ProductSearchActivity).

Tous les composants de l'interface utilisateur ont été implémentés à l'avance. Vous pouvez ainsi vous concentrer sur l'écriture du code pour communiquer avec le backend de recherche de produits.

25939f5a13eeb3c3.png

Capture d'écran des composants de l'interface utilisateur dans ProductSearchActivity

Ajoutez du code pour envoyer l'image de l'objet sélectionné par l'utilisateur à ProductSearchActivity.

Revenez dans Android Studio et ajoutez cette méthode startProductImageSearch à la classe ObjectDetectorActivity:

private fun startProductImageSearch(objectImage: Bitmap) {
    try {
        // Create file based Bitmap. We use PNG to preserve the image quality
        val savedFile = createImageFile(ProductSearchActivity.CROPPED_IMAGE_FILE_NAME)
        objectImage.compress(Bitmap.CompressFormat.PNG, 100, FileOutputStream(savedFile))

        // Start the product search activity (using Vision Product Search API.).
        startActivity(
            Intent(
                    this,
                    ProductSearchActivity::class.java
            ).apply {
                // As the size limit of a bundle is 1MB, we need to save the bitmap to a file
                // and reload it in the other activity to support large query images.
                putExtra(
                    ProductSearchActivity.REQUEST_TARGET_IMAGE_PATH,
                    savedFile.absolutePath
                )
            })
    } catch (e: Exception) {
        // IO Exception, Out Of memory ....
        Toast.makeText(this, e.message, Toast.LENGTH_SHORT).show()
        Log.e(TAG, "Error starting the product image search activity.", e)
    }
}

L'extrait de code effectue trois opérations:

  • Il prend l'image recadrée et le sérialise dans un fichier PNG.
  • Démarre ProductSearchActivity pour exécuter la séquence de recherche de produits.
  • Inclut l'URI de l'image recadrée dans l'intent d'activité de démarrage pour que ProductSearchActivity puisse le récupérer ultérieurement en tant qu'image de requête.

Voici quelques points à retenir:

  • La logique de détection des objets et d'interrogation du backend a été divisée en deux activités afin de faciliter la compréhension de l'atelier de programmation. C'est à vous de décider comment les implémenter dans votre application.
  • Vous devez écrire l'image de la requête dans un fichier et transmettre l'URI de l'image entre les activités, car la taille de l'image de requête peut être supérieure à 1 Mo d'un intent Android.
  • Vous pouvez stocker l'image de la requête au format PNG, car elle est sans perte.

Récupérez l'image de requête dans l'activité de recherche de produits.

Dans ProductSearchActivity, le code permettant de récupérer l'image de la requête et de l'afficher à l'écran a déjà été implémenté dans l'application de départ.

Accédez à la méthode onCreate et vérifiez que ce code est déjà présent:

// Receive the query image and show it on the screen
intent.getStringExtra(REQUEST_TARGET_IMAGE_PATH)?.let { absolutePath ->
    viewBinding.ivQueryImage.setImageBitmap(BitmapFactory.decodeFile(absolutePath))
}

Exécuter l'application

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

Une fois l'application chargée, appuyez sur les images prédéfinies souhaitées, puis sélectionnez l'un des objets détectés.

Vérifiez que ProductSearchActivity s'affiche avec l'image sur laquelle vous avez appuyé. Le bouton Rechercher n'a aucune incidence pour le moment, mais nous allons l'implémenter par la suite.

fed40f81b8b43801.png

Vous devriez voir un écran similaire après avoir appuyé sur l'un des objets détectés.

5. Découvrir le backend de recherche de produits

Créer le backend de la recherche d'images de produit

Cet atelier de programmation nécessite un backend de recherche de produits conçu à l'aide de la recherche de produits de l'API Vision. Pour cela, vous pouvez procéder de deux manières:

Option 1: Utiliser le backend de démonstration déployé

Vous pouvez poursuivre cet atelier de programmation en utilisant le backend de recherche de produits que Google a déjà déployé pour vous. Le backend de démonstration peut être répliqué en suivant le guide de démarrage rapide sur la recherche de produits de l'API Vision.

Option 2: Créer votre propre backend en suivant le guide de démarrage rapide de la fonctionnalité de recherche de produits de l'API Vision

Cette option est recommandée pour ceux qui souhaitent découvrir en détail comment créer un backend de recherche de produits pour pouvoir en créer un pour leur propre catalogue de produits. Vous devez disposer des éléments suivants :

  • Un compte Google Cloud avec la facturation activée. (il peut s'agir d'un compte d'essai gratuit).
  • Des connaissances sur les concepts de Google Cloud, y compris les projets, les comptes de service, etc.

Vous pourrez le faire plus tard dans le parcours de formation.

Découvrez les concepts importants

Vous rencontrerez ces concepts lors de l'interaction avec le backend de recherche de produits:

  • Ensemble de produits: un ensemble de produits est un conteneur simple pour un groupe de produits. Un catalogue de produits peut être représenté sous la forme d'un ensemble de produits et de ses produits.
  • Produit: une fois que vous avez créé un ensemble de produits, vous pouvez créer des produits et les ajouter à l'ensemble de produits.
  • Images de référence du produit: ce sont des images contenant différentes vues de vos produits. Les images de référence permettent de rechercher des produits visuellement similaires.
  • Rechercher des produits: une fois que vous avez créé votre ensemble de produits et que celui-ci a été indexé, vous pouvez l'interroger à l'aide de l'API Cloud Vision.

Comprendre le catalogue de produits prédéfini

Le backend de démonstration des produits de recherche utilisé dans cet atelier de programmation a été créé à l'aide de la recherche de produits de l'API Vision et d'un catalogue de produits composé d'une centaine de chaussures et d'images de vêtements. Voici quelques images du catalogue:

4f1a8507b74ab178.png 79a5fc6c829eca77.png 3528c872f813826e.png

Exemples issus du catalogue de produits prédéfini

Appeler le backend de la recherche de produits

Vous pouvez appeler la recherche de produits de l'API Vision directement depuis une application mobile en configurant une clé API Google Cloud et en restreignant l'accès à cette clé à votre application.

Pour simplifier cet atelier de programmation, un point de terminaison de proxy a été configuré pour vous permettre d'accéder au backend de démonstration sans vous soucier de la clé API ni de l'authentification. Elle reçoit la requête HTTP de l'application mobile, ajoute la clé API et transmet la requête au backend de la recherche de produits de l'API Vision. Le proxy reçoit ensuite la réponse du backend et la renvoie à l'application mobile.

Dans cet atelier de programmation, vous utiliserez deux API de la recherche de produits de l'API Vision:

6. Implémenter le client API

Comprendre le workflow de recherche de produits

Procédez comme suit pour effectuer une recherche de produits avec le backend:

Implémenter la classe cliente de l'API

Vous allez maintenant implémenter du code pour appeler le backend de recherche de produits dans une classe dédiée appelée ProductSearchAPIClient. Du code récurrent a été intégré dans l'application de départ:

  • class ProductSearchAPIClient: cette classe est actuellement vide pour la plupart, mais elle contient des méthodes que vous mettrez en œuvre plus tard dans cet atelier de programmation.
  • fun convertBitmapToBase64(bitmap: Bitmap): convertir une instance bitmap en base64 à envoyer au backend de recherche de produits
  • fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: appelez l'API projects.locations.images.annoter et analysez la réponse.
  • fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>: appelez l'API projects.locations.products.referenceImages.get et analysez la réponse.
  • SearchResult.kt: ce fichier contient plusieurs classes de données pour représenter les types renvoyés par le backend de produits de l'API Vision.

Spécifier les configurations d'API

Accédez à la classe ProductSearchAPIClient. Certaines configurations du backend de recherche de produits s'affichent déjà:

// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
const val VISION_API_URL =
    "https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
const val VISION_API_KEY = ""
const val VISION_API_PROJECT_ID = "odml-codelabs"
const val VISION_API_LOCATION_ID = "us-east1"
const val VISION_API_PRODUCT_SET_ID = "product_set0"
  • VISION_API_URL est le point de terminaison de l'API Cloud Vision. Définissez le backend du proxy sur le backend de la démonstration. Toutefois, si vous déployez votre propre backend, vous devrez le remplacer par le point de terminaison de l'API Cloud Vision. https://vision.googleapis.com/v1
  • VISION_API_KEY est la clé API de votre projet Cloud. Comme le proxy gère déjà l'authentification, vous pouvez laisser ce champ vide.
  • VISION_API_PROJECT_ID est l'ID du projet Cloud. odml-codelabs correspond au projet Cloud dans lequel le backend de démonstration est déployé.
  • VISION_API_LOCATION_ID est l'emplacement Cloud où est déployé le backend de recherche de produits. us-east1 est l'endroit où nous avons déployé le backend de démonstration.
  • VISION_API_PRODUCT_SET_ID est l'ID du catalogue de produits (également appelé "ensemble de produits" dans le terme "API Vision") dans lequel vous souhaitez rechercher des produits visuellement similaires. Un projet Cloud peut contenir plusieurs catalogues. product_set0 est le catalogue de produits prédéfini du backend de démonstration.

7. Appeler l'API Product Search

Explorer le format de requête et de réponse de l'API

Vous pouvez trouver des produits similaires à une image donnée en transmettant l'URI Google Cloud Storage de l'image, l'URL Web ou la chaîne encodée en base64 à la fonctionnalité de recherche de produits de l'API Vision. Dans cet atelier de programmation, vous allez utiliser l'option de chaîne encodée en base64, car notre image de requête n'existe que sur l'appareil de l'utilisateur.

Vous devez envoyer une requête POST au point de terminaison projects.locations.images.annoter avec le corps JSON de la requête:

{
  "requests": [
    {
      "image": {
        "content": {base64-encoded-image}
      },
      "features": [
        {
          "type": "PRODUCT_SEARCH",
          "maxResults": 5
        }
      ],
      "imageContext": {
        "productSearchParams": {
          "productSet": "projects/{project-id}/locations/{location-id}/productSets/{product-set-id}",
          "productCategories": [
               "apparel-v2"
          ],
        }
      }
    }
  ]
}

Vous devez spécifier certains paramètres :

  • base64-encoded-image: représentation en base64 (chaîne ASCII) des données binaires de l'image de la requête.
  • project-id : ID du projet GCP
  • location-id : indicateur d'emplacement valide.
  • product-set-id: ID de l'ensemble de produits sur lequel vous souhaitez exécuter l'opération.

Étant donné que votre catalogue de produits ne contient que des images de chaussures et de robes, indiquez lesproductcategories CANNOT TRANSLATEapparel-v2 dans le menu déroulant ; Dans la version v2, nous utilisons la version 2 du modèle de machine learning pour la recherche de produits vestimentaires.

Si la requête aboutit, le serveur affiche un code d'état HTTP 200 OK et la réponse au format JSON. La réponse JSON inclut les deux types de résultats suivants :

  • productSearchResults : contient une liste de produits correspondants pour l'image entière.
  • productGroupedResults : contient les coordonnées du cadre de délimitation et les éléments correspondants pour chaque produit identifié dans l'image.

Le produit ayant déjà été recadré à partir de l'image d'origine, vous allez analyser les résultats dans la liste productSearchResults.

Voici quelques champs importants dans l'objet des résultats de recherche de produits:

  • product.name: identifiant unique d'un produit, au format projects/{project-id}/locations/{location-id}/products/{product_id}.
  • product.score: valeur indiquant le degré de similitude entre les résultats de recherche et l'image de la requête. Plus la valeur est élevée, plus les similitudes sont élevées.
  • product.image: identifiant unique de l'image de référence d'un produit, au format projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id}. Vous devez envoyer une autre requête API à projects.locations.products.referenceImages.get pour obtenir l'URL de cette image de référence afin qu'elle s'affiche à l'écran.
  • product.labels: liste de balises prédéfinies du produit. Cela peut être utile si vous souhaitez filtrer les résultats de recherche pour n'afficher qu'une seule catégorie de vêtements (par exemple, les robes).

Convertir l'image de la requête en base64

Vous devez convertir l'image de la requête dans sa représentation de chaîne en base64 et associer celle-ci à l'objet JSON dans le corps de la requête.

Accédez à la classe ProductSearchAPIClient, recherchez la méthode convertBitmapToBase64 vide, puis remplacez-la par cette implémentation:

private fun convertBitmapToBase64(bitmap: Bitmap): String {
    val byteArrayOutputStream = ByteArrayOutputStream()
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream)
    val byteArray: ByteArray = byteArrayOutputStream.toByteArray()
    return Base64.encodeToString(byteArray, Base64.DEFAULT)
}

Implémenter l'appel d'API

Créez ensuite une requête API de recherche de produits, puis envoyez-la au backend. Vous utiliserez Volley pour effectuer la requête API, puis vous renvoyer le résultat à l'aide de l'API Task.

Revenez à la classe ProductSearchAPIClient, recherchez la méthode annotateImage vide, puis remplacez-la par cette implémentation:

fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<List<ProductSearchResult>>()
    val apiTask = apiSource.task

    // Convert the query image to its Base64 representation to call the Product Search API.
    val base64: String = convertBitmapToBase64(image)

    // Craft the request body JSON.
    val requestJson = """
        {
          "requests": [
            {
              "image": {
                "content": """".trimIndent() + base64 + """"
              },
              "features": [
                {
                  "type": "PRODUCT_SEARCH",
                  "maxResults": $VISION_API_PRODUCT_MAX_RESULT
                }
              ],
              "imageContext": {
                "productSearchParams": {
                  "productSet": "projects/${VISION_API_PROJECT_ID}/locations/${VISION_API_LOCATION_ID}/productSets/${VISION_API_PRODUCT_SET_ID}",
                  "productCategories": [
                       "apparel-v2"
                     ]
                }
              }
            }
          ]
        }
    """.trimIndent()

    // Add a new request to the queue
    requestQueue.add(object :
        JsonObjectRequest(
            Method.POST,
            "$VISION_API_URL/images:annotate?key=$VISION_API_KEY",
            JSONObject(requestJson),
            { response ->
                // Parse the API JSON response to a list of ProductSearchResult object/
                val productList = apiResponseToObject(response)

                // Return the list.
                apiSource.setResult(productList)
            },
            // Return the error
            { error -> apiSource.setException(error) }
        ) {
        override fun getBodyContentType() = "application/json"
    }.apply {
        setShouldCache(false)
    })

    return apiTask
}

Afficher le résultat de recherche dans l'interface utilisateur

Le code de l'API dans ProductSearchAPIClient est maintenant prêt. Revenez à l'activité ProductSearchActivity pour implémenter le code de l'UI.

L'activité contient déjà un code récurrent qui déclenche la méthode searchByImage(queryImage: Bitmap). Ajoutez du code pour appeler le backend et afficher les résultats dans l'interface utilisateur dans cette méthode actuellement vide.

apiClient.annotateImage(queryImage)
    .addOnSuccessListener { showSearchResult(it) }
    .addOnFailureListener { error ->
        Log.e(TAG, "Error calling Vision API Product Search.", error)
        showErrorResponse(error.localizedMessage)
    }

La méthode showSearchResult contient du code récurrent qui analyse la réponse de l'API et les affiche à l'écran.

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 les images prédéfinies souhaitées, sélectionnez un objet détecté, appuyez sur le bouton Rechercher et consultez les résultats renvoyés par le backend. Le résultat qui s'affiche doit ressembler à ceci :

BB5E7C27C283a2fe.png

Capture d'écran de l'écran de résultats de recherche de produits

Le backend renvoie déjà une liste de produits visuellement similaires dans le catalogue de produits prédéfini. Vous pouvez toutefois constater que l'image du produit est toujours vide. En effet, le point de terminaison projects.locations.images.annoter ne renvoie que les ID d'image de produit tels que projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77. Vous devez effectuer un autre appel d'API sur le point de terminaison projects.locations.products.referenceImages.get et obtenir l'URL de cette image de référence pour l'afficher à l'écran.

8. Obtenir les images de référence des produits

Explorer le format de requête et de réponse de l'API

Vous allez envoyer une requête HTTP GET avec un corps de requête vide au point de terminaison projects.locations.products.referenceImages.get afin d'obtenir les URI des images de produit renvoyées par le point de terminaison de recherche de produits.

La requête HTTP se présente comme suit:

GET $VISION_API_URL/projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77?key=$VISION_API_KEY

Si la requête aboutit, le serveur affiche un code d'état HTTP 200 OK ainsi que la réponse au format JSON ci-dessous:

{
  "name":"projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77",
  "uri":"gs://cloud-ai-vision-data/product-search-tutorial/images/46991e7370ba11e8a1bbd20059124800.jpg"
}
  • name: identifiant de l'image de référence
  • uri: URI de l'image dans Google Cloud Storage (GCS).

Les images de référence du backend de recherche de produits de démonstration ont été configurées pour disposer d'une autorisation en lecture publique. Par conséquent, vous pouvez facilement convertir l'URI GCS en URL HTTP et l'afficher dans l'interface utilisateur de l'application. Il vous suffit de remplacer le préfixe gs:// par https://storage.googleapis.com/.

Implémenter l'appel d'API

Créez ensuite une requête API de recherche de produits, puis envoyez-la au backend. Vous utiliserez Volley et l'API Task de la même manière que l'appel d'API de recherche de produits.

Revenez à la classe ProductSearchAPIClient, recherchez la méthode fetchReferenceImage vide, puis remplacez-la par cette implémentation:

private fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<ProductSearchResult>()
    val apiTask = apiSource.task

    // Craft the API request to get details about the reference image of the product
    val stringRequest = object : StringRequest(
        Method.GET,
        "$VISION_API_URL/${searchResult.imageId}?key=$VISION_API_KEY",
        { response ->
            val responseJson = JSONObject(response)
            val gcsUri = responseJson.getString("uri")

            // Convert the GCS URL to its HTTPS representation
            val httpUri = gcsUri.replace("gs://", "https://storage.googleapis.com/")

            // Save the HTTPS URL to the search result object
            searchResult.imageUri = httpUri

            // Invoke the listener to continue with processing the API response (eg. show on UI)
            apiSource.setResult(searchResult)
        },
        { error -> apiSource.setException(error) }
    ) {

        override fun getBodyContentType(): String {
            return "application/json; charset=utf-8"
        }
    }
    Log.d(ProductSearchActivity.TAG, "Sending API request.")

    // Add the request to the RequestQueue.
    requestQueue.add(stringRequest)

    return apiTask
}

Cette méthode utilise un objet searchResult: ProductSearchResult renvoyé par le point de terminaison de la recherche de produits, puis suit les étapes suivantes:

  1. Appelle le point de terminaison de l'image de référence pour obtenir l'URI GCS de cette image.
  2. Convertit l'URI GCS en URL HTTP.
  3. Met à jour la propriété httpUri de l'objet searchResult avec cette URL HTTP.

Connecter les deux requêtes API

Revenez à annotateImage et modifiez-la pour obtenir les URL HTTP des images de référence avant de renvoyer la liste ProductSearchResult à l'appelant.

Localisez la ligne suivante :

// Return the list.
apiSource.setResult(productList)

Remplacez-le ensuite par l'implémentation suivante:

// Loop through the product list and create tasks to load reference images.
// We will call the projects.locations.products.referenceImages.get endpoint
// for each product.
val fetchReferenceImageTasks = productList.map { fetchReferenceImage(it) }

// When all reference image fetches have completed,
// return the ProductSearchResult list
Tasks.whenAllComplete(fetchReferenceImageTasks)
    // Return the list of ProductSearchResult with product images' HTTP URLs.
    .addOnSuccessListener { apiSource.setResult(productList) }
    // An error occurred so returns it to the caller.
    .addOnFailureListener { apiSource.setException(it) }

Le code récurrent pour afficher les images de référence à l'écran est déjà implémenté dans la classe ProductSearchAdapter pour que vous puissiez réexécuter l'application.

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 une image prédéfinie, sélectionnez un objet détecté, appuyez sur le bouton Rechercher pour afficher les résultats, cette fois avec des images de produits.

Les résultats de recherche de produits vous sont-ils pertinents ?

25939f5a13eeb3c3.png

9. Félicitations !

Vous avez appris à appeler un backend de recherche de produits de l'API Vision pour ajouter des fonctionnalités de recherche d'images de produits à votre application Android. Vous avez terminé la configuration.

À mesure que vous continuez, vous pouvez créer votre propre backend à l'aide de votre catalogue de produits. Consultez le prochain atelier de programmation dans le parcours de formation Product Image Search pour découvrir comment créer votre propre backend et configurer la clé API afin de l'appeler depuis une application mobile.

Points abordés

  • Appeler le backend de la recherche de produits de l'API Vision à partir d'une application Android

Étapes suivantes

En savoir plus

bug_report Signaler une erreur