iOS上でCoreMLを使って手書き文字を生成するアプリを作成しました。

手書き文字の生成からアプリの公開までをまとめておきたいと思います。

使ったソフトウェア

Xcode 9.2 (9C40b)
Docker 17.09.1-ce
TensorFlow docker imagesha256:1bb38d61d261e5c9230a1e60b5d200088eb03014fdb35a91859fa55ea0d2c4d5, https://hub.docker.com/r/tensorflow/tensorflow
TensorFlow 1.2.1
Keras 2.0.6
coremltools 0.7

手書き文字画像の生成からiOS appのリリースまで

図1は手書き文字画像の生成からiOS appのリリースまでの手順を表しています。

the flow of distributing an app 図1. iOS appリリースまでの手順

DockerのインストールしてTensorFlowとKerasが動作するJupyter Notebookを用意する

Kerasモデルを作成するためにDockerをインストールします。

以下のコマンドを実行します。

$ docker run -d --name notebook tensorflow/tensorflow:latest

KerasとCoreML converterをインストールする

$ docker exec -it notebook /bin/bash
$ pip install -U keras
$ pip install -U coremltools

Jupyter Notebookにアクセスできることを確認する

Jupyter　NotebookにアクセスするためのURLを取得します。

$ docker logs notebook
# 以下のようなトークンがついたURLが表示されると思います
#
#    Copy/paste this URL into your browser when you connect for the first time,
#    to login with a token:
#        http://localhost:8888/?token=ecf1a2471670eb6863195ab530d6ac1d5cc27511faca0afe

上記のURLをブラウザで開くとアクセスできると思います。これでKerasのコードを書けるようになります。

Kerasモデルを作成する

Jupyter Notebookに新しいノートを追加してGANモデルのコードを書きます。GANのコードはこちらを参考にしました。このコードをコピーしてcellに貼り付けます。モデルをディレクトリにセーブするために以下のようにコードを追加します。

if __name__ == '__main__':
    gan = GAN()
    gan.train(epochs=30000, batch_size=32, save_interval=200)
    gan.discriminator.save('./discriminator.h5') // discriminatorモデルを保存するディレクトリを指定します
    gan.generator.save('./generator.h5')　// generatorモデルを保存するディレクトリを指定します

あとはcellを実行します。MacBook Pro 2016で実行した感じだと25分ほどかかりました。

このcellを実行すると学習済みモデルが指定のディレクトリに".h5"のファイルが保存されます。

KerasモデルをCoreMLモデルに変換する

$ coremlconverter --srcModelPath ./keras_model.h5 --dstModelPath ./coreml_model.mlmodel --inputNames gunInput --outputNames ganOutput

このコマンドでKerasのモデルをCoreMLのモデルにコンバートします。コンバートが完了すると".mlmodel"のCoreMLモデルファイルが生成されます。

手書き文字画像を生成するアプリを作成する

手書き文字画像を表示するにはWeb application、iOS、Androidや単純にJupyter Notebookを使う方法がありますが、iOSを触ってみたかったのでiOSにしました。

アプリを作成する

作成したアプリのソースコードはこちらで公開しています。

図2はアプリのスクリーンショットを示しています。

図2. アプリ (GANs generator)のスクリーンショット

このアプリはCoreMLを使用してKerasのモデルから28 x 28の手書き文字画像を生成します。手書き文字画像はUIKitを使用して表示します。また、手書き文字画像を再生成するボタンがあります。

手書き文字画像を生成する

最初にKerasモデルからコンバートしたCoreMLモデルをXcodeのプロジェクトにインポートします。図3のようになっていると思います。

図3. CoreMLモデルのプロパティ

Xcodeにモデルをインポートすると、モデルのクラスが自動的に生成されます。このクラスは手書き文字画像を生成するpredictionメソッドが実装されています。そして、predictionメソッドの第1引数にKerasモデルのinputが指定されます。第1引数のラベルにはCoreML converterの--inputNamesで指定した値が使用されます。この場合だとクラスのpredictionメソッドの第一引数のラベルをganInput、出力された手書き文字画像をganOutputとして定義しています。この定義は図3のように".mlmodel"ファイルのModel Evaluation ParametersのInputsとOutputsで確認することができます。

// Create a gan instance
var model = gan()
// Generate a handwritten image
var output = model.prediction()

// render hand-written image
let HIGHT = 27
let WIDTH = 27

for i in 0...HIGHT {
  for j in 0...WIDTH {
    //create the path
    let plusPath = UIBezierPath()

    //set the path's line width to the height of the stroke
    plusPath.lineWidth = Constants.plusLineWidth

    //move the initial point of the path
    //to the start of the horizontal stroke
    plusPath.move(to: CGPoint(
      x: CGFloat(j * 10),
      y: CGFloat(i * 10) + Constants.plusLineWidth / 2
    ))

    //add a point to the path at the end of the stroke
    plusPath.addLine(to: CGPoint(
      x: CGFloat((j * 10) + 10),
      y: CGFloat(i * 10) + Constants.plusLineWidth / 2
    ))

    //set the stroke color
    let index: [NSNumber] = [0 as NSNumber, i as NSNumber, j as NSNumber]
    UIColor(white: CGFloat(truncating: out.gan_out[index]), alpha: CGFloat(1)).setStroke()

    //draw the stroke
    plusPath.stroke()
  }
}

このプロジェクトをXcodeで開いてシミュレーターで確認することができます。

Apple Developer Programに登録する

アプリの動作を確認したら、App Storeにこのアプリを公開します。もし、Apple Developer Programに登録してなけらば、こちらで登録を済ませます。アプリをApp Storeに公開するにはApple Developer Programの登録が必要です。

App Storeに登録する

詳しくは公式ドキュメントを参照してください。

Archiving Product > Archive
Validating archivingが完了するとArchive organizerでValidateができるようになるのでApp Storeにアップロードする前に実行して、アプリに問題がないかチェックしておきます。
App Storeにアプリをアップロードする Upload to App Storeをクリックします

アプリを公開する