Vision API Product Search を使用して商品画像検索バックエンドを構築する

1. 始める前に

25939f5a13eeb3c3.png

商品画像検索の学習パスウェイの前半では、Vision API Product Search で構築された商品検索バックエンドを、商品カタログから視覚的に類似した商品向けに呼び出す方法を学習しました。

この Codelab では、プロダクト カタログを使用して同様のバックエンドを作成する方法を学びます。

学習内容

  • Vision API Product Search を使用して商品検索バックエンドを構築する方法
  • モバイルアプリから Vision API にアクセスするための 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 > [API とサービス] > [認証情報] に移動します。この URL をクリックして、Product Search のクイックスタートで使用したプロジェクトを選択することもできます。
  2. [認証情報を作成] > [API キー] を選択します。API キーが正常に作成されると、このダイアログが表示されます。

d0bc04782a41a698.png

この API キーはメモしておいてください。この Codelab では後ほど使用します。

API キーへのアクセスを制限する

上記のプロンプトが表示されたら、[キーを制限] を選択します。

画面の手順に沿って次の制限を適用します。

  • アプリケーションの制限 > Android アプリ
  • API の制限 > キーの制限 > Cloud Vision API

5. モバイルアプリをダウンロードして実行する

前の手順で作成した Android アプリのデモ バックエンド サービスをダウンロードして、先ほど作成した新しいバックエンドを使用するように変更します。

コードをダウンロードする

次のリンクをクリックして、この Codelab のコードをすべてダウンロードします。

ダウンロードした zip ファイルを解凍すると、ルートフォルダ(odml-pathway-codelabs)に、必要なリソースがすべて展開されます。この Codelab では、product-search/codelab2/android/final サブディレクトリ内のソースのみが必要です。

このアプリでは、ML Kit Object Detection and Tracking API と、Vision API Product Search で作成されたデモ商品検索バックエンドを使用して、ユーザーがデモ商品カタログで視覚的に類似する商品の写真と検索を行う

Android Studio にアプリをインポートする

まず、スターター アプリを Android Studio にインポートします。

Android Studio に移動して [Import Project (Gradle, Eclipse ADT, etc.)] を選択し、先ほどダウンロードしたソースコードから product-search/codelab2/android/final フォルダを選択します。

7c0f27882a2698ac.png

スターター アプリを実行する

これで Android Studio にプロジェクトがインポートされたので、アプリを初めて実行する準備が整いました。

Android デバイスを USB 経由でホストに接続するか、Android Studio エミュレータを起動し、Android Studio ツールバーの [Run](execute.png)をクリックします。

(このボタンが無効になっている場合は、リポジトリ全体ではなく final/app/build.gradle のみをインポートしてください)。

これで、Android デバイスでアプリが起動されたはずです。すでに機能しますが、Google がデプロイした demo 商品検索バックエンドを使用します。

次に、この Codelab の前半で作成したバックエンドを使用するようにアプリを更新します。

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 は、この Codelab の前半で作成した API キーです。
  • VISION_API_PROJECT_IDVISION_API_LOCATION_IDVISION_API_PRODUCT_SET_ID は、この Codelab の前半で Vision API Product Search クイックスタートで使用した値です。

実行

Android Studio のツールバーで [Run](execute.png)をクリックします。アプリが読み込まれると、プリセットの画像をタップし、検出されたオブジェクトを選択して [検索] ボタンをタップすると、検索結果が表示されます。これで、作成した商品検索バックエンドがアプリで使用されます。

25939f5a13eeb3c3.png

7. 完了

Vision API Product Search を使用して商品検索バックエンドを作成する方法を学習しました。

セットアップは完了です。

学習した内容

  • 商品カタログと Vision API Product Search を使用して商品検索バックエンドを作成する方法
  • モバイルアプリから商品検索バックエンドを呼び出すように API キーを設定する方法
  • モバイルアプリからバックエンドを呼び出す方法

次の手順

  • Vision API Product Search を使用してスマート クローゼットを作成する方法についての動画を見る
  • Product Search オンデバイス ML 学習パスウェイを確認して、Product Search の作成に必要なすべての手順を学びます。
  • 学習した内容をアプリで応用

詳細