判断に迷わない！　Teachable Machineにお任せあれ

おはよう・こんにちは・こんばんは。某小売店デリカ部門で働くyukiyoriです。デジタルを学習し、約２か月。今回は **Teachable Machine**を用いた試作を作ってみました。
過去の試作は以下の通りです。今回のとは関連性はないので、参考までに…。

https://qiita.com/yukiyori/items/0758fe48d63e1c127b13

https://qiita.com/yukiyori/items/b7bc0dc9cf00d42872b7

https://qiita.com/yukiyori/items/3929b88d567cb03ee262
# 出来上がった試作
写真を判定して、どの商品に利用するのかを判断するものを試作しました。

https://x.com/yukiyori030523/status/1894990706693022035

:::note info
こちらは「サーモンA」と書かれたものと、「サーモンB」と書かれたものを判断しています。
「1962・1964・1985」は「サーモンA」と判断すると数字が大きくなります。
「2003・2005・2023」は「サーモンB」と判断すると数字が大きくなります。
:::

:::note warn
パソコンの画面をスマホで撮影したもので、わかりにくくなっております。申し訳ございません。
:::



# どうして作ろうと思ったか
私の所属するデリカでは総菜・弁当・寿司など店の中で製造しているわけですが、商品一つ一つに決められた原材料を入れなければいけません。その原材料でも見た目が似ていたり、判断に迷う原材料が存在します。経験年数の長い人ならある程度分かっていますが、新人さんやたまにしか作業に入らない人は似ている原材料があるとどれを使えばよいか判断に迷います。もし、間違った原材料のまま販売してしまうと、食物アレルギーを発症して、死に至ることもあるので、そのようなミスは許されません。

# 使用したツール
・**Teachable Machine**
・**Code Pen**
今回はこの2つを使いました。最近お世話になっているChatGPTですが、今回はお休み。というのもTeachable Machineは使い方の話を聞いての実践だったので、お休みしています。

# 作成手順
## 1.Teachable Machineの設定
スマホでもできるみたいですが、画面の大きいパソコンがいいかも！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/1e702ac0-7f50-4c6a-87ac-e69d904e452d.png)
↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/bbd2c2e3-aa76-4985-b178-d8f9ba734047.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/97a2969d-003c-4992-97ba-8bec71b9a70a.png)

ここまで進むと次のような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/1fd4050d-77e4-43f0-bae5-bc23f664aa9f.png)

ここの画面を編集していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/64835d44-043b-43df-82d3-656604c73784.png)

↑　鉛筆✎マークから名称を変更します。今回の場合、 **「1962・1964・1985」** と **「2003・2005・2023」** の２つのグループです。
ちなみに数字は画像の商品を使用して製造する会社内の呼び出し番号です。
実際の呼び出し番号ではなく、フェイクの番号ですが…。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/23c84191-daa4-401d-9cb6-1c803823f08c.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/bd7d5325-05e5-4d26-97ee-5e61d63f17db.png)

長押ししながら覚えさせたい画像を映します。（今回の場合、「サーモンA」）
同様に「Class2]もやっていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/ef28d692-fdf7-4bfe-9b1a-d4a024f40b29.png)
そうすると　↑　のような感じになります。

次にこれらの画像たちを学習させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/3416fe87-8d5d-40d5-8cc6-e0b7b4e56512.png)

トレーニングが完了すると　↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/c4752d84-55d2-450a-83f8-5bf2e411ae71.png)
このような画面になります。

この状態で、サーモンAを映すと・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/0fb5beea-3a4a-4595-af4b-ad471d483d08.png)

 **「1962・1964・1985」** が100％に変わります。映した画像が「1962・1964・1985」のグループに属すると判断したわけです！！

 同様に、サーモンBもやってみると・・・・

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/51143aab-1ed1-464e-a0b6-540fdeb761ae.png)

 **「2003・2005・2023」** が100％に変わりました！
 きちんと判断できてますね！

判断できたことを確認出来たら、

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/19559f98-cfb3-4351-b45b-886b7c68bfd2.png)
↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/7c4e9f68-5026-45fe-ac2d-d5c60d4b5166.png)

 **「クラウドモデルを更新する」** となっていますが、最初は **「モデルをアップロード」** が出ていると思うのでそれを選択します。
そうすると次の画面が出ますので、 **Teachable Machine** の編集は終了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/33294291-99e4-47ea-b61b-f8025aa21e03.png)

 ## 2．Code Penの設定

 **Teachable Machine** の最後の画面 ↑ は残したまま、
  次に **Code Pen** を開き、 **Pen** のところを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/15ba6019-8506-4d14-821e-571bc9cdad41.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/c145ef48-eb95-45cc-bcf6-65a743428325.png)

①で任意の名前に変更し、②→③の順に選択します。

次に **Teachable Machine** で残しておいたページを次のように貼り付けをします↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/4c7cc66c-5783-452e-8bd1-b9bf78d433ff.png)

HTMLのURLの一番上を分かりやすいタイトルへ変更します↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/b6683d5f-5c28-45aa-97b2-100615fe4a95.png)

↑　この場合、サーモン判定に変更しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3961319/05e336d2-b0be-437a-afc0-4ae773ca2ab8.png)

すると画面下のほうにこのようなものが出てきます。真っ黒なところはカメラで写した映像が出ます。カメラを伏せていたため、真っ黒になっています。
この状態で、「サーモンA」や「サーモンB」の画像を映すと、画像に応じて、0.02，0.98となっているところが変化します！

# 実際に使えそうか？
ここまで試作したものの紹介をしてきましたが、実際業務で使えそうかを考えたいと思います。
## 使えそうなところ

:::note info
・今回みたいに紛らわしいものの判別には使えそう
・過去の記事で紹介した、返品のツールにも使えそう。商品の写真を認識して、担当窓口の宛先を教えるというような設定でいけるのではないか？
:::

## ん？これはちょっと・・・というところ
試作作ってみて、微妙だったところも紹介します。

:::note warn
・Teachable Machineにスマホのアプリがあったので、試しにインストールしてみたが、起動せず・・・。
・Code Penもスマホでも利用できるが、かなり動作がかなり重たいし、カメラが内側のカメラでしか読み込めなかった。
:::

# 作ってみた感想
今回は、 **Teachable Machine** で試作を作ってみましたが、最初は業務で何に使えるんだろう？と思っておりましたが、やっていくうちに使えそうなところがある気がしてきました。やってみるって大事ですね！
設定方法もさほど難しくはないと感じたので、上手く使って業務の改善に繋げられたら良いなと思いました。
スマホで使いやすくなってくれれば、なお良いと思っております。

ありがとうございました！