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

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

ML Kit เป็น SDK สําหรับอุปกรณ์เคลื่อนที่ที่นำความเชี่ยวชาญด้านแมชชีนเลิร์นนิงบนอุปกรณ์ของ Google มาใช้กับแอป Android และ iOS คุณสามารถใช้ Vision และ 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
  • ML Kit Object Detection and Tracking API

สิ่งที่ต้องมี

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

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

2. ตั้งค่า

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

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

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

ไดเรกทอรีย่อย object-detection ในที่เก็บ mlkit-android มี 2 ไดเรกทอรี ได้แก่

  • android_studio_folder.pngstarter - โค้ดเริ่มต้นที่คุณนำไปต่อยอดใน Codelab นี้ได้
  • android_studio_folder.pngfinal - โค้ดที่สมบูรณ์ของแอปตัวอย่างที่เสร็จสมบูรณ์

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

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

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

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

7c0f27882a2698ac.png

เพิ่มทรัพยากร Dependencies สําหรับการตรวจจับและติดตามวัตถุของ 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 ( b451ab2d04d835f9.png) จากแถบเครื่องมือของ Android Studio

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

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

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

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

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

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

ขั้นแรก มีปุ่ม ( c6d965d639c3646.png) ที่ด้านล่างสำหรับดำเนินการต่อไปนี้

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

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

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

9ec541980dbe2d31.png 8312dde41425ba4b.png fa8492bfc1914ff0.png

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

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

1dd41b3ec978f1d9.png

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 ตัวเลือก (ตัวเลือกที่ตัวหนาจะใช้ในโค้ดแล็บนี้) ดังนี้

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

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

// 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: จํานวนเต็มที่คุณใช้ติดตามข้ามเฟรม (ไม่ได้ใช้ใน 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 โดยคลิกเรียกใช้ ( execute.png) ในแถบเครื่องมือของ Android Studio ลองเลือกรูปภาพที่กำหนดล่วงหน้าหรือถ่ายภาพ จากนั้นดูที่หน้าต่าง logcat( 16bd6ea224cf8cf1.png) ใน 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 Object Detection ทำงานได้ คุณมีทุกอย่างแล้วในตอนนี้ ยินดีด้วยนะ

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

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

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

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

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

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

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

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

ตัวอย่างเอาต์พุตของเมธอดยูทิลิตี drawDetectionResult มีดังนี้

58c6f1d4ddb00dfa.png

แสดงผลลัพธ์การตรวจจับของ 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 และแสดงผลบนหน้าจอ

เรียกใช้

จากนั้นคลิกเรียกใช้ ( execute.png) ในแถบเครื่องมือของ Android Studio

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

a03109cb30d5014d.png

7. ยินดีด้วย

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

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

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

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

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

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

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

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

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