1. ก่อนเริ่มต้น
ใน Codelab แรกของชุดนี้ คุณได้สร้างแอปที่เรียบง่ายมากซึ่งใช้การติดป้ายกำกับรูปภาพเพื่อแยกวิเคราะห์เนื้อหาของรูปภาพ คุณป้อนรูปภาพดอกเดซี่ให้โมเดล แล้วโมเดลตอบกลับว่าเห็นสิ่งต่างๆ เช่น กลีบดอกไม้หรือท้องฟ้า จากนั้นใน Codelab ที่ 2 คุณได้เปลี่ยนไปใช้ Python เพื่อฝึกโมเดลใหม่ที่กำหนดเองซึ่งจดจำดอกไม้ 5 ประเภทที่แตกต่างกัน
ใน Codelab นี้ คุณจะอัปเดตแอปจาก Lab แรกด้วยโมเดลจาก Lab ที่ 2
คุณดูซอร์สโค้ดทั้งหมดสำหรับโค้ดแล็บนี้ได้โดยการโคลนที่เก็บ นี้ คุณจะเห็นไดเรกทอรีย่อยสำหรับ Android และ iOS โค้ดของโค้ดแล็บก่อนหน้าพร้อมใช้งานเป็น ImageClassifierStep1 หากคุณต้องการทำตาม โค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้พร้อมใช้งานในชื่อ ImageClassifierStep2
ข้อกำหนดเบื้องต้น
- คุณควรทำ Codelab 2 รายการแรกในเส้นทางการเรียนรู้นี้ให้เสร็จสมบูรณ์
สิ่งที่คุณจะสร้างและเรียนรู้
- ผสานรวมโมเดลที่กำหนดเองซึ่งฝึกในแล็บก่อนหน้าเข้ากับแอป Android หรือ iOS
สิ่งที่คุณต้องมี
- Android Studio ซึ่งมีอยู่ที่ developer.android.com/studio สำหรับส่วน Android ของแล็บ
- Xcode ซึ่งมีให้บริการใน Apple App Store สำหรับส่วน iOS ของห้องทดลอง
2. ดาวน์โหลดแอปเริ่มต้น
ก่อนอื่นคุณจะต้องมีแอปจาก Codelab สร้างแอป Computer Vision แอปแรกบน Android หรือ iOS หากคุณทำแล็บเสร็จแล้ว ระบบจะตั้งชื่อว่า ImageClassifierStep1 หากไม่ต้องการทำตามแล็บ คุณสามารถโคลนเวอร์ชันที่เสร็จสมบูรณ์แล้วจากที่เก็บ
เปิดใน Android Studio ทำการอัปเดตที่จำเป็น และเมื่อพร้อมแล้ว ให้เรียกใช้แอปเพื่อให้แน่ใจว่าแอปทำงานได้ คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้

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

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

4. เพิ่มโมเดล TFLite
ใน Codelab ก่อนหน้า คุณได้สร้างโมเดลที่กำหนดเองและดาวน์โหลดเป็น model.tflite
ในโปรเจ็กต์ ให้ค้นหาโฟลเดอร์ชิ้นงานที่มี flower1.jpg อยู่ในขณะนี้ คัดลอกโมเดลไปยังโฟลเดอร์นั้นดังนี้
- คลิกขวาที่โฟลเดอร์ Assets ใน Android Studio เลือกแสดงใน Finder ในเมนูที่เปิดขึ้น ('แสดงใน Explorer' ใน Windows และ 'แสดงในไฟล์' ใน Linux)

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

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

ตอนนี้คุณพร้อมที่จะอัปเดตโค้ดแล้ว
5. อัปเดตโค้ดสำหรับโมเดลที่กำหนดเอง
ขั้นตอนแรกคือการเพิ่มโค้ดเพื่อโหลดโมเดลที่กำหนดเอง
- ในไฟล์
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)
คุณจะต้องแทนที่เพื่อใช้โมเดลที่กำหนดเอง
- ตั้งค่าออบเจ็กต์ตัวเลือกที่กำหนดเอง
val options = CustomImageLabelerOptions.Builder(localModel)
.setConfidenceThreshold(0.7f)
.setMaxResultCount(5)
.build()
ซึ่งจะแทนที่ตัวเลือกเริ่มต้นด้วยชุดตัวเลือกที่ปรับแต่งแล้ว เกณฑ์ความเชื่อมั่นจะกำหนดระดับคุณภาพของการคาดการณ์ที่จะแสดง หากย้อนกลับไปดูตัวอย่างที่ด้านบนของ Codelab นี้ ซึ่งเป็นรูปภาพดอกเดซี่ คุณจะเห็นการคาดการณ์ 4 รายการ โดยแต่ละรายการจะมีค่าอยู่ข้างๆ เช่น "ท้องฟ้า" มีค่าเป็น 0.7632
คุณสามารถกรองผลลัพธ์ที่มีคุณภาพต่ำออกได้อย่างมีประสิทธิภาพโดยใช้เกณฑ์ความเชื่อมั่นสูง เช่น การตั้งค่านี้เป็น 0.9 จะไม่แสดงป้ายกำกับที่มีลำดับความสำคัญต่ำกว่านั้น setMaxResultCount() มีประโยชน์ในโมเดลที่มีหลายคลาส แต่เนื่องจากโมเดลนี้มีเพียง 5 คลาส คุณจึงปล่อยให้เป็น 5 ได้
เมื่อมีตัวเลือกสำหรับเครื่องมือติดป้ายกำกับแล้ว คุณจะเปลี่ยนการเริ่มต้นของเครื่องมือติดป้ายกำกับเป็นดังนี้ได้
val labeler = ImageLabeling.getClient(options)
โค้ดส่วนที่เหลือจะทำงานโดยไม่ต้องแก้ไข ลองใช้เลย

ที่นี่คุณจะเห็นว่าตอนนี้ระบบระบุว่าดอกไม้นี้คือดอกเดซี่ที่มีความน่าจะเป็น 0 .959
สมมติว่าคุณเพิ่มรูปภาพดอกไม้รูปที่ 2 และเรียกใช้ซ้ำด้วยรูปภาพนั้น

โดยจะระบุว่าเป็นดอกกุหลาบ
คุณอาจสงสัยว่าทำไมถึงเป็น roses แทนที่จะเป็น "rose" เนื่องจากในชุดข้อมูล ป้ายกำกับจะกำหนดโดยชื่อโฟลเดอร์ และน่าเสียดายที่ชื่อโฟลเดอร์เหล่านั้นไม่สอดคล้องกันเล็กน้อย บางครั้งใช้เอกพจน์ (เช่น "เดซี่") และบางครั้งใช้พหูพจน์ (เช่น "กุหลาบ") อย่าสับสนกับโมเดลที่พยายามนับรายการในรูปภาพ เพราะโมเดลนี้มีความสามารถพื้นฐานกว่านั้นมาก และระบุได้เฉพาะประเภทดอกไม้เท่านั้น
6. ดาวน์โหลดแอปเริ่มต้นใช้งาน iOS
- ก่อนอื่น คุณจะต้องมีแอปจาก Codelab แรก หากคุณทำแล็บเสร็จแล้ว ระบบจะตั้งชื่อว่า ImageClassifierStep1 หากไม่ต้องการทำแล็บ คุณสามารถโคลนเวอร์ชันที่เสร็จสมบูรณ์แล้วจากที่เก็บ โปรดทราบว่าพ็อดและ .xcworkspace จะไม่อยู่ในที่เก็บ ดังนั้นก่อนที่จะไปยังขั้นตอนถัดไป โปรดเรียกใช้'pod install' จากไดเรกทอรีเดียวกับ .xcproject
- เปิด
ImageClassifierStep1.xcworkspaceใน Xcode โปรดทราบว่าคุณควรใช้ .xcworkspace ไม่ใช่ .xcproject เนื่องจากคุณได้รวม ML Kit โดยใช้พ็อด และพื้นที่ทำงานจะโหลดพ็อดเหล่านี้
สำหรับส่วนที่เหลือของแล็บนี้ ฉันจะเรียกใช้แอปในโปรแกรมจำลอง iPhone ซึ่งควรจะรองรับเป้าหมายการสร้างจากโค้ดแล็บ หากต้องการใช้อุปกรณ์ของคุณเอง คุณอาจต้องเปลี่ยนเป้าหมายบิลด์ในการตั้งค่าโปรเจ็กต์ให้ตรงกับเวอร์ชัน iOS
เรียกใช้ แล้วคุณจะเห็นผลลัพธ์คล้ายกับตัวอย่างต่อไปนี้

โปรดสังเกตการแยกประเภททั่วไปมาก เช่น กลีบดอก ดอกไม้ ท้องฟ้า โมเดลที่คุณสร้างใน Codelab ก่อนหน้าได้รับการฝึกให้ตรวจจับดอกไม้ 5 สายพันธุ์ ซึ่งรวมถึงดอกเดซี่
ใน Codelab ที่เหลือนี้ คุณจะได้ดูสิ่งที่ต้องทำเพื่ออัปเกรดแอปด้วยโมเดลที่กำหนดเอง
7. ใช้พ็อด Image Labeler ของ ML Kit ที่กำหนดเอง
แอปแรกใช้ไฟล์ Pod เพื่อรับไลบรารีและโมเดลพื้นฐานของเครื่องมือติดป้ายกำกับรูปภาพ ML Kit คุณจะต้องอัปเดตเพื่อใช้ไลบรารีการติดป้ายกำกับรูปภาพที่กำหนดเอง
- ค้นหาไฟล์ชื่อ
podfileในไดเรกทอรีโปรเจ็กต์ เปิดไฟล์ แล้วคุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้
platform :ios, '10.0'
target 'ImageClassifierStep1' do
pod 'GoogleMLKit/ImageLabeling'
end
- เปลี่ยนการประกาศพ็อดจาก
ImageLabelingเป็นImageLabelingCustomดังนี้
platform :ios, '10.0'
target 'ImageClassifierStep1' do
pod 'GoogleMLKit/ImageLabelingCustom'
end
- เมื่อเสร็จแล้ว ให้ใช้เทอร์มินัลเพื่อไปยังไดเรกทอรีที่มี Podfile (รวมถึง .xcworkspace) แล้วเรียกใช้
pod install

หลังจากนั้นไม่นาน ระบบจะนำไลบรารี MLKitImageLabeling ออกและเพิ่มไลบรารีที่กำหนดเอง ตอนนี้คุณสามารถเปิด .xcworkspace เพื่อแก้ไขโค้ดได้แล้ว
8. เพิ่มโมเดล TFLite ลงใน Xcode
ใน Codelab ก่อนหน้า คุณได้สร้างโมเดลที่กำหนดเองและดาวน์โหลดเป็น model.tflite หากคุณไม่มีข้อมูลนี้ ให้กลับไปเรียกใช้ Codelab นั้น หรือดูโค้ด Colab ที่นี่ หากไม่มีสิทธิ์เข้าถึง Google Colab คุณจะดูสมุดบันทึกได้ที่ลิงก์นี้
- เมื่อเปิดพื้นที่ทํางานใน Xcode แล้ว ให้ลากโมเดล.tflite ไปยังโปรเจ็กต์ โดยควรอยู่ในโฟลเดอร์เดียวกับไฟล์อื่นๆ เช่น
ViewController.swiftหรือMain.storyboard - กล่องโต้ตอบจะปรากฏขึ้นพร้อมตัวเลือกในการเพิ่มไฟล์ ตรวจสอบว่าได้เลือกเพิ่มไปยังเป้าหมายแล้ว มิเช่นนั้นระบบจะไม่รวมโมเดลกับแอปเมื่อมีการติดตั้งใช้งานในอุปกรณ์
โปรดทราบว่ารายการ "เพิ่มไปยังเป้าหมาย" จะมี ImageClassifierStep1 หากคุณเริ่มต้นจากรายการดังกล่าวและทำตามขั้นตอนใน Lab นี้ทีละขั้นตอน หรือ ImageClassifierStep2 (ดังที่แสดง) หากคุณข้ามไปยังโค้ดที่เสร็จสมบูรณ์แล้ว

ซึ่งจะช่วยให้คุณโหลดโมเดลได้ คุณจะเห็นวิธีทำในขั้นตอนถัดไป
9. อัปเดตโค้ดสำหรับโมเดลที่กำหนดเอง
- เปิดไฟล์
ViewController.swiftคุณอาจเห็นข้อผิดพลาดใน "import MLKitImageLabeling" ที่ด้านบนของไฟล์ เนื่องจากคุณนำไลบรารีการติดป้ายกำกับรูปภาพทั่วไปออกเมื่ออัปเดตไฟล์ Pod คุณสามารถลบบรรทัดนี้และอัปเดตด้วยข้อมูลต่อไปนี้
import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom
คุณอาจอ่านอย่างรวดเร็วและคิดว่าโค้ดเหล่านี้ซ้ำกัน แต่จะแสดง "ทั่วไป" และ "กำหนดเอง" ที่ด้านล่าง
- จากนั้นคุณจะโหลดโมเดลที่กำหนดเองซึ่งเพิ่มไว้ในขั้นตอนก่อนหน้า ค้นหา
getLabels()func ใต้บรรทัดที่ระบุว่า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!)
- ค้นหารหัสสำหรับการระบุตัวเลือกสำหรับ ImageLabeler ทั่วไป ซึ่งอาจทำให้คุณได้รับข้อผิดพลาดเนื่องจากระบบได้นำไลบรารีเหล่านั้นออกไปแล้ว
let options = ImageLabelerOptions()
แทนที่ด้วยโค้ดนี้เพื่อใช้ CustomImageLabelerOptions และระบุโมเดลในเครื่อง
let options = CustomImageLabelerOptions(localModel: localModel)
...แค่นี้ก็เรียบร้อย ลองเรียกใช้แอปเลย เมื่อคุณพยายามจัดประเภทรูปภาพ ระบบควรจะจัดประเภทได้แม่นยำยิ่งขึ้น และบอกคุณว่าคุณกำลังดูดอกเดซี่ที่มีความเป็นไปได้สูง

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

แอปตรวจพบว่ารูปภาพนี้ตรงกับป้ายกำกับ "กุหลาบ" สำเร็จแล้ว
10. ยินดีด้วย
ตอนนี้คุณได้เปลี่ยนจากการสร้างแอปที่ใช้โมเดลทั่วไปเพื่อจดจำเนื้อหาของรูปภาพ ไปเป็นการสร้างโมเดล ML ของคุณเองเพื่อจดจำสิ่งต่างๆ ที่เฉพาะเจาะจง เช่น ดอกไม้ แล้วอัปเดตแอปให้ใช้โมเดลที่กำหนดเอง
แน่นอนว่าแอปที่ได้นั้นมีข้อจำกัดมากเนื่องจากต้องอาศัยชิ้นงานรูปภาพที่รวมไว้ อย่างไรก็ตาม ส่วน ML ทำงานได้ดี เช่น คุณอาจใช้ AndroidX Camera เพื่อดึงเฟรมจากฟีดสดและจัดประเภทเพื่อดูว่าโทรศัพท์รู้จักดอกไม้อะไรบ้าง
จากนี้ไป คุณจะทำอะไรได้อีกมากมาย และหากมีข้อมูลของสิ่งอื่นที่ไม่ใช่ดอกไม้ คุณก็มีพื้นฐานที่จำเป็นในการสร้างแอปที่จดจำสิ่งเหล่านั้นได้โดยใช้คอมพิวเตอร์วิทัศน์ นี่เป็นเพียงไม่กี่ขั้นตอนแรกในโลกที่กว้างขึ้นมาก และหวังว่าคุณจะสนุกกับการทำตามขั้นตอนเหล่านี้