LoginSignup
3
0

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

Last updated at Posted at 2023-07-19
画像識別するAIを使ってみたので何かに活かしたいな〜

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

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

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

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

やりたいこと

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

使用ツール

【 1 】 画像を学習させる

Teachable Machineを開いて
画像プロジェクトを選択 → 新しいイメージプロジェクト → 標準の画像モデルを選択

スクリーンショット 2023-07-23 21.51.56.png

スクリーンショット 2023-07-23 20.39.01.png
スクリーンショット 2023-07-23 20.39.10.png

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

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

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

スクリーンショット 2023-07-17 11.47.52.png

<トレーニング中画像>
スクリーンショット 2023-07-17 11.50.04.png

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

<トレーニング後画像>
スクリーンショット 2023-07-19 16.59.56.png

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

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

スクリーンショット 2023-07-17 11.50.55.png

スクリーンショット 2023-07-17 11.51.32.png

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

モデルをGoogle ドライブに保存

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

スクリーンショット 2023-07-17 12.38.03.png

【 2 】 Node-REDの設定

<結果> やりたかったことができなかった

スクリーンショット 2023-07-19 0.28.25.png

試行錯誤の足跡

スクリーンショット 2023-07-17 11.59.53.png

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

スクリーンショット 2023-07-19 17.13.25.png

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

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

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

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

1:Googleスプレッドシートを作成
スクリーンショット 2023-07-23 20.47.32.png

2:GoogleスプレッドシートのURLをコピーしておく
スクリーンショット 2023-07-23 20.47.53.png

3:SSSAPIを開いて +Add API をクリック

スクリーンショット 2023-07-23 20.43.56.png

4:API名を入力し、GoogleスプレッドシートのURLを貼る
スクリーンショット 2023-07-23 20.48.12.png

5:APIが作成出来たら、API URLをNode-REDで使用します
スクリーンショット 2023-07-23 20.48.48.png

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

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

スクリーンショット 2023-07-17 11.54.33.png

【 感想 】

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

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

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

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0