ChatGPT + Node-RED + HoloLens 2 + IoT な連携の Node-RED フロー例

by 1ft-seabass

Slide 1

Slide 1 text

Node-RED Park Vol.11 - AIを使うフローについて語る会！ ChatGPT + Node-RED + HoloLens 2 + IoT な連携の Node-RED フロー例ワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

15 分くらいを目指してアレコレ話します

Slide 5

Slide 5 text

音声認識したテキストを ChatGPT API に伝えて IoT へ指示する JSON に変換され IoT が動作します日本語音声認識（インターネット経由） IoT 指示 JSON 自前 Node-RED ChatGPT API HoloLens2 IoT

Slide 6

Slide 6 text

ひとまずデモ

Slide 7

Slide 7 text

OpenAI 社の ChatGPT API 使うのはこの API です https://platform.openai.com/overview

Slide 8

Slide 8 text

Chat completion を使います画像生成とか音声認識とか他にもいろいろあるんですが、話題のチャットの仕組みを使います

Slide 9

Slide 9 text

おおまかには OpenAI の Web 版で使えるのと近いものたしかに API と Web 版で比較してやってみても同じような印象（あくまで印象ですが）

Slide 10

Slide 10 text

API reference ページで API Keys のリンクがあるので、そこからアクセス https://platform.openai.com/docs/api-reference/authentication

Slide 11

Slide 11 text

ログイン聞かれるのでログインしますわたしはうっかり Sign up 押しがちなのは秘密

Slide 12

Slide 12 text

API Keys のページで Create new secret key ボタンをクリックしてキーをメモ

Slide 13

Slide 13 text

一度しか生成されないので閉じる前にメモしておきましょう！

Slide 14

Slide 14 text

素の REST API であったり公式の Python や Node.js ライブラリが使えます

Slide 15

Slide 15 text

今回はつなぐツールとして Node-RED 使います API や IoT につなぎやすい Node.js 製ローコードツール

Slide 16

Slide 16 text

Node-RED では chatgpt で調べるとすでに 3 つもあります API ベースでつながるものです

Slide 17

Slide 17 text

今回は node-red-contrib-simple-chatgpt をつかってつないでみます

Slide 18

Slide 18 text

作者のがおまるさんの記事がくわしいです API Key 入れるだけでサッと使えるところが素敵すぎる https://zenn.dev/gaomar/articles/e46cba8e489dfa

Slide 19

Slide 19 text

ウォンバットの質問をしてみます Web 版ではこう返ってくる。

Slide 20

Slide 20 text

こんなフローで質問チャレンジ

Slide 21

Slide 21 text

ChatGPT ノードは API Key を Token に設定

Slide 22

Slide 22 text

ChatGPT ノードに送り込む質問を手前の change ノードで仕込んでおく

Slide 23

Slide 23 text

デモしてみます！

Slide 24

Slide 24 text

他のシステムに馴染ませる調整の一例 ChatGPT さんは回答できるジャンルは万能だけど、あえてルールを決めて回答しやすく特化。さらに JSON データに加工して回答してもらい、他のシステムにつなぎやすく。もう人間同士の対話っぽい。人間の言葉を理解 JSON データに加工して回答ルールを決めて回答しやすく特化ブラッシュアップ！ブラッシュアップ！人間の言葉を理解人間の言葉で回答回答ジャンルは万能（得手不得手はある） ■ChatGPT の基本キャラクター ■他のシステムに馴染ませる調整（今回）

Slide 25

Slide 25 text

うまく JSON で返ってくる質問の試行錯誤をしてみました！いい感じのエアコン設定温度を JSON データで返答し HTTP API 的に ChatGPT が答えてくれる質問例のメモ https://www.1ft-seabass.jp/memo/2023/03/13/chatgpt-http-api-like-json-response-tips1/

Slide 26

Slide 26 text

さらにブラッシュアップしたものがこちら！ LED への RGB 値を JSON データで返答する ChatGPT API の仕組みを Node-RED でブラッシュアップしたメモ https://www.1ft-seabass.jp/memo/2023/03/17/chatgpt-http-api-like-json-response-tips-with-node-red/

Slide 27

Slide 27 text

さらにステップアップしたもの

Slide 28

Slide 28 text

IoT 指示はこんな風に動作します obniz 側で IoT 指示 JSON に応じて動作します ● {"type":"on"} ○ 機能 : LED がつく ○ セリフ : 「おんにして」 ● {"type":"oﬀ"} ○ 機能 : LED が消える ○ セリフ : 「おふにして」 ● {"type": "blink", "interval": 1, "count": 3} ○ 機能 : 3 回点滅する ○ セリフ : 「3回点滅して」

Slide 29

Slide 29 text

やってみます！

Slide 30

Slide 30 text

ChatGPT API を上手く組み込めました人間の言葉を理解 JSON データに加工して回答ルールを決めて回答しやすく特化ブラッシュアップ！ブラッシュアップ！ IoT 制御

Slide 31

Slide 31 text

入り口に音声認識を加えるとより可能性が広がりました人間の言葉を理解 JSON データに加工して回答ルールを決めて回答しやすく特化ブラッシュアップ！ブラッシュアップ！ IoT 制御なんらかの音声認識

Slide 32

Slide 32 text

HoloLens 2 には音声認識機能があり音声を日本語テキストに変換できます音声認識機能（インターネット経由）音声データマイク入力テキスト日本語テキスト

Slide 33

Slide 33 text

Slide 34

Slide 34 text

HoloLens2 の音声認識から ChatGPT 経由の obniz への自然な呼びかけで指示できました動画をお見せします！

Slide 35

Slide 35 text

こちらから動画も見れます https://twitter.com/1ft_seabass/status/1635135055503949829

Slide 36

Slide 36 text

デモしてみます！

Slide 37

Slide 37 text

ここまでしっかりお願いしてると GPT3.5 でも 4 でもあんまり変わらない http request ノードでピュアに叩くことをしました https://www.1ft-seabass.jp/memo/2023/05/02/openai-gpt-4-api-ﬁrst-step/

Slide 38

Slide 38 text

➔ Node-RED で ChatGPT するノードはいろいろあってとっつきやすい ➔ JSON で返すことができると Node-RED に受けて IoT とか VR にアレコレと料理ができるのでたのしい ➔ Unity で確かに開発できるけど Unity 内で ChatGPT API の試行錯誤を直結するのは大変なので Node-RED であれこれできるがめっちゃありがたいまとめ