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

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

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

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

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

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

ใน 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) ที่มีทรัพยากรทั้งหมดที่คุณต้องใช้ สำหรับ Codelab นี้ คุณต้องการเฉพาะแหล่งที่มาในไดเรกทอรีย่อย object-detection เท่านั้น

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

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

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

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

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

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

เพิ่มทรัพยากร Dependency สำหรับการตรวจจับและติดตามออบเจ็กต์ 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 โดยมีโค้ดสำเร็จรูปที่จะช่วยให้คุณจับภาพหรือเลือกรูปภาพที่กำหนดล่วงหน้า และป้อนให้การตรวจจับออบเจ็กต์และไปป์ไลน์การติดตามที่คุณจะสร้างใน Codelab นี้ มาสำรวจแอปกันอีกสักนิดก่อนที่จะเขียนโค้ดกัน

แบบแรกคือ ปุ่ม ( ) ที่ด้านล่างเพื่อ:

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

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

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

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

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

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

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

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

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

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

การตั้งค่า ML Kit ODT ทำได้ด้วย 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) {
}

ตอนนี้ฟังก์ชันนั้นว่างเปล่า ทำตามขั้นตอนต่อไปนี้เพื่อติดตั้งใช้งาน 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 แบบง่ายสำหรับสร้าง InputImage จาก Bitmap จากนั้นจึงป้อน 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())
• อุปกรณ์ตรวจจับจะทำงานค่อนข้างมาก
• ตัวตรวจจับจะรายงานผลลัพธ์กลับไปให้คุณผ่าน Callback

โค้ดต่อไปนี้ทำหน้าที่แค่นี้เอง (คัดลอกและเพิ่มโค้ดนั้นลงในโค้ดที่มีอยู่ภายใน 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 (รับข้อความของป้ายกำกับนี้ เช่น "สินค้าแฟชั่น" "อาหาร" "สินค้าในบ้าน" "สถานที่" "พืช")
• confidence ( แบบลอยตัวระหว่าง 0.0 ถึง 1.0 โดย 1.0 หมายถึง 100%)

คุณอาจสังเกตเห็นว่าโค้ดดังกล่าวทำการประมวลผลประเภท Printf สำหรับผลลัพธ์ที่ตรวจพบด้วย 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}")
       }
   }
}

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

ลองเรียกใช้ 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 ครั้งเพื่อสัมผัสประสบการณ์ ML Kit ODT ล่าสุด

7. ยินดีด้วย

คุณได้ใช้ ML Kit เพื่อเพิ่มความสามารถในการตรวจจับวัตถุลงในแอปของคุณ ดังนี้

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

เท่านี้ก็เรียบร้อย

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

หัวข้อที่ครอบคลุม

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

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

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

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

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