Mengenali fitur teks dan wajah ML Kit: iOS

1. Pengantar

ML Kit adalah SDK seluler yang menghadirkan keahlian machine learning Google ke aplikasi Android dan iOS dalam paket yang canggih dan mudah digunakan. Baik sebagai pemula atau berpengalaman dalam machine learning, Anda dapat dengan mudah mengimplementasikan fungsi yang diperlukan hanya dalam beberapa baris kode. Tidak perlu memiliki pengetahuan mendalam tentang jaringan neural atau pengoptimalan model untuk memulai.

Bagaimana cara kerjanya?

ML Kit memudahkan penerapan teknik ML di aplikasi Anda dengan menyatukan teknologi ML Google, seperti Mobile Vision dan TensorFlow Lite, bersama-sama dalam satu SDK. Baik Anda memerlukan kecanggihan kemampuan real-time model di perangkat Mobile Vision, atau fleksibilitas model klasifikasi gambar TensorFlow Lite kustom, ML Kit memungkinkannya hanya dengan beberapa baris kode.

Codelab ini akan memandu Anda membuat aplikasi iOS sendiri yang dapat otomatis mendeteksi fitur teks dan wajah dalam gambar.

Yang akan Anda buat

Dalam codelab ini, Anda akan membangun aplikasi iOS dengan ML Kit. Aplikasi Anda akan:

  • Menggunakan Text Recognition API ML Kit untuk mendeteksi teks dalam gambar
  • Menggunakan ML Kit Face Detection API untuk mengidentifikasi fitur wajah pada gambar

Gambar Grace Hopper mendemonstrasikan ML KIt Face Recognition APIGambar tanda di atas rumput yang menunjukkan API pengenalan teks

Yang akan Anda pelajari

  • Cara menggunakan ML Kit SDK untuk menambahkan kemampuan Machine Learning lanjutan dengan mudah seperti pengenalan teks, deteksi fitur wajah ke aplikasi iOS apa pun

Yang Anda butuhkan

  • Xcode versi terbaru (v12.4+)
  • Simulator iOS atau perangkat iOS fisik yang menjalankan iOS 10.0+
  • ML Kit hanya mendukung dua arsitektur 64-bit berikut: x86_64 dan arm64
  • Kode contoh
  • Pengetahuan dasar tentang pengembangan iOS di Swift
  • Pemahaman dasar tentang model machine learning

Codelab ini berfokus pada ML Kit. Konsep dan blok kode yang tidak relevan akan dibahas sekilas dan disediakan, jadi Anda cukup menyalin dan menempelkannya.

2. Mempersiapkan

Download Kode

Klik link berikut untuk mendownload semua kode untuk codelab ini:

Ekstrak file ZIP yang didownload. Tindakan ini akan membuat folder root (mlkit-ios-codelab) dengan semua resource yang Anda perlukan. Untuk codelab ini, Anda hanya memerlukan resource di subdirektori vision.

Subdirektori vision di repositori mlkit-ios-codelab berisi dua direktori:

  • android_studio_folder.pngstarter—Memulai kode yang Anda bangun di codelab ini.
  • android_studio_folder.pngfinal—Kode lengkap untuk aplikasi contoh yang telah selesai.

Menambahkan dependensi untuk ML Kit dengan CocoaPods

CocoaPods digunakan untuk menambahkan dependensi ML Kit ke aplikasi Anda. Jika Anda belum menginstal CocoaPods di komputer Anda, temukan petunjuk penginstalannya di sini. Setelah diinstal, buka Podfile di editor favorit Anda dan tambahkan ML Kit sebagai dependensi:

Podfile

platform :ios, '10.0'
use_frameworks!

pod 'GoogleMLKit/FaceDetection'
pod 'GoogleMLKit/TextRecognition'

target 'MLKit-codelab' do
end

Menginstal Pod ML Kit Cocoa

Untuk memastikan bahwa semua dependensi tersedia untuk aplikasi Anda, gunakan command line untuk menginstal ML Kit Cocoa Pods.

Command Line

# Make sure you are in the root of your app
pod install
xed .

3. Menjalankan aplikasi awal

Sekarang Anda siap menjalankan aplikasi untuk pertama kalinya. Klik 98205811bbed9d74.pngSRun di Xcode untuk mengompilasi aplikasi dan menjalankannya di Simulator iOS.

Aplikasi akan diluncurkan pada simulator Anda. Pada tahap ini, Anda akan melihat tata letak dasar yang memiliki pemilih sehingga Anda dapat memilih di antara 2 gambar. Di bagian berikutnya, Anda akan menambahkan pengenalan teks ke aplikasi untuk mengidentifikasi teks dalam gambar.

4. Tambahkan pengenalan teks di perangkat

Pada langkah ini, kita akan menambahkan fungsi ke aplikasi Anda untuk mengenali teks dalam gambar.

Mengimpor modul MLVision

Pastikan bahwa impor berikut ke class ViewController Anda sudah ada.

ViewController.swift

import MLKit

Membuat VisionTextKenalir

Tambahkan properti lambat berikut ke class ViewController Anda.

ViewController.swift

private lazy var textRecognizer = TextRecognizer.textRecognizer()

Menyiapkan dan menjalankan pengenalan teks di perangkat pada gambar

Tambahkan kode berikut ke metode runTextRecognition dari class ViewController:

ViewController.swift

func runTextRecognition(with image: UIImage) {
  let visionImage = VisionImage(image: image)
  textRecognizer.process(visionImage) { features, error in
    self.processResult(from: features, error: error)
  }
}

Kode di atas mengonfigurasi detektor pengenalan teks dan memanggil fungsi processResult(from:, error:) dengan respons.

Memproses respons pengenalan teks

Tambahkan kode berikut ke processResult di class ViewController untuk mengurai hasil dan menampilkannya di aplikasi Anda.

ViewController.swift

 func processResult(from text: Text?, error: Error?) {
    removeDetectionAnnotations()
    guard error == nil, let text = text else {
      let errorString = error?.localizedDescription ?? Constants.detectionNoResultsMessage
      print("Text recognizer failed with error: \(errorString)")
      return
    }

    let transform = self.transformMatrix()

    // Blocks.
    for block in text.blocks {
      drawFrame(block.frame, in: .purple, transform: transform)

      // Lines.
      for line in block.lines {
        drawFrame(line.frame, in: .orange, transform: transform)

        // Elements.
        for element in line.elements {
          drawFrame(element.frame, in: .green, transform: transform)

          let transformedRect = element.frame.applying(transform)
          let label = UILabel(frame: transformedRect)
          label.text = element.text
          label.adjustsFontSizeToFitWidth = true
          self.annotationOverlayView.addSubview(label)
        }
      }
    }
  }

Menjalankan aplikasi pada simulator

Sekarang, klik 98205811bbed9d74.pngSRun di Xcode. Setelah aplikasi dimuat, pastikan Image 1 dipilih di alat pilih dan klik tombol Find Text.

Sekarang aplikasi Anda akan terlihat seperti gambar di bawah ini, yang menampilkan hasil pengenalan teks dan kotak pembatas yang ditempatkan di atas gambar asli.

7269fd8fcb4dc793.pngS

Foto: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

Selamat, Anda baru saja menambahkan pengenalan teks di perangkat ke aplikasi Anda menggunakan ML Kit! Pengenalan teks di perangkat sangat cocok untuk banyak kasus penggunaan karena berfungsi bahkan saat aplikasi tidak memiliki konektivitas internet dan cukup cepat untuk digunakan pada gambar diam serta frame video live.

5. Tambahkan deteksi kontur wajah di perangkat

Pada langkah ini, kita akan menambahkan fungsi ke aplikasi Anda untuk mendeteksi kontur wajah dalam gambar.

Membuat FaceDetector

Tambahkan properti lambat berikut ke class ViewController Anda.

ViewController.swift

private lazy var faceDetectorOption: FaceDetectorOptions = {
  let option = FaceDetectorOptions()
  option.contourMode = .all
  option.performanceMode = .fast
  return option
}()
private lazy var faceDetector = FaceDetector.faceDetector(options: faceDetectorOption)

Menyiapkan dan menjalankan deteksi kontur wajah di perangkat pada gambar

Tambahkan kode berikut ke metode runFaceContourDetection dari class ViewController:

ViewController.swift

  func runFaceContourDetection(with image: UIImage) {
    let visionImage = VisionImage(image: image)
    faceDetector.process(visionImage) { features, error in
      self.processResult(from: features, error: error)
    }
  }

Kode di atas mengonfigurasi detektor pengenalan teks dan memanggil fungsi processResult(from:, error:) dengan respons.

Memproses respons pendeteksi wajah

Tambahkan kode berikut ke processResult di class ViewController untuk mengurai hasil dan menampilkannya di aplikasi Anda.

ViewController.swift

  func processResult(from faces: [Face]?, error: Error?) {
    removeDetectionAnnotations()
    guard let faces = faces else {
      return
    }

    for feature in faces {
      let transform = self.transformMatrix()
      let transformedRect = feature.frame.applying(transform)
      UIUtilities.addRectangle(
        transformedRect,
        to: self.annotationOverlayView,
        color: UIColor.green
      )
      self.addContours(forFace: feature, transform: transform)
    }
  }

Terakhir, tambahkan metode helper addContours di class ViewController untuk menggambar titik kontur.

ViewController.swift

 private func addContours(forFace face: Face, transform: CGAffineTransform) {
    // Face
    if let faceContour = face.contour(ofType: .face) {
      for point in faceContour.points {
        drawPoint(point, in: .blue, transform: transform)
      }
    }

    // Eyebrows
    if let topLeftEyebrowContour = face.contour(ofType: .leftEyebrowTop) {
      for point in topLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomLeftEyebrowContour = face.contour(ofType: .leftEyebrowBottom) {
      for point in bottomLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let topRightEyebrowContour = face.contour(ofType: .rightEyebrowTop) {
      for point in topRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomRightEyebrowContour = face.contour(ofType: .rightEyebrowBottom) {
      for point in bottomRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }

    // Eyes
    if let leftEyeContour = face.contour(ofType: .leftEye) {
      for point in leftEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }
    if let rightEyeContour = face.contour(ofType: .rightEye) {
      for point in rightEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }

    // Lips
    if let topUpperLipContour = face.contour(ofType: .upperLipTop) {
      for point in topUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomUpperLipContour = face.contour(ofType: .upperLipBottom) {
      for point in bottomUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let topLowerLipContour = face.contour(ofType: .lowerLipTop) {
      for point in topLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomLowerLipContour = face.contour(ofType: .lowerLipBottom) {
      for point in bottomLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }

    // Nose
    if let noseBridgeContour = face.contour(ofType: .noseBridge) {
      for point in noseBridgeContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
    if let noseBottomContour = face.contour(ofType: .noseBottom) {
      for point in noseBottomContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
  }

Menjalankan aplikasi di simulator

Sekarang, klik 98205811bbed9d74.pngSRun di Xcode. Setelah aplikasi dimuat, pastikan Image 2 dipilih di alat pilih dan klik tombol Find Face Contour. Sekarang aplikasi Anda akan terlihat seperti gambar di bawah, yang menampilkan kontur wajah Grace Hopper sebagai titik-titik yang ditempatkan di atas gambar asli.

a5169b50dafbcb2f.png

Selamat, Anda baru saja menambahkan deteksi kontur wajah di perangkat ke aplikasi menggunakan Deteksi kontur wajah ML Kit di Perangkat yang sangat bagus untuk banyak kasus penggunaan karena fitur ini berfungsi bahkan saat aplikasi tidak memiliki konektivitas internet dan cukup cepat untuk digunakan pada gambar diam serta frame video live.

6. Selamat!

Anda telah menggunakan ML Kit untuk menambahkan kemampuan machine learning canggih ke aplikasi Anda dengan mudah.

Yang telah kita bahas

  • Cara menambahkan ML Kit ke aplikasi iOS Anda
  • Cara menggunakan pengenalan teks di perangkat pada ML Kit untuk menemukan teks dalam gambar
  • Cara menggunakan pengenalan wajah di perangkat pada ML Kit untuk mengidentifikasi fitur wajah pada gambar

Langkah Berikutnya

  • Menggunakan ML Kit di aplikasi iOS Anda sendiri.

Pelajari Lebih Lanjut

  • https://g.co/mlkit