1. Avant de commencer
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
|
|
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:
starter : code de démarrage sur lequel s'appuie cet atelier de programmation.- final : 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.
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 (
) (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.
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.
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.
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.
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
ProductSearchActivitypour 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
ProductSearchActivitypuisse 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) () 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.
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:
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.
- Point de terminaison du proxy:
https://us-central1-odml-codelabs.cloudfunctions.net/productSearch - Comportement du proxy: ajoutez un en-tête d'authentification approprié et transférez les requêtes API au backend de la recherche de produits de l'API Vision. Par exemple, un appel d'API à
https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotatesera transféré vershttps://vision.googleapis.com/v1/images:annotate
Dans cet atelier de programmation, vous utiliserez deux API de la recherche de produits de l'API Vision:
- projects.locations.images.annoter: envoyer l'image de la requête au serveur et recevoir une liste de produits à partir d'un catalogue de produits prédéfini, qui ressemblent visuellement à l'image de la requête.
- projects.locations.products.referenceImages.get: obtention de l'URI des images du produit renvoyées dans l'appel d'API ci-dessus à afficher aux utilisateurs.
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:
- Encoder l'image de la requête sous forme de chaîne en base64
- Appelez le point de terminaison projects.locations.images.annoter avec l'image de la requête.
- Obtenez les ID d'image de produit de l'appel d'API précédent et envoyez-les aux points de terminaison projects.locations.products.referenceImages.get pour obtenir les URI des images de produits dans le résultat de recherche.
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 produitsfun 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-codelabscorrespond 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-east1est 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_set0est 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) () 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 :
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:
- Appelle le point de terminaison de l'image de référence pour obtenir l'URI GCS de cette image.
- Convertit l'URI GCS en URL HTTP.
- Met à jour la propriété
httpUride l'objetsearchResultavec 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) () 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 ?
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
- Consultez l'atelier de programmation Créer un backend de recherche d'images de produits avec l'API Vision Search pour découvrir comment créer votre propre backend.
- Consultez les autres parcours de formation sur le site Web dédié au machine learning sur l'appareil.
- Intégrer une fonctionnalité de recherche de produits dans votre propre application Android