ตรวจจับวัตถุในรูปภาพด้วย ML Kit: Android

1. ก่อนเริ่มต้น

ML Kit เป็น SDK สำหรับอุปกรณ์เคลื่อนที่ที่นำความเชี่ยวชาญด้านแมชชีนเลิร์นนิงในอุปกรณ์ของ Google มาสู่แอป Android และ iOS คุณสามารถใช้ Vision API และ Natural Language API ที่มีประสิทธิภาพแต่ใช้งานง่ายเพื่อแก้ปัญหาที่พบบ่อยในแอปหรือสร้างประสบการณ์ของผู้ใช้ใหม่ๆ โดยทั้งหมดขับเคลื่อนด้วยโมเดล ML ที่ดีที่สุดของ Google และให้บริการแก่คุณโดยไม่มีค่าใช้จ่าย

API ของ ML Kit ทั้งหมดทำงานในอุปกรณ์ ซึ่งช่วยให้ใช้กรณีการใช้งานแบบเรียลไทม์ได้เมื่อต้องการประมวลผลสตรีมกล้องสด เป็นต้น ซึ่งหมายความว่าฟังก์ชันนี้จะพร้อมใช้งานแบบออฟไลน์ด้วย

Codelab นี้จะแนะนำขั้นตอนง่ายๆ ในการเพิ่มการตรวจหาและติดตามออบเจ็กต์ (ODT) สำหรับรูปภาพที่กำหนดลงในแอป Android ที่มีอยู่ โปรดทราบว่า Codelab นี้จะใช้ทางลัดบางอย่างเพื่อไฮไลต์การใช้งาน ODT ของ ML Kit

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้างแอป Android ด้วย ML Kit แอปจะใช้ ML Kit Object Detection and Tracking API เพื่อตรวจจับออบเจ็กต์ในรูปภาพที่กำหนด ในท้ายที่สุด คุณควรเห็นสิ่งที่คล้ายกับรูปภาพทางด้านขวา

สิ่งที่คุณจะได้เรียนรู้

• วิธีผสานรวม ML Kit SDK เข้ากับแอปพลิเคชัน Android
• API การตรวจจับและติดตามออบเจ็กต์ของ ML Kit

สิ่งที่คุณต้องมี

• Android Studio เวอร์ชันล่าสุด (v4.1.2 ขึ้นไป)
• โปรแกรมจำลอง Android Studio หรืออุปกรณ์ Android จริง
• โค้ดตัวอย่าง
• ความรู้พื้นฐานเกี่ยวกับการพัฒนาแอป Android ใน Kotlin

Codelab นี้มุ่งเน้นที่ ML Kit เราจะข้ามแนวคิดและบล็อกโค้ดที่ไม่เกี่ยวข้องไป และจะให้คุณคัดลอกและวางได้ง่ายๆ

2. ตั้งค่า

ดาวน์โหลดโค้ด

คลิกลิงก์ต่อไปนี้เพื่อดาวน์โหลดโค้ดทั้งหมดสำหรับ Codelab นี้

ดาวน์โหลดซอร์สโค้ด

แตกไฟล์ ZIP ที่ดาวน์โหลด การดำเนินการนี้จะแตกโฟลเดอร์รูท (mlkit-android-main) พร้อมทรัพยากรทั้งหมดที่คุณต้องการ สำหรับโค้ดแล็บนี้ คุณจะต้องใช้เฉพาะแหล่งที่มาในไดเรกทอรีย่อย object-detection

ไดเรกทอรีย่อยการตรวจหาออบเจ็กต์ในที่เก็บ mlkit-android มี 2 ไดเรกทอรี ได้แก่

• เริ่มต้น - โค้ดเริ่มต้นที่คุณจะใช้ต่อยอดสำหรับ Codelab นี้
• final - โค้ดที่เสร็จสมบูรณ์สำหรับแอปตัวอย่างที่เสร็จแล้ว

3. เพิ่ม ML Kit Object Detection and Tracking API ลงในโปรเจ็กต์

นำเข้าแอปไปยัง Android Studio

มาเริ่มด้วยการนำเข้าแอปเริ่มต้นไปยัง Android Studio กัน

เปิด Android Studio เลือกนำเข้าโปรเจ็กต์ (Gradle, Eclipse ADT ฯลฯ) แล้วเลือกโฟลเดอร์ starter จากซอร์สโค้ดที่คุณดาวน์โหลดไว้ก่อนหน้านี้

เพิ่มการอ้างอิงสำหรับการตรวจจับและติดตามออบเจ็กต์ของ ML Kit

ทรัพยากร Dependency ของ ML Kit ช่วยให้คุณผสานรวม ML Kit ODT SDK ในแอปได้ เพิ่มบรรทัดต่อไปนี้ที่ส่วนท้ายของไฟล์ app/build.gradle ของโปรเจ็กต์

build.gradle

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

ซิงค์โปรเจ็กต์กับไฟล์ Gradle

คุณควรซิงค์โปรเจ็กต์กับไฟล์ Gradle ในตอนนี้เพื่อให้แน่ใจว่าแอปมีทรัพยากร Dependency ทั้งหมด

เลือกซิงค์โปรเจ็กต์กับไฟล์ Gradle ( ) จากแถบเครื่องมือของ Android Studio

(หากปุ่มนี้ปิดอยู่ ให้ตรวจสอบว่าคุณนำเข้าเฉพาะ starter/app/build.gradle ไม่ใช่ทั้งที่เก็บ)

4. เรียกใช้แอปเริ่มต้น

ตอนนี้คุณได้นำเข้าโปรเจ็กต์ไปยัง Android Studio และเพิ่มทรัพยากร Dependency สำหรับการตรวจจับและการติดตามออบเจ็กต์ของ ML Kit แล้ว คุณจึงพร้อมที่จะเรียกใช้แอปเป็นครั้งแรก

เชื่อมต่ออุปกรณ์ Android ผ่าน USB กับโฮสต์ หรือเริ่มโปรแกรมจำลอง Android Studio แล้วคลิกเรียกใช้ ( ) ในแถบเครื่องมือของ Android Studio

เรียกใช้และสำรวจแอป

แอปควรเปิดขึ้นในอุปกรณ์ Android โดยมีโค้ดมาตรฐานบางส่วนที่ช่วยให้คุณถ่ายรูปหรือเลือกรูปภาพที่กำหนดไว้ล่วงหน้า แล้วป้อนลงในไปป์ไลน์การตรวจจับและการติดตามออบเจ็กต์ที่คุณจะสร้างในโค้ดแล็บนี้ มาดูแอปกันสักหน่อยก่อนเขียนโค้ด

ก่อนอื่นจะมีปุ่ม ( ) ที่ด้านล่างเพื่อทำสิ่งต่อไปนี้

• เปิดแอปกล้องที่ผสานรวมอยู่ในอุปกรณ์/โปรแกรมจำลอง
• ถ่ายรูปภายในแอปกล้อง
• รับรูปภาพที่จับภาพไว้ในแอปเริ่มต้น
• แสดงรูปภาพ

ลองใช้ปุ่มถ่ายภาพ ทำตามข้อความแจ้งเพื่อถ่ายภาพ ยอมรับรูปภาพ และสังเกตว่ารูปภาพจะแสดงในแอปเริ่มต้น

ทำซ้ำ 2-3 ครั้งเพื่อดูวิธีการทำงาน

ประการที่ 2 มีรูปภาพที่กำหนดไว้ล่วงหน้า 3 รูปที่คุณเลือกใช้ได้ คุณสามารถใช้รูปภาพเหล่านี้ในภายหลังเพื่อทดสอบโค้ดการตรวจหาออบเจ็กต์ได้หากใช้โปรแกรมจำลอง Android

เลือกรูปภาพจากรูปภาพที่กำหนดไว้ล่วงหน้า 3 รูป ดูว่ารูปภาพปรากฏในมุมมองที่ใหญ่ขึ้นหรือไม่

5. เพิ่มการตรวจหาออบเจ็กต์ในอุปกรณ์

ในขั้นตอนนี้ คุณจะเพิ่มฟังก์ชันการทำงานลงในแอปเริ่มต้นเพื่อตรวจหาออบเจ็กต์ในรูปภาพ ดังที่เห็นในขั้นตอนก่อนหน้า แอปเริ่มต้นมีโค้ดมาตรฐานสำหรับถ่ายรูปด้วยแอปกล้องในอุปกรณ์ นอกจากนี้ ยังมีรูปภาพที่ตั้งค่าไว้ล่วงหน้า 3 รูปในแอปที่คุณสามารถลองใช้การตรวจหาออบเจ็กต์ได้หากเรียกใช้ Codelab ในโปรแกรมจำลอง Android

เมื่อคุณเลือกรูปภาพ ไม่ว่าจะเป็นจากรูปภาพที่กำหนดไว้ล่วงหน้าหรือถ่ายรูปภาพด้วยแอปกล้อง โค้ดมาตรฐานจะถอดรหัสรูปภาพนั้นเป็นอินสแตนซ์ Bitmap แสดงบนหน้าจอ และเรียกใช้เมธอด runObjectDetection พร้อมรูปภาพ

ในขั้นตอนนี้ คุณจะเพิ่มโค้ดลงในเมธอด runObjectDetection เพื่อทำการตรวจหาออบเจ็กต์

ตั้งค่าและเรียกใช้การตรวจหาออบเจ็กต์ในอุปกรณ์ในรูปภาพ

การตั้งค่า ODT ของ ML Kit มีเพียง 3 ขั้นตอนง่ายๆ โดยใช้ API 3 รายการ ดังนี้

• เตรียมรูปภาพ: InputImage
• สร้างออบเจ็กต์ตรวจหา: ObjectDetection.getClient(options)
• เชื่อมต่อออบเจ็กต์ 2 รายการด้านบน: process(image)

คุณจะทำสิ่งเหล่านี้ได้ภายในฟังก์ชัน runObjectDetection(bitmap: Bitmap) ในไฟล์ MainActivity.kt

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

ตอนนี้ฟังก์ชันนี้ว่างเปล่า ไปที่ขั้นตอนต่อไปนี้เพื่อติดตั้งใช้งาน ODT ของ ML Kit ในระหว่างนี้ 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 ที่ใช้งานง่ายสำหรับสร้าง InputImage จาก Bitmap จากนั้นคุณจะป้อน InputImage ลงใน API ของ ML Kit ได้

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

เพิ่มโค้ดด้านบนที่ด้านบนของ runObjectDetection(bitmap:Bitmap)

ขั้นตอนที่ 2: สร้างอินสแตนซ์ของเครื่องตรวจจับ

ML Kit เป็นไปตามรูปแบบการออกแบบ Builder คุณจะส่งการกำหนดค่าไปยังเครื่องมือสร้าง จากนั้นรับ detector จากเครื่องมือสร้าง ตัวเลือกการกำหนดค่ามี 3 แบบ (ตัวเลือกที่ตัวหนาจะใช้ในโค้ดแล็บนี้) ดังนี้

• โหมดตรวจจับ (รูปภาพเดียว หรือสตรีม)
• โหมดการตรวจจับ (การตรวจจับ ออบเจ็กต์เดียวหรือหลายออบเจ็กต์)
• โหมดการแยกประเภท (เปิด หรือปิด)

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())
• โดย 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 (รับข้อความของป้ายกำกับนี้ รวมถึง "สินค้าแฟชั่น" "อาหาร" "ของใช้ในบ้าน" "สถานที่" "พืช")
• 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}")
       }
   }
}

ตอนนี้คุณก็พร้อมที่จะยอมรับรูปภาพสำหรับการตรวจหาแล้ว

มาเริ่ม Codelab กันโดยคลิกเรียกใช้ ( ) ในแถบเครื่องมือของ Android Studio ลองเลือกรูปภาพที่กำหนดไว้ล่วงหน้าหรือถ่ายรูป จากนั้นดูหน้าต่าง Logcat( ) ภายใน IDE

คุณควรเห็นข้อมูลที่มีลักษณะคล้ายกับข้อมูลต่อไปนี้

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))
• เครื่องตรวจจับค่อนข้างมั่นใจว่าภาพแรกคืออาหาร (ความเชื่อมั่น 90% - เป็นสลัด)

ในทางเทคนิคแล้ว คุณมีทุกอย่างที่จำเป็นต่อการทำให้การตรวจหาออบเจ็กต์ของ ML Kit ทำงานได้แล้วในตอนนี้ ยินดีด้วยนะ

ในส่วนของ UI คุณยังคงอยู่ในขั้นตอนที่คุณเริ่มต้น แต่คุณสามารถใช้ประโยชน์จากผลลัพธ์ที่ตรวจพบใน UI เช่น การวาดกล่องขอบเขตเพื่อสร้างประสบการณ์การใช้งานที่ดีขึ้นได้ ไปที่ขั้นตอนถัดไปกันเลย นั่นคือการประมวลผลภายหลังผลลัพธ์ที่ตรวจพบ

6. การประมวลผลผลการตรวจหาภายหลัง

ในขั้นตอนก่อนหน้า คุณจะพิมพ์ผลลัพธ์ที่ตรวจพบลงใน logcat ซึ่งเป็นวิธีที่ง่ายและรวดเร็ว

ในส่วนนี้ คุณจะได้ใช้ผลลัพธ์กับรูปภาพ

• วาดกรอบล้อมรอบบนรูปภาพ
• วาดชื่อหมวดหมู่และความน่าจะเป็นภายในกรอบล้อมรอบ

ทำความเข้าใจยูทิลิตีการแสดงภาพ

มีโค้ดมาตรฐานบางส่วนภายใน Codelab เพื่อช่วยให้คุณเห็นภาพผลการตรวจหา ใช้ประโยชน์จากยูทิลิตีเหล่านี้เพื่อให้โค้ดภาพของเราเรียบง่าย

• data class BoxWithText(val box: Rect, val text: String) นี่คือคลาสข้อมูลสำหรับจัดเก็บผลการตรวจหาออบเจ็กต์เพื่อการแสดงภาพ box คือกรอบล้อมรอบที่วัตถุอยู่ และ text คือสตริงผลการตรวจหาที่จะแสดงพร้อมกับกรอบล้อมรอบของวัตถุ
• fun drawDetectionResult(bitmap: Bitmap, detectionResults: List<BoxWithText>): Bitmap วิธีนี้จะวาดผลการตรวจหาออบเจ็กต์ใน detectionResults บนอินพุต bitmap และส่งคืนสำเนาที่แก้ไขแล้ว

ตัวอย่างเอาต์พุตของเมธอดยูทิลิตี 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)
}

• คุณเริ่มต้นด้วยการแยกวิเคราะห์ DetectedObject ของ ML Kit และสร้างรายการออบเจ็กต์ BoxWithText เพื่อแสดงผลการแสดงภาพ
• จากนั้นวาดผลการตรวจหาบนรูปภาพอินพุตโดยใช้วิธีการยูทิลิตี drawDetectionResult แล้วแสดงบนหน้าจอ

เรียกใช้

ตอนนี้คลิกเรียกใช้ ( ) ในแถบเครื่องมือ Android Studio

เมื่อแอปโหลดแล้ว ให้กดปุ่มที่มีไอคอนกล้อง เล็งกล้องไปที่วัตถุ ถ่ายรูป ยอมรับรูปภาพ (ในแอปกล้อง) หรือแตะรูปภาพที่ตั้งค่าไว้ล่วงหน้าได้ง่ายๆ คุณควรเห็นผลการตรวจจับ ให้กดปุ่มอีกครั้งหรือเลือกรูปภาพอื่นเพื่อทำซ้ำ 2-3 ครั้งเพื่อสัมผัสประสบการณ์ ODT ของ ML Kit เวอร์ชันล่าสุด

7. ยินดีด้วย

คุณใช้ ML Kit เพื่อเพิ่มความสามารถในการตรวจหาออบเจ็กต์ลงในแอปแล้ว

• 3 ขั้นตอนด้วย 3 API
• สร้างรูปภาพอินพุต
• สร้างตัวตรวจจับ
• ส่งรูปภาพไปยังเครื่องมือตรวจหา

เพียงเท่านี้คุณก็พร้อมใช้งานแล้ว

เมื่อดำเนินการต่อ คุณอาจต้องการปรับปรุงโมเดล ดังที่เห็นว่าโมเดลเริ่มต้นรู้จักเพียง 5 หมวดหมู่เท่านั้น โมเดลไม่รู้จักแม้แต่มีด ส้อม และขวด ดู Codelab อื่นๆ ในเส้นทางการเรียนรู้แมชชีนเลิร์นนิงในอุปกรณ์ - การตรวจหาออบเจ็กต์เพื่อดูวิธีฝึกโมเดลที่กำหนดเอง

สิ่งที่เราได้พูดถึง

• วิธีเพิ่มการตรวจจับและติดตามออบเจ็กต์ของ ML Kit ลงในแอป Android
• วิธีใช้การตรวจจับและติดตามออบเจ็กต์ในอุปกรณ์ใน ML Kit เพื่อตรวจจับออบเจ็กต์ในรูปภาพ

ขั้นตอนถัดไป

• สำรวจเพิ่มเติมด้วย ODT ของ ML Kit โดยใช้รูปภาพและวิดีโอสดเพื่อสัมผัสประสบการณ์ความแม่นยำและประสิทธิภาพในการตรวจหาและการจัดประเภท
• ดูเส้นทางการเรียนรู้การตรวจหาออบเจ็กต์ในแมชชีนเลิร์นนิงในอุปกรณ์เพื่อดูวิธีฝึกโมเดลที่กำหนดเอง
• ใช้ ODT ของ ML Kit ในแอป Android ของคุณเอง

ดูข้อมูลเพิ่มเติม

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