หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ทรัพยากร Dependency ของ ML Kit ช่วยให้คุณผสานรวม ML Kit ODT SDK ในแอปได้

ไปที่ไฟล์ app/build.gradle ของโปรเจ็กต์และยืนยันว่ามีทรัพยากร Dependency อยู่แล้ว ดังนี้

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

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

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

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

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

มีโค้ดสำเร็จรูปบางอย่างใน 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 ครั้ง แล้วสัมผัสประสบการณ์ ML Kit ODT ล่าสุด

7. ยินดีด้วย

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

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

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

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

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

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

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

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

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