人の目では困難！！商品パッケージの新旧をTeachable MachineとLINE Botで見分けます

# 間違い探しのような商品パッケージ変更を見分ける
こんにちは、私はスーパーでバイヤーをしているアラフォー会社員です。
皆さんスーパーのチラシを見たことはありますよね？
あのチラシですが、出来上がるまでには多くの人間の度重なるチェックがあるのです。
もちろん私を含めたバイヤーのチェックも必須です。
そんなチラシチェックでの「あるあるネタ」
 **商品パッケージのマイナーチェンジがほぼ間違い探しレベル！** 
長年何度も悩まされたこの問題の解決に一筋の光が見えました。
「これってAIに画像判別してもらえば間違いが無くなるんじゃないか！？」
最近知ったTeachable Machineという簡単に画像や音声を機械学習できる仕組み。
これを使えば人間では判別の難しいパッケージ画像でもズバッと仕分けてくれるはずです。
ということでこの問題をTeachable MachineとLINE Botを組み合わせて解決してみます。

⇩⇩出来上がったのがこちら⇩⇩

https://twitter.com/raN4425nTW53093/status/1683813787965734913



# なんで作ったのか

まずは誤解を与えぬように言っておきます。
パッケージリニューアルはメーカーがお客さまに商品をより良く伝えるための努力です。
そして一見変化が分かりにくい＝いつも買ってくれてる人が戸惑わないようにへの配慮です。
素晴らしいことなんです。
それを大前提としつつ下の画像をご覧下さい。

:::note info
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/e41f8479-f9bb-ecec-c8f1-d64d6d6e8df5.png)
※掲載についてはメーカー様の許諾を得ています。
:::

ねっ？　画像だけみるとどれが何時のものだか判別できないでしょう？
我々はチラシに掲載される画像が今現在売場に並んでいるものと同じかチェックしなくてはなりません。
でもこれが容易ではない。。
人間の目では間違う可能性が高いので、いっそのことデジタルで解決しようと思いました。
ということで **LINEで商品画像を送り、その商品がいつのパッケージかを返答してくれるものを作ります。** 

# ☆作成手順☆

## 使用ツールはこちら
* LINE Developers　(公式LINEの作成）
* Teachable Machine（画像判別の機械学習）
* Node-RED　（LINE、Teachable Machineの連携）

## Teachable Machineで機械学習
Teachable Machine自体は登録も無しで直ぐに使えます。
説明も日本語だし操作も簡単なので初心者の私でも使いやすいです。
今回は手元に無い古い商品も機械学習させるため、画像データをアップロードし学習させました。
しかしこれがつまずきポイントに…
各画像を1枚づつアップロードしたのですが、それでは全く判別してくれませんでした。。
この時の正解率は20％。　というか全てを同じ画像として認識していました😢
本当は実物を100枚程度角度等を変えて学習させるのがいいのでしょうが、古いパッケージは手元にありません。。
そこで同じ画像を大きさを変えたり、全く同じ画像を何枚かアップロードしてみました。
するとみるみる精度があがり3～4枚づつ学習させた時点で正解率はほぼ100％になりました😃

機械学習が終わったら画面右上の`モデルをエクスポートする`をクリックします。
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/e40fd6f7-cfa2-b1be-4038-7156d1dd4b49.png)

さらに`モデルをアップロード`をクリックし`共有可能なリンク`をコピーします。
このリンクを後で使用します。
![画像７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/de71ed7f-14bc-6c28-a080-15a0f0ac9df8.png)

## Node-REDの設定
最終的に出来上がったものがこちらです。　かなりシンプルです。
![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/a8d9598a-a278-8986-6a8e-c383e3f7c4bb.png)

Node-REDの設定については引用記事を大変参考にさせていただきました。
初心者にもわかりやすい記事をありがとうございます。
ノードの各設定については引用記事にも詳しく記されておりますので是非読んでみてください！

https://qiita.com/jiko111/items/5fcd75924f59d900e128

https://atlabo-handson-08.netlify.app/#2

では各種設定の説明です。　引用記事と重複する内容が多数ありますがご了承下さい。

### ①http inノードの設定
![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/e73f3efc-06d7-bfeb-5790-6a9eab45ce3e.png)
メソッドを`POST`にします。
URLに`/linebot`と入力します。

### ②functionノード（1つ目）の設定
![画像10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/9a419e2c-cab5-db54-fa5f-012775f097fa.png)
コード欄に以下のコードを入力します。

```javascript
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;

msg.messageID = messageID;
msg.replyToken = replyToken;

return msg;
```

### ③http requestノードの設定
![画像11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/4a3bc346-3060-e7cd-cc0d-2b78fa3431a4.png)
メソッドは`GET`を選択。
URL欄に下記のURLを入力。
```javascript
https://api-data.line.me/v2/bot/message/{{{messageID}}}/content
```
認証にチェックを入れる。
種別は`Bearer認証`を選択。
トークンにLINE botのチャンネルアクセストークンを入力。
出力形式は`バイナリバッファ`を選択。

### ④Teachable Machineノードの設定
![画像12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/3c0b6412-d4c2-174f-36be-2c62c6724610.png)
Modeは`Online`を選択。
URlに`Teachable MachineでコピーしたURl`を入力。
outputは`Best prediction`を選択。

### ⑤functionノード（2つ目）の設定
![画像13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/5e18aff0-58a7-766e-0418-8108837eb682.png)
コード欄に以下のコードを入力します。
```javascript
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `これは「${className}」のパッケージだよ`
        }
    }
];
return msg;
```

### ⑥LINE ReplyMessageノードの設定
![画像14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467543/40674f99-c028-b075-c8ce-ff35957a8786.png)
Secretに`LINE botのチャンネルシークレット`を入力。
AccessToken`LINE botのチャンネルアクセストークン`を入力。

設定は以上！！

# 作ってみて気づいたこと　これからの可能性
今回Teachable Machineでの機械学習をメインとして微妙なパッケージの違いを判別してみましたが、実用レベルには至っていません。

問題点は
　①膨大な種類のパッケージを学習させることが出来ない。
　②微妙なPKGの違いを実物画像で判別させるのは難しい。（チラシ確認なら可）
といったところです。

②については実物画像の学習枚数を増やせばクリアできる可能性は多いにあると思います。
しかし今回のように既に実物がない場合は難しいと言わざるを得ません。
1世代前との新旧判別だけなら今から実物の画像収集すれば来期には実用が見込めるという希望は残っています。
実際の運用を考えると1世代前との判別だけいいかと思いますし。

Teachable Machinenについては他の業務で使えることが無いかもう少し考えてみたいと思います。

また画像判別の機械学習についてはもっと精度が高ければ棚割の間違いや在庫の瞬間的な把握等に役立てそうだなと思いました。

なんにせよ、また1つデジタルの武器を手に入れたを嬉しく思います。
次はもっといいものを作るぞー！