みんなの表情判定機を作ってみた！



みなさん、こんにちは！
旅行とおうちでまったりすることが大好きな社会人3年目のキイロです！

みなさん、最近笑顔になれるような出来事ってありましたか？

キイロの職業は某スーパーマーケットの社員なのですが、
スーパーマーケットって、接客業の極みなんですよね。
**接客業＝笑顔:relaxed:！**
表情が良い店員さんにレジを通してもらったり、商品の案内をしてもらいたいですよね。
そこで、**表情を簡単に判定してくれる、表情判定機を作成してみよう**と思います！！！


# 今回使用するツール
[Teachable Machine](https://teachablemachine.withgoogle.com/ "Teachable Machine")
[FlowForge](https://app.flowfuse.com/ "FlowForge")
Node-RED
[LINE Developers](https://developers.line.biz/ja/ "LINE Developers")

# 大まかな作成方法（レシピ）
1.　まずは、表情が笑顔なのか？真顔なのか？を判定するものを作成
　（**Teachable Machine**）＝**機械学習**
　　たくさんの笑顔と真顔の写真を撮ってください！

2.　つぎにLINEで写真を送信して判定するので、
　　LINEBotとTeachable Machineをつなげる（**Node-RED**) ＝**連結**してくれる

3.　LINEで写真を送信すると、笑顔か真顔の返信がきます！

4.　完成！！！！！

# 1.Teachable Machineの設定

まずはTeachable Machine(機械学習）の設定をしていきます。

https://teachablemachine.withgoogle.com/

参考記事

https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1

参考記事の画像プロジェクトを設定していきます。
ここではグーチョキパーの判別ですが、表情の判別をしたいので、
**class名**　を　**笑顔、真顔**　の2パターンで作成します。

![スクリーンショット 2023-10-05 231047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/8a7c39b2-a35d-f1be-ea72-c7f0f2bfdf9a.png)

こんな感じです。
どちらのclassにも**100枚**程度の写真を読み取らせると判定しやすくなります。

# 2.Node-REDの設定

ノードを配置します。
![スクリーンショット 2023-10-05 222821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/909c9d2a-efe0-3cd4-a448-9801aa71e6fd.png)
Webhookのノード設定
![スクリーンショット 2023-10-07 075645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/b71993c9-9031-ec44-8234-7c85a2d42805.png)
http requestのノード設定
![スクリーンショット 2023-10-07 075511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/07b0366b-2529-823a-3b28-97c8494d64a0.png)
出力形式は　**バイナリバッファ**です。


Teachable Machinのノード設定
![スクリーンショット 2023-10-07 080324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/d821c282-f6b1-a5d0-dab7-fed575f5db70.png)
Urlは
先ほど設定し終えたTeachable MachinのUrlを貼りつけましょう。


templateのノード設定
![スクリーンショット 2023-10-05 223809.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/7d47c787-058c-fde2-26b3-efc81f2ec240.png)
LINE Replyのノード設定
![スクリーンショット 2023-10-07 080954.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/45b8c87f-6f32-25fd-a112-a11150c7eb95.png)
Searet　＝LINEbotのチャネルシークレット
AccessToken　＝LINEbotのアクセストークン

![スクリーンショット 2023-10-05 230107.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536147/82365606-9fa7-64af-3ab9-0e4905473481.png)
こんな感じに連結させましょう。


# 3.写真送信　返信確認！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">てすと！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#チャレンジャーズ</a> <a href="https://t.co/bchgFViZOK">pic.twitter.com/bchgFViZOK</a></p>&mdash; あかり (@akashiro_as) <a href="https://twitter.com/akashiro_as/status/1709933539503030336?ref_src=twsrc%5Etfw">October 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

自分で笑顔の写真を撮って、LINEに送信するとこのように返信が返ってきます。

# 終わりに
表情が判定できることによって、店舗での笑顔作りの練習になることは
もちろんですが、実は教育の場でも機械を活用して判定ができることによって
統一した基準を作成することが可能になります。
それはとてもうれしいことです！
実用化できるようなものを今後の作成していけたらいいなと思います！