テキストと顔の特徴を認識する ML Kit: iOS

1. はじめに

ML Kit は、Google の機械学習の機能を Android アプリや iOS アプリとして提供するモバイル SDK です。その強力で使いやすいパッケージは、機械学習の経験の有無を問わず、わずか数行のコードで必要な機能を簡単に実装できます。ニューラルネットワークやモデルの最適化に関する詳しい知識は必要ありません。

仕組み

ML Kit を使用すると、Mobile Vision や TensorFlow Lite などの Google の ML テクノロジーを 1 つの SDK にまとめることで、ML テクノロジーをアプリに簡単に適用できます。Mobile Vision のオンデバイスモデルのリアルタイム機能のパワーが必要な場合でも、カスタム TensorFlow Lite 画像分類モデルの柔軟性が必要な場合でも、ML Kit を使用すると、わずか数行のコードで実現できます。

この Codelab では、画像内のテキストと顔の特徴を自動的に検出できる独自の iOS アプリを作成する手順を説明します。

作業内容

この Codelab では、ML Kit を使用して iOS アプリを作成します。作成するアプリの機能は次のとおりです。

ML Kit Text Recognition API を使用して画像内のテキストを検出する
ML Kit の顔検出 API を使用して画像内の顔の特徴を識別する

ML Kit の顔認識 API をデモする Grace Hopper の画像テキスト認識 API を示す草の上の標識の画像

学習内容

ML Kit SDK を使用して、テキスト認識や顔の特徴検出などの高度な機械学習機能を iOS アプリに簡単に追加する方法

必要なもの

最新バージョンの Xcode（v12.4 以降）
iOS 10.0 以上を搭載した iOS シミュレータまたは物理 iOS デバイス
ML Kit は、x86_64 と arm64 の 2 つの 64 ビットアーキテクチャのみをサポートしています。
サンプルコード
Swift での iOS 開発に関する基本的な知識
ML モデルの基本的な知識

この Codelab では、ML Kit を中心に説明します。関連のない概念やコードブロックについては詳しく触れず、コードはコピーして貼るだけの状態で提供されています。

2. 設定方法

コードをダウンロードする

次のリンクをクリックして、この Codelab のコードをすべてダウンロードします。

ダウンロードした zip ファイルを解凍すると、必要なすべてのリソースを含むルートフォルダ（mlkit-ios-codelab）が作成されます。この Codelab では、vision サブディレクトリ内のリソースのみが必要です。

mlkit-ios-codelab リポジトリの vision サブディレクトリには、次の 2 つのディレクトリが含まれています。

starter - この Codelab で作成する開始コード。
final - 完成したサンプルアプリのコード。

CocoaPods を使用して ML Kit の依存関係を追加する

CocoaPods は、ML Kit の依存関係をアプリに追加するために使用されます。CocoaPods がマシンにインストールされていない場合は、こちらでインストール手順をご確認ください。インストールが完了したら、お好みのエディタで Podfile を開き、ML Kit を依存関係として追加します。

Podfile

platform :ios, '10.0'
use_frameworks!

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

target 'MLKit-codelab' do
end

ML Kit Cocoa Pod をインストールする

アプリで依存関係をすべて使用できるようにするには、コマンドラインを使用して ML Kit Cocoa Pods をインストールする必要があります。

コマンドライン

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

3. スターターアプリを実行する

これで、アプリを初めて実行する準備が整いました。Xcode で実行をクリックして、アプリをコンパイルし、iOS シミュレータで実行します。

シミュレータでアプリが起動するはずです。この時点で、2 つの画像を選択できるピッカーを含む基本的なレイアウトが表示されます。次のセクションでは、アプリにテキスト認識を追加して、画像内のテキストを識別します。

4. デバイス上のテキスト認識を追加

このステップでは、画像内のテキストを認識する機能をアプリに追加します。

MLVision モジュールをインポートする

ViewController クラスに次のインポートが存在することを確認します。

ViewController.swift

import MLKit

VisionTextRecognizer を作成する

次の遅延プロパティを ViewController クラスに追加します。

ViewController.swift

private lazy var textRecognizer = TextRecognizer.textRecognizer()

画像でデバイス上のテキスト認識を設定して実行する

ViewController クラスの runTextRecognition メソッドに以下を追加します。

ViewController.swift

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

上記のコードは、テキスト認識検出器を構成し、レスポンスを使用して関数 processResult(from:, error:) を呼び出します。

テキスト認識レスポンスを処理する

ViewController クラスの processResult に次のコードを追加して、結果を解析し、アプリに表示します。

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)
        }
      }
    }
  }

シミュレータでアプリを実行する

Xcode で [実行] をクリックします。アプリが読み込まれたら、ピッカーで Image 1 が選択されていることを確認し、Find Text ボタンをクリックします。

アプリは次の画像のようになり、元の画像の上にテキスト認識の結果とバウンディングボックスが重ねて表示されます。

写真: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

おめでとうございます。ML Kit を使用して、アプリにオンデバイステキスト認識を追加しました。オンデバイステキスト認識は、アプリがインターネットに接続されていない場合でも動作し、静止画像やライブ動画フレームでも使用できるほど高速であるため、多くのユースケースで役立ちます。

5. デバイスでの顔輪郭検出を追加

このステップでは、画像内の顔の輪郭を検出する機能をアプリに追加します。

FaceDetector を作成する

次の遅延プロパティを ViewController クラスに追加します。

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)

画像でオンデバイスの顔の輪郭検出を設定して実行する

ViewController クラスの runFaceContourDetection メソッドに以下を追加します。

ViewController.swift

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

上記のコードは、テキスト認識検出器を構成し、レスポンスを使用して関数 processResult(from:, error:) を呼び出します。

顔検出器のレスポンスを処理する

ViewController クラスの processResult に次のコードを追加して、結果を解析し、アプリに表示します。

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)
    }
  }

最後に、ViewController クラスにヘルパーメソッド addContours を追加して、輪郭点を描画します。

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)
      }
    }
  }

シミュレータでアプリを実行する

Xcode で [実行] をクリックします。アプリが読み込まれたら、ピッカーで Image 2 が選択されていることを確認し、Find Face Contour ボタンをクリックします。アプリは下の図のようになり、元の画像の上に Grace Hopper の顔の輪郭が点として表示されます。

おめでとうございます。オンデバイス ML Kit を使用して、アプリにオンデバイスの顔の輪郭検出を追加しました。オンデバイス ML Kit の顔の輪郭検出は、アプリがインターネットに接続されていない場合でも動作し、静止画像やライブ動画のフレームでも使用できるほど高速であるため、多くのユースケースに最適です。

6. 完了

ML Kit を使用して、アプリに高度な機械学習機能を簡単に組み込むことができました。

学習した内容

iOS アプリに ML Kit を追加する方法
ML Kit のオンデバイステキスト認識を使用して画像内のテキストを見つける方法
ML Kit のデバイスでの顔認識を使用して画像内の顔の特徴を識別する方法

次のステップ

独自の iOS アプリで ML Kit を使用する。

詳細

https://g.co/mlkit

テキストと顔の特徴を認識する ML Kit: iOS

1. はじめに

仕組み

作業内容

学習内容

必要なもの

2. 設定方法

コードをダウンロードする

CocoaPods を使用して ML Kit の依存関係を追加する

ML Kit Cocoa Pod をインストールする

3. スターター アプリを実行する

4. デバイス上のテキスト認識を追加

MLVision モジュールをインポートする

VisionTextRecognizer を作成する

画像でデバイス上のテキスト認識を設定して実行する

テキスト認識レスポンスを処理する

シミュレータでアプリを実行する

5. デバイスでの顔輪郭検出を追加

FaceDetector を作成する

画像でオンデバイスの顔の輪郭検出を設定して実行する

顔検出器のレスポンスを処理する

シミュレータでアプリを実行する

6. 完了

学習した内容

次のステップ

詳細

3. スターターアプリを実行する