หน้านี้ได้รับการแปลโดย 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
ML Kit Object Detection and Tracking API

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

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

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

2. ตั้งค่า

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

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

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

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

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

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

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

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

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

เพิ่มทรัพยากร Dependencies สําหรับการตรวจจับและติดตามวัตถุของ ML Kit

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

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

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

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

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

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

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

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

การตั้งค่า ML Kit ODT นั้นง่ายนิดเดียว เพียง 3 ขั้นตอนกับ 3 API

เตรียมรูปภาพ: 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) ดังนี้

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

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

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

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

การตรวจหาและการจัดประเภทวัตถุเป็นการดำเนินการแบบแอซิงค์

คุณส่งรูปภาพไปยังเครื่องตรวจจับ (ผ่าน process())
อุปกรณ์ตรวจจับทำงานหนักมาก
เครื่องมือตรวจจับจะรายงานผลลัพธ์กลับให้คุณทราบผ่านการติดต่อกลับ

โค้ดต่อไปนี้ทําเช่นนั้น (คัดลอกและเพิ่มลงในโค้ดที่มีอยู่ภายใน 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%)

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

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

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

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

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

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

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

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

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

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

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

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

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

เรียกใช้

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

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

7. ยินดีด้วย

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

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

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

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

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

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

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

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

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