จดจำข้อความและลักษณะใบหน้าด้วย ML Kit: Android

1. บทนำ

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

หากพบปัญหา (ข้อบกพร่องของโค้ด ข้อผิดพลาดทางไวยากรณ์ คำที่ไม่ชัดเจน ฯลฯ) ขณะทำตาม Codelab นี้ โปรดรายงานปัญหาผ่านลิงก์รายงานข้อผิดพลาดที่มุมซ้ายล่างของ Codelab

หลักการทำงาน

ML Kit ช่วยให้คุณใช้เทคนิค ML ในแอปได้อย่างง่ายดายด้วยการนำเทคโนโลยี ML ของ Google เช่น Mobile Vision และ TensorFlow Lite มารวมกันไว้ใน SDK เดียว ไม่ว่าคุณจะต้องการความสามารถแบบเรียลไทม์ของโมเดลในอุปกรณ์ของ Mobile Vision หรือความยืดหยุ่นของโมเดล TensorFlow Lite ที่กำหนดเอง ML Kit ก็พร้อมให้บริการ

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

คุณเป็นนักพัฒนาแอป iOS ใช่ไหม ดู Codelab เวอร์ชันสำหรับ iOS โดยเฉพาะ

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

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

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

• วิธีใช้ SDK ของ ML Kit เพื่อเพิ่มความสามารถด้านแมชชีนเลิร์นนิงขั้นสูงได้อย่างง่ายดาย เช่น การจดจำข้อความและการตรวจหาฟีเจอร์ใบหน้า

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

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

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

2. การเริ่มตั้งค่า

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

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

ดาวน์โหลดซอร์สโค้ด

แตกไฟล์ ZIP ที่ดาวน์โหลด การดำเนินการนี้จะแตกโฟลเดอร์รูท (mlkit-android-master) พร้อมทรัพยากรทั้งหมดที่คุณต้องการ สำหรับโค้ดแล็บนี้ คุณจะต้องใช้เฉพาะทรัพยากรในไดเรกทอรีย่อย vision

vision ไดเรกทอรีย่อยในที่เก็บ mlkit-android-master มี 2 ไดเรกทอรี ดังนี้

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

3. ตรวจสอบทรัพยากร Dependency สำหรับ ML Kit

ยืนยันการอ้างอิงสำหรับ ML Kit

ควรเพิ่มบรรทัดต่อไปนี้ที่ส่วนท้ายของไฟล์ build.gradle ในไดเรกทอรี app ของโปรเจ็กต์ (ตรวจสอบเพื่อยืนยัน)

build.gradle

dependencies {
  // Face features
  implementation 'com.google.mlkit:face-detection:16.0.0'

  // Text features
  implementation 'com.google.android.gms:play-services-mlkit-text-recognition:16.0.0'
}

การขึ้นต่อกันของ ML Kit เหล่านี้เป็นสิ่งที่คุณต้องใช้เพื่อติดตั้งใช้งานฟีเจอร์ในโค้ดแล็บนี้

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

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

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

5. เพิ่มการจดจำข้อความในอุปกรณ์

ในขั้นตอนนี้ เราจะเพิ่มฟังก์ชันการทำงานลงในแอปเพื่อจดจำข้อความในรูปภาพ

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

เพิ่มรายการต่อไปนี้ลงในrunTextRecognitionเมธอดของMainActivityคลาส

MainActivity.java

private void runTextRecognition() {
   InputImage image = InputImage.fromBitmap(mSelectedImage, 0);
   TextRecognizer recognizer = TextRecognition.getClient();
   mTextButton.setEnabled(false);
   recognizer.process(image)
           .addOnSuccessListener(
                   new OnSuccessListener<Text>() {
                       @Override
                       public void onSuccess(Text texts) {
                           mTextButton.setEnabled(true);
                           processTextRecognitionResult(texts);
                       }
                   })
           .addOnFailureListener(
                   new OnFailureListener() {
                       @Override
                       public void onFailure(@NonNull Exception e) {
                           // Task failed with an exception
                           mTextButton.setEnabled(true);
                           e.printStackTrace();
                       }
                   });
}

โค้ดด้านบนจะกำหนดค่าเครื่องตรวจหาการจดจำข้อความและเรียกใช้ฟังก์ชัน processTextRecognitionResult พร้อมการตอบกลับ

ประมวลผลการตอบกลับการจดจำข้อความ

เพิ่มโค้ดต่อไปนี้ลงใน processTextRecognitionResult ในคลาส MainActivity เพื่อแยกวิเคราะห์ผลลัพธ์และแสดงในแอป

MainActivity.java

private void processTextRecognitionResult(Text texts) {
   List<Text.TextBlock> blocks = texts.getTextBlocks();
   if (blocks.size() == 0) {
       showToast("No text found");
       return;
   }
   mGraphicOverlay.clear();
   for (int i = 0; i < blocks.size(); i++) {
       List<Text.Line> lines = blocks.get(i).getLines();
       for (int j = 0; j < lines.size(); j++) {
           List<Text.Element> elements = lines.get(j).getElements();
           for (int k = 0; k < elements.size(); k++) {
               Graphic textGraphic = new TextGraphic(mGraphicOverlay, elements.get(k));
               mGraphicOverlay.add(textGraphic);

           }
       }
   }
}

เรียกใช้แอปในโปรแกรมจำลอง

ตอนนี้คลิกเรียกใช้ ( ) ในแถบเครื่องมือ Android Studio เมื่อแอปโหลดแล้ว ให้ตรวจสอบว่าได้เลือก Test Image 1(Text) ในช่องเมนูแบบเลื่อนลง แล้วคลิกปุ่ม FIND TEXT

ตอนนี้แอปของคุณควรมีลักษณะเหมือนรูปภาพด้านล่าง ซึ่งแสดงผลการจดจำข้อความและกรอบล้อมรอบที่ซ้อนทับอยู่บนรูปภาพต้นฉบับ

ภาพ: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

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

6. เพิ่มการตรวจจับเส้นโครงใบหน้าในอุปกรณ์

ในขั้นตอนนี้ เราจะเพิ่มฟังก์ชันการทำงานลงในแอปเพื่อจดจำเส้นขอบของใบหน้าในรูปภาพ

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

เพิ่มรายการต่อไปนี้ลงในrunFaceContourDetectionเมธอดของMainActivityคลาส

MainActivity.java

private void runFaceContourDetection() {
   InputImage image = InputImage.fromBitmap(mSelectedImage, 0);
   FaceDetectorOptions options =
           new FaceDetectorOptions.Builder()
                   .setPerformanceMode(FaceDetectorOptions.PERFORMANCE_MODE_FAST)
                   .setContourMode(FaceDetectorOptions.CONTOUR_MODE_ALL)
                   .build();

   mFaceButton.setEnabled(false);
   FaceDetector detector = FaceDetection.getClient(options);
   detector.process(image)
           .addOnSuccessListener(
                   new OnSuccessListener<List<Face>>() {
                       @Override
                       public void onSuccess(List<Face> faces) {
                           mFaceButton.setEnabled(true);
                           processFaceContourDetectionResult(faces);
                       }
                   })
           .addOnFailureListener(
                   new OnFailureListener() {
                       @Override
                       public void onFailure(@NonNull Exception e) {
                           // Task failed with an exception
                           mFaceButton.setEnabled(true);
                           e.printStackTrace();
                       }
                   });

}

โค้ดด้านบนจะกำหนดค่าเครื่องตรวจจับเส้นขอบใบหน้าและเรียกใช้ฟังก์ชัน processFaceContourDetectionResult พร้อมการตอบกลับ

ประมวลผลการตอบกลับการตรวจจับเส้นขอบใบหน้า

เพิ่มโค้ดต่อไปนี้ลงใน processFaceContourDetectionResult ในคลาส MainActivity เพื่อแยกวิเคราะห์ผลลัพธ์และแสดงในแอป

MainActivity.java

private void processFaceContourDetectionResult(List<Face> faces) {
   // Task completed successfully
   if (faces.size() == 0) {
       showToast("No face found");
       return;
   }
   mGraphicOverlay.clear();
   for (int i = 0; i < faces.size(); ++i) {
       Face face = faces.get(i);
       FaceContourGraphic faceGraphic = new FaceContourGraphic(mGraphicOverlay);
       mGraphicOverlay.add(faceGraphic);
       faceGraphic.updateFace(face);
   }
}

เรียกใช้แอปในโปรแกรมจำลอง

ตอนนี้คลิกเรียกใช้ ( ) ในแถบเครื่องมือ Android Studio เมื่อแอปโหลดแล้ว ให้ตรวจสอบว่าได้เลือก Test Image 2 (Face) ในช่องเมนูแบบเลื่อนลง แล้วคลิกปุ่ม FIND FACE CONTOUR

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

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

7. ยินดีด้วย

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

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

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

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

• ใช้ ML Kit ในแอป Android ของคุณเอง

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

• https://developers.google.com/ml-kit