ตรวจจับวัตถุในรูปภาพเพื่อสร้างการค้นหาผลิตภัณฑ์แบบภาพด้วย ML Kit: Android

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

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

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

คุณดูขั้นตอนที่เหลือ รวมถึงวิธีสร้างแบ็กเอนด์การค้นหาสินค้าด้วย Vision API Product Search ได้ในเส้นทางการเรียนรู้

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

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

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

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

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

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

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

2. ตั้งค่า

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

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

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

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

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

3. เพิ่ม API การตรวจจับและติดตามออบเจ็กต์ของ ML Kit ลงในโปรเจ็กต์

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

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

ไปที่ Android Studio เลือก Import Project (Gradle, Eclipse ADT ฯลฯ) แล้วเลือกโฟลเดอร์ 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 ในตอนนี้เพื่อให้แน่ใจว่าแอปมีทรัพยากร Dependency ทั้งหมด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณอาจสังเกตเห็นว่าโค้ดจะพิมพ์ผลลัพธ์ที่ตรวจพบไปยัง Logcat ด้วย 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: Fashion good
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 ซึ่งเป็นวิธีที่ง่ายและรวดเร็ว

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

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

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

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

class ImageClickableView คลาสมุมมองรูปภาพนี้มีเครื่องมือที่สะดวกบางอย่างสำหรับการแสดงภาพและการโต้ตอบกับผลการตรวจหา
fun drawDetectionResults(results: List<DetectedObject>) วิธีนี้จะวาดวงกลมสีขาวตรงกลางของแต่ละออบเจ็กต์ที่ตรวจพบ
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) นี่คือ Callback เพื่อรับรูปภาพที่ครอบตัดแล้วซึ่งมีเฉพาะออบเจ็กต์ที่ผู้ใช้แตะ คุณจะส่งรูปภาพที่ครอบตัดนี้ไปยังแบ็กเอนด์การค้นหารูปภาพใน Codelab ในภายหลังเพื่อรับผลลัพธ์ที่คล้ายกันทางสายตา ใน Codelab นี้ คุณจะยังไม่ได้ใช้วิธีนี้

แสดงผลการตรวจหาของ ML Kit

ใช้ยูทิลิตีการแสดงภาพเพื่อแสดงผลการตรวจหาออบเจ็กต์ของ ML Kit เหนือรูปภาพอินพุต

ไปที่ตำแหน่งที่คุณเรียกใช้ debugPrint() แล้วเพิ่มข้อมูลโค้ดต่อไปนี้ใต้โค้ดดังกล่าว

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

ดำเนินการ

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

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

7. ยินดีด้วย

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

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

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

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

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

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

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

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

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