概要
楽しそうなイベントがあったのでChatGPT入門のため参加してみました。
ChatGPTとA-Frameで遊ぼう - connpass
https://xr-fukuoka.connpass.com/event/278334/
ChatGPTに何をどのように伝えればいいかをシンプルなサンプルで解説いただいてわかりやすかったです。成果物もかなり遊べるものでした。以下のページで公開されてます。ChatGPTのAPIKeyがあれば試せます。
GitHub - TakashiYoshinaga/ChatGPT-A-Frame-Sample
https://github.com/TakashiYoshinaga/ChatGPT-A-Frame-Sample
A-Frame
ブラウザで3Dシーンを手軽に作れる楽しいフレームワーク。
A-Frame – Make WebVR
https://aframe.io/
サンプルの仕組み
作って欲しいシーンをChatGPTに投げて、返ってきたコードを抽出してページに埋め込んでそのままプレビューできる、という仕組みでした。なるほど、いいアイデア。
ChatGPTへのリクエスト
このサンプルでChatGPT APIを使ってどんな感じにリクエストするのかがよく理解できました。
キャラ付けできる
A-Frameのコードを描いてくれるキャラとして指定することで、より正確な答えを返してくれるようになる、ということだと思います。サンプルでは以下のようなキャラ付けがされてました。role="system"を使ってこの情報を伝えるということでした。
role: "system", content: "あなたA-Frameバージョン1.4.0以降のPrimitive Elementのタグを教えるアシスタントです。"
命令を伝える
role="user"を使って作って欲しいシーンを文章で伝えてリクエストします。使ってほしくないタグなどがある場合は文章に含めることで考慮したコードを返してくれます。結果をコードブロックに記述してもらうことで、回答からコード部分を抽出できる工夫がされてました。
role: "user", content: "立方体を描いてください。a-camera,a-assets,a-animation,a-lightは使用しない。結果はコードブロックに記述。"
過去の文脈も反映
受け取った回答をrole="assistant"として追加し、さらに命令を追加してChatGPTにリクエストすることで過去のやり取りを考慮した回答が得られるということでした。そうすることで「立方体を描いて」の後に「その立方体を半分のサイズにして」みたいなやりとりでシーンを作っていくことができました。
また、受け取った回答の必要な部分だけ（今回だとコードブロックだけ）をassistantとして追加することで、ChatGPTからのレスポンス向上、利用料削減が期待できるというアイデアも紹介いただきました。ちょっと改ざんして伝える、これはいろいろ使えそう。
サンプルで遊んだ結果
３つの立方体を描いてもらいました。
同じ命令でも違う結果になります。
雰囲気のある背景が貼られました。どこから拾ってきたんだろう。
感想
なかなか指示が伝わりにくいときもありましたが、それも含めて楽しめました。gpt-4だともっと賢いんでしょうね（しかしまだ料金高そう）。2時間でさっくり入門できてとてもいいイベントでした。ありがとうございました。