TeachableMachineに学習させて判定結果をLINEBotに返信させてみた

## 難しくないAI
私はデジタルを学び始めてまだ１ヶ月ほどの初心者で小売業に従事している会社員です。
仕事内容はお客様からインターネットで注文頂いた商品を店舗で集めて個別に梱包し配送業者に引き渡す事をしています。
そんな私ですが今回は**Teachable Machine**という自分で簡単に画像や音声を学習させることができるツールを学びましたので紹介したいと思います。
店舗から商品を集める際にどこに並んでいるか分からない事が多々あります。新商品や滅多に出ない商品などは特にです。職場には商品のある場所を調べる事が出来るHHTというハンディ端末がありますが高価なため数に限りがあり台数が十分という訳ではありません。そこでスマホで代用出来ればかなり助かります。そこで今回はまず商品の画像で商品名をLINE Botni返答してくれるようにしてみました。覚えさせたのは『コーヒー』『紅茶』『水』の３種類です。

## 用意したツール
+ [Teachable Machine](https://teachablemachine.withgoogle.com/)
+ [Make](https://eu1.make.com/)
+ [LINE Bot](https://developers.line.biz/)
+ [Node-RED](http://127.0.0.1:1880)

## 結果
 <img width="500" alt="unnamed (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/e6036ec4-51db-4e1d-3a0c-4d26b7bb7caa.png">



LINEBotに通知された結果です（画面上部の結果空欄は設定にミスがあった為）

<div style="position:relative;width:fit-content;height:fit-content;">
            <a style="position:absolute;top:20px;right:1rem;opacity:0.8;" href="https://clipchamp.com/watch/SWZEb6ubpzV?utm_source=embed&utm_medium=embed&utm_campaign=watch">
                <img style="height:22px;" src="https://clipchamp.com/e.svg" alt="Made with Clipchamp" />
            </a>
            <iframe allowfullscreen style="border:none" src="https://clipchamp.com/watch/SWZEb6ubpzV/embed" width="640" height="360"></iframe>
          </div>
MakeとNode-REDの動画です

## 手順
始めにTeachable Machineに学習させます。
今回はちょうど冷蔵庫に入っていた『コーヒー』『紅茶』『水』があったので学習させました。
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/e4a4f382-4c64-7745-26cc-c8bf5cd1dc82.png)
画面左から順に行います。
1. それぞれカメラを使い最低１００枚程度の画像を登録します。色々な角度から撮ると判定がより安定します。
2. 撮影が終わったら中央のトレーニングをします。
3. トレーニングが終わったら右側のエクスポートをします。
4. 次の画面でアップロードを行うとURLが発行されるので準備完了です。

2が終了した時点で右側の画面内で飲料をかざすと下側のバーがある部分に結果が表示されています。
今回覚えさせたのが３パターンなので画像がどれに一番近いかを判定します。

次にNode-REDを使用してTeachableMachineと連携させていきます。
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/b8f6901f-f668-6854-0ca1-f0b5a7eb5f2c.png)

ノードは画像のように繋がります。

ノードの設定は大きく3ヶ所設定が必要です。
![スクリーンショット (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/897e89c9-7a9b-4611-b415-a54be0e4f908.png)
TeachableMachineのノードですがURLを先程発行したTeachableMachineのURLを入力します。
![スクリーンショット (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/38cda8a4-e5aa-27b9-fc9b-e8700b316be0.png)
次にtemplateノードを画像のようにします。
![スクリーンショット (29)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/b5e408e2-a060-2271-cf8f-95805b2d10a7.jpeg)
次にhttp requestノードのURLをこの後説明するMakeのURLに設定します。

最後にMakeになります。
![スクリーンショット (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/e117a781-7a67-e19a-442d-8062939175d0.png)
２つ繋げるだけです。
![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/7692eabd-a844-fac7-d62a-2fcd5ad30734.png)
Webhooksの青いURL部分ですが先程のNode-REDで設定するURLになります。
それとURLをコピーし別のページでURLを貼り付けたあとに『？inryou=コーヒー』を追加してアクセスします。画面にaccessの文字がでればOKです。（inryouは今回のタイトルを飲料にした為。任意で大丈夫です）
![スクリーンショット (26)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613547/5f3fb04e-dfd8-dd7d-bd48-ca7033bfcb5e.jpeg)

画像内のTOの部分にLINEデベロッパー内の『あなたのユーザーID』を入力します。
メッセージはテキストにして返してほしい文章を入力します。

以上で設定は終わりです。

これでパソコンのカメラに向かって商品をかざして**Node-RED**のカメラノード左側の四角をクリックすると撮影され結果がLINEBotに通知がきます。



## あとがき

今回は**Teachable Machine**に画像を覚えさせるだけそれが何かを判定してくれるというものを作成してみました。初心者の自分でも簡単に出来た位でした。そこで以前に覚えたLINEBotに判定結果を送信させてみることにしました。
今の自分の知識でここまで出来たことに驚きです。僅か１ヶ月で出来るとは思いもしなかったです。
さらにLINEで画像を送信して返ってくるようにしたいと思って色々都試してみたのですがうまく画像を送信する事が出来ませんでした。画像を送信して商品がどこにあるかを教えてくれるところまで出来るように作成したかったのですが難しかったので勉強したいと思います。知識を増やして作成できるよう頑張って行きます。