テキストと顔の特徴を認識する 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 Face Detection API を使用して画像内の顔の特徴を識別する

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

学習内容

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

必要なもの

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

この 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 がマシンにインストールされていない場合は、こちらのインストール手順をご覧ください here。インストールしたら、任意のエディタで Podfile を開き、ML Kit を依存関係として追加します。

Podfile

platform :ios, '10.0'
use_frameworks!

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

target 'MLKit-codelab' do
end

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

すべての依存関係がアプリで使用できるように、コマンドラインを使用して 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 で [Run] をクリックします。アプリが読み込まれたら、ピッカーで 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 で [Run] をクリックします。アプリが読み込まれたら、ピッカーで Image 2 が選択されていることを確認し、[Find Face Contour] ボタンをクリックします。アプリは次の画像のようになり、 Grace Hopper's の顔の輪郭が元の画像の上に重ねて表示されます。

お疲れさまでした。デバイス上の 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 Pods をインストールする

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

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

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

VisionTextRecognizer を作成する

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

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

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

5. デバイス上の顔の輪郭検出機能を追加する

FaceDetector を作成する

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

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

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

6. 完了

学習した内容

次のステップ

詳細

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