ผสานรวมโมเดลที่กำหนดเองในแอปของคุณ

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

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

ใน Codelab นี้ คุณจะต้องอัปเดตแอปจากห้องทดลองแรกด้วยโมเดลจากที่ 2

คุณสามารถรับซอร์สโค้ดที่สมบูรณ์สำหรับ Code Lab นี้ได้โดยโคลนที่เก็บนี้ คุณจะเห็นไดเรกทอรีย่อยสำหรับ Android และ iOS โค้ดของ Codelab ก่อนหน้านี้มีให้ใช้งานเป็น ImageClassifierStep1 หากคุณต้องการติดตามโค้ด โค้ดที่เสร็จสมบูรณ์สําหรับ Codelab นี้จะอยู่ใน ImageClassifierStep2

ข้อกำหนดเบื้องต้น

  • คุณควรศึกษา Codelab ของ 2 รายการแรกในเส้นทางการเรียนรู้นี้เสร็จสมบูรณ์แล้ว

สิ่งที่คุณจะสร้างและเรียนรู้

  • ผสานรวมโมเดลที่กำหนดเองซึ่งได้รับการฝึกจากห้องทดลองก่อนหน้านี้เข้ากับแอป Android หรือ iOS

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

  • Android Studio ดาวน์โหลดสำหรับส่วน Android ของ Lab ได้ที่ developer.android.com/studio
  • Xcode มีจำหน่ายใน Apple App Store สำหรับส่วน iOS ของ Lab

2. ดาวน์โหลดแอป Starter

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

เปิดแอปใน Android Studio แล้วอัปเดตตามต้องการ และเมื่อพร้อม ให้เรียกใช้แอปเพื่อให้ใช้งานได้ คุณควรจะเห็นบางสิ่งเช่นนี้:

f3703d45d1332d1d.png

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

3. อัปเดตbuild.gradle เพื่อใช้โมเดล ML Kit ที่กำหนดเอง

  1. เมื่อใช้ Android Studio ให้หาไฟล์ build.gradle ระดับแอป วิธีที่ง่ายที่สุดคือใช้ในโปรแกรมสำรวจโปรเจ็กต์ ตรวจสอบว่าได้เลือก Android ไว้ที่ด้านบนและคุณจะเห็นโฟลเดอร์สำหรับ Gradle Scripts ที่ด้านล่าง
  2. เปิดแอปที่ใช้สำหรับโมดูล โดยตั้งชื่อแอปตามด้วย ".app" ดังที่แสดงที่นี่ – (โมดูล: ImageClassifierStep1.app):

8fe1d04b40610047.png

  1. ค้นหาการตั้งค่า dependencies ที่ด้านล่างของไฟล์ ในนั้นคุณควรจะเห็นบรรทัดนี้:
implementation 'com.google.mlkit:image-labeling:17.0.1'

หมายเลขเวอร์ชันอาจแตกต่างออกไป ค้นหาหมายเลขเวอร์ชันล่าสุดจากเว็บไซต์ ML Kit ได้เสมอที่ https://developers.google.com/ml-kit/vision/image-labeling/android

  1. แทนที่ด้วยการอ้างอิงไลบรารีการติดป้ายกำกับรูปภาพที่กำหนดเอง ดูหมายเลขเวอร์ชันของเครื่องนี้ได้ที่ https://developers.google.com/ml-kit/vision/image-labeling/custom-models/android
implementation 'com.google.mlkit:image-labeling-custom:16.3.1'
  1. นอกจากนี้ คุณกำลังจะเพิ่มโมเดล .tflite ที่คุณสร้างไว้ในห้องทดลองก่อนหน้านี้ คุณไม่ต้องการให้ระบบบีบอัดโมเดลนี้เมื่อ Android Studio คอมไพล์แอป ดังนั้นโปรดใช้การตั้งค่านี้ในส่วน Android ของไฟล์ build.gradle เดียวกัน ดังนี้
aaptOptions{
    noCompress "tflite"
}

และตรวจสอบว่าไม่ได้อยู่ในการตั้งค่าอื่น ซึ่งควรฝังอยู่ใต้แท็ก android เช่น

62d546bff11d2a50.png

4. เพิ่มโมเดล TFLite

ใน Codelab ก่อนหน้านี้ คุณได้สร้างโมเดลที่กำหนดเองและดาวน์โหลดเป็น model.tflite

ค้นหาโฟลเดอร์เนื้อหาที่มีอยู่ flower1.jpg ในโปรเจ็กต์ของคุณ คัดลอกโมเดลไปยังโฟลเดอร์ดังกล่าวโดยทำดังนี้

  1. คลิกขวาที่โฟลเดอร์เนื้อหาใน Android Studio ในเมนูที่เปิดขึ้น ให้เลือกเปิดเผยใน Finder ("แสดงใน Explorer" บน Windows และ "แสดงใน Files" บน Linux)

db30b47e419a326b.png

  1. ระบบจะนำคุณไปยังไดเรกทอรีในระบบไฟล์ คัดลอกไฟล์ model.tflite ลงในไดเรกทอรีนั้น พร้อมกับ flower1.jpg.

36de0c51bec1c19e.png

Android Studio จะอัปเดตเพื่อแสดงทั้ง 2 ไฟล์ในโฟลเดอร์เนื้อหา ดังนี้

e9f4e9f394d9b357.png

คุณพร้อมอัปเดตรหัสแล้ว

5. อัปเดตโค้ดสำหรับรูปแบบที่กำหนดเอง

ขั้นตอนแรกคือการเพิ่มโค้ดเพื่อโหลดรูปแบบที่กำหนดเอง

  1. ในไฟล์ MainActivity ให้เพิ่มค่าต่อไปนี้ลงใน onCreate ใต้บรรทัดที่มีข้อความว่า setContentView(R.layout.activity_main)

การดำเนินการนี้จะใช้ LocalModel เพื่อสร้างจากเนื้อหา model.tflite หาก Android Studio ร้องเรียนโดยการเปลี่ยน "LocalModel" สีแดง กด ALT + Enter เพื่อนำเข้าคลัง คุณควรเพิ่มการนําเข้าไปยัง com.google.mlkit.common.model.LocalModel ให้คุณ

val localModel = LocalModel.Builder()
        .setAssetFilePath("model.tflite")
        .build()

ก่อนหน้านี้คุณใช้โมเดลเริ่มต้นในเครื่องจัดการ btn.setOnClickListener โดยสร้างด้วยโค้ดต่อไปนี้

val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)

คุณจะแทนที่สิ่งนั้นเพื่อใช้รูปแบบที่กำหนดเอง

  1. ตั้งค่าออบเจ็กต์ตัวเลือกที่กำหนดเอง
val options = CustomImageLabelerOptions.Builder(localModel)
        .setConfidenceThreshold(0.7f)
        .setMaxResultCount(5)
        .build()

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

คุณสามารถกรองผลลัพธ์ที่มีคุณภาพต่ำกว่าออกได้โดยใช้เกณฑ์ความเชื่อมั่นขั้นสูง ตัวอย่างเช่น การตั้งค่านี้เป็น 0.9 จะไม่แสดงป้ายกำกับใดๆ ที่มีลำดับความสำคัญต่ำกว่า setMaxResultCount() มีประโยชน์ในโมเดลที่มีคลาสจำนวนมาก แต่เนื่องจากโมเดลนี้มีแค่ 5 รายการ คุณจึงเหลือที่ 5 รายการ

ตอนนี้คุณมีตัวเลือกสำหรับผู้ติดป้ายกำกับแล้ว คุณเปลี่ยนอินสแตนซ์ของผู้ติดป้ายกำกับได้ดังนี้

val labeler = ImageLabeling.getClient(options)

โค้ดที่เหลือจะทำงานโดยไม่มีการแก้ไข ลองใช้เลย

dd40c36c4edbb33.png

จากตรงนี้ คุณจะเห็นว่าดอกไม้ชนิดนี้มีการระบุว่าเป็นดอกเดซี่ด้วยความน่าจะเป็น 0 .959!

สมมติว่าคุณเพิ่มรูปภาพดอกไม้รูปที่ 2 และลองใช้ดูอีกครั้ง:

8556a5fbea487842.png

โดยพบว่ามันเป็นดอกกุหลาบ

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

6. รับแอป Start สำหรับ iOS

  1. ก่อนอื่นคุณจะต้องมีแอปจาก Codelab แรก ถ้าคุณผ่านห้องทดลองแล้ว ห้องทดลองจะมีชื่อว่า ImageClassifierStep1 หากคุณไม่ต้องการดูห้องทดลอง คุณสามารถโคลนเวอร์ชันที่เสร็จแล้วจากที่เก็บได้ โปรดทราบว่าพ็อดและ .xcworkspace จะไม่มีอยู่ในที่เก็บ ดังนั้นก่อนที่จะดำเนินการต่อในขั้นตอนถัดไป โปรดเรียกใช้ "การติดตั้งพ็อด" จากไดเรกทอรีเดียวกับ .xcproject
  2. เปิด ImageClassifierStep1.xcworkspace ใน Xcode โปรดทราบว่าคุณควรใช้ .xcworkspace ไม่ใช่ .xcproject เนื่องจากคุณได้รวมแพ็กเกจ ML Kit ไว้โดยใช้พ็อด และพื้นที่ทำงานจะโหลด

สำหรับห้องทดลองส่วนที่เหลือนี้ ฉันจะเรียกใช้แอปในโปรแกรมจำลอง iPhone ซึ่งควรสนับสนุนเป้าหมายบิลด์จาก Codelab หากต้องการใช้อุปกรณ์ของคุณเอง คุณอาจต้องเปลี่ยนเป้าหมายของบิลด์ในการตั้งค่าโปรเจ็กต์ให้ตรงกับเวอร์ชัน iOS

เรียกใช้โปรแกรมดังกล่าว แล้วคุณจะเห็นอย่างนี้

9e151ed18f99fb98.png

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

สำหรับส่วนที่เหลือของ Codelab นี้ โปรดดูสิ่งที่จะต้องทำในการอัปเกรดแอปด้วยโมเดลที่กำหนดเอง

7. ใช้พ็อดเครื่องมือติดป้ายกำกับรูปภาพ ML Kit ที่กำหนดเอง

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

  1. ค้นหาไฟล์ชื่อ podfile ในไดเรกทอรีโปรเจ็กต์ เปิดแอปและคุณจะเห็นข้อความแบบนี้
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end
  1. เปลี่ยนการประกาศพ็อดจาก ImageLabeling เป็น ImageLabelingCustom ดังนี้
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabelingCustom'
end
  1. เมื่อเสร็จแล้ว ให้ใช้เทอร์มินัลเพื่อไปยังไดเรกทอรีที่มี Podfile (รวมถึง .xcworkspace) และเรียกใช้ pod install

bb5d78eb7c7ab975.png

หลังจากนั้นสักครู่ ระบบจะนำไลบรารี MLKitImageLabeling ออกและเพิ่มไลบรารีที่กำหนดเอง ตอนนี้คุณเปิดไฟล์ .xcworkspace เพื่อแก้ไขโค้ดได้แล้ว

8. เพิ่มโมเดล TFLite ลงใน Xcode

ใน Codelab ก่อนหน้านี้ คุณได้สร้างโมเดลที่กำหนดเองและดาวน์โหลดเป็น model.tflite หากไม่มี ให้กลับไปเรียกใช้ Codelab หรือดูโค้ด Colab ที่นี่ หากคุณไม่มีสิทธิ์เข้าถึง Google Colab คุณจะดูสมุดบันทึกได้ที่ลิงก์นี้

  1. เมื่อเปิดพื้นที่ทำงานใน Xcode ให้ลาก model.tflite ดังกล่าวลงในโปรเจ็กต์ของคุณ และควรอยู่ในโฟลเดอร์เดียวกับไฟล์ที่เหลือ เช่น ViewController.swift หรือ Main.storyboard
  2. กล่องโต้ตอบจะปรากฏขึ้นพร้อมตัวเลือกในการเพิ่มไฟล์ ตรวจดูว่าได้เลือกเพิ่มลงในเป้าหมายไว้ ไม่เช่นนั้นโมเดลจะไม่ได้รวมเข้ากับแอปเมื่อทำให้ใช้งานได้ในอุปกรณ์

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

5b6a7f40c73f0f1f.png

วิธีนี้ช่วยให้มั่นใจได้ว่าคุณสามารถโหลดโมเดลได้ คุณจะเห็นวิธีการในขั้นตอนถัดไป

9. อัปเดตโค้ดสำหรับโมเดลที่กำหนดเอง

  1. เปิดไฟล์ ViewController.swift คุณอาจเห็นข้อผิดพลาดในหน้า "นำเข้า MLKitImageLabeling" ที่ด้านบนของไฟล์ ทั้งนี้เนื่องจากคุณได้นำไลบรารีการติดป้ายกำกับรูปภาพทั่วไปออกเมื่ออัปเดตไฟล์พ็อด คุณลบบรรทัดนี้ได้และอัปเดตข้อมูลดังต่อไปนี้
import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom

คุณอาจจะอ่านเร็วและคิดว่าเป็นโค้ดเดิมได้ง่ายๆ แต่เป็นประเภท "ทั่วไป" และ "กำหนดเอง" ในช่วงท้าย!

  1. ถัดไป คุณจะต้องโหลดโมเดลที่กำหนดเองที่เพิ่มไว้ในขั้นตอนก่อนหน้า ค้นหาฟัง getLabels() เพิ่มบรรทัดต่อไปนี้ใต้บรรทัดที่มีข้อความว่า visionImage.orientation = image.imageOrientation
// Add this code to use a custom model
let localModelFilePath = Bundle.main.path(forResource: "model", ofType: "tflite")
let localModel = LocalModel(path: localModelFilePath!)
  1. ค้นหาโค้ดสำหรับระบุตัวเลือกสำหรับ ImageLabeler ทั่วไป อาจเป็นเพราะข้อผิดพลาดเกิดขึ้นเพราะไลบรารีเหล่านี้ถูกนำออกแล้ว
let options = ImageLabelerOptions()

แทนที่ค่านั้นด้วยโค้ดนี้เพื่อใช้ CustomImageLabelerOptions ซึ่งระบุโมเดลในเครื่อง

let options = CustomImageLabelerOptions(localModel: localModel)

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

238cd21748a97cf4.png

สมมติว่าคุณเพิ่มรูปภาพดอกไม้รูปที่ 2 และลองใช้ดูอีกครั้ง:

75f3970a6b509bfe.png

แอปตรวจพบว่ารูปภาพนี้ตรงกับป้ายกำกับ "กุหลาบ" เรียบร้อยแล้ว

10. ยินดีด้วย

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

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

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