MIT App InventorとGoogle Teachable Machine2を連携させる

【要旨】GoogleのAI環境Teachable Machine2を使うと、自分用に、音/画像/ポーズの学習と認識を非常に簡単に行えますが、それだけでは、初心者レベルでに留まってしまいます。一歩進めて、自分の作りたいアプリにこれを組み入れることができれば、世界はグンと広げられます。その糸口となる試みを、MIT AppInventorとの連携という形で行いました。

-----

　先の記事に書きましたように、Teachable Machine2によれば、PCやスマホのブラウザを使って容易に自分用に（ここが重要！）、音/画像/ポーズの学習と認識を行うことができます。子供にも大人にも、素晴らしいとAI環境と言えます。

　しかしながら、自分が解きたい問題、作成したいアプリにその機能を取り込めなければ、それ以上の発展がありません。私の場合、スマホのアプリをMIT App Inventorを使って作るのですが、ここに、このTeachable Machine2を組み込めないかと思い、情報を探しましたが見当たりません。それならば、と自分で以下のようにやってみました。

■問題の設定（ライブカメラ画像のリアルタイム認識）

　今回は、富士山などの山岳を望むライブカメラの画像を取得して、AI（人工知能）に、「多分、富士吉田からみた富士山でしょう」とか、「多分、夕暮れの富士山（須走）でしょう」等と、リアルタイムに認識させるアプリを作ります。

■学習用画像の収集と学習の実行

　ここでは、以下の四種（４ラベル）の画像を学習/認識させます。今後種類を増やして行きますが。

• 富士山（富士吉田）
• 利尻岳（沓形）
• 昼間の富士山（須走）
• 夕暮れの富士山（須走）

　収集した画像は、図１の通りです。各ラベル毎に、十数枚の画像しかなく少なすぎるのですが、とりあえずこれで進めます。これを学習させることは、先の記事のとおり容易にできますので、手順は省略します。学習済みモデルは、（デフォルトでは）Googleのサーバに置くか、または自分のPCに保存して利用することもできます。

■学習済みモデルをMIT App Inventorから使う準備

　スマホ用のApp InventorにあるWebViewerというブロックは、実は強力なJavaScriptエンジンなのです。上記の学習済みモデルは、JavaScriptの環境があればどこでも動くTensorflow.jsで作られています。そのため、Googleのサーバにおいた学習済みモデルは、App Inventor側で実行できます。

　しかしながら、スマホにある画像をこの学習済みモデルに与える場合、有名なクロスドメイン問題が起こるため、うまく行きません。その解決法の一つは、学習済みのモデルを、スマホのWebサーバに置くことなのです。画像も当然、このサーバにコピーしておきます。今回はこれに従いました。図２にその様子を示します。

■MIT App Inventorから学習済みモデルを動かして認識結果を得る

App Inventorから学習済みモデルを動かして認識を実行させます。図3(a)は、ライブカメラから取得した画像を、上で述べたローカルWebサーバに配置しています。図３(b)は、ローカルサーバで認識をさせ、その結果をApp Inventor側で取得しています。ここで、WebViewerのWebViewStringが受け渡しの役を担っています。

■ライブカメラ画像のリアルタイム認識の実行例
　以上のとおりに作ったスマホアプリでのリアルタイム認識をやってみました。その実行例を図４に示します。学習用の画像も少なく、断定的なことは言えませんが、期待どおりの良好な結果となっています。

　以上、ご参考にしていただける点があれば幸いです。

【参考情報】MIT App Inventorのフォーラム
以下でも、App InventorとTeachable Machine２に関するディスカッションがあります。私も、ひと言述べています。
Artificial Intelligence with App Inventor
https://groups.google.com/forum/#!topic/mitappinventortest/f-Hwk586hyQ