Teachable Machineという画像識別するシステムを使って、こんなのあったらいいなを作ってみたけど難しかった！

##### 画像識別するAIを使ってみたので何かに活かしたいな〜

画像識別AIというものを知る機会があったので、それで仕事の役に立つ事は何かないかな？と考えていて
職場の人にも話をしてみたところ「販促用のロゴを識別できるものがあったらいいかも！」という意見をもらいました。

私の所属している部署では自社の販売促進用の資材に使用されているロゴや
自社キャラクター画像などの資材を管理しているチームがあります。


パンフレットなどの資材は数百点あり
作り直したりする時には
この画像がどの資材に使われているか
対象を絞り込むことがとても大変です。


これまでロゴなど探したい画像が入っているものを探すときには
キーワード検索しかできないので
（※キーワードの打ち方で結果にバラつきがあるというから困るわけで）
画像で対象の資材を探せるものを作ってみることにしました。


### やりたいこと

**1：LINE Botから写真画像を送信**
**2：Teachable Machineで画像判定をする**
**3：画像判定した結果によって対象の資材名を返したい**




### 使用ツール

- [Teachable Machine](https://teachablemachine.withgoogle.com/)
- [Node-RED](https://nodered.org/)
- [LINE Developers](https://developers.line.biz/ja/)
- [SSSAPI](https://sssapi.app/)
- Google スプレッドシート



### 【 1 】 画像を学習させる



[Teachable Machine](https://teachablemachine.withgoogle.com/)を開いて
画像プロジェクトを選択　→　新しいイメージプロジェクト　→　標準の画像モデルを選択


![スクリーンショット 2023-07-23 21.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/67d908d2-0525-c826-f3ea-69b1765a6feb.png)





![スクリーンショット 2023-07-23 20.39.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/a3dc5219-e704-a9ec-8f24-4131f4815557.png)
![スクリーンショット 2023-07-23 20.39.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/42b61ebe-b285-a84e-cab6-8feaedf181c9.png)


タイトル名を入力　→ ウェブカメラ　→　長押しして録画（PCのカメラが起動） →　画像を連写

何パターンか撮ったら「モデルをトレーニングする」を押して待ちます

※ロゴの代わりに私の下手な絵でやっていきます ^ ^;

![スクリーンショット 2023-07-17 11.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/75c0d5f7-1430-04f3-5d42-5674ed29fd9f.png)



<トレーニング中画像>
![スクリーンショット 2023-07-17 11.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/9f903dbf-7b98-5ba2-19d8-5565ba2b58cd.png)


トレーニングが終わると右側にプレビューが出て
PCのカメラに先ほど学習させたものを写すと識別します

<トレーニング後画像>
![スクリーンショット 2023-07-19 16.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/25f3a589-8dc6-266f-6264-dbec14496e8c.png)





正しく識別できていることが確認できたので
このイメージモデルを他のシステムで使えるようにします

上の画像の右上青枠の「モデルをエクスポートする」を選択して　→　モデルをアップロード
→　共有可能なリンクが生成されます

![スクリーンショット 2023-07-17 11.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/93a96a06-044a-46ce-3736-c726aba03eba.png)


![スクリーンショット 2023-07-17 11.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/bfecd155-e5ed-d6d0-82a9-dff4e5b34b23.png)

※この共有可能なリンクは、2：Node-REDのTeachable Machine ノードのところで使用します




<details>
  <summary>モデルをGoogle ドライブに保存</summary>



ここで作成したモデルは、Google ドライブに保存すると後で編集したりモデルを追加したりすることができるので便利です

![スクリーンショット 2023-07-17 12.38.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/bec07b20-b054-2da2-458a-610f608e8854.png)



</details>


### 【 2 】 Node-REDの設定





##### ＜結果＞ やりたかったことができなかった

![スクリーンショット 2023-07-19 0.28.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/71b7fb42-b77f-c35d-1ade-bfb65a099e39.png)





<details>
  <summary>試行錯誤の足跡</summary>

![スクリーンショット 2023-07-17 11.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/bbb0f1db-23c8-5265-de2e-25c13a7775b6.png)


カメラで撮ったものは画像を識別してくれるが
LINEBotから送った画像は受信すらしていない様子・・・

![スクリーンショット 2023-07-19 17.13.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/af74a484-e40c-e288-809b-c08433133946.png)

色々調べてline-imageというのを挟んでみたり・・・


Node-REDにこだわらずMakeやCodePenのやり方などを記事で知って試すもわからなかった・・・


</details>



<details>
  <summary>Googleスプレッドシートで資材一覧を作成し、でAPI連携できるようにする</summary>


LINEBotから画像を受信してTeachable Machineで画像識別をした結果をもとに、対象の資材の名前を返すためにGoogleスプレッドシートで資材一覧を作成し、API連携できるようにする。

1：Googleスプレッドシートを作成
![スクリーンショット 2023-07-23 20.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/3bbf7093-e030-e042-baa7-f1a3cedf1635.png)

2：GoogleスプレッドシートのURLをコピーしておく
![スクリーンショット 2023-07-23 20.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/c844a32e-0db1-8838-49cc-df105b688b6e.png)


3：[SSSAPI](https://sssapi.app/)を開いて　＋Add API　をクリック

![スクリーンショット 2023-07-23 20.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/c12e8575-8269-3a9b-a72c-a86304a31a44.png)

4：API名を入力し、GoogleスプレッドシートのURLを貼る
![スクリーンショット 2023-07-23 20.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/523ffc8f-9517-4ab1-c251-2579ac79b68f.png)

5：APIが作成出来たら、API URLをNode-REDで使用します
![スクリーンショット 2023-07-23 20.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/00881135-81aa-c599-24d2-e3f7a9ae77ee.png)

このあとNode-REDに設定していくんですが、やり方がまだできていないので今回の記事はここまでです。

</details>



<details>
  <summary>Teachable MachineノードにURLを貼る</summary>
Teachable MachineでモデルのエクスポートしたときのURLをNode-REDのTeachable MachineノードのURL部分に貼ります

![スクリーンショット 2023-07-17 11.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476276/4bebdb33-86fa-4867-757d-ea0ea227eade.png)


</details>

### 【 感想 】 

実装までは至れませんでしたが、引き続き完成させるまでトライしたいと思います。
これが自社内で使えるようになったら対象を絞る・検索するといった作業が
楽しくなるな〜と思いました。

画像の読み込ませ方は、他にも検討の余地もあるかなと思うので
LINE Botのように投げかけたら返すという仕組み以外でも画像を識別してくれる機能自体は
とても有効だと思いました。

この機能を後は何とどう連携させていくかということを
職場の方達と理想やイメージを膨らませたいです。

ちょっとしたことの工夫が業務を行う上でのモチベーションUPにつながるかもしれない！
と、うまく言い表せないけど何かの手応えを感じています。
今の自分にはハードルがとても高くて現時点ではまだできていないけど、
作ってみよう！と挑戦したおかげで得られたものがあることを感じた。