TeachableMachineを使って『アレルゲンの確認、見逃しゼロへ。』

みなさんこんにちは
某スーパーで管理職として働いているうっちーです。
前回に引き続き、デジタル未経験者の私がデジタル革命に挑戦し、その内容を発信していきます！！


前回の記事はこちらです↓

https://qiita.com/sh000ta/items/ac3a8ea3d060f25a462c

# 『アレルゲン確認、見逃しゼロへ。』を制作した経緯
私は仕事の立場上、商品に対してのクレームがあったとき、また商品のアレルゲンについて、
お客さまから問い合わせがあった際に商品のアレルゲン確認を行います。
アレルゲン情報は基本的には商品パッケージの裏に表記されていますが、
小さく見にくい場合があります。
目視でのチェックだけでは見落としの可能性があると思い、見逃しゼロへするために
Teachable Machine・Node-RED・LINEBotを使って制作してみました。


アレルゲン表示は
<font color="red">えび・かに・くるみ・小麦・そば・卵・乳・落花生（ピーナッツ）</font>８品目にしています。


# 完成動画

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TeachableMachineを使って<br>商品のアレルゲン確認の見逃しゼロへ<br><br> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><br> <a href="https://twitter.com/hashtag/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#デジタル</a><br> <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><br> <a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://t.co/058YJnC61S">pic.twitter.com/058YJnC61S</a></p>&mdash; うっちー (@u_sh00ta) <a href="https://twitter.com/u_sh00ta/status/1709995997068488743?ref_src=twsrc%5Etfw">October 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

LINEBotへ商品写真を送るとアレルゲン表示を返してくれることに成功しました。
アレルゲン８品目を確認したい場合は手の写真を送ることで返してくれます。

# 使用したツール

[LINE Developersアカウント](https://developers.line.biz/ja/?status=success)
[FlowForge](https://flowforge.com/)
[Teachable Machine](https://teachablemachine.withgoogle.com/)
Node-RED
# 設定方法
## １.Teachable Machine
Teachable MachineとはGoogleが提供する無料のAI作成ツール。
画像、音声、ポーズのパターンの機械学習ができます。
具体的なやり方はこちらの記事を参考にしました。
<font color="blue">モデルをアップロード後共有可能なリンクをコピーしてください。



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



私の場合は、商品のアレルゲンを確認したいので、商品の写真を学習させました。（１００枚以上）
写真の<font color="blue">class名</font>を該当商品のアレルゲンにしました。
例「小麦・乳・卵・くるみを含む」


## 2.Node-RED


フローはこちら
![LINE_P20231006_045832080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/94ecb52f-a34f-2c12-cb51-ee511fb48e39.png)

<details><summary>各ノードの設定（👈クリック）</summary><div>

**・webhook設定
Pathは「/webhook」にしました。**


![5280.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/c5dfeaac-7628-bad0-d2a2-56ccbe3d47b1.jpeg)



![5279.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/ba9e32d2-34b4-8bde-261d-63693151696f.jpeg)

URLには
https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content
コピーして貼り付けて下さい。
**・Teachable Machine設定**

![5278.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/47363d7c-7da6-a6a7-e6b6-086f97c4274a.jpeg)
URLにはコピーした共有可能なリンクを貼り付けしてください。

**・templeteの設定**

![5277.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/24f64ddc-1b3f-b087-b17c-467cfb7511ea.jpeg)

テンプレートには{{payload.0.class}}を入力します。



**・LINE設定**

![5281.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535733/27948131-d60c-e0d5-548a-54a20b3c5cde.jpeg)

Secret:チャネルシークレット 入力
AccessToken:チャネルアクセストークン　入力</div></details>




# 終わりに
今回、Teachable MachineとNode-REDを使ってアレルゲン情報を知りたい商品写真をLINEBotに送ると、結果が返ってくる『アレルゲンの確認、見逃しゼロへ。』を制作することができました。
使用する場面は限られますし、改善する点は多いと思いますが、
管理者の方や、惣菜部門（ｲﾝｽﾄｱ商品）などで活用できるのではないかと感じました。
これからも楽しみながら制作していこうとおもいます。
最後まで読んで下さり、ありがとうございました！

https://twitter.com/u_sh00ta