Teachable Machineで簡単肌荒れ診断

皆さま、お疲れ様です。4回目の投稿になりますたべまるです！
台風だったり、地震だったり今日も地球は忙しそうですが、皆さまいかがお過ごしでしょうか。
私は新幹線の中でこの記事を書いております。眠い(´ぅω・｀)ﾈﾑｲ
挨拶はこのぐらいにして、今回は 「病院に行くか悩んだときに肌荒れを診断してくれるアプリを作ってみたい！」 ということでチャレンジしてみました。

なぜ肌荒れ診断？

皆さまは、季節的に肌が荒れることはありませんか？
私は生まれつき肌が弱いので肌荒れします。そのため定期的に皮膚科に通院しています。特に大変なのは季節の変わり目！
季節の変わり目には、手がかさついてきたり、かゆみが出たり、皮むけしたりします。
悪化すると、手がボロボロといった状態になってしまうのです。
本来は、症状の出初めに病院に行けたらいいのですが、忙しさにかまけて悪化してから病院に向かう始末。。
「症状が悪化する初期段階で病院に行けたらな」 そんな思いで簡単な肌荒れ診断を作成してみました。

使用したツール

Teachable Machineの設定

Teachable Machine では画像や音声をAIに認識させ、学習させたサンプルを基に判断させることができます。今回の場合は、肌荒れ診断ですので肌状態の画像を学習させます。
肌の状態通常時（肌荒れなし）・病院へ（肌荒れあり）・手が映っていない場合の該当なしを含む全3パターンで作成しました。

サンプル画像の取り込み

サンプルとなる商品の画像を撮影していきます。

最後に「該当なし」として背景のみを撮影しています。
これがないと、何も映っていない時でも手が荒れているか判断しようとします。
AIさんは頑張り屋さんですね。「何も映ってないよ」ときちんと教えてあげましょう。

＊背景と言いつつ新幹線のシートや天井が映ってますが今回は手が映ってなければいいので無視します。

AIに学習させる

サンプルの撮影が終わったら、このサンプルたちをAIに学習させます。画面真ん中に 「モデルをトレーニングする」 というボタンがあるのでここを押します。

AIが学習できたかチェックをしてアップロード

トレーニングが終わるとカメラの映像と、その下にAIが判断した結果がパーセンテージで表示されます。試しに商品をカメラに映して正しく判断できているかをチェックします。正しくない場合はサンプル数を足してあげるといいかもしれません。
チェックが終わったら、 「モデルをエクスポートする」 を押します。

するとこのような画面が出てきますので、「モデルをアップロード」を押します。

共有可能なリンクが表示されたら、「右側のコピー」 を押してください。

こちらに書かれているリンクを後で使用しますので、コピーしてどこかにメモしておくか、画面を閉じないようにしておいてください。

Teachable Machineの作成は以上です。

CodePenの設定

CodePen とはブラウザ上でコードを記述し、自分で開発ができるWebサービスになります。
今回はTeachable Machineをスマートフォンでも使用できるようにするため、CodePenを使用しました。

初期設定

タイトルを設定します。タイトル横の鉛筆マーク ⇒ 「Save」 を押して終了です。

ここまで入力を終えたら、画面右下の 「Fork」 を押します。

Teachable Machineのリンクを入力

CodePenで作成画面を開くと3つの箱のような表示があります。今回使用するのは 「html」 と 「js」 です。
初めに 「html」 についてです。
＜title＞と＜h1＞に作りたいツールの名前、今回は肌荒れ診断と入力します。

次に 「js」 についてです。
modelURLの部分に、先ほどTeachable Machineの作成でコピーしたリンクを貼り付けます。

コードを貼り付けると、画面下にTeachable Machineと同じようなカメラの映像と結果が表示されます。

このページのURLをスマートフォンで検索すると、スマートフォンのカメラを使用して肌診断を使用することができます。

CodePenの作成は以上です。

反省・まとめ

とりあえずは簡単肌診断の完成です。
サンプル数をどんどん追加していけばもっと活用できそうです。
ただ、「該当なし」に関しては背景だけを映すと "その景色＝該当なし" になってしまうため、肌荒れが "ない" ことを覚えさせるというのは難しいのかもと感じました。
本当のことを言うと、前回のLINEBot作成を活かして、「LINEから画像を送って認識させ、結果を返信する」 ということをやりたかったのですが、道半ばで終了しました。

＊＊＊道半ばで心折れたフローはこちら＊＊＊

Node-REDの全体図

ひとまず、Node-REDとTeachable Machineを連携してみようと思い作成してみました。

こちらでデプロイしてみると…

このブラウザはカメラノードに対応していないとのこと (´;ω;｀)

makeとも連携させてみた

webhooksからSend a Notificationを用いてLINEへ連携させようと試みました。
Send a Notificationの中身はこちら👇

稼働してみるとこのようなエラーが出ました。

このエラーは、アクセストークンが HTTP 認証要求ヘッダーに存在しないか、トークンが無効であるか、期限切れの場合に表示されるようです。
この課題を解決できぬまま終了しました。
追伸：4日ほど頑張ってみましたが、結局連携できずじまいでした(´;ω;｀)

Node-REDとmakeについては以上です。

また、画像認識で解決できそうな課題で他に思い付いたのが、お店で使用できる商品券・金券チェックです。
お店で使用できる商品券・金券は多岐にわたります。「この金券お釣り出たっけ？出なかったっけ？」 としばしば考えるときもありました。ご案内を間違えてしまうとお客さまへご迷惑をかけてしまいますし、従業員だけでああだこうだ話し合う時間も減ります。これがカメラでパパッと判断出来たら楽だろうなぁと感じました。

今回は以上になります。
最後までお付き合いいただきありがとうございました。