1. Prima di iniziare
Hai visto la demo di Google Lens, dove puoi puntare la fotocamera del tuo telefono verso un oggetto e scoprire dove puoi acquistarlo online? Se vuoi scoprire come aggiungere la stessa funzionalità alla tua app, questo codelab fa per te. Fa parte di un percorso di apprendimento che ti insegna come integrare una funzionalità di ricerca delle immagini dei prodotti in un'app per dispositivi mobili.
In questo codelab, imparerai a chiamare un backend creato con Vision API Product Search da un'app per dispositivi mobili. Questo backend può acquisire un'immagine di query e cercare prodotti visivamente simili da un catalogo dei prodotti.
Puoi scoprire i passaggi rimanenti per la creazione di una funzionalità di ricerca visiva dei prodotti, inclusa la procedura per rilevare e monitorare gli oggetti ML Kit per rilevare gli oggetti nell'immagine query e consentire agli utenti di scegliere il prodotto che vogliono cercare nel percorso di apprendimento.
Cosa imparerai a realizzare
|
|
Cosa imparerai a fare:
- Come chiamare e analizzare la risposta delle API Product Search dell'API Vision da un'app Android
Che cosa ti serve
- Una versione recente di Android Studio (v4.1.2+)
- Emulatore di Android Studio o un dispositivo Android fisico
- Codice di esempio
- Conoscenza di base dello sviluppo di Android in Kotlin
Questo codelab è incentrato su Product Search dell'API Vision. I concetti e i blocchi di codice non pertinenti non vengono esplorati e sono forniti come copia e incolla.
2. Informazioni sull'API Vision Product Search
Product Search dell'API Vision è una funzionalità di Google Cloud che consente agli utenti di cercare prodotti visivamente simili da un catalogo dei prodotti. I rivenditori possono creare prodotti, ciascuno contenente immagini di riferimento che descrivono visivamente il prodotto da una serie di punti di vista. Puoi quindi aggiungere questi prodotti ai set di prodotti (ad es. il catalogo dei prodotti). Attualmente l'API Vision Product Search supporta le seguenti categorie di prodotti: articoli per la casa, abbigliamento, giocattoli, beni di largo consumo e generali.
Quando gli utenti interrogano il set di prodotti con le proprie immagini, Product Search dell'API Vision applica il machine learning per confrontare il prodotto nell'immagine della query dell'utente con le immagini nel set di prodotti del rivenditore e restituisce un elenco di risultati visivamente e semanticamente simili.
3. Scarica ed esegui l'app iniziale
Scarica il codice
Fai clic sul seguente link per scaricare tutto il codice di questo codelab:
Apri il file ZIP scaricato. Verrà aperta una cartella principale (odml-pathways-main) che conterrà tutte le risorse necessarie. Per questo codelab, avrai bisogno solo delle origini nella sottodirectory product-search/codelab2/android.
La sottodirectory codelab2 nel repository odml-pathways contiene due directory:
starter: il codice di avvio sulla quale crei questo codelab.- final: è stato completato il codice per l'app di esempio terminata.
L'app iniziale è quella che hai creato nel codelab su Rilevamento di oggetti nelle immagini per creare una ricerca visiva del prodotto: Android. Utilizza il rilevamento e il monitoraggio degli oggetti ML Kit per rilevare oggetti da un'immagine e mostrarli sullo schermo.
Importare l'app in Android Studio
Innanzitutto importa l'app starter in Android Studio.
Vai ad Android Studio, seleziona Import Project (Gradle, Eclipse ADT, etc.) e scegli la cartella starter dal codice sorgente che hai scaricato in precedenza.
Esegui l'app iniziale
Ora che hai importato il progetto in Android Studio, puoi eseguire l'app per la prima volta. Collega il dispositivo Android tramite USB all'host o Avvia l'emulatore Android Studio, quindi fai clic su Esegui (
) nella barra degli strumenti di Android Studio.
(Se questo pulsante non è attivo, assicurati di importare solo starter/app/build.gradle, non l'intero repository.)
Ora l'app dovrebbe essere stata avviata sul tuo dispositivo Android. Dispone già della funzionalità di rilevamento degli oggetti: rileva gli articoli di moda dall'immagine e ti mostra dove si trovano. Per confermare, prova a utilizzare le foto preimpostate.
Screenshot dell'app in grado di rilevare oggetti in un'immagine
Successivamente, amplierai l'app per inviare gli oggetti rilevati al backend di Product Search dell'API Vision e vedrai i risultati di ricerca sullo schermo.
4. Gestisci la selezione di oggetti
Consenti agli utenti di toccare un oggetto rilevato da selezionare
Ora aggiungerai codice per consentire agli utenti di selezionare un oggetto dall'immagine e iniziare la ricerca dei prodotti. L'app di avvio ha già la capacità di rilevare gli oggetti nell'immagine. È possibile che l'immagine contenga più oggetti o che l'oggetto rilevato occupa solo una piccola parte dell'immagine. Pertanto, è necessario che l'utente tocchi uno degli oggetti rilevati per indicare quale oggetto vuole utilizzare per la ricerca dei prodotti.
Uno screenshot degli articoli di moda rilevati dall'immagine
Per mantenere il codelab semplice e incentrato sul machine learning, è stato implementato un codice Android standard nell'app di avvio per aiutarti a rilevare quale oggetto ha toccato l'utente. La visualizzazione che mostra l'immagine nell'attività principale (ObjectDetectorActivity) è in realtà una visualizzazione personalizzata (ImageClickableView) che estende la ImageView predefinita del sistema operativo Android. Implementa alcuni metodi di utilità pratici, tra cui:
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit))Si tratta di un callback per ricevere l'immagine ritagliata che contiene solo l'oggetto che l'utente ha toccato. L'immagine ritagliata verrà inviata al backend di ricerca dei prodotti.
Aggiungi codice per gestire un utente che tocca gli oggetti rilevati.
Vai al metodo initViews nella classe ObjectDetectorActivity e aggiungi le seguenti righe alla fine del metodo: (Android Studio ti dirà che non riesce a trovare il metodo startProductImageSearch). Non preoccuparti, lo implementerai un po' più tardi.
// Callback received when the user taps on any of the detected objects.
ivPreview.setOnObjectClickListener { objectImage ->
startProductImageSearch(objectImage)
}
onObjectClickListener viene chiamato ogni volta che l'utente tocca uno degli oggetti rilevati sullo schermo. Riceve l'immagine ritagliata che contiene solo l'oggetto selezionato. Ad esempio, se l'utente tocca la persona che indossa il vestito a destra, l'ascoltatore verrà attivato con objectImage come indicato di seguito.
Un esempio dell'immagine ritagliata trasmessa a onObjectClickListener
Invia l'immagine ritagliata all'attività di ricerca dei prodotti
Ora implementerai la logica dell'invio dell'immagine query al backend di Product Search dell'API Vision in un'attività separata (ProductSearchActivity).
Tutti i componenti dell'interfaccia utente sono stati implementati in anticipo, quindi puoi concentrarti sulla scrittura del codice per comunicare con il backend di ricerca prodotti.
Uno screenshot dei componenti dell'interfaccia utente in ProductSearchActivity
Aggiungi il codice per inviare l'immagine oggetto che l'utente ha selezionato a ProductSearchActivity.
Torna ad Android Studio e aggiungi questo metodo startProductImageSearch alla 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)
}
}
Lo snippet di codice esegue tre operazioni:
- Scatta l'immagine ritagliata e la serializza in un file PNG.
- Avvia l'elemento
ProductSearchActivityper eseguire la sequenza di ricerca dei prodotti. - Include l'URI dell'immagine ritagliata nell'intent dell'attività di avvio, in modo che
ProductSearchActivitypossa recuperarla in seguito da utilizzare come immagine della query.
Ci sono alcuni aspetti da tenere presente:
- La logica per il rilevamento di oggetti e l'esecuzione di query sul backend è stata suddivisa in due attività, in modo da rendere più semplice la comprensione del codelab. Sta a te decidere come implementarli nella tua app.
- Devi scrivere l'immagine della query in un file e passare l'URI dell'immagine tra le attività perché l'immagine della query può superare il limite di 1 MB di un intent Android.
- Puoi archiviare l'immagine della query in formato PNG perché è un formato senza perdita di dati.
Recupera l'immagine della query nell'attività di ricerca dei prodotti
In ProductSearchActivity, il codice per recuperare l'immagine della query e visualizzarla sullo schermo è già stato implementato nell'app iniziale.
Vai al metodo onCreate e verifica che questo codice sia già presente:
// Receive the query image and show it on the screen
intent.getStringExtra(REQUEST_TARGET_IMAGE_PATH)?.let { absolutePath ->
viewBinding.ivQueryImage.setImageBitmap(BitmapFactory.decodeFile(absolutePath))
}
Esegui l'app
Ora fai clic su Esegui ( ) nella barra degli strumenti di Android Studio.
Al termine del caricamento dell'app, tocca le immagini preimpostate e seleziona uno degli oggetti rilevati.
Verifica che l'immagine ProductSearchActivity venga visualizzata con l'immagine che hai toccato. Il pulsante Cerca non esegue ancora alcuna operazione, ma verrà implementato successivamente.
Dopo aver toccato uno degli oggetti rilevati, dovresti vedere una schermata simile.
5. Esplora il backend di Product Search
Crea il backend di ricerca di immagini dei prodotti
Questo codelab richiede un backend di ricerca prodotti creato con Product Search di Vision. Puoi scegliere tra due opzioni:
Opzione 1: utilizza il backend demo che è stato implementato per te
Puoi procedere con questo codelab utilizzando il backend di ricerca prodotti che Google ha già implementato per te. Il backend dimostrativo può essere replicato seguendo la guida rapida di Product Search dell'API Vision.
Opzione 2: crea il tuo backend seguendo la guida rapida di Product Search dell'API Vision
Questa opzione è consigliata a coloro che vogliono sapere nel dettaglio come creare un backend di ricerca prodotti per poterne creare uno per il proprio catalogo prodotti in un secondo momento. È necessario disporre di:
- Un account Google Cloud con fatturazione abilitata. (Puoi utilizzare un account di prova senza costi aggiuntivi).
- Alcune conoscenze sui concetti di Google Cloud, tra cui progetti, account di servizio e così via.
Per sapere come fare in un secondo momento, consulta il percorso di apprendimento.
Apprendi i concetti importanti
Ti imbatterai in questi concetti quando interagisci con il backend di Product Search:
- Set di prodotti: un set di prodotti è un semplice contenitore per un gruppo di prodotti. Un catalogo dei prodotti può essere rappresentato come un set di prodotti e i relativi prodotti.
- Prodotto: dopo aver creato un set di prodotti, puoi crearne di nuovi e aggiungerli al set.
- Immagini di riferimento: sono immagini contenenti varie visualizzazioni dei tuoi prodotti. Le immagini di riferimento vengono utilizzate per cercare prodotti visivamente simili.
- Cerca i prodotti: dopo aver creato il tuo set di prodotti e che questo è stato indicizzato, puoi eseguire query sul set di prodotti utilizzando l'API Cloud Vision.
Informazioni sul catalogo dei prodotti preimpostato
Il backend della demo di Product Search utilizzato in questo codelab è stato creato utilizzando Product Search dell'API Vision e un catalogo di prodotti con circa 100 scarpe e abiti eleganti. Ecco alcune immagini del catalogo:
Esempi dal catalogo dei prodotti preimpostato
Chiama il backend della demo di Product Search
Puoi chiamare Product Search dell'API Vision direttamente da un'app per dispositivi mobili configurando una chiave API di Google Cloud e limitando l'accesso alla chiave API alla sola app.
Per semplificare questo codelab, è stato configurato un endpoint proxy che ti consente di accedere al backend della demo senza preoccuparti della chiave API e dell'autenticazione. L'app riceve la richiesta HTTP dall'app per dispositivi mobili, aggiunge la chiave API e inoltra la richiesta al backend di Product Search dell'API Vision. Il proxy riceve la risposta dal backend e la restituisce all'app per dispositivi mobili.
- Endpoint proxy:
https://us-central1-odml-codelabs.cloudfunctions.net/productSearch - Comportamento proxy: aggiungi un'intestazione di autenticazione appropriata e inoltra le richieste API al backend di Product Search dell'API Vision. Ad esempio, una chiamata API a
https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotateverrà inoltrata ahttps://vision.googleapis.com/v1/images:annotate
In questo codelab, utilizzerai due API di Vision API Product Search:
- projects.locations.images.annotate: invio dell'immagine della query al server e ricezione di un elenco di prodotti da un catalogo di prodotti preimpostati che sono visivamente simili all'immagine della query.
- projects.locations.products.referenceImages.get: recupero degli URI delle immagini prodotto nella chiamata API riportata sopra per la visualizzazione agli utenti.
6. Implementare il client API
Comprendi il flusso di lavoro della ricerca di prodotti
Segui questo flusso di lavoro per eseguire ricerche dei prodotti con il backend:
- Codifica l'immagine della query come stringa base64
- Chiama l'endpoint projects.locations.images.annotate con l'immagine della query.
- Ricevi gli ID immagine del prodotto dalla chiamata API precedente e inviali agli endpoint projects.locations.products.referenceImages.get per ottenere gli URI delle immagini del prodotto nel risultato di ricerca.
Implementare la classe client API
Ora implementerai il codice per chiamare il backend di Product Search in una classe dedicata chiamata ProductSearchAPIClient. Alcuni codici boilerplate sono stati implementati per te nell'app iniziale:
class ProductSearchAPIClient: questa classe è attualmente vuota, ma include alcuni metodi da implementare più avanti in questo codelab.fun convertBitmapToBase64(bitmap: Bitmap): converti un'istanza Bitmap nella rappresentazione Base64 da inviare al backend di Product Searchfun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: chiama l'API projects.locations.images.annotate e analizza la risposta.fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>: chiama l'API projects.locations.products.referenceImages.get e analizza la risposta.SearchResult.kt: questo file contiene diverse classi di dati per rappresentare i tipi restituiti dal backend di Vision API Product Search.
Configura le configurazioni API
Vai alla classe ProductSearchAPIClient e vedrai alcune configurazioni del backend di Product Search già definite:
// 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 è l'endpoint API dell'API Cloud Vision. Per procedere con il backend demo, impostalo sull'endpoint proxy. Tuttavia, se esegui il deployment del tuo backend, dovrai modificarlo nell'endpoint dell'API Cloud Vision.
https://vision.googleapis.com/v1. - VISION_API_KEY è la chiave API del progetto cloud. Poiché il proxy gestisce già l'autenticazione, puoi lasciare vuoto questo campo.
- VISION_API_PROJECT_ID è l'ID progetto Cloud.
odml-codelabsè il progetto Cloud in cui viene eseguito il deployment del backend demo. - VISION_API_LOCATION_ID è la località cloud in cui è stato eseguito il deployment del backend di ricerca prodotti.
us-east1è il luogo in cui abbiamo eseguito il deployment del backend demo. - VISION_API_PRODUCT_SET_ID è l'ID del catalogo dei prodotti (noto anche come "set di prodotti" nel termine dell'API Vision) in cui vuoi cercare i prodotti visivamente simili. Puoi avere più cataloghi in un progetto Cloud.
product_set0è il catalogo dei prodotti preimpostato del backend della demo.
7. Chiama l'API Product Search
Esplora il formato della richiesta e della risposta dell'API
Puoi trovare prodotti simili a una determinata immagine passando l'URI Google Cloud Storage di Google Cloud, l'URL web o la stringa codificata in Base64 a Product Search dell'API Vision. In questo codelab, utilizzerai l'opzione di stringa codificata base64, poiché la nostra immagine query esiste solo nel dispositivo dell'utente.
Devi inviare una richiesta POST all'endpoint projects.locations.images.annotate con questo corpo JSON della richiesta:
{
"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"
],
}
}
}
]
}
È necessario specificare alcuni parametri:
- base-4-encoded-image: la rappresentazione base64 (stringa ASCII) dei dati binari dell'immagine di query.
- project-id: il tuo ID progetto GCP.
- location-id: un identificatore di località valido.
- product-set-id: ID del set di prodotti su cui vuoi eseguire l'operazione.
Poiché il tuo catalogo dei prodotti contiene solo immagini di scarpe e abiti, specifica il valore productCategories come apparel-v2. v2 significa che utilizziamo la versione 2 del modello di machine learning per la ricerca di prodotti di abbigliamento.
Se la richiesta ha esito positivo, il server restituisce un codice di stato HTTP 200 OK e la risposta in formato JSON. Il file JSON della risposta include i due tipi di risultati che seguono:
- productSearchResults: contiene un elenco di prodotti corrispondenti per l'intera immagine.
- productGroupedResults: contiene le coordinate del riquadro di delimitazione e gli elementi corrispondenti per ogni prodotto identificato nell'immagine.
Poiché il prodotto è già stato ritagliato dall'immagine originale, analizzi i risultati nell'elenco productSearchResults.
Ecco alcuni campi importanti nell'oggetto dei risultati di ricerca:
- product.name: l'identificatore univoco di un prodotto nel formato
projects/{project-id}/locations/{location-id}/products/{product_id} - product.score: valore che indica quanto il risultato di ricerca è simile all'immagine della query. Valori più alti indicano una maggiore somiglianza.
- product.image: l'identificatore univoco dell'immagine di riferimento di un prodotto nel formato
projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id}. Dovrai inviare un'altra richiesta API a projects.locations.products.referenceImages.get per ottenere l'URL di questa immagine di riferimento in modo che venga visualizzata sullo schermo. - product.labels: un elenco di tag predefiniti del prodotto. Ciò è utile se vuoi filtrare i risultati di ricerca per visualizzare solo una categoria di abbigliamento, come gli abiti.
Converti l'immagine della query in base64
Devi convertire l'immagine della query nella rappresentazione della stringa base64 e collegarla al corpo JSON della richiesta.
Vai al corso ProductSearchAPIClient, trova il metodo convertBitmapToBase64 vuoto e sostituiscilo con questa implementazione:
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)
}
Implementare la chiamata API
Quindi, crea una richiesta API Product Search e inviala al backend. Userai Volley per effettuare la richiesta API e restituire il risultato utilizzando l'API Tasks.
Torna al corso ProductSearchAPIClient, trova il metodo annotateImage vuoto e sostituiscilo con questa implementazione:
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
}
Mostrare il risultato di ricerca nell'interfaccia utente
Il codice API in ProductSearchAPIClient è pronto. Torna all'attività ProductSearchActivity per implementare il codice dell'interfaccia utente.
L'attività ha già del codice boilerplate che attiva il metodo searchByImage(queryImage: Bitmap). Aggiungi codice per chiamare il backend e mostrare i risultati sulla UI in questo metodo attualmente vuoto.
apiClient.annotateImage(queryImage)
.addOnSuccessListener { showSearchResult(it) }
.addOnFailureListener { error ->
Log.e(TAG, "Error calling Vision API Product Search.", error)
showErrorResponse(error.localizedMessage)
}
Il metodo showSearchResult contiene del codice boilerplate che analizza la risposta dell'API e li mostra sullo schermo.
Esegui
Ora fai clic su Esegui () nella barra degli strumenti di Android Studio. Dopo il caricamento dell'app, tocca le immagini preimpostate, seleziona un oggetto rilevato, tocca il pulsante Cerca e visualizza i risultati restituiti dal backend. Verrà visualizzata un'intestazione simile alla seguente:
Screenshot della schermata dei risultati di ricerca dei prodotti
Il backend restituisce già un elenco di prodotti visivamente simili dal catalogo dei prodotti preimpostato. Tuttavia, puoi vedere che l'immagine del prodotto è ancora vuota. Questo perché l'endpoint projects.locations.images.annotate restituisce solo ID immagine del prodotto come projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77. Dovrai effettuare un'altra chiamata API all'endpoint projects.locations.products.referenceImages.get e recuperare l'URL di questa immagine di riferimento per mostrarla sullo schermo.
8. Acquisire le immagini di riferimento del prodotto
Esplora il formato della richiesta e della risposta dell'API
Invia una richiesta HTTP GET con un corpo della richiesta vuoto all'endpoint projects.locations.products.referenceImages.get per recuperare gli URI delle immagini del prodotto restituite dall'endpoint di ricerca.
La richiesta HTTP ha il seguente aspetto:
GET $VISION_API_URL/projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77?key=$VISION_API_KEY
Se la richiesta ha esito positivo, il server restituisce un codice di stato HTTP 200 OK e la risposta in formato JSON come segue:
{
"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: l'identificatore dell'immagine di riferimento
- uri: l'URI dell'immagine su Google Cloud Storage (GCS).
Le immagini di riferimento del backend di ricerca demo del prodotto sono state configurate in modo da disporre dell'autorizzazione di lettura pubblica. Pertanto, puoi convertire facilmente l'URI GCS in un URL HTTP e visualizzarlo nell'interfaccia utente dell'app. Devi solo sostituire il prefisso gs:// con https://storage.googleapis.com/.
Implementare la chiamata API
Quindi, crea una richiesta API Product Search e inviala al backend. Userai Volley e l'API Task in modo simile alla chiamata API Product Search.
Torna al corso ProductSearchAPIClient, trova il metodo fetchReferenceImage vuoto e sostituiscilo con questa implementazione:
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
}
Questo metodo prevede un oggetto searchResult: ProductSearchResult restituito dall'endpoint di ricerca dei prodotti e la seguente procedura:
- Chiama l'endpoint dell'immagine di riferimento per ottenere l'URI GCS dell'immagine di riferimento.
- Converte l'URI GCS in un URL HTTP.
- Aggiorna la proprietà
httpUridell'oggettosearchResultcon questo URL HTTP.
Collega le due richieste API
Torna a annotateImage e modificalo per ottenere tutte le immagini HTTP di riferimento prima di restituire l'elenco ProductSearchResult al chiamante.
Trova questa riga:
// Return the list.
apiSource.setResult(productList)
Quindi sostituiscila con questa implementazione:
// 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) }
Il codice boilerplate per visualizzare le immagini di riferimento sullo schermo è già implementato nel corso dell'app ProductSearchAdapter, quindi puoi eseguire nuovamente l'app.
Esegui
Ora fai clic su Esegui ( ) nella barra degli strumenti di Android Studio. Una volta caricata l'app, tocca le immagini preimpostate, seleziona un oggetto rilevato e tocca il pulsante Cerca per visualizzare i risultati della ricerca, questa volta con le immagini del prodotto.
I risultati della ricerca di prodotto sono significativi?
9. Complimenti!
Hai imparato a chiamare un backend di Product Search dell'API Vision per aggiungere la funzionalità di ricerca immagini del prodotto alla tua app Android. È tutto ciò che ti serve per iniziare a lavorare.
Mentre procedi, puoi creare il tuo backend con il catalogo dei tuoi prodotti. Dai un'occhiata al codelab successivo nel percorso di apprendimento Product Image Search per scoprire come creare il tuo backend e configurare la chiave API per chiamarla da un'app per dispositivi mobili.
Cosa abbiamo trattato
- Come chiamare il backend di Product Search dell'API Vision da un'app Android
Passaggi successivi
- Per informazioni su come creare il tuo backend, consulta il codelab sulla creazione di un backend di ricerca di immagini di prodotto con l'API Vision Product Search.
- Consulta altri percorsi di apprendimento nel sito web sul machine learning sul dispositivo
- Integra la funzionalità di ricerca dei prodotti nella tua app Android