人工知能画像分類アプリ

人工知能の機械学習モデルを使って画像を分類するアプリを作りましょう

クリックしてアプリが動いているところを見てください

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、"WhatisThis"と名前を付けます。

エクテンションの追加

https://appinventor.tmsoftwareinc.com/download/LookExtension.aix から日本語化プロジェクトでハックしたLookExtension.aixをダウンロードし、LookExtension.aixをエクステンションパレットからImport extensionをクリックしてインポートします。LookExtension.aixはMITで開発されたエクステンションですが機械学習モデルによる推論をアンドロイドデバイス上で行うために、オリジナルのLookExtension.aixは動作しないアンドロイドデバイスが多く、日本語化プロジェクト所有のアンドロイドデバイスでは動作確認ができませんでした。MITオリジナルのLookExtension.aixが動作確認されているアンドロイドデバイスはこちらです。日本語化プロジェクトでハックしたLookExtension.aixはMITオリジナルのLookExtension.aixが動作しないデバイスではバックエンドにCPUを使用することにより推論速度は遅くなるものの、多くのアンドロイドデバイスで動作するようになっています。MITオリジナル版が動作しなくて日本語化プロジェクトハック版が動作することが確認されているアンドロイドデバイスは今のところ、Google Nexus 5、Moto G Play、Samsung Galaxy Tab 4 8.0です。このエクステンションで使っているモデルはサイズが小さいので精度はそれほど良くありません。

クリックして拡大

デザイン編集

レイアウトとコンポーネントの配置

下図のようにユーザーインターフェースパレットから状況ラベル、レイアウトパレットから縦並びレイアウトを配置し、縦並びレイアウトの中にユーザーインターフェースパレットからウェブビュー、レイアウトパレットから横並びレイアウト、その中にはユーザーインターフェースパレットから撮影ボタンを配置します。見えないコンポーネントとしてエクステンションパレットLookExtensionとメディアパレットからカメラをドラッグアンドドロップします。状況ラベルのテキストは「準備中」に、撮影ボタンのテキストは「イメージ撮影」にします。Look1のプロパティのInputModeをImageに、WebViewerをウェブビュー1にするのを忘れないでください。忘れると動きません。

クリックして拡大

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

エラーメッセージ

はじめにグローバル変数を定義します。組み込みブロック内の変数をクリックして”グローバル変数 変数名 を次の値で初期化”ブロックをドラッグアンドドロップします。変数名は「エラーメッセージ」にしてください。次に組み込みブロック内のリストをクリックして"リストを作成"を1個ドラッグアンドドロップしてグローバル変数ブロックに組み込みます。

“リストを作成"の左上にギアアイコンをクリックして要素をドラッグアンドドロップして要素が合計7個になるようにします。

“リストを作成"を7個ドラッグアンドドロップして"リストを作成"ブロックに組み込みます。あとは数学にある数字とテキストにある文字列をドラッグアンドドロップして下図のようにします。

“いつもLook1.Error"ブロックをドラッグアンドドロップして下図のように状況ラベルにエラーメッセージを表示するようにします。"結合する"ブロックは組み込みブロック内のテキストに、"ペア検索"ブロックは組み込みブロック内のリストにあります。"取得errorCode"ブロックは"いつもLook1.Error"ブロックのオレンジ色のerrorCodeをクリックすると取れます。

撮影ボタンクリックイベント

“撮影ボタンをクリックされたら“ブロックに“呼び出すカメラ1撮影する“ブロックと、“縦並び1見えるを“ブロックにロジックの偽ブロックを組み込んだものを組み込みます。

“いつもカメラ1撮影終了後“ブロックに“呼び出すLook1ClassifyImageData“ブロックと状況ラベルに「推論中」と表示するブロックを組み込みます。"取得イメージ"ブロックは"いつもカメラ1撮影終了後"ブロックのオレンジ色のイメージをクリックすると取れます。

Look1イベント

“いつもLook1ClasifierReady“ブロックに"撮影ボタン有効を"ブロックにロジックの真ブロックを組み込んだものと状況ラベルに「推論中」と表示するブロックを組み込みます。

“いつもLook1GotClasification“ブロックに“縦並び1見えるを“ブロックにロジックの真ブロックを組み込んだものと状況ラベルに結果リストの1番目を表示するブロックを組み込みます。"結果"ブロックは"いつもLook1GotClasification"ブロックのオレンジ色の結果をクリックすると取れます。

 
これで完成です。スマホでテストしてください。分類結果は英語で上部に表示されます。
クリックして拡大

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル