-
Core MLとARKitを使用して優れたAppを作成する
Core MLやARKitなどのAppフレームワークを組み合わせて、教育用ゲームを作成していく様子を見てみましょう。このセッションでは、機械学習の力を活用して、Appで魔法のようなインタラクションを生み出す方法を紹介します。また、難しいコンピュータビジョンの問題を解決するためのアプローチについてより深く理解していただけます。インタラクティブなコーディングセッションで、Appが完成するプロセスについてご確認ください。
リソース
関連ビデオ
WWDC19
-
ダウンロード
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のゲームに組み込みました サイコロの認識には Core MLを使います お先にどうぞ ブレント いいとも
６と１が出たから 引き算して５マス進むか 足し算して ８のブレントと並ぶか 足すことにしよう
また６と１が出た 今回は手を変えて ５つ進もう ブレントは 僕の５の書き方が変だと思ってるね
このゲームは すごく長引きそうだけど 確か“常に正解となる数字がある”と スコットが話していたね 僕らのゲームでも同様かな？
さて 本日は複数の技術を 組み合わせて 現実と仮想世界を融合しました 単一の技術を上回る体験を構築し 一段上の新しい世界で 楽しいゲームをしました 物体検出を使って テーブル上のサイコロを認識
画像分類で画面上の 手書きの文字を認識 アプリケーションへの入力には 音声認識も使いました
詳しい情報はデベロッパWebサイトの セッション228を参照するか 明日のラボに来てご質問ください 残りもお楽しみください (拍手)
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。