Mengenali fitur teks dan wajah ML Kit: iOS

1. Pengantar

ML Kit adalah SDK seluler yang menghadirkan keahlian machine learning Google untuk aplikasi Android dan iOS dalam paket yang andal dan mudah digunakan. Sebagai pengguna machine learning, baik pemula maupun berpengalaman, Anda dapat menerapkan fungsionalitas yang diperlukan dengan mudah hanya dalam beberapa baris kode. Anda 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, semua dalam satu SDK. Baik Anda memerlukan kemampuan real-time model di perangkat Mobile Vision, atau fleksibilitas model klasifikasi gambar TensorFlow Lite kustom, ML Kit memungkinkan hal ini hanya dengan beberapa baris kode.

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

Yang akan Anda buat

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

  • Menggunakan ML Kit Text Recognition API untuk mendeteksi teks dalam gambar
  • Menggunakan API Deteksi Wajah ML Kit untuk mengidentifikasi fitur wajah dalam gambar

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

Yang akan Anda pelajari

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

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 ini: 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 butuhkan. Untuk codelab ini, Anda hanya memerlukan resource di subdirektori vision.

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

  • android_studio_folder.pngstarter—Kode awal yang Anda buat dalam codelab ini.
  • android_studio_folder.pngfinal—Kode lengkap untuk aplikasi contoh yang sudah selesai.

Tambahkan dependensi untuk ML Kit dengan CocoaPods

CocoaPods digunakan untuk menambahkan dependensi ML Kit ke aplikasi Anda. Jika Anda belum menginstal CocoaPods di komputer, 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

Instal Pod Cocoa ML Kit

Untuk memastikan semua dependensi tersedia untuk aplikasi Anda, Anda harus menggunakan 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.pngRun di Xcode untuk mengompilasi aplikasi dan menjalankannya di iOS Simulator.

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

4. Menambahkan pengenalan teks di perangkat

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

Mengimpor modul MLVision

Pastikan impor berikut ada di class ViewController Anda.

ViewController.swift

import MLKit

Membuat VisionTextRecognizer

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 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 di simulator

Sekarang klik 98205811bbed9d74.pngRun di Xcode. Setelah aplikasi dimuat, pastikan Image 1 dipilih di pemilih, lalu klik tombol Find Text.

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

7269fd8fcb4dc793.png

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

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

5. Menambahkan 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 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 detektor 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 bantuan 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)
      }
    }
  }

Jalankan aplikasi di simulator

Sekarang klik 98205811bbed9d74.pngRun di Xcode. Setelah aplikasi dimuat, pastikan Image 2 dipilih di pemilih, lalu klik tombol Find Face Contour. Aplikasi Anda sekarang akan terlihat seperti gambar di bawah, yang menampilkan kontur wajah Grace Hopper sebagai titik-titik yang ditumpuk 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 sangat cocok untuk banyak kasus penggunaan karena berfungsi meskipun aplikasi Anda 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 tingkat lanjut ke aplikasi Anda dengan mudah.

Yang telah kita bahas

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

Langkah Berikutnya

  • Gunakan ML Kit di aplikasi iOS Anda sendiri.

Pelajari Lebih Lanjut

  • https://g.co/mlkit