Core MLとARKitを使用して優れたAppを作成する

(音楽)

(拍手) おはようございます ご来場ありがとうございます

Appleでは 技術を開発しています アプリケーションで 最高の体験を提供するためです

私のお気に入りは 技術を融合させ 体験に没入できる アプリケーションです

本日はそんな技術を ２つご紹介します Core MLとARKit

どちらもデバイスによる 周囲の世界の認識を高める技術です

現実と仮想の世界の 融合に役立ちます

本日はそんなアプリケーションを 構築する旅に出ましょう 直面した困難と その解決方法も紹介します

困難から生じた課題も 取り上げます

最初の問いは 機械学習の有用性です

答えがノーなら 短いセッションになるでしょう

安易にイエスとも言えません 解決するべき問題の種類と 手持ちのデータで 答えは変わってくるからです

機械学習のカギは データの理解です プログラムでは書くことが困難な データのパターンを理解することです データは アプリケーション内にあります ユーザが日々 入力するものです

キーボードで文章を入力し

マイクで音声を録音します

そしてカメラで動画と画像を キャプチャします

問題に直面した時に 機械学習は役に立つかもしれません 解決へ向け 問題の性質と 使えるデータを確認してください

本日 取り上げる第２のテーマは モデルの挙動の理解です

モデルは特定の形式の 入力を予想して 特定の形式で出力するよう 作られています

入力の形式が モデルの想定したものでなければ 出力も想定外になります

出力に関しては モデルの挙動を理解しない限り アプリケーションでの すばらしい体験の提供は困難です

入力と出力を可視化する方法を この後 紹介します 今は私たちの旅を 続けましょう 技術を組み合わせて 仮想と現実の世界を融合します それができるのが アプリケーションです

楽しい教育アプリケーションを 構築します 数を数え 計算する数学のスキルを 子どもが練習するものです

時として子どもは サイコロを計算の練習に使います 単に仮想のサイコロを 画面上で転がすだけではつまらない 実物のサイコロを使えば より楽しいと考えました 実物を転がして アプリケーションと連携させます

その方法を考えました

最初に直面した課題は―

サイコロを認識させる手段

やり方はいくつかありました まずプログラムを使う方法

少し複雑になります

６面のサイコロに限定すれば その特徴が見えてきます 例えば背後に出ている サイコロは灰色です

サイコロは 常に灰色ではないので 役に立つ情報ではありません

平面として捉えた場合― ６角形で歪んだ正方形が ３つ見えます

テーブル上を転がると 移動して変化します

各面に注目すると 複数の点が見えます しかし見ている面や 自らの位置により 点の数は変わります このように特徴が変化するため サイコロを認識する プログラムを書くことは難しいです

そこで 機械学習を用いてみましょう

画像分類モデルに 学習させることで サイコロを画像で認識します

知りたいのは 画像内のサイコロの数です 単にその存在を 知りたいのではありません そこで物体検出モデルを用います 物体検出モデルは サイコロの存在だけでなく サイコロの位置も示します 位置が分かれば 数を把握できます

これにはデータが必要です テーブル上を転がる サイコロの画像を数多く撮りました

次に画像を境界ボックスで囲み 画像内のサイコロの位置を示します

新しいCreate MLを使い― カスタム物体検出モデルに 学習させます

もっと知りたい方は Create ML for Object Detection and Sound Classificationをご覧ください

では スコットに 実演してもらいます スコット (拍手) おはようございます おはよう！ (笑い声) 物体検出という 機械学習の技術を使って サイコロを数える能力を 追加する方法を見せます さっそく実演に 取りかかりましょう

ライブカメラの映像に接続した アプリケーションがあります サイコロを検出し 数を数える機能を追加しました サイコロを 画面に入れてみましょう １つ ２つ

３つ

４つ 転がすこともできます

すごいでしょう 物体検出を使って サイコロを数えます 本日はモデルの挙動の理解について お話しします モデルが見ている映像の デバッグ表示を見てみましょう 検出された物体を 境界ボックスで囲みます テーブル上のサイコロです サイコロを動かすと 境界ボックスも動きます

これは重要な点です 物体検出機能の学習を 始めたばかりの時は 検出対象以外の物体が 囲まれることや― 検出の対象が 囲まれない場合があります そんな時こそ より多くのデータを集めるのです 背景を変えて データを収集したり 照明や物体の数を 変えたりします サイコロの数を 10個まで増やしたり 逆に減らしたり サイコロなしの画像で 他の対象を無視させることも

これを行うコードを 見てみましょう

VisionフレームワークのCreate MLで 作成した物体検出機能を使うと VNRecognizedObjectObservationの リストが返ってきます これらのobservationを処理し ２つのことを行う関数があります １つ目は最も簡単 サイコロを数えます サイコロと同数の observationを数えるだけ

次は認識された物体の observationに基づき 境界ボックスを画面に描く ２つのヘルパー関数です

１つ目の関数は各observationの 境界をマッピングします observationは入力画像に基づき 正規座標として与えられます この関数でView Controllerの 視点座標系にマッピングし直すことで 境界ボックスを画面に描き 実際の対象物に重ねられます

次のヘルパー関数は画面に表示する 角丸長方形を作ります CALayerです それをOverlayLayerに加え 画面上に描きます 本セッションの サンプルアプリケーションとして コードは入手可能です

頼もしいアプリケーションです 物体検出で サイコロを数えられます 既にお気づきかもしれませんが サイコロの数は ゲームで重要ではありません 肝心なのはサイコロが示す数字 そこで一歩先に進み サイコロの目を認識する方法を 考えましょう

これがアプリケーションの ゴールです 右側のサイコロの目が５で 左側が１だと認識させたい

幸いにも 物体検出機能は 検出だけでなく分類もできます 違った種類の物体や画像を 認識できるからです そこで学習データを アップデートし サイコロの目によって分類しました ご覧のとおりです

実用性がありそうなので アプリケーションに使ってみました 実際の使用例を見てみましょう

大半の場合 成功でした ご覧のとおり― 左側のサイコロは正しく検出され 正確に分類されました

しかし反対側に注目すると ６と４は１つのサイコロとして 検出されています

何が起きたかというと ２つの別のサイコロとして 見分けられていないのです ４の手前に 別のサイコロがあるせいです 検討の結果 気づいたことがあります 重要な上の面は 常に画面に映っているのです そこでモデルを少し修正しました 上の面に注目するよう 学習データをアップデートしました 物体検出機能に学習をさせ サイコロではなく 上の面を検出させます その結果をお見せします

モデルは先ほどと同じサイコロを 正確に推測し 分類しています さらに右側のサイコロも 正しく検出されています

もう１点 お話ししましょう

開発の途中 こんな誤作動が起こりました サイコロの左側ばかり 一貫して検出されています 最初は戸惑いましたが 画像を回転してみると モデルが誤認した理由が判明しました モデルの入力を見ると すぐに気づきました 画像の向きを デバイスに合わせていませんでした Visionのタスクによくある問題です モデルの出力に妙な点があれば 入力を確認しましょう 画像の向きをデバイスに合わせるだけで 解決する場合もあります

新しいモデルを使ってみます

同じアプリケーションですが サイコロの検出と分類ができるように アップデートしました

サイコロは３つ使います モデルは６と５と２を推測しています 転がしてみましょう

４ ６ ５ 見事に実用できそうです (拍手) 注目していただきたい 重要な点があります サイコロを動かすと リストが更新されます テーブルにサイコロが並んだ順に 数値のリストを表示しています デザインの細かい点ですが 体験に一貫性を与えます テーブル上のサイコロと 同じ順番で見えるからです 仮想と現実世界を 融合しているので ユーザにはこのように 一貫性のある形で 推測を示すようにしています もう１点 検討が必要です いつサイコロが止まるか？ ゲームで重要なのは 転がっている最中ではなく 止まった時のサイコロの目です ゲームではサイコロを転がし その結果に基づき 駒の動きや判断が決まります アニメーションを用いたり ユーザへのフィードバックが必要です 実演で気づいたでしょうが 数字はサイコロが 止まった時に出ます では そのやり方は？ まずは何を観察するか考えましょう

この場合 サイコロが止まった時― カメラフレーム間で 数値の変化はありません 機械学習が使えるでしょうか？ フレームを読み込み 止まった時間を 判定する逐次モデルの構築も可能です でもモデルはサイコロを 既に理解しています 必要なのは出力の解釈です

コードの書き方を見てみましょう

ObjectObservationのリストを ２つ受け取る関数があります 現在と直前の カメラフレームのリストです サイコロの停止を判定する 要素が数点あります まず サイコロの数は同数か？ サイコロがフレームに入ってきて 数が増えることや サイコロが跳ねて 検出されないこともあります

サイコロの数が違えば 転がっている最中です

次に現在と 直前の推測結果を比べます 上面の数字が同じでなければ サイコロはまだ動いています

境界ボックスが85％を超えて 重なっているかも確認します 比較対象の境界ボックスが 重なっていない場合― ２つの異なるサイコロであるか 同一のサイコロが 大きく動いたという意味です 条件に合致した数がサイコロの数と 同じなら停止しています

アプリケーションは― サイコロの検出や数の計算 認識が可能になりました またサイコロの停止も理解でき さらなる開発の基礎が整いました 私たちの旅の次なるステップです 再びブレントに 登壇してもらいましょう (拍手) ありがとう　スコット

さて アプリケーションはテーブル上の サイコロを認識できます 次はユーザの入力を どう扱うかです

数学の練習アプリケーションなので ユーザは数字を入力します 画面にテンキーを表示して 入力してもらうことも可能ですが より自然にアプリケーションと やりとりしてもらいたい ここでのユーザは子どもです 子どもは 数字を書く練習もします そこで数字を直接 画面に書くことを考えました

アプリケーションは手書きの数字を 認識する必要があります 幸いにも機械学習は この点に関して優秀です 手書きの数字をモデルに教えられる データセットが使えます 名前はMNIST それを使ったモデルを Core MLモデルのページに載せました コードを読み 使い方を確認しましょう 使うのはVisionとPencilKit

Visionの設定をして Core MLモデルを使います ここではMNISTClassifierです

次にPencilKitのcanvasViewから 画像を取得します

次にリクエストハンドラを設定し 画像を使います

そしてリクエストを実行し 結果を得ます 簡単でしょう

モデルに組み込んだところ うまく作動しています 多くの手書き数字を認識できました

さらに大きい数字を書くと 興味深い点に気づきました モデルは時々 推測を誤ります 何が起きているのでしょう？

モデルに入力される 画像の確認が必要です

Xcodeで それができます PencilKitから画像を取得するところに ブレークポイントを設定します Xcodeのクイックビューで 画像を見ます

興味深い点に気づきました ７の例がモデルには ７のように見えていません むしろ １に見えます

その原因は？

モデルが想定する入力を 考えましょう

モデルは28×28ピクセルの 画像を想定しています 画面上の画像は それより大きいです

画像を正しく認識できるように 縮小します しかし縮小によって 画面上の線の情報が失われ ７が１に似てしまいました

原因が分かれば修正は簡単 画面の線を太くするだけです

そうすると縮小の後に モデルに送られる画像は 画面に書かれた字に近づき 正しく予測されます

PencilKitで簡単にできます 指で画面に書くため allowsFingerDrawingをtrueにします toolは太い線のマーカーに設定します

よし １ケタの数字は正しく 推測できるようになりました

問題はいくつか残っています

一部の数字は複数の線で書かれます

モデルは線の情報ではなく 数字の静止画を取得します 画面に書かれたものを どの時点で取得し 推測させるべきでしょうか？

さらにサイコロで 掛け算や足し算を行うため― ケタが複数になる可能性があります モデルが学習しているのは １ケタの認識だけです どう対処しましょう？

機械学習も１つの手です 数字の情報を認識するよう学習させ 複数のケタを 認識させることも可能です でも画面上の数字の情報は 既にあります なのでプログラムで解決しました 方法を見せます

これを例にします １の最初の線が書かれました

取得された画像から モデルが推測します １です

次に２画目 底の線が書かれます

２本目の線が１本目と 重なっているか確認します 重なっていれば同じ数字です その場合は最初の推測を破棄して ２本の線を組み合わせ １つの画像としてモデルに送ります それが１と予測されます

次にユーザが 別の線を画面に書きます ３本目が最初の２本のどちらかと 重なるか確かめます 重ならないので別の数字です 前の数字とは別にモデルに送られ ２と推測されます

スコットがアプリケーションを 実演します スコット (拍手) ありがとう アップデートされた アプリケーションです サイコロと数値の検出と 分類ができます ブレントの話にあった 入力認識機能も追加済みです では 算数の時間です

ユーザはサイの目の数字を 足すか 掛けるか選べます まずは単純に足し算から始めます 入力の処理機能を見てください

“正解” (拍手) 数値を掛け算すれば 24になるはずです 興味深い数字です 画面に４と書くとどうなるか よく見ていてください

４は２本の線で書かれるので １本目が書かれた時点で ４と認識するのは難しいです ２本目を書く前は 別の数字を推測するかもしれません 見てみましょう

“正解” １本目の線は１と推測されましたが ２本目を書くと４に変わりました 常に正解になる答えもあります もっと４の例をお見せしましょう

“正解” アプリケーションは サイコロを認識し 転がりも理解し 数学のチェックもしてくれます 画面に書くことで 数字を入力できます 今回の話のテーマは 現実と仮想の世界の融合です ゲームをする子どもが 声で入力できたら もっと楽しいやりとりが 可能になるはずです その点を考えます

もう一度 ２つの数値を 掛けると24になります 音声を使ってやってみます 24

“正解” (拍手) Speechフレームワークを 使えば簡単です

今年のSpeechの新機能は オフライン音声認識です インターネット接続がない時でも アプリケーションで 音声認識が使えます ユーザのデータを デバイスにとどめておきたい場合― デバイス上で音声認識を行うように requiresOnDeviceRecognitionを trueに設定します

今のところ サイコロの転がりを理解し 多様な入力の処理が可能です アプリケーションの完成へ向け 旅を続けましょう 再びブレントが登壇します (拍手) ありがとう　スコット

スコットが言うとおり

アプリケーションは サイコロを認識し ユーザの入力を処理します ですが これはゲームです ゲームらしくしましょう

次はARKitに組み込んで 体験の仕上げを行います

あらゆるゲームには ルールが必要です まずはルールを作りましょう

このゲームは９つに仕切った 円形のボード上で行います

プレイヤーは セクション１から始めます 時計回りに回ってちょうど セクション９に着けばゴールです

出た目が小さすぎると たどり着きません

大きすぎると ゴールを通り越してしまいます

プレイヤーは順番に サイコロを振ります 選択肢は２つ

サイコロの目を足して 時計回りに進むか 引き算をして出た数字を 時計回りに進みます スコット　ゲームをするかい？

(拍手)

仮想のボードを ARKitのゲームに組み込みました サイコロの認識には Core MLを使います お先にどうぞ　ブレント いいとも

よし １個は５で… ５と２の目が出た

よし ２つの目を足すよ

いいね すごく近いね 確かに

６と１が出たから 引き算して５マス進むか 足し算して ８のブレントと並ぶか 足すことにしよう

よし

１は出ないと思う どうかな

今度は引き算だ ２マス進むよ

また６と１が出た 今回は手を変えて ５つ進もう ブレントは 僕の５の書き方が変だと思ってるね

このゲームは すごく長引きそうだけど 確か“常に正解となる数字がある”と スコットが話していたね 僕らのゲームでも同様かな？

秘密をつかんだね　ブレント お見事 成功！ (拍手)

さて 本日は複数の技術を 組み合わせて 現実と仮想世界を融合しました 単一の技術を上回る体験を構築し 一段上の新しい世界で 楽しいゲームをしました 物体検出を使って テーブル上のサイコロを認識

画像分類で画面上の 手書きの文字を認識 アプリケーションへの入力には 音声認識も使いました

そしてARKitで すべての体験を仕上げました

詳しい情報はデベロッパWebサイトの セッション228を参照するか 明日のラボに来てご質問ください 残りもお楽しみください (拍手)