ML Kit を使用して画像内のオブジェクトを検出し、視覚的な商品検索を構築する: Android

1. 始める前に

Google レンズのデモをご覧になったことがありますか？スマートフォンのカメラをオブジェクトに向けると、そのオブジェクトをオンラインで購入できる場所を見つけることができます。この Codelab では、アプリに同じ機能を追加する方法を学びます。これは、モバイルアプリに商品画像検索機能を組み込む方法を学ぶ学習プログラムの一部です。

この Codelab では、商品画像検索機能を構築する最初のステップとして、画像内のオブジェクトを検出し、ユーザーが検索するオブジェクトを選択できるようにする方法を学びます。この機能の構築には、ML Kit オブジェクト検出とトラッキング を使用します。

学習パスでは、Vision API Product Search を使用して商品検索バックエンドを構築する方法など、残りのステップについて、学習パスで学ぶことができます。

作成するアプリの概要

この Codelab では、ML Kit を使用して Android アプリを作成します。アプリは ML Kit オブジェクトの検出とトラッキング API を使用して、指定された画像内のオブジェクトを検出します。ユーザーは、商品データベースで検索するオブジェクトを選択します。
最終的には、右の画像のような画面が表示されます。

学習内容

ML Kit SDK を Android アプリケーションに統合する方法
ML Kit オブジェクトの検出とトラッキング API

必要なもの

最新バージョンの Android Studio（v4.1.2 以降）
Android Studio エミュレータまたは Android デバイス
サンプルコード
Kotlin での Android 開発の基礎知識

この Codelab では、ML Kit に焦点を当てます。その他のコンセプトとコードブロックについては説明しませんが、そのままコピーして貼り付けられるようにしています。

2. セットアップする

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

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

ダウンロードした zip ファイルを解凍すると、必要なリソースがすべて含まれたルートフォルダ（odml-pathways-main）が展開されます。この Codelab では、product-search/codelab1/android サブディレクトリのソースのみが必要です。

mlkit-android リポジトリの object-detection サブディレクトリには、次の 2 つのディレクトリが含まれています。

starter : この Codelab で使用する開始コード。
final : 完成したサンプルアプリのコード。

3. ML Kit オブジェクトの検出とトラッキング API をプロジェクトに追加する

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

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

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

ML Kit オブジェクトの検出とトラッキングの依存関係を追加する

ML Kit の依存関係を使用すると、ML Kit ODT SDK をアプリに統合できます。

プロジェクトの app/build.gradle ファイルに移動し、依存関係がすでに存在することを確認します。

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

プロジェクトを Gradle ファイルと同期する

すべての依存関係がアプリで使用できるように、この時点でプロジェクトを Gradle ファイルと同期する必要があります。

Android Studio のツールバーから [Sync Project with Gradle Files]（）を選択します。

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

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

これで、プロジェクトを Android Studio にインポートし、ML Kit オブジェクトの検出とトラッキングの依存関係を追加したので、アプリを初めて実行する準備ができました。

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

アプリを実行して操作する

Android デバイスでアプリが起動するはずです。このアプリには、写真を撮影したり、プリセット画像を選択したりして、この Codelab で作成するオブジェクト検出とトラッキングのパイプラインにフィードできるようにするボイラープレートコードが含まれています。コードを記述する前に、アプリを少し操作してみましょう。

下部に [Button]（）があります。

デバイス/エミュレータに統合されたカメラアプリを起動する
カメラアプリ 内で写真を撮影する
撮影した画像をスターターアプリ で受信する
画像を表示する

[Take photo] ボタンを試してください。プロンプトに沿って写真を撮影し、写真を受け入れて 、スターターアプリ 内に表示されることを確認します。

また、3 つのプリセット画像から選択することもできます。Android エミュレータで実行している場合は、これらの画像を使用してオブジェクト検出コードをテストできます。

3 つのプリセット画像から画像を選択します。
画像が大きなビューに表示されることを確認します。

5. オンデバイスのオブジェクト検出を追加する

このステップでは、画像内のオブジェクトを検出する機能をスターターアプリに追加します。前のステップで説明したように、スターターアプリには、デバイスのカメラアプリで写真を撮影するためのボイラープレートコードが含まれています。Android エミュレータで Codelab を実行している場合は、アプリに 3 つのプリセット画像があり、オブジェクト検出を試すことができます。

プリセット画像から画像を選択するか、カメラアプリで写真を撮影すると、ボイラープレートコードによってその画像が Bitmap インスタンスにデコードされ、画面に表示され、画像を使用して runObjectDetection メソッドが呼び出されます。

このステップでは、runObjectDetection メソッドにオブジェクト検出を行うコードを追加します。

画像でオンデバイスのオブジェクト検出を設定して実行する

ML Kit ODT を設定するには、3 つの API を使用して 3 つの簡単なステップを実行します。

画像を準備する: InputImage
検出ツールオブジェクトを作成する: ObjectDetection.getClient(options)
上記の 2 つのオブジェクトを接続する: process(image)

これらの処理は、ファイル MainActivity.kt の関数 **runObjectDetection(bitmap: Bitmap)**内で行います。

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

現時点では、関数は空です。ML Kit ODT を統合するには、次のステップに進んでください。その過程で、Android Studio から必要なインポートを追加するよう求められます。

com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

ステップ 1: InputImage を作成する

ML Kit には、Bitmap から InputImage を作成するシンプルな API が用意されています。その後、InputImage を ML Kit API にフィードできます。

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

上記のコードを runObjectDetection(bitmap:Bitmap) の先頭に追加します。

ステップ 2: 検出機能インスタンスを作成する

ML Kit は ビルダーデザインパターンに従います。構成をビルダーに渡し、ビルダーから検出機能を取得します。構成には次の 3 つのオプションがあります（Codelab では太字のオプションを使用します）。

検出ツールモード（単一画像 またはストリーム）
検出モード（単一または 複数 オブジェクト検出）
分類モード（オン またはオフ）

この Codelab では、単一画像 - 複数オブジェクトの検出と分類を行います。手順は次のとおりです。

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

ステップ 3: 画像を検出機能にフィードする

オブジェクトの検出と分類は非同期処理です。

画像を検出機能に送信します（process() を使用）。
検出機能が画像を処理します。
検出ツールはコールバックを介して結果を返します。

次のコードは、まさにそれを行います（コピーして追加 既存のコードに fun runObjectDetection(bitmap:Bitmap)):）。

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

完了すると、検出機能から次の情報が通知されます。

検出されたオブジェクトの総数
検出された各オブジェクトは、次の情報で記述されます。

trackingId __: フレームをまたいでトラッキングするために使用する整数（この Codelab では使用しません）
boundingBox __: オブジェクトの境界ボックス
labels: : 検出されたオブジェクトのラベルのリスト（分類が有効な場合のみ）
index（このラベルのインデックスを取得します）
text（このラベルのテキストを取得します（「Fashion Goods」、「Food」、「Home Goods」、「Place」、「Plant」など））
confidence（0.0 ～ 1.0 の浮動小数点数。1.0 は 100% を意味します）

コードが検出された結果を Logcat に debugPrint() で出力していることに気づいたかもしれません。 MainActivity クラスに追加します。

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

これで、検出用の画像を受け入れる準備ができました。

Android Studio のツールバーで [Run]（）をクリックして、Codelab を実行します。プリセット画像を選択するか、写真を撮影して、IDE 内の logcat ウィンドウ( )を確認します。次のように表示されます。

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

これは、検出ツールが次の 3 つのオブジェクトを検出したことを意味します。

カテゴリは Fashion good と Home good です。
2 番目のカテゴリは不明なクラスであるため、返されません。
trackingId がありません（これは単一画像検出モードであるため）。
boundingBox 四角形内の位置（例: (481, 2021) – (2426, 3376)）
検出ツールは、1 つ目が Fashion good であるとかなり確信しています（90%）（ドレスです）。

技術的には 、ML Kit オブジェクト検出を機能させるために必要なのはこれだけです。これで完了です。お疲れさまでした。

UI 側では、まだ開始したばかりの段階ですが、境界ボックスを描画するなど、検出された結果を UI で利用して、より良いエクスペリエンスを実現できます。次のステップでは、検出された結果を可視化します。

6. 検出結果の後処理

前のステップでは、検出された結果を logcat に出力しました。これは簡単で高速です。

このセクションでは、画像の結果を使用します。

画像に境界ボックスを描画する
境界ボックス内にカテゴリ名と信頼度を描画する

可視化ユーティリティについて

Codelab には、検出結果を可視化するためのボイラープレートコードが含まれています。これらのユーティリティを活用して、可視化コードを簡素化します。

class ImageClickableView これは、検出結果の可視化と操作に便利なユーティリティを提供する画像ビュークラスです。
fun drawDetectionResults(results: List<DetectedObject>) このメソッドは、検出された各オブジェクトの中心に白い円を描画します。
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) これは、ユーザーがタップしたオブジェクトのみを含む切り抜き画像を受け取るコールバックです。この切り抜き画像は、後の Codelab で画像検索バックエンドに送信され、視覚的に類似した結果を取得します。この Codelab では、このメソッドはまだ使用しません。

ML Kit の検出結果を表示する

可視化ユーティリティを使用して、入力画像の上に ML Kit オブジェクト検出の結果を表示します。

debugPrint() を呼び出す場所に移動し、その下に次のコードスニペットを追加します。

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

実行する

Android Studio のツールバーで [Run]（）をクリックします。

アプリが読み込まれたら、カメラアイコンの付いたボタンを押して、カメラをオブジェクトに向け、写真を撮影し、写真を受け入れます（カメラアプリで）。または、プリセット画像を簡単にタップすることもできます。検出結果が表示されます。ボタンをもう一度押すか、別の画像を選択して数回繰り返して、最新の ML Kit ODT を体験してください。

7. お疲れさまでした。

ML Kit を使用して、アプリにオブジェクト検出機能を追加しました。

3 つの API を使用した 3 つのステップ
入力画像を作成する
検出ツールを作成する
画像を検出機能に送信する

これで、起動して実行する準備ができました。

学習した内容

ML Kit オブジェクトの検出とトラッキングを Android アプリに追加する方法
ML Kit でオンデバイスのオブジェクト検出とトラッキングを使用して画像内のオブジェクトを検出する方法

次のステップ

検出されたオブジェクトを Product Search バックエンドに送信して検索結果を表示する方法について、こちらの Codelab を試してください。
より多くの画像とライブ動画を使用して ML Kit ODT をさらに詳しく調べ、検出と分類の精度とパフォーマンスを体験してください。
カスタムモデルをトレーニングする方法については、オブジェクト検出についてさらに学習する学習プログラムをご覧ください。
オブジェクト検出のライブカメラと静止画像に関するマテリアルデザインの推奨事項をご覧ください。
ML Kit ODT を独自の Android アプリに適用する

詳細

https://developers.google.com/ml-kit/vision/object-detection