使用 ML Kit：Android 偵測圖片中的物件

1. 事前準備

ML Kit 是行動 SDK，可將 Google 的裝置端機器學習專業知識帶入 Android 和 iOS 應用程式。您可以使用功能強大且操作簡單的 Vision 和 Natural Language API，解決應用程式中的常見問題，或打造全新的使用者體驗。這些功能皆採用 Google 最先進的機器學習模型，並免費提供給您。

ML Kit 的 API 全都會在裝置上執行，因此可用於處理即時攝影機串流等即時用途。這也表示這項功能可在離線時使用。

本程式碼研究室將引導您逐步完成簡單步驟，在現有 Android 應用程式中新增指定圖片的物體偵測和追蹤 (ODT) 功能。請注意，本程式碼研究室會使用一些捷徑，以便您瞭解 ML Kit ODT 的用法。

建構項目

在本程式碼研究室中，您將使用 ML Kit 建構 Android 應用程式。應用程式會使用 ML Kit Object Detection and Tracking API 偵測指定圖片中的物件。最後，您應該會看到類似右圖的畫面。

課程內容

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

軟硬體需求

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

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

2. 做好準備

下載程式碼

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

下載原始碼

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

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

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

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

將應用程式匯入 Android Studio

首先，我們要將範例應用程式匯入 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 物件偵測和追蹤的依附元件，因此可以開始執行應用程式。

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

執行並探索應用程式

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

首先，底部有一個按鈕 ( )，可用來：

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

試著使用「拍照」按鈕，按照提示拍照、接受相片，然後觀察相片是否顯示在啟動器應用程式中。

重複幾次，瞭解運作方式：

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

從 3 張預設圖片中選取圖片。請注意，圖片會顯示在較大的檢視畫面中：

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

在這個步驟中，您將為啟動器應用程式新增功能，以便偵測圖片中的物體。如您在先前的步驟中所見，範例應用程式包含常用程式碼，可透過裝置上的相機應用程式拍照。如果您在 Android 模擬器上執行程式碼研究室，應用程式中還有 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 提供簡單的 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() 將圖片傳送至偵測器。
• 偵測器會盡力處理。
• Detector 會透過回呼將結果傳回給您。

下列程式碼會執行這項操作 (複製並附加至 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() 偵測到的結果執行 printf 類型的處理作業。

將其新增至 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: Food
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 個物件：

• 這些類別分別是「食品」和「家居用品」。
• 系統不會為第 2 個類別傳回任何類別，因為這是未知的類別。
• 沒有 trackingId (因為這是單一圖像偵測模式)。
• boundingBox 長方形內的位置 (例如 (481, 2021) – (2426, 3376))
• 偵測器非常肯定第 1 個是食物 (90% 信心等級，實際上是沙拉)。

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

在 UI 方面，您仍處於一開始的階段，但可以利用 UI 上的偵測結果，例如繪製邊界框，以提供更優質的體驗：讓我們繼續下一個步驟，對偵測結果進行後處理！

6. 偵測結果的後續處理

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

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

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

瞭解視覺化公用程式

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

• data class BoxWithText(val box: Rect, val text: String) 這是用來儲存物體偵測結果的資料類別，可用於視覺化。box 是物件所在位置的定界框，text 則是與物件定界框一併顯示的偵測結果字串。
• fun drawDetectionResult(bitmap: Bitmap, detectionResults: List<BoxWithText>): Bitmap 這個方法會在輸入 bitmap 的 detectionResults 中繪製物件偵測結果，並傳回經修改的副本。

以下是 drawDetectionResult 公用方法的輸出內容範例：

以圖形顯示 ML Kit 偵測結果

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

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

// Parse ML Kit's DetectedObject and create corresponding visualization data
val detectedObjects = it.map { obj ->
    var text = "Unknown"

    // We will show the top confident detection result if it exist
    if (obj.labels.isNotEmpty()) {
        val firstLabel = obj.labels.first()
        text = "${firstLabel.text}, ${firstLabel.confidence.times(100).toInt()}%"
    }
    BoxWithText(obj.boundingBox, text)
}

// Draw the detection result on the input bitmap
val visualizedResult = drawDetectionResult(bitmap, detectedObjects)

// Show the detection result on the app screen
runOnUiThread {
    inputImageView.setImageBitmap(visualizedResult)
}

• 首先，您必須剖析 ML Kit 的 DetectedObject，並建立 BoxWithText 物件清單，以便顯示視覺化結果。
• 接著，您可以使用 drawDetectionResult 公用程式方法，在輸入圖片上方繪製偵測結果，並在畫面上顯示。

開始執行

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

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

7. 恭喜！

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

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

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

在繼續進行時，您可能會想強化模型：如您所見，預設模型只能辨識 5 個類別，甚至連刀、叉和瓶子都無法辨識。請參閱裝置端機器學習 - 物件偵測學習課程中的其他程式碼研究室，瞭解如何訓練自訂模型。

涵蓋內容

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

後續步驟

• 透過 ML Kit ODT 探索更多圖片和直播影片，體驗偵測和分類的準確度和效能
• 請參閱「裝置端機器學習 - 物件偵測學習路徑」，瞭解如何訓練自訂模型
• 在自家 Android 應用程式中套用 ML Kit ODT

瞭解詳情

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