MIT App Inventorで遊ぶ (AI 3）

前回のブログで「このランドマークを追いかけることにより、顔の中での変化（口を開けるとか、左右に首を振るとか）がわかることになるらしい。まだ、実験していないので確証はないが。。。」と書いたが、簡単な実験をした。

Juan_Antonioさんのブログを参考にしながらやってみた。口を開けたらイラストの舌が出てくるというもの。

実行画面：

スクリーンデザイン：

画面のサイズは、350px X 350px に設定。Ball2（緑色）が上唇、Ball3（青色）が下唇のマーク。最初は、Ball1も設定していたが、最終的には削除。

　　　　

 

ブロック・コード：

mouth top と mouth bottom の座標を保存する変数。

mouth topはランドマーク12、mouth bottomはランドマーク15。それぞれ、あのface meshの画像から取得。

上唇と下唇のマークとなるBall2とBall3をmouth topとmouth bottomに設置。

関数getCoordinatesとmoveBallsを実行。mouth topとmouth bottomの距離が50ピクセル超になったら、tongueSprite（舌のイラスト）を表示。

tongueSpriteの表示位置は、x座標が、mouth topのx座標よりtongueSpriteの幅の半分を差し引いた数値、y座標が、Mouth topのy座標よりtongueSpriteの高さの1/3を加えた（下にずらす）数値に設定。

MIT App Inventorのチュートリアルには、ChatGPTアプリ、ImgaeBotアプリもあるが、私自身OpenAIの無料枠は使用済みなので現在のところ取り上げることはできない（ことはないが。。。）。なお、PoseNet（googleが公開している機械学習ライブラリのモデル）については、機会があればやってみたいと思う。

 

MIT App Inventorで遊ぶ (AI 2 勘違いしていました + α）

前回、AIに関するMIT App Inventor Labのチュートリアルを実際にやってみた結果をブログにアップしましたが、ちょっと勘違いをしていたようです。

2番目のFacemesh Filter Cameraで、「画像の下に二つのボタンがあるが、いずれも機能せず。チュートリアルによれば、ファイルに保存できるらしいが。。。」と書きましたが、ボタンはいずれも正しく機能していた。

ちょっと手を加えてみた。エフェクトを選択できるようにするために、若干デザインを変更し、ブロック・コードも修正・追加した。

保存ができれば、エフェクトをかけた写真をSNS他でも使用することができる。エフェクトは、耳や髭だけではなく、色々なマスクを適用しても面白いかもしれない。マスクを作るのが大変そうだが。。。

髭（又は口）は face point の mouth bottom にセットしてあるが、口を開けると髭（又は口）が メッシュのface pointの移動に合わせ下に移動するのが確認できます。

FaceMeshは、486ヶ所のランドマークと呼ばれる点（3次元座標？）があり、それぞれ番号が振ってあるようです。例えば、頭のてっぺんのforehead（下の図）は、10。では、その番号はどこで知ることができるのか。あちこち探し回った結果、ようやくこのブログでわかった。（ブログの中ほど以降に「追記」（2022.01.15）があり、そこに説明があります。かなり拡大してようやく見えました。）

                       

このランドマークを追いかけることにより、顔の中での変化（口を開けるとか、左右に首を振るとか）がわかることになるらしい。まだ、実験していないので確証はないが。。。

こんな風に、考え、また情報を探し回ると、まだまだこのFaceMeshで遊べるような気がする。FaceMesh自体は、Googleが2019年3月（？）に発表した機械学習モデルとのことで、かなりの方が使い込んできたモデルと思われるので、情報が多いかもしれない。

 

MIT App Inventorで遊ぶ (AI 1）

MIT App Inventor Labが制作したり監修しているAIに関するチュートリアルがたくさんあります。チュートリアルをアップしているYouTuberも結構います。

世の中、AIフィーバーの真っ只中なので、素人は素人なりにちょっとAIに触れてみようと思い、いくつかチュートリアルをやってみることにした。スクリーンのデザイン及びブロック・コードは省略。

Artificial Intelligence with MIT App Inventor にアップされたチュートリアルから。これだけでもかなりある。

1. Introduction to Machine Learning: Image Classification

これは、物体を認識し、それが何であるかを教えてくれるアプリのチュートリアル。また、アプリがどの程度の「自信（的中率）」で教えてくれているかもわかる。このアプリでは、Lookというextensionを利用している。

MIT App Inventorの説明によれば、Look extensionは、すでに多くの画像を使って「訓練」されており、シャワー、シャワーキャップ、ショッピングカート、カップ、キーボード、時計など、999のカテゴリー（物）を識別可能であるとのこと。

言語は英語のまま。あの悪夢のTranslator componentを使う気持ちにはならなかった。

リモコンを携帯電話(cellphone)と間違えたが、カメラを真上から向けると正しく「リモコン」を認識した。

2. Facemesh Filter Camera

Googleが作成した顔認識モデル (Facemesh Model) を利用して、顔にfacial filter（「AR(Augmented Reality)エフェクト」と呼ぶらしい。）を適用させて遊ぶアプリとでも言えばいいのかな。

顔を認識し、以下のようなメッシュを適用し、任意の位置にfacial filter （猫の耳、髭など好みのもの）を配置するもの。任意と言ってもあらかじめ決まったface point（以下の図のleft forehead, left eyebrowなど）というものがあり、これを指定することになっている。もちろん、これらを使って微調整はできるが。

左耳は、left foreheadに、右耳は、right foreheadに、という具合に配置していく。

見苦しい爺さん顔ですが、少々ご辛抱を。耳、髭は当方で追加したもので、この程度くらい自分でやりたいと思って。チュートリアルは猫とライオンの耳と髭のイラストを使っていた。

左上のタイトルが Cat Cameraとなっているが、チュートリアルでは猫の耳と髭だった。また、画像の下に二つのボタンがあるが、いずれも機能せず。チュートリアルによれば、ファイルに保存できるらしいが。。。

上が、メッシュなし、下がメッシュあり。

今回は、これまで。もう少しAIで遊ぶ予定。（ブログにアップするかどうかはわからないが。）特にFacemeshは、色々なARエフェクトを作って、取り替えて遊ぶなどすれば面白いかもしれない。他にも面白そうなものもあるし。

Facemeshについては、Using the MIT App Inventor FaceExtension (for Facemesh) のような面白いブログ記事もあり、可能であれば、一度やってみたい。

 

 

MIT App Inventorで遊ぶ (Count Numbers App 3）

20秒という制限時間を設け、20秒経過したら、ゲームオーバーとした。４桁の場合はちょっと厳しい。

数字だけではなく、視覚的にも時間が経過していることを赤色の長方形で表示したが、やっているとそれどころではなくなる。また、正しくタップした回数をゲームオーバーの際に表示。

実行画面：

スクリーンのデザイン：

変更点は、残り時間と時間を刻む赤色の長方形を追加。

　　　　　　　　　　　

ブロック・コード：

1. 残り時間を計るためのClockを設定。

残り時間に応じて、赤色の長方形の色をピンクに変更する関数changeLabelColorを毎秒(1000ミリ秒)毎に実行。例えば、残り時間が19秒になったら、左端のLabelの色をピンク色に変更。

正しくタップした番号はselectedNumbersListに格納してあるので、その項目数を正しくタップした回数として表示。

                                        ****** 以下省略 ******

2. リセットボタンはあったが、関数resetLabelColorを実行させて、Labelの色を赤色に戻すように設定。

                                     ****** 以下省略 ******

3. スクリーンを初期化する際に、ゲームのやり方を示すウインドウを表示することになったいたが、内容を若干変更した。

行頭を揃えようとして半角スペースを複数挿入したがうまくいかず。昔々にHTMLをちょっとだけかじった時、HTMLでは、半角スペースは使えないよ、とあったのを思い出した。すぐ、ググってみると特殊文字記号（&nbsp）というのがあったので、早速使ってみた。うまくスペースを確保できた。MIT App Inventorではテキストの体裁を整えるのに他のHTMLのタグとか特殊文字記号が使えるかもしれない。次の機会に是非試してみたい。

                                            ****** 途中省略 ******

今ままでの最高得点との比較などできれば、より楽しいアプリになるが。。。（一人遊びの場合は、自分のスマホに履歴を保存し、複数人で遊ぶ時は、ネット上のデータベースを利用することになるか？）

 

MIT App Inventorで遊ぶ (ビンゴ 2）

そう、ビンゴはやはり一人では面白くない。ネットを介してみんなでやるものだ。

今回は、アプリの紹介というより、ビンゴアプリでネットを介して繋がると言う実験。

要するに、親がビンゴマシンを回し、番号が判明したら、サーバー（Firebase Realtime Database）経由その番号を受け取ると言う極めて簡単な考え。

親とプレーヤーがそれぞれアプリを操作している画面及びFirebaseの画面は以下の通り。（ミラリング・ソフトも無駄ではなかった）

なお、キーは１から始めたかったが、１から始めた場合、まず、　"null"と言うデータが自動的に挿入されてしまい、うまく処理できなかったので、０から始めることにした。

スクリーンのデザイン（プレーヤー）：

HorizontalArrangementの中に５つのボタンが配置され、縦にHorizontalArrangementが５つ並んでいる。

　　　　　

具体的に実行画面で見てみると以下。（Resetボタンはまだ機能していない）

　　　　　　　　　　　　　

ブロック・コード（親とプレーヤー）：

親のアプリの追加部分のみ＝＞

現在の画面は以下の通り。（Firebaseのデータを削除するためのDelボタンを追加したが、このアプリが立ち上がった時に、自動的にデータを削除するようにする予定なので、このボタンはテスト期間中を除けば不要となる）

　　　　　　　　　　　　　　

Getボタンをタップすると関数saveNumbersが実行され、Firebaseに出た番号が保存される。MIT App InventorのcomponentであるFirebaseDBを利用して保存している。tag（すなわちキー）が０より始まるように設定。

新たにDelボタン（削除ボタン）を作成。Firebase REST APIを利用して削除している。一括して削除できるので、MIT App Inventorのcomponentよりこちらの方が便利。

プレーヤーのアプリのブロック・コード＝＞

このアプリも作成途中のもの。上記デモビデオにはないが、数字ボタンをタップすると数字色が薄グレーとなる。また、まだ出ていない数字をタップすると注意のウィンドウが開く。

1. 変数と関数の作成：

allNumbersList => １〜７５までの数字を格納

randomNumbersList => 上記数字をシャッフルしたリスト

selectedShuffledNumsList => index 1 から25 (25は含まず）の24の数字のリストを作成。（ビンゴカードには２４の番号とfreeが一つの計２５のタブがあり）

関数make14Numbersとあるが、これはmake24Numbersの勘違い。また、グローバル変数ではなく、ローカル変数にしても良い変数もあるが。。。

 

2. ２４のランダムに抽出した数字を各ボタンに割り振り表示。

3. Firebaseに対しHTTP GETリクエストを行い、既出の番号を取得する。

4. 取得した番号を変数dataListに格納。

5. ここからは、各ボタンの設定用関数

ボタンに表示する番号を割り振っていく。実際にはButton25まである。（Button13はFreeなので除く。以下同じ。）

　　　　　　　　　　　******** 以下省略 ******

既出の番号とそれぞれのボタンの番号を照らし合わせて、もし既出の番号と同じであれば、数字色を薄グレーに変える。

                                        ******** 以下省略 ******

この関数はまだ使ってないが、リセットボタンをタップした時を想定して、数字色を元の黒色に戻すもの。

                                         ******** 以下省略 ******

まだまだ検討すべき事項は多いが、一応ネットを介すると言う点のみ実験できた。

親の方でマシンを回し、出た番号は自動的にプレーヤーに伝わる（プレーヤーからすれば「Refresh」ボタンでプルするのではなくプッシュされる）方法があればいいのだが。