本頁面由 Cloud Translation API 翻譯而成。

使用 ML Kit：Android 偵測圖片中的物件，以便建立視覺化產品搜尋服務

1. 事前準備

你是否看過 Google 智慧鏡頭的示範影片，瞭解如何將手機相機鏡頭對準物品，然後在線上找到該物品的購買地點？如要瞭解如何在應用程式中新增相同功能，請參閱本程式碼研究室。這是學習課程的一部分，說明如何在行動應用程式中建構產品圖片搜尋功能。

在本程式碼研究室中，您將瞭解建構產品圖片搜尋功能的第一步：如何偵測圖片中的物件，並讓使用者選擇要搜尋的物件。您將使用 ML Kit 物件偵測和追蹤功能來建構這項功能。

如要瞭解其他步驟，包括如何使用 Vision API Product Search 建構產品搜尋後端，請參閱學習路徑。

建構項目

在本程式碼研究室中，您將使用 ML Kit 建構 Android 應用程式。您的應用程式會使用 ML Kit 物件偵測和追蹤 API，偵測指定圖片中的物件。接著，使用者會在產品資料庫中選擇要搜尋的物件。
最後，您應該會看到類似右圖的畫面。

課程內容

如何將 ML Kit SDK 整合至 Android 應用程式
ML Kit 物件偵測和追蹤 API

軟硬體需求

最新版 Android Studio (4.1.2 以上版本)
Android Studio 模擬器或實體 Android 裝置
程式碼範例
對 Kotlin 中的 Android 開發作業有基本瞭解

本程式碼研究室著重於 ML Kit。我們不會對其他概念和程式碼多做介紹，但會事先準備好這些程式碼區塊，屆時您只要複製及貼上即可。

2. 做好準備

下載程式碼

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

將下載的 ZIP 檔案解壓縮。這會解壓縮根目錄 (odml-pathways-main)，其中包含您需要的所有資源。在本程式碼研究室中，您只需要 product-search/codelab1/android 子目錄中的來源。

mlkit-android 存放區中的「object-detection」子目錄包含兩個目錄：

starter：您可在此程式碼研究室中建構的範例程式碼。
final：完成的範例應用程式所需的完整程式碼。

3. 將 ML Kit 物件偵測和追蹤 API 新增至專案

將應用程式匯入 Android Studio

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

前往 Android Studio，選取「Import Project」(匯入專案) (Gradle、Eclipse ADT 等)，然後從先前下載的原始碼中選擇「starter」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 物件偵測和追蹤的依附元件，因此可以開始執行應用程式。

透過 USB 將 Android 裝置連線至主機，或啟動 Android Studio 模擬器，然後按一下 Android Studio 工具列中的「Run」圖示 ( )。

執行並探索應用程式

應用程式應會在 Android 裝置上啟動。這個類別包含一些樣板程式碼，可讓您拍攝相片或選取預設圖片，並將其饋送至您將在本程式碼研究室中建構的物件偵測和追蹤管道。在編寫程式碼前，先稍微瞭解一下應用程式：

首先，底部有一個按鈕 ( )，

啟動裝置/模擬器中整合的相機應用程式
使用相機應用程式拍照
在範例應用程式中接收已拍攝的圖片
顯示圖片

請試試「拍照」按鈕。按照提示拍攝相片，然後接受相片，並查看相片是否顯示在啟動應用程式中。

其次，您可以選擇 3 張預設圖片。如果您是在 Android 模擬器上執行，日後可以使用這些圖片來測試物件偵測程式碼。

從 3 張預設圖片中選取圖片。
確認圖片是否顯示在較大的檢視畫面中。

5. 新增裝置端物件偵測功能

在這個步驟中，您將為啟動器應用程式新增功能，以便偵測圖片中的物體。如您在先前的步驟中所見，範例應用程式包含常用程式碼，可透過裝置上的相機應用程式拍照。如果您在 Android 模擬器上執行程式碼研究室，應用程式中還有 3 張預設圖片，可用於嘗試物件偵測功能。

當您從預設圖片中選取圖片，或使用相機應用程式拍照時，固定用途程式碼會將該圖片解碼為 Bitmap 例項，並在畫面上顯示該圖片，然後使用圖片呼叫 runObjectDetection 方法。

在這個步驟中，您將在 runObjectDetection 方法中新增程式碼，以便執行物件偵測！

設定及執行裝置端物件偵測功能，以便在圖片上執行偵測

只要使用 3 個 API 和 3 個簡單步驟，即可設定機器學習套件 ODT

準備圖片：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 提供簡單的 API，可從 Bitmap 建立 InputImage。接著，您就能將 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 個選項 (程式碼研究室中使用的是「加粗」的選項)：

偵測器模式 (單張圖片 或串流)
偵測模式 (單一或多個物件偵測)
分類模式 (開啟或關閉)

本程式碼研究室適用於單一圖片 - 多個物件偵測和分類，讓我們開始吧：

// 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：用於追蹤跨影格動作的整數 (本程式碼研究室中未使用)
boundingBox：物件的邊界框
labels: 偵測到的物件標籤清單 (僅限啟用分類功能時)
index (取得此標籤的索引)
text (取得這個標籤的文字，包括「Fashion Goods」、「Food」、「Home Goods」、「Place」、「Plant」)
confidence (浮點值介於 0.0 到 1.0，1.0 代表 100%)

您可能已經注意到，程式碼會使用 debugPrint() 將偵測到的結果輸出至 Logcat。將其新增至 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」圖示 ( )，即可執行程式碼研究室。請嘗試選取預設圖片或拍照，然後查看 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 個是時尚商品 (90%) (是洋裝)

從技術層面來說，這就是讓 ML Kit 物件偵測功能運作的所有必要步驟，您現在就已經完成了！恭喜！

是的，在 UI 方面，您仍處於初始階段，但可以利用 UI 上的偵測結果 (例如繪製邊界框)，打造更優質的體驗。下一步是將偵測到的結果以視覺化方式呈現！

6. 偵測結果的後續處理

在先前的步驟中，您將偵測到的結果輸出至 logcat：簡單又快速。

在本節中，您將使用圖片中的結果：

在圖片上繪製定界框
在邊界框內繪製類別名稱和信心等級

瞭解視覺化公用程式

程式碼研究室中有一些樣板程式碼，可協助您以視覺化方式呈現偵測結果。利用這些公用程式簡化我們的視覺化程式碼：

class ImageClickableView 這是圖片檢視類別，可提供一些方便的工具，用於顯示檢測結果並與其互動。
fun drawDetectionResults(results: List<DetectedObject>) 這個方法會在每個偵測到的物件中心繪製白色圓圈。
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) 這是回呼，用於接收只包含使用者輕觸的物件的裁剪圖片。您將在後續的程式碼研究室中，將經過裁剪的圖片傳送至圖片搜尋後端，以便取得視覺上相似的結果。在本程式碼研究室中，您還不會使用這個方法。

顯示 ML Kit 偵測結果

使用視覺化公用程式，在輸入圖片上方顯示 ML Kit 物件偵測結果。

前往呼叫 debugPrint() 的位置，並在下方新增以下程式碼片段：

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

開始執行

接著，請在 Android Studio 工具列中按一下「Run」圖示 ( )。

應用程式載入後，請按下相機圖示按鈕，將相機鏡頭對準物體，拍照，然後接受相片 (在相機應用程式中)，或輕鬆輕觸任何預設圖片。您應該會看到偵測結果；按一下按鈕或選取其他圖片，重複幾次，即可體驗最新的 ML Kit ODT！

7. 恭喜！

您已使用 ML Kit 為應用程式新增物件偵測功能：

使用 3 個 API 的 3 個步驟
建立輸入圖片
建立偵測器
將圖片傳送至偵測器

只要完成這些步驟，就能開始使用了！

涵蓋內容

如何在 Android 應用程式中加入 ML Kit 物件偵測與追蹤功能
如何使用 ML Kit 中的裝置端物件偵測和追蹤功能，偵測圖片中的物件

後續步驟

請試試這個程式碼研究室，瞭解如何將偵測到的物件傳送至產品搜尋後端，並顯示搜尋結果
透過 ML Kit ODT 探索更多圖片和直播影片，體驗偵測和分類的準確度和效能
請參閱「進一步瞭解物件偵測」學習路徑，瞭解如何訓練自訂模型
請參閱 Material Design 針對物件偵測提供的最佳化建議，包括即時相機和靜態圖片
在自家 Android 應用程式中套用 ML Kit ODT

瞭解詳情

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