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

1. 事前準備

ML Kit 是一款行動 SDK，能將 Google 的裝置端機器學習專業知識導入 Android 和 iOS 應用程式。您可以運用 Vision 和 Natural Language API 輕鬆解決應用程式的常見問題，或是打造全新的使用者體驗。所有功能都採用 Google 一流的機器學習模型，而且無須付費即可使用。

ML Kit 的 API 都會在裝置端執行，例如，在要處理即時相機串流時，提供即時用途。也就是說，這項功能可離線使用。

本程式碼研究室將逐步引導您完成幾個簡單的步驟，以便將特定圖片的物件偵測及追蹤 (ODT) 加入現有的 Android 應用程式。請注意，本程式碼研究室使用一些捷徑，強調 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 存放區的物件偵測子目錄包含兩個目錄：

• starter：啟動您在本程式碼研究室所建構的程式碼。
• 最終：已完成的範例應用程式的程式碼。

3. 將 ML Kit Object Detection and Tracking 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 裝置上啟動。其中包含一些樣板程式碼，可用來拍照或選取預設圖片，並提供給您將在這個程式碼研究室中建構的物件偵測和追蹤管道。讓我們在編寫程式碼前，稍微瞭解應用程式。

首先，畫面底部有一個按鈕 ( )，藉此執行下列操作：

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

試用「拍照」按鈕、按照提示拍照、接受相片，並觀察範例應用程式中顯示的相片。

重複幾次，看看運作方式：

第二種預設圖片可供選擇。如果是在 Android 模擬器上執行，可以之後再使用這些映像檔來測試物件偵測程式碼。

從 3 張預設圖片中選取一張圖片。圖片顯示在較大的檢視畫面中：

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

在這個步驟中，您需要在範例應用程式中新增這項功能，以偵測圖片中的物件。如上一步驟所示，範例應用程式包含樣板程式碼，可透過裝置上的相機應用程式拍照。應用程式還提供 3 張預設圖片，如果您正在 Android 模擬器中執行程式碼研究室，則可試用物件偵測功能。

從預設圖片或使用相機應用程式拍照後，樣板程式碼會將圖片解碼為 Bitmap 例項，在螢幕上顯示，並呼叫包含圖片的 runObjectDetection 方法。

在這個步驟中，您需要在 runObjectDetection 方法中加入程式碼，進行物件偵測！

設定並執行圖片的裝置端物件偵測功能

設定 ML Kit ODT 的 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() 將圖片傳送給偵測工具。
• 偵測工具的運作不多。
• 偵測工具會透過回呼將結果回報給您。

下列程式碼就是能達成這個目標 (複製並附加 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 (取得這個標籤的文字，包括「時尚商品」、「食品」、「居家用品」、「地點」、「植物」)
• confidence ( 介於 0.0 到 1.0 之間的浮點值，1.0 代表 100%)

您可能已註意到，程式碼會對列印結果進行列印處理，以 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」圖示 ( )，執行程式碼研究室。請嘗試選取預設圖片或拍照，然後在 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 個物件：

• 類別分別是「Food」和「Home good」。
• 第 2 天沒有傳回任何類別，因為這是未知的類別。
• 沒有 trackingId (因為這是單一圖片偵測模式)。
• boundingBox 矩形內部的位置 (例如 (481, 2021) – (2426、3376))
• 偵測器很確定第一是食物 (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