Teachable Machineを使ってアレルゲンチェックを実施してみた

こんにちは。t0mohiです。4回目の投稿です。
食品スーパーで衛生管理のお仕事をしております。
前回はPower Automate Desktopを使用して、今まで実施していた作業が自動化できないか考えてみました。
こちらの記事です。
[Qiita]

https://qiita.com/t0mohi/items/6b04123e6de10c3f31a7

今回は、食品衛生担当者として重要な項目の1つであるアレルギーについて、自動で判別できるアプリを作ってみようと思いました。

食物アレルギー表示とは、

:::note alert
食物アレルギー義務表示対象品目（特定原材料）は、「えび、かに、くるみ、小麦、そば、卵、乳、落花生（ピーナッツ）」の8品目。
:::

:::note warn
食物アレルギー表示推奨品目（特定原材料に準ずるもの）は、「アーモンド、あわび、いか、いくら、オレンジ、カシューナッツ、キウイフルーツ、牛肉、ごま、さけ、さば、大豆、鶏肉、バナナ、豚肉、マカダミアナッツ、もも、やまいも、りんご、ゼラチン」の20品目。
:::
であり、表示が漏れていれば、お客さまの命にかかわる重要な表示です。

私が担当してる各店舗においても、このアレルギー表示の間違いが後を絶たず発生しており、悩んでおりました。
つい最近学んだ、**Teachable Machine**を使って、アレルゲンチェッカーを作成してみようと思います。

# Teachable Machineで作成した動画
https://x.com/gcwPvSAIqr10457/status/1839125177327886349

# 使用したツール
・**Teachable Machine**
・**CodePen**

#  Teachable Machineの設定
今回の場合は、アレルゲンチェッカーですので、商品の画像を学習させたいと思います。
代表的な食物アレルギー義務表示対象品目（特定原材料）の中で小麦を対象に「小麦を含む」、「小麦を含まない」を判断させる2パターンと、商品が映っていない場合の 「該当商品なし」 を含む3パターンで作成してみました。

**画像サンプルの取り込み**
サンプルとなる商品の画像を撮影します。
![アレルゲン画像①PNG.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/9e6aa448-0508-d1aa-6fd5-ff2d72155114.png)

アレルゲン小麦あり4種類画像
![アレルゲン画像2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/9f619ad9-2086-8bc3-358f-e3964c805ced.png)

アレルゲン小麦なし2種類画像
![アレルゲン画像③.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/d519fb3a-034d-5776-47d9-168f87d67049.png)

該当商品無し画像（何も手持ちが無かったのでバッグにしました）
![アレルゲン画像４.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/89c9c2f7-abbb-5f60-6a22-a743578e347c.png)



以上の画像を撮影。

**トレーニング**
画面真ん中に **「モデルをトレーニングする」** というボタンがあるのでここをクリックします。
![アレルゲン画像５.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/a0b2eeaa-a9f2-9d9b-9ade-2c07c1f437f2.png)


トレーニングが完了したら、その右側にあるプレビューで、モデルを試してみることができます。
次に「モデルをエクスポートする」をクリックします。
![アレルゲン画像6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/2b127fd2-a123-2c9a-34cf-4fc8f5ab4a45.png)

次にこのような画面が出てきますので、 「モデルをアップロード」 を押します。
![アレルゲン画像９.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/a40c87c1-5a6b-622a-3fa7-d032c811ec31.png)

共有可能なリンクが表示されたら、コピーをクリックします。
![アレルゲン画像10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/1cc32791-c7fd-65da-fc31-ad67fe2e0861.png)
共有可能なリンクのコードを後で使用しますので、コピーしてどこかにメモしておくか、画面を閉じないようにしておいてください。

Teachable Machineの作成は以上です。

# CodePenの設定
![アレルゲン画像11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/1cd649a1-432f-fbd6-dd28-d56ecdd60b91.png)


CodePenの画面を開き、
①名前の変更
②SAVEをクリック
③Forkをクリックします。

![アレルゲン画像12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/e23d417e-5a67-0c19-3353-f54b190633cf.png)
①タイトル名の変更
②モデルのURLを貼り付け
HTMLのタイトル名を書き換え、 JSの中に先ほどコピーしておいたモデルのURLを貼り付け、上書き保存します。

**画面の表示を切り替え**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/16302e45-65ad-dea6-833a-83ce500957fa.png)

右上の四角をクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/68f9c065-652f-33b9-519a-adb1f2f2cdb8.png)
「Full Page View」をクリックします。
Full Page Viewにするとコード入力の画面が非表示になり、カメラの映像と結果の表示だけになります。

# 「判定結果」

アレルゲン小麦含む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/1bb80ba5-49e6-458b-a420-f4798eb6a53b.png)

アレルゲン小麦含まない＋該当商品無し
![アレルゲン小麦含まない.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840320/ca70624d-a13b-1d3d-1583-c149e0c5b5cd.png)

# 反省・最後に
画像の枚数が足りない?角度、光などの関係?で、100％の判定が出ない商品がありました。
(エンゼルパイは何故か商品の裏の画像で、横向きにしたら、判定が100％に!?)

アレルギーというものは、人の命に関わるものであり、アレルギー事故は絶対発生させてはいけないものです。
今回は、お菓子でのアレルゲンチェッカーを作成してみましたが、自社ではお惣菜グループのアレルギー事故が多く発生しております。

成果物としてはまだまだですが、さらに改良し、お惣菜売場にアレルゲンチェッカーとしてスマホを置いておいて、お客さまが自由にチェックできる仕組みができるように、ブラッシュアップしていきたいと思います。