MIT App Inventorで顔認識学習モデルFacemeshを

 【what is this】MIT App Inventor のExtensionとして、Googleの顔認識(主要450点)学習モデルFacemeshが利用できるようになりました[1][2]。これにより、顔認識関係のスマホアプリがさらに作りやすくなりました。さっそく、簡単なアプリ３つを作ってみましょう。

■[Exercise-1] 顔の向きを考慮して、口の開閉でスイッチOn/Off
　これは、前のブログ記事で取り上げた例題です。その際は、PythonからFacemeshに関するAPIを利用して作りました。今回は、これと同じことを、MIT App Inventor のExtensionを利用して行います。

　解答例は、Fig.1 のようなApp Inventorプログラムです。これがソースプログラムの全てですから、「こんなに簡単に！？」と思う人も多いでしょう。プログラムは読みやすく、そのロジックも明解そのものです。
　図にはコメントがありますので、説明は特に必要ないと思います。口の開閉を上下の唇中央点のy座標の差分で、顔の向きを鼻筋２点のx座標の差分で検出していることにご注目下さい。それらが、ブロック（when...FaceUpdated）に纏められ、顔や口が動いた場合にリアルタイムに起動される仕組みです。

　簡単な拡張として、以下のように、マスクを付けたり外したりもやってみましょう。

■[Exercise-2] - 顔の動きで、"はい", "いいえ", "どっちかな"を識別
　上の[Ecercise-1]では、顔の現時点の特定の「状態」を検出しました。一方、顔の「連続した動き」を得たい場合もあります。例えば、「うなずく」「顔を横に振る」「顔を傾ける」などです。これらを検出するには、顔の揺れた方向（上下、左右、斜め）、および、その振幅を得る必要があるでしょう。このような処理も、同様にApp Inventor（Facemesh extension付き）の世界でできます。その実現例を下図に示します。以下の３つの振幅を正規化して、そのうち、最も大きい値を与えた動作を検出します。

●Yes：うなずき（はい）→ 鼻の頂点の上下（y軸方向）の変動

●No：いやいや（いいえ）→ 鼻の頂点の左右（x軸方向）の変動

●N/A：どうかな（？）→ 額の上の２点間の線分とｘ軸がなす角度の変動

■[Exercise-3] - 発話時の口形面積の変化を可視化して楽しむ
　MIT App Inventorの強みのひとつは、GUIとの連携の容易さです。Fig.4 に示すこの練習問題も、それを生かしたアプリの作成です。Facemeshでは、顔の主要450点を検出できるのですが、ここでは、口(くち)回りの４点だけ使います。The simpler the better. この菱形の口の面積の推移（青い線）とその変化率（赤い線）をグラフにします。口の動きとその波形を見て楽しむ練習問題です。遊びが何らかのヒントを与えることもあり得る。

　このような口（くち）パクから、例えば、"イノシシ" / "トラ"、あるいは"apple" / "orange"をきちんと区別する課題に取り組む場合には、さらに面積変化の加速度の波形が必要かもしれない。そのような波形（またはその周波数解析結果）を、発話種類ごとに数百件用意して、それらを学習させることになるでしょう。
　なお、身体の動きの加速度の周波数解析に関しては、参考文献[3]に丁寧な解説があり有用です。また、口の動きを入力とする機械読唇に関しては、参考文献[4]に基本事項と手法が詳しく叙述されています。

■感想
　今回のMIT App Inventor Extension for Facemeshによって、顔認識関係スマホアプリの開発がかなり容易になります。[Exercise-２]では、App InventorのBallコンポーネントを使っており、タッチ、ドラッグなどによるインタラクションも可能です。他にも、Facemeshと連携できる場面がありそうです。MIT App inventor leads us to a new frontier in smartphone programming.

References
[1] Artificial Intelligence with MIT App Inventor, http://appinventor.mit.edu/explore/ai-with-mit-app-inventor
[2] Facemesh Filter Camera, http://appinventor.mit.edu/explore/resources/ai/facemesh

[3] 田中博、五百蔵重典：IoT時代のデータ処理の基本と実践、コロナ社刊、2018年3月（特に、第５章フーリエ解析）
[4] 宮崎 剛、中島豊四郎：［推薦論文］日本語の発話映像における初口形の検出方法提案、情報処理学会論文誌、Vol.53、No.3、pp.1472-1479、2012.

Using the MIT App Inventor FaceExtension (for Facemesh)

 【abstract】The MIT App Inventor FaceExtension has been released [1][2]. This makes it very easy to create a smartphone app that uses Google's facial recognition (450 major points) learning model Facemesh. Let's make three simple apps right away.

■[Exercise-1] On/Off by opening and closing the mouth considering face orientation
　You can see what I want to make by watching the animated gif below. Let's make this little app using the FaceExtension of MIT App Inventor.

　My answer is shown in Figure 1. Here's a complete App Inventor source program that works. I think this program is simple and very easy to understand. Notice that the opening and closing of the mouth is detected by the difference in the y-coordinate between upper and lower lips, and the orientation of the face is detected by the difference in the x-coordinates between the two points on the nose. They are grouped into a block (named whenFaceExtension.FaceUpdated) and it is activated in real time when the face or mouth moves.

    As a simple extension, try putting on and taking off the mask as follows.

■[Exercise-2] - Identify "Yes","No", and "N/A" by face movement
　 In the [Exercise-1] above, we have detected the current specific "state" of the face. On the other hand, you may want to get a "continuous movement" of your face. For example, "nod", "shake your face", and "tilt your face". To detect these, you will need to know the direction in which the face sways (up/down, left/right, diagonal) and its amplitude. You can do this in the App Inventor (with Facemesh extension) world as well. The following GIF shows an example of the answer. Three amplitudes in the figure are normalized, then, the movement that gives the maximum value is adopted.

Yes：Nod -> Fluctuation of the top of the nose up and down (y-axis direction)
No：Shake -> Fluctuation of the top of the nose right and left (x-axis direction)

N/A：Tilt -> Angle variation of the line segment between the two points on the forehead against x-axis

■[Exercise-3] - Visualize the transition of the mouth-shaped area during utterance
　One of the great features of MIT App Inventor is the ease of integration with the GUI. Fig.4 is an app that makes the best use of it. Facemesh can detect the main 450 points on the face, but here we will use only 4 points around the mouth. The simpler the better. Graph the transition of the area of this diamond-shaped mouth (blue line) and the rate of change of the area (red line). This is an exercise that you can enjoy watching the movement of the mouth and its waveform. Play may give some hints.

　In order to properly distinguish, for example, "apple" from "orange" using such mouth movements, acceleration waveforms of mouth area change may also be needed. Hundreds of such waveforms (or their frequency analysis results) should be prepared for each utterance type. And thorough training (learning) using them will be necessary.

References
[1] Facemesh Filter Camera
http://appinventor.mit.edu/explore/resources/ai/facemesh
[2] Artificial Intelligence with MIT App Inventor,
http://appinventor.mit.edu/explore/ai-with-mit-app-inventor

顔認識(主要486点)学習モデルFacemeshの利用

 【what is this】Googleの顔認識(主要486点)や指の認識(主要関節21点)の学習モデルが、PythonやJavaScriptなどで使えるようになっています[1]。本記事は、これに基づいた顔認識モデルFacemeshに関する小生独自の簡単な説明です。

■顔のキーポイント（全486点）のリアルタイム認識
　Facemeshによる顔のキーポイントの検出例を図１に示します。人間の実写の他、写真や肖像画でもOKのようです。福沢諭吉と平賀源内の肖像画（何故かこのお二人）、および大学HPの広報（女子学生）写真で試しました。顔認識や感情分析に重要な、口や鼻や目の付近のメッシュは当然ながら細かくなっています。

■唇と瞼の開き具合の認識
　主要点番号とその位置の対応は、mesh mapにありますので、その番号を指定して、必要な点の検出ができます。一例として、唇と瞼の開き具合を見るため、図２のように、８点（唇４点と瞼４点）を赤色に着色してみました。

　これら８点のマップは図３のとおりです。鼻や頬や顎についてのキーポイントも同様に得られます。（キーポイント番号は、その後改訂にともない、図３とは異なるかも知れません。）これらを利用すれば、例えば口の開き具合で、何かの動作を制御する等、自分なりの顔認識関係アプリを（簡単なものであれば）作れそうな気になります!

　図４は、日本語母音の発話時の口形の検出例です。なかなか面白そうですが、これですぐに読唇ができるわけではありません。実際の機械読唇技術に関しては、宮崎剛教授らの論文[2]等を参考にして深く検討する必要があるでしょう。

■口の開閉でオンオフを制御してみる
　→この項はその後修正し、こちらにまとめました。

■もう一歩前へ（状態だけでなく、動きも検知）
　→この項はその後修正し、こちらにまとめました。

■感想
（１）プログラミングの容易化
　図３を改めて眺めてみました。このようにランドマーク（キーポイント）がリアルタイムに検出されるのであれば、この後は顔の表情を認識することは格段に容易になります。（情報系が苦手な学生を含む）より幅広い人々が、AI技術発展の恩恵を受けられると思います。
（２）スマホなどGPU無しでも推論ができる
　以前は、上記例題のようなリアルタイム顔認識には、GPU付きの高性能PCが必要でしたが、今はこのような認識（推論）は普通のスマホで十分できてしまう。アイディアと工夫次第で、思いもつかぬアプリケーションも生まれそうに思われます。

参考文献･資料
[1] Face and hand tracking in the browser with MediaPipe and TensorFlow.js, https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html
[2] 宮崎 剛、中島豊四郎：［推薦論文］日本語の発話映像における初口形の検出方法提案、情報処理学会論文誌、Vol.53、No.3、pp.1472-1479、2012.

5本の指で0〜31を数えるジェスチャの認識：handpose利用

 【what is this】手の指のランドマーク（キーポイント）21点をリアルタイムに検出する学習モデルhandpose (MediaPipe Hands)[1]があります。そのAPIを利用して、５本の指で0〜31までを数えるジェスチャを認識するデモアプリを作成しました。

■5本の指で0〜31を数える
　２進法を使えば、５本の指で、0〜31を数えることができます。具体的には、図１のように、親指、人差指、中指、薬指、小指を折り曲げることで、各々1、２、４、８、１６を与えます。通常、深層学習でこのようなパタンを認識させる場合は、この32種のそれぞれに500枚程度の画像を用意して学習させます。しかし、ここでは、そのような学習をせずに、handpose (MediaPipe Hands)から得られるランドマークを利用して簡単に認識させたい。

■handpose (MediaPipe Hands)の利用
　handposeでは、図２のとおり、５本の指の関節合計21点をリアルタイムに検出します。それを、PythonやJavaScriptからAPIで使えるようになっています。ここでは、上記の目的に沿って、21点のうち、15点を利用します。すなわち、図１にあるとおり、各指の先端、第１関節、第２関節の検出結果のみを使います。

■handpose (MediaPipe Hands)を利用した指の折れ曲りの検出で数値を決定
　各指の折れ曲がりの判定は、図１の説明にあるとおり、指の先端と第２関節の座標の差分を使って行います。ただし、親指の場合は、ｘ座標を、その他の指はy座標に着目します。例えば、薬指の場合は、先端のy座標が第２関節のy座標よりも大きければ折れていることになります。図１の左図では、薬指と親指が折れていますので、９（=８+１）を意味します。

　この方法で指の形状を認識して、リアルタイムに２進法の数値を10進整数で表示します。実行結果のいくつかを図３に示します。なお、下部のGIF画像は、PCでの実行画面の録画から作成したものです。（折り曲げた指は"＊"、伸ばした指は"_"で示しています。0〜31までを連続して示しています。）

■感想
　正面から撮影するという条件下では、このようなジェスチャ32種を、ほぼ100%認識することができました。「学習」を行わずに、短めのPythonプログラムによって比較的簡単に実現できたことに驚きます。ただし、ランドマークがリアルタイムに得られるというのは、すでにそのための深層学習が十分に実行されているからです。
　状況によっては、指の折れ状態をもっと厳格に（他の関節点も利用するなど）する必要があるかも知れません。この例以外にも、何か応用ができそうです。

参考文献

[1] MediaPipe Hands, https://google.github.io/mediapipe/solutions/hands

祝：MIT App InventorがiOSでも利用可能となった！

素晴らしい朗報が入りました！
　2016年10月にスタートしたこのこのプロジェクトですが、幾多の困難を乗り越え、約４年半の年月を費やし、ついに、MIT App InventorがiOSでも利用できるようになりました（図１）！特筆すべきは、これまでAndroid向けに開発されたソースプログラムは、全くそのままiOS用にも使えるという点です。

http://appinventor.mit.edu/blogs/evan/2021/03/04-mit-app-inventor-ios-app-store

　「そんなに大変なの？」と思う人もいるでしょうが、AndoridとiOSという全く異なるアーキテクチャとOSを考えれば、この実現の偉大さは分かると思います。さらに、Appleの強い閉鎖性と極めて厳格な資源管理を考えれば、Apple側との交渉に膨大な時間がかかったことも想像に難くありません。
　マンパワーも膨大であり、約66,000行の新たなプログラム開発になったとのことです。当時、開発費を工面するためクラウドファウンデイングが行われており、小生も、同僚だったH.Tan先生とY.Sud先生と共に幾らかの寄付を行いました。それも懐かしいです。

　現時点では、図２のとおり、iOS用にはインタプリタ方式（Companionで接続）のリリースとなっており、コンパイル方式は2021年秋ころとなっています。また、出来たてなのでもちろん不具合もあるでしょう。それは問題ではありません。とにかく、素晴らしいスタートが切られたことをお祝いしたい！

　この記念すべき出来事を祝って、過去に大学のオープンキャンパスの高校生向け講座のためにつくられたApp InventorソースプログラムをiOSで実行させてみました。図３のとおり、完璧に動きました！この図からも分かりますが、スライダーやボタン等は、Androidとは若干異なる、iOS独特の美しいデザインが感じられます。

　なお、このApp Inventorの例題は、須藤康裕准教授が、ソーラーカーを鈴鹿サーキットで実際に走行させた時にリアルタイムに発進した位置情報を、後でトレースするものになっています。毎秒の位置情報の発信アプリも、須藤先生がAndroid用にApp Inventorで作成されたものです。