在 Android 上呼叫 Vision API Product Search 後端

在 Android 上呼叫 Vision API Product Search 後端

程式碼研究室簡介

上次更新時間：11月 3, 2021

作者：Khanh LeViet

1. 事前準備

您看過使用 Google 智慧鏡頭的示範影片時，可以將手機相機對準物件，然後上網購買。如果您想要瞭解如何在應用程式中新增相同功能，那麼這個程式碼研究室就非常適合您。它是學習途徑的一部分，能夠說明如何在行動應用程式中建構產品圖片搜尋功能。

在本程式碼研究室中，您將瞭解如何從行動應用程式呼叫使用 Vision API Product Search 建立的後端。這個後端可查詢查詢圖片，並在產品目錄中搜尋外觀相似的產品。

您可以查看建立視覺化產品搜尋功能的其餘步驟，包括如何使用機器學習套件物件偵測和追蹤功能偵測查詢圖片中的物件，並讓使用者在學習課程中選擇要搜尋的產品。

建構項目

在本程式碼研究室中，您必須從可偵測輸入圖片的 Android 應用程式開始。您可以編寫程式碼來擷取使用者挑選的物件，將物件傳送至產品搜尋後端，然後在螢幕上顯示搜尋結果。 最後，您應該會看到與右圖類似的圖片，

您將會瞭解的內容

• 如何從 Android 應用程式呼叫及剖析 Vision API Product Search API 的回應

軟硬體需求

• 最新版本的 Android Studio (4.1.2 以上版本)
• Android Studio 模擬器或實體 Android 裝置
• 範例程式碼
• 關於 Android Kotlin 開發作業的基本知識

本程式碼研究室聚焦於 Vision API Product Search。系統不會探索不相關的概念和程式碼區塊，而是直接用來複製及貼上。

2. Vision API Product Search

Vision API Product Search 是 Google Cloud 提供的一項功能，可讓使用者在產品目錄中搜尋外觀相似的產品。零售商可以製作產品，每項產品都包含參考圖片，透過影像來呈現一系列產品。接著您就可以將這些產品加入產品組合 (也就是產品目錄)。Vision API Product Search 目前支援下列產品類別：家居用品、服飾、玩具、包裝商品和一般。

當使用者以自己的圖片查詢產品組合時，Vision API Product Search 會運用機器學習技術來比較使用者查詢圖片中的產品與零售商產品集中的圖片，然後傳回排名和語意相似的結果清單。

3. 下載並執行啟動應用程式

下載程式碼

點選下方連結即可下載這個程式碼研究室的所有程式碼：

下載原始碼

將下載的 ZIP 檔案解壓縮。這會將根目錄 (odml-pathways-main) 與所有您需要的資源一起解壓縮。在這個程式碼研究室中，您只需要 product-search/codelab2/android 子目錄中的來源即可。

odml-pathways 存放區中的 codelab2 子目錄包含兩個目錄：

• starter：以這個程式碼研究室建立的程式碼。
• final：完成的範例應用程式的程式碼。

這裡的啟動應用程式就是您在偵測圖片中的物件以建立視覺化產品搜尋功能：Android 程式碼研究室所建構的應用程式。它使用機器學習套件物件偵測和追蹤功能偵測圖片中的物件，並在螢幕上顯示。

將應用程式匯入 Android Studio

首先，請將 starter 應用程式匯入 Android Studio。

前往 Android Studio，選取 [Import Project (Gradle、Eclipse ADT 等)]，然後從先前下載的原始碼中選擇 starter 資料夾。

執行啟動應用程式

現在您已經將專案匯入 Android Studio，就可以開始執行應用程式了。透過 USB 將 Android 裝置連接到主機或啟動 Android Studio 模擬器，然後按一下 Android Studio 工具列中的 [執行] ()。

(如果這個按鈕已停用，請務必只匯入 starter/app/build.gradle，而不是匯入整個存放區)。

現在應用程式應已在 Android 裝置上推出。這項功能現在已具備物件偵測功能：偵測圖片中的時尚項目，並顯示這些物件的位置。請嘗試使用預設相片進行確認。

用來偵測圖片中物件的啟動器應用程式的螢幕截圖

您也可以使用手機相機拍照，或從圖片庫中選擇圖片，瞭解物件偵測與圖片搭配運作的方式。

接著，請擴充應用程式，將偵測到的物件傳送至 Vision API Product Search 後端，並在螢幕上顯示搜尋結果。

4. 處理物件選擇

允許使用者輕觸偵測到的物件進行選取

現在，請新增程式碼，讓使用者從圖片中選取物件，並開始搜尋產品。啟動應用程式已可偵測圖片中的物件。該圖片可能同時存在多個物件，或偵測到的物件僅佔圖片的一小部分。因此，您必須請使用者輕觸偵測出的物件，指出要用於產品搜尋的物件。

從圖片中偵測到時尚商品的螢幕截圖

為簡化程式碼研究室的實作程序，將重心放在機器學習領域。在入門應用程式中，我們導入了一些樣板 Android 程式碼，協助您偵測使用者輕觸了哪個物件。以主要活動 (ObjectDetectorActivity) 顯示圖片的檢視畫面，實際上是自訂檢視模式 (ImageClickableView)，可將 Android 作業系統的預設擴充範圍擴大到 ImageView。實作一些實用的公用程式方法，包括：

• fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) 這個回呼會接收裁剪後的圖片，其中只包含使用者輕觸的物件。您必須將此裁剪的圖片傳送至產品搜尋後端。

加入程式碼以處理使用者輕觸偵測到的物件。

前往 ObjectDetectorActivity 類別的 initViews 方法，並在方法結尾加入以下幾行：(Android Studio 會告訴您找不到 startProductImageSearch 方法。

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

使用者輕觸畫面上任何偵測到的物件時，就會呼叫 onObjectClickListener。它會收到只包含所選物件的裁剪圖片。例如，如果使用者輕觸右側的衣服後，就會觸發 objectImage 聽眾，方法如下：

傳送至 onObjectClickListener 的裁剪圖片範例

將裁剪的圖片傳送至產品搜尋活動

現在，您需要實作邏輯程序，在獨立活動 (ProductSearchActivity) 中傳送查詢圖片至 Vision API Product Search 後端。

系統會預先導入所有 UI 元件，讓您專心編寫程式碼，與產品搜尋後端進行通訊。

ProductSearchActivity 中 UI 元件的螢幕截圖

新增程式碼，將使用者選取的物件傳送至 ProductSearchActivity。

返回 Android Studio 並將這個 startProductImageSearch 方法新增至 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)
    }
}

程式碼片段有 3 種用途：

• 擷取裁剪後的圖片，並將圖片序列化為 PNG 檔案。
• 啟動 ProductSearchActivity 來執行產品搜尋序列。
• 在開始活動意圖中加入裁剪圖片 URI，以便 ProductSearchActivity 稍後擷取該 URI 做為查詢圖片。

以下說明幾個注意事項：

• 偵測物件及查詢後端的邏輯分為兩大活動，僅讓程式碼研究室更容易理解。要在應用程式內導入廣告，完全由您決定。
• 查詢圖片必須寫入至檔案，以及在活動之間傳遞圖片 URI，因為查詢圖片可以大於 Android 意圖的 1MB 大小限制。
• 您可以將查詢圖片以 PNG 格式儲存，因為這是無格式格式。

擷取產品搜尋活動中的查詢圖片

ProductSearchActivity 中用來擷取查詢圖片並在螢幕上顯示的圖片已導入入門應用程式。

前往 onCreate 方法，並確認該程式碼已存在：

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

執行應用程式

現在，請按一下 Android Studio 工具列中的 [執行] ()。

應用程式載入後，請輕觸任何預設圖片，然後選取偵測到的一個物件。

確認ProductSearchActivity和你輕觸的圖片相符。[搜尋] 按鈕尚未執行任何動作，但我們會先實作此按鈕。

輕觸其中一個偵測到的物件後，您應該會看到類似的畫面。

5. 探索產品搜尋後端

建構產品圖片搜尋後端

此程式碼研究室需要透過 Vision API Product Search 建構的產品搜尋後端。以下提供兩種做法：

選項 1：使用已為您部署的示範後端

您可以利用這個程式碼研究室繼續進行 Google 為您部署的產品搜尋後端。您可以按照 Vision API Product Search 快速入門導覽課程，複製示範後端。

選項 2：按照 Vision API Product Search 快速入門導覽課程，自行建立後端

想要深入瞭解如何建構產品搜尋後端，建議您為產品目錄建立這個選項。您必須具備以下項目：

• 已啟用 Google Cloud 帳戶的帳單功能。(可以是免費試用帳戶)。
• 對 Google Cloud 概念的一些知識，包括專案、服務帳戶等。

您稍後可以在學習課程中完成這項作業。

瞭解重要概念

與產品搜尋後端互動時，您會遇到以下概念：

• 產品組合：產品組合是簡易的容器，用來提供一組產品。產品目錄可呈現為產品組合及其產品。
• 產品：建立產品組合後，您可以建立產品並將產品新增至產品集。
• 產品參考圖片：這類產品含有不同產品檢視畫面。參考資料圖片可用來搜尋外觀相似的產品。
• 搜尋產品：建立好產品組合並建立索引後，您就可以使用 Cloud Vision API 查詢產品組合。

瞭解預設產品目錄

本程式碼研究室中使用的產品搜尋示範後端是使用 Vision API Product Search 及約 100 片鞋子和衣服產品目錄製作而成。以下是目錄中的一些圖片：

預設產品目錄的範例

您可以按照 Vision API Product Search 快速入門導覽課程，複製示範後端。

呼叫產品搜尋示範後端

您可以直接設定行動應用程式呼叫 Vision API Product Search，只要設定 Google Cloud API 金鑰，並限制只有 API 金鑰可存取您的應用程式，

為簡化這個程式碼研究室，我們已設定 Proxy 端點，方便您存取示範後端，而不必擔心 API 金鑰和驗證問題。此程式會從行動應用程式收到 HTTP 要求，附加 API 金鑰，並將要求轉送至 Vision API Product Search 後端。接著，Proxy 會從後端接收回應，並將回應傳回行動應用程式。

• Proxy 端點：https://us-central1-odml-codelabs.cloudfunctions.net/productSearch
• Proxy 行為：附加適當的驗證標頭，並將 API 要求轉送至 Vision API Product Search 後端。舉例來說，系統會將 https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotate 的 API 呼叫轉給 https://vision.googleapis.com/v1/images:annotate。

在本程式碼研究室中，您會使用 Vision API Product Search 的兩個 API：

• projects.locations.images.caption：將查詢圖片傳送到伺服器，並接收與查詢圖片相似的預設產品目錄產品清單。
• projects.locations.products.referenceImages.get：取得在上述 API 呼叫中傳回的產品圖片 URI，以便向使用者顯示。

6. 實作 API 用戶端

瞭解產品搜尋工作流程

請依照這個工作流程，使用後端進行產品搜尋：

• 將查詢圖片編碼為 Base64 字串
• 使用查詢圖片呼叫 projects.locations.images.caption 端點
• 接收先前 API 呼叫中的產品圖片 ID，並將 ID 傳送至 projects.locations.products.referenceImages.get 端點，以便取得搜尋結果中的產品圖片 URI。

實作 API 用戶端類別

現在，您將透過實作程式碼，在名為 ProductSearchAPIClient 的專屬類別中呼叫產品搜尋後端。部分啟動器程式碼已導入入門應用程式：

• class ProductSearchAPIClient：這個類別目前為空白，但部分方法可在稍後在這個程式碼研究室中實作。
• fun convertBitmapToBase64(bitmap: Bitmap)：將點陣圖執行個體轉換為其 Base64 表示法，以便傳送至產品搜尋後端
• fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>：呼叫 projects.locations.images.caption API 並剖析回應。
• fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>：呼叫 projects.locations.products.referenceImages.get API 並剖析回應。
• SearchResult.kt：這個檔案包含數個資料類別，以表示 Vision API Product Search 後端傳回的類型。

指定 API 設定

前往 ProductSearchAPIClient 類別，您會看到已經定義的產品搜尋後端設定：

// 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 是 Cloud Vision API 的 API 端點。繼續進行示範後端時，請將這個 Proxy 端點設為 Proxy 端點。不過，如果您部署自己的後端，就必須將其變更為 Cloud Vision API 端點。https://vision.googleapis.com/v1。
• VISION_API_KEY 是 Cloud 專案的 API 金鑰。由於 Proxy 已處理驗證作業，因此請將這個欄位留空。
• VISION_API_PROJECT_ID 是 Cloud 專案 ID。odml-codelabs 是部署示範後端的 Cloud 專案。
• VISION_API_LOCATION_ID 是部署產品搜尋後端的 Cloud 位置。us-east1 是部署示範後端的地方。
• VISION_API_PRODUCT_SET_ID 是您要搜尋外觀相似的產品的產品目錄 ID (即 Vision API 字詞中的「產品組合」)。您可以在一個 Cloud 專案中擁有多個目錄。product_set0 是示範後端的預設產品目錄。

7. 呼叫 Product Search API

探索 API 要求和回應格式

將圖片的 Google Cloud Storage URI、網址或 base64 編碼字串傳送至 Vision API Product Search，即可找到與指定圖片類似的產品。在本代碼實驗室中，您將使用 base64 進行的字符串選擇，因為我們的查找圖像只存在於用戶的設備中。

您必須將 POST 要求傳送至這個要求 JSON 主體的 projects.locations.images.caption 端點：

{
  "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"
          ],
        }
      }
    }
  ]
}

必須指定以下參數：

• base64 編碼的映像檔：查詢圖片的 Base64 表示法 (ASCII 字串)，也就是二進位資料。
• project-id：您的 GCP 專案 ID。
• location-id：有效的地區 ID。
• product-set-id：您要執行操作的產品組合 ID。

由於您的產品目錄只包含鞋子和洋裝圖片，因此請將 productCategories 指定為 apparel-v2。v2 表示我們使用服飾產品搜尋機器學習模型 2 版。

如果要求成功，伺服器會傳回 200 OK HTTP 狀態碼，並以 JSON 格式回應。回應 JSON 包含下列兩種結果類型：

• productSearchResults - 包含整張圖片的相符產品清單。
• productGroupedResults - 包含定界框座標和在圖片中識別的每個產品相符的項目。

由於產品已經從原始圖片中裁剪，因此您會剖析 productSearchResults 清單中的結果。

以下是產品搜尋結果物件中的幾個重要欄位：

• product.name：產品的專屬識別碼，格式為 projects/{project-id}/locations/{location-id}/products/{product_id}
• product.score：這個值代表搜尋結果與查詢圖片的相似程度。設定值越高，表示相似度越高。
• product.image：產品參考圖片的專屬 ID，格式為 projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id}。您必須傳送其他 API 要求至 projects.locations.products.referenceImages.get，才能取得此參考圖片的網址，使其顯示在螢幕上。
• product.labels：產品的預先定義標記清單。如果您想篩選搜尋結果，只顯示一種類別的服飾 (如洋裝)，就可以採用這個方法。

將查詢圖片轉換為 base64

您必須將查詢圖片轉換為其 Base64 字串表示法，並將該字串附加至要求主體的 JSON 物件。

前往 ProductSearchAPIClient 類別，找到空白的 convertBitmapToBase64 方法並替換為此實作：

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)
}

實作 API 呼叫

接下來，設計產品搜尋 API 要求並傳送至後端。您將使用 Volley 來提出 API 要求，並使用 Task API 傳回結果。

返回 ProductSearchAPIClient 類別，找到空白的 annotateImage 方法，並以此實作取代：

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
}

在 UI 中顯示搜尋結果

ProductSearchAPIClient 中的 API 程式碼已準備就緒。返回活動 ProductSearchActivity 以導入 UI 程式碼。

這個活動已有部分包含 searchByImage(queryImage: Bitmap) 方法的樣板程式碼。新增程式碼來呼叫後端，並在使用者介面上顯示目前結果為空白的方法。

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

showSearchResult 方法包含一些可剖析 API 回應的樣板程式碼，並在螢幕上顯示這些程式碼。

執行

現在，請按一下 Android Studio 工具列中的 [執行] ()。應用程式載入完成後，請輕觸任何預設圖片、選取偵測到的物件，然後輕觸 [搜尋] 按鈕，以查看從後端傳回的搜尋結果。您將看見類似下方的內容：

產品搜尋結果網頁的螢幕截圖

後端已直接從預設的產品目錄傳回外觀相似的產品清單。不過，您可以看到產品圖片仍為空白。這是因為 projects.locations.images.caption 端點只會傳回產品圖片 ID (例如 projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77)。您必須再次對 projects.locations.products.referenceImages.get 端點進行 API 呼叫，並取得這個參考圖片的網址，以便在螢幕上顯示。

8. 取得產品參考資料圖片

探索 API 要求和回應格式

您會將包含空白要求主體的 GET HTTP 要求傳送至 projects.locations.products.referenceImages.get 端點，取得產品搜尋端點傳回的產品圖片 URI。

HTTP 要求看起來像這樣：

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

如果要求成功，伺服器會傳回 200 OK HTTP 狀態碼和 JSON 格式的回應，如下所示：

{
  "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：參考圖片 ID
• uri：Google Cloud Storage (GCS) 中圖片的 URI。

試用版產品搜尋後端的參考圖片已設為公開讀取權限。因此，您可以輕鬆將 GCS URI 轉換為 HTTP 網址，並顯示在應用程式 UI 中。您只需將 gs:// 前置字串改成 https://storage.googleapis.com/。

實作 API 呼叫

接下來，設計產品搜尋 API 要求並傳送至後端。您將使用 Volley 和 Task API，類似 Product Search API 呼叫。

返回 ProductSearchAPIClient 類別，找到空白的 fetchReferenceImage 方法，並以此實作取代：

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
}

這個方法會使用產品搜尋端點傳回的 searchResult: ProductSearchResult 物件，然後按照下列步驟進行：

1. 呼叫參考圖片端點，以取得參考圖片的 GCS URI。
2. 將 GCS URI 轉換為 HTTP 網址。
3. 使用這個 HTTP 網址更新 searchResult 物件的 httpUri 屬性。

連接兩個 API 要求

返回 annotateImage 並修改取得所有參照圖片&t33; HTTP 網址，再將 ProductSearchResult 清單傳回呼叫者。

尋找以下這行程式碼：

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

並將其替換為這個導入方式：

// 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) }

系統已在 ProductSearchAdapter 類別中實作顯示在螢幕上顯示參考程式碼的樣板程式碼，因此您可以繼續執行重新執行應用程式。

執行

現在，請按一下 Android Studio 工具列中的 [執行] ()。應用程式載入完成後，請輕觸任何預設圖片、選取偵測到的物件，然後輕觸 [搜尋] 按鈕查看搜尋結果，此時再按一下產品圖片。

產品搜尋結果是否合理？

9. 恭喜！

你已瞭解如何呼叫 Vision API Product Search 後端，以便在 Android 應用程式中加入產品圖片搜尋功能。

繼續操作時，您可能會想使用產品目錄來建構自己的後端。查看產品圖片搜尋學習路徑中的下一個程式碼研究室，瞭解如何建置自己的後端，並設定用來呼叫行動應用程式的 API 金鑰。

適用範圍

• 如何從 Android 應用程式呼叫 Vision API Product Search 後端

後續步驟

• 請參閱使用 Vision API Product Search 建構產品圖片搜尋後端程式碼研究室，瞭解如何建構自己的後端系統。
• 請參閱裝置端機器學習網站中的其他學習途徑
• 在您的 Android 應用程式中建構產品搜尋功能

瞭解詳情

• https://cloud.google.com/vision/product-search/docs