Node-REDとTeachable Machineを使ってみる！！
皆さん、こんにちは！私は沖縄の小売業で働いているサラリーマンです！
Teachable Machineの使い方を学習したので応用編としてNode-REDと連携するしました。
初めてのチャレンジなので苦戦しましたが、限られた時間の中で形になったことを記事にしました。
使用したツール
●Teachable Machine https://teachablemachine.withgoogle.com/train
●Node-RED
●Make
Node-REDとTeachable Machineを繋げる
①パレット管理にノードを追加する
②ノードを新規にインストールして追加
③必要なコード
- node-red-contrib-teachable-machine
- node-red-contrib-browser-utils
（自分のPCのカメラの写真データを読み込んでくれるノード） - node-red-contrib-image-output
（読み込んだ画像をNode-RED上に表示してくれるノード)
④ノードを配置する
- 入力パレット・・・camera
- 分析パレット・・・teachable machine
- 出力パレット・・・image
- 機能パレット・・・template
- 共通パレット・・・debug
⑤Teachable Machineと連携する
➀Urlの欄に自分で作ったTeachable MachineのモデルがアップロードされたURL（画像②）を貼り付ける
画像②Teachable MachineのモデルがアップロードされたURLは下記の黄色箇所
Templateのノードをダブルクリックします。 テンプレートのコード記入欄に以下のコードを貼り付けます。
結果は「{{payload.0.class}}」です。
⑥デプロイする
⑦Webカメラの前で本を構えて、cameraノードの横のボタンを押します
成功したら下記のような判定結果が表示されます。
⇒実際はCameraが機能せずに失敗となりました。
参考画像 成功していたら下記のようになっております。
Webhookを使ってNode-REDとMakeを繋げてみた！！
参考資料 https://www.youtube.com/live/elTc1JrCoi0
①Makeを開く
②Custamu webhookを追加する
③Send a Notificationを追加する
④WebhookとLineを繋げる
Run once 押すと下記の内容で通知が届く
⑤Node-REDとMakeを繋げる
下記の順番でノードを入れる
- Camera
- teachable machine
- image preview
- template
- http request
- http response
- 最後にdebug
課題が残る結果に！！
本来実施したかったことは、Node-REDのCameraからで写真と撮り、Teachable Machineに画像データが行き画像判別して、またその情報をNode-REDからMakeに送り、Makeと連携したLINEから通知がくる想定でした。
しかしながらCameraから画像をとることができずにNode-REDをうまく動かすことができなかった。
原因は下記のノードがうまく設定されていないことだと考えられます。
- node-red-contrib-browser-utils
（自分のPCのカメラの写真データを読み込んでくれるノード）
ChatGPTにも聞いて下記の回答を頂きましたが、成功することはできなかった
あとがき
今回チャレンジしたNode-REDとTeachable MachineそしてLINEへ繋げる内容でしたが結果うまくいかなかった。
残念!! Teachable Machineの画像識別は比較的に簡単にできましたが、その他への連携が難しい。まだまだ知識と経験不足であり未完成の状態でした。
しかしながら今回チャレンジしてNode-REDとTeachable Machineの活用の機会は多くあるとこを実感いたしました。今後も手を動かし習得していきたいと考えております。
最後まで読んでいただきありがとうございます。