使用 Vision API Product Search 建構產品圖片搜尋後端

1. 事前準備

25939f5a13eeb3c3.png

先前在產品圖片搜尋學習路徑中,您已學會如何呼叫使用 Vision API Product Search 建構的產品搜尋後端,以從產品目錄中顯示相似的產品。

在本程式碼研究室中,您將瞭解如何建構類似的後端,但改用您的產品目錄。

您將會瞭解的內容

  • 如何使用 Vision API Product Search 建構產品搜尋後端
  • 如何設定 API 金鑰從行動應用程式存取 Vision API

軟硬體需求

  • Google Cloud 帳戶並啟用計費功能 (可以是免費試用帳戶)

2. Vision API Product Search

Vision API Product Search 是 Google Cloud 的一項功能,可讓零售商建立產品,而每張圖片中的參考圖片都能以視覺化的方式呈現一系列觀點中的產品。零售商即可將這些產品加入產品集。Vision API Product Search 目前支援下列產品類別:家居用品、服飾、玩具、包裝商品和一般。

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

3. 使用 Google Cloud 建構後端

先前在產品圖片搜尋學習路徑中,您使用了利用 Vision API Product Search 建構的示範產品搜尋後端。請依照本教學課程,在 Google Cloud 帳戶中建構相同的後端:

完成教學課程後,即可按照下列步驟設定 API 金鑰,從行動應用程式呼叫後端。

4. 設定 API 金鑰

在 Vision API Product Search 快速入門導覽課程中,您建構了一個產品搜尋後端,可擷取查詢圖片及傳回外觀相似的產品。如要從行動應用程式呼叫 Product Search API,您必須設定 API 金鑰,然後限制應用程式存取該 API 金鑰,以避免發生未經授權的使用情況。

建立 API 金鑰

  1. 前往 Cloud Console > APIs & Services > Credentials。您也可以點選這個網址,然後選取您在「產品搜尋」快速入門導覽課程中使用的專案。
  2. 選取 [Create Credentials] (建立憑證) > [API key] (API 金鑰)。如果 API 金鑰已成功建立,系統就會顯示這個對話方塊:

d0bc04782a41a698.png

請記下這個 API 金鑰。您之後可以在這個程式碼研究室中使用這個程式碼。

限制 API 金鑰的存取權

看到以上提示時,請選取 [限制金鑰]

按照畫面上的操作說明套用這些限制:

  • 應用程式限制 > Android 應用程式
  • API 限制 > 限制金鑰 > Cloud Vision API

5. 下載並執行行動應用程式

您可以下載先前使用示範產品搜尋後端建立的 Android 應用程式,並將其變更為剛建立的新後端。

下載程式碼

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

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

這個應用程式使用 ML Kit Object Detection and Tracking API 以及運用 Vision API Product Search 建立的試用版產品搜尋後端,讓使用者透過示範產品目錄拍照和搜尋相似產品。

將應用程式匯入 Android Studio

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

前往 Android Studio,選取 [Import Project (Gradle、Eclipse ADT 等)],然後從您稍早下載的原始碼中選擇 product-search/codelab2/android/final 資料夾。

7c0f27882a2698ac.png

執行啟動應用程式

現在您已經將專案匯入 Android Studio,就可以開始執行應用程式了。

透過 USB 將 Android 裝置連接到主機或啟動 Android Studio 模擬器,然後按一下 Android Studio 工具列中的 [執行] (執行.png)。

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

現在應用程式應已在 Android 裝置上推出。這項功能目前運作正常,但會使用 Google 為您部署的試用版產品搜尋後端。

接著,您必須更新應用程式,以使用先前在這個程式碼研究室中建立的後端。

6. 更新 API 端點

變更 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"

然後將這些設定替換為您的設定:

// Option 2: Go through the Vision API Product Search quickstart and deploy to your project.
// Fill in the const below with your project info.
const val VISION_API_URL = "https://vision.googleapis.com/v1"
const val VISION_API_KEY = "YOUR_API_KEY"
const val VISION_API_PROJECT_ID = "YOUR_PROJECT_ID"
const val VISION_API_LOCATION_ID = "YOUR_LOCATION_ID"
const val VISION_API_PRODUCT_SET_ID = "YOUR_PRODUCT_SET_ID"
  • VISION_API_URL 是 Cloud Vision API 的 API 端點。
  • VISION_API_KEY 是您先前在這個程式碼研究室中建立的 API 金鑰。
  • VISION_API_PROJECT_IDVISION_API_LOCATION_IDVISION_API_PRODUCT_SET_ID 是您在本程式碼研究室先前在 Vision API Product Search 快速入門導覽課程中使用的值。

執行

現在,請按一下 Android Studio 工具列中的 [執行] (執行.png)。應用程式載入完成後,請輕觸任何預設圖片、選取偵測到的物件,然後輕觸 [搜尋] 按鈕以查看搜尋結果。應用程式正在使用你剛建立的產品搜尋後端!

25939f5a13eeb3c3.png

7. 恭喜!

您已瞭解如何使用 Vision API Product Search 建構產品搜尋後端。

如此一來,您即可製作並放送廣告!

適用範圍

  • 如何使用您的產品目錄和 Vision API Product Search 建立產品搜尋後端
  • 如何設定 API 金鑰以從行動應用程式呼叫產品搜尋後端
  • 如何從行動應用程式呼叫後端

後續步驟

  • 觀看這部影片,瞭解如何使用 Vision API Product Search 建立智慧型衣櫃
  • 查看裝置端的「機器學習搜尋」學習課程,瞭解建立產品搜尋的所有必要步驟
  • 運用您學到的經驗,在您的應用程式中應用所學

瞭解詳情