--- title: ChatGPTとA-Frameで遊ぼう tags: author: [Takashi Yoshinaga](https://www.docswell.com/user/Tks_Yoshinaga) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/5EGG8X5WEL.jpg?width=480 description: 2023/04/30改定 2023/03/24に開催したChatGPT APIのハンズオン資料 published: March 24, 23 canonical: https://www.docswell.com/s/Tks_Yoshinaga/5Q882V-ChatGPT --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/5EGG8X5WEL.jpg) ChatGPTとA-Frameで遊ぼう # Page. 2 ![Page Image](https://bcdn.docswell.com/page/4JQX98ZQEP.jpg) ⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓福岡でARコンテンツ作成勉強会を主催 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/K746X23YE1.jpg) ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/LJ1VNM1NEG.jpg) Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/GJWL439ME2.jpg) ハッシュタグ #AR_Fukuoka #エンジニアカフェ # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4EZM2V9MJ3.jpg) 今⽇のテーマ https://twitter.com/Taka_ Yoshinaga/status/16362 80242703831041 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/Y76NV5K57V.jpg) A-FrameとChatGPTを組み合わせる ⽅法について実演&解説します︕ # Page. 8 ![Page Image](https://bcdn.docswell.com/page/G755DYPG74.jpg) 素材のダウンロード(任意) https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ChatGPT-20230324/Project.zip # Page. 9 ![Page Image](https://bcdn.docswell.com/page/9J2N8G6DER.jpg) 今回必要なものや環境 ■OpenAIの有料アカウント https://platform.openai.com/signup ■Visual Studio Code https://azure.microsoft.com/ja-jp/products/visual-studiocode ■Live Sever (VS Codeのプラグイン) https://monomonotech.jp/kurage/memo/m220525_vscode _liveserver.html # Page. 10 ![Page Image](https://bcdn.docswell.com/page/DEYP6V9MEM.jpg) A-Frame p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/VJN5ZML378.jpg) A-Frameを体験 A-Frameのページにアクセス (https://aframe.io/) # Page. 12 ![Page Image](https://bcdn.docswell.com/page/YE9YZN4PJ3.jpg) A-Frameを体験 ページの左側にサンプルがあります サンプル # Page. 13 ![Page Image](https://bcdn.docswell.com/page/GE861KQX7D.jpg) A-Frameを体験 基本サンプル Hello WebVRをクリック Hello WebVR # Page. 14 ![Page Image](https://bcdn.docswell.com/page/LEL9QZXNJR.jpg) A-Frameを体験 基本サンプル Hello WebVRをクリック 画⾯をクリック p 回転︓マウスでドラッグ p 左右︓[←][→]キー p 前後︓[↑][↓]キー ※前後左右は⾃分がどちらに動くかで考える # Page. 15 ![Page Image](https://bcdn.docswell.com/page/4JMZ1VLQEW.jpg) A-Frameを体験 360°Imageをクリックして全天球コンテンツを表⽰ 360°Image RICOH Theta # Page. 16 ![Page Image](https://bcdn.docswell.com/page/PJR6L2KK79.jpg) サンプルコードを⾒てみよう Hello WebVRのコードを取得 GET STARTED # Page. 17 ![Page Image](https://bcdn.docswell.com/page/PEXMWDL57X.jpg) サンプルコードを⾒てみよう Hello WebVR Hello WebVRに関する記述 (たったこれだけ︕) # Page. 18 ![Page Image](https://bcdn.docswell.com/page/3EKGVXLRJD.jpg) Visual Studio Codeで動作させてみよう Openをクリックし、先ほど ダウンロードしたProjectフォルダを開く ※もしくはメニューバーから[File] -> [Open Folder] # Page. 19 ![Page Image](https://bcdn.docswell.com/page/L73NM53G75.jpg) Visual Studio Codeで動作させてみよう index.htmlを開く # Page. 20 ![Page Image](https://bcdn.docswell.com/page/87DW6D4NJG.jpg) Visual Studio Codeで動作させてみよう A-Frameのサンプルコードを コピー&ペースト # Page. 21 ![Page Image](https://bcdn.docswell.com/page/VJP9YXMNE8.jpg) Ctrl / command + Sで保存 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/2EVMGL9YEQ.jpg) Visual Studio Codeで動作させてみよう Go Liveをクリック # Page. 23 ![Page Image](https://bcdn.docswell.com/page/57GG8XZW7L.jpg) Visual Studio Codeで動作させてみよう # Page. 24 ![Page Image](https://bcdn.docswell.com/page/4EQX98LQ7P.jpg) 補⾜︓タブやブラウザを閉じてしまった場合 Port:5500 をクリック Live Serverを再度起動させればOK! 再度 GoLive をクリック # Page. 25 ![Page Image](https://bcdn.docswell.com/page/KJ46X2DY71.jpg) ソースの確認 <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"> </script> </head> <body> <a-scene> 表⽰するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> p ヘッダー部でA-Frameの機能を提供するライブラリを取り込む p <a-scene>と</a-scene>の間に描画に関する記述をする # Page. 26 ![Page Image](https://bcdn.docswell.com/page/LE1VNMZN7G.jpg) ソースの確認 <a-scene> 位置 回転 ⾊ <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> p 基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.4.0/primi tives/a-box.html (例︓a-boxの詳細) # Page. 27 ![Page Image](https://bcdn.docswell.com/page/GEWL436M72.jpg) 例︓不要なオブジェクトの削除 <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> p HTMLの記述の中からタグを削るだけ p つまりa-scene内のオブジェクトの記述を 追加・削除すれば視覚的にも反映される # Page. 28 ![Page Image](https://bcdn.docswell.com/page/47ZM2VYME3.jpg) ChatGPTとは︖ https://chat.openai.com/ ⾔語処理が得意なAI # Page. 29 ![Page Image](https://bcdn.docswell.com/page/YJ6NV5D5JV.jpg) ChatGPTでA-Frameのソースを書かせてみる ちゃんと書いてくれる # Page. 30 ![Page Image](https://bcdn.docswell.com/page/GJ55DY3GJ4.jpg) ChatGPT API [ChatGPT APIとは] 開発者がChatGPTモデルを使⽤して⾃然⾔語処理を⾏うためのAPI。 APIを⽤いることで、開発者は⾃⾝のプログラムの中で簡単にChatGPT を利⽤して、テキスト⽣成、⽂章要約、質問応答、⾔語翻訳などのタス クを実⾏可能。 HTTP通信のPOSTで命令を送信するだけで利⽤できる。 ※) Node.jsからOpenAI APIへアクセスできる公式ライブラリを使う⽅法が⼀般的だが、 今回は環境構築を簡単にするためNode.jsを使わない⽅法を紹介。 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/LE3NM56PE5.jpg) 今⽇やりたいこと 勉強会⽤に⽤意したA-FrameのテンプレートにChatGPT APIで⾃動⽣成した3Dオブジェクトの記述を動的に追加 ここに追加したい ChatGPTによる生成コード # Page. 32 ![Page Image](https://bcdn.docswell.com/page/8EDW6DV37G.jpg) サンプルコードのコピペ CopyPasteフォルダ内のlesson01を開く ファイル内の記述をまるっとコピー Lesson01 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/V7P9YXVPJ8.jpg) サンプルコードのコピペ index.html もともとの記述を削除したあと コピーしたコードをペースト Lesson01 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/2JVMGLZVJQ.jpg) サンプルコードのコピペ Lesson01 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/5EGG8X41EL.jpg) Ctrl / command + Sで保存 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/4JQX98GNEP.jpg) 出⼒を確認 今は特に 何も表⽰されない # Page. 37 ![Page Image](https://bcdn.docswell.com/page/K746X253E1.jpg) サンプルコードの内容 <body> <!-- A-Frameのシーン --> <a-scene> <a-entity id="container">ここに3Dオブジェクトを追加する</a-entity> </a-scene> <!-- テキストエリアとボタン --> <div style="position: fixed; top: 20px; left: 20px; width: 35%;"> <textarea id="input" style="font-size: 18px; width: 100%; height: 80px;"></textarea> <button onclick="OnClick()" style="display: block; margin: 10px 0; width: 100%; height: 50px;">Submit</button> <textarea id="output" style="font-size: 18px; width: 100%; height: 250px;"></textarea> </div> </body> textarea (input) ここにA-Frameの3Dオブジェクトを描画 textarea (output) # Page. 38 ![Page Image](https://bcdn.docswell.com/page/LJ1VNMWZEG.jpg) サンプルコードの内容 <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { 今⽇のメインはここ } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> javascriptを⽤いて ボタン操作やChatGPTとの やり取りを実現する # Page. 39 ![Page Image](https://bcdn.docswell.com/page/GJWL4366E2.jpg) サンプルコードの内容: 外部コードの導⼊ <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> # Page. 40 ![Page Image](https://bcdn.docswell.com/page/4EZM2VYRJ3.jpg) サンプルコードの内容: 外部コードの導⼊ <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> ↑ 3Dの描画に⽤いるA-Frame ↙ ChatGPTの回答から必要な 要素を抜き出す⾃作スクリプト ElementsExtractor.js # Page. 41 ![Page Image](https://bcdn.docswell.com/page/Y76NV5D17V.jpg) サンプルコードの内容: 外部コードの導⼊ <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> # Page. 42 ![Page Image](https://bcdn.docswell.com/page/G755DY3L74.jpg) サンプルコードの内容: 変数の宣⾔ <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; //ChatGPT APIの利⽤に必要なAPIキー let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> 各種変数の宣⾔ # Page. 43 ![Page Image](https://bcdn.docswell.com/page/9J2N8GZ3ER.jpg) サンプルコードの内容: 関数(メソッド)の宣⾔ <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; //ChatGPT APIの利⽤に必要なAPIキー let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> 各種変数の初期化 ボタンを押した時の挙動 ChatGPTに質問 回答をもとにオブジェクト⽣成 # Page. 44 ![Page Image](https://bcdn.docswell.com/page/DEYP6VR8EM.jpg) サンプルコードの内容: 初期化の処理 <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { 次はここの解説 } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> # Page. 45 ![Page Image](https://bcdn.docswell.com/page/VJN5ZMD978.jpg) サンプルコードの内容: 初期化の処理 let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ //A-Frameのオブジェクトの追加先 elmContainer = document.getElementById('container'); //ChatGPTからの回答を表⽰するテキストエリア outputText=document.getElementById('output'); //ChatGPTに送信するメッセージ。system:システムの役割、user:指⽰ messageArray=[ {role: "system", content: "あなたA-Frameバージョン1.4.0以降の Primitive Elementのタグを教えるアシスタントです。"}, {role: "user", content: "x=0, y=1.5, z=-3の位置に、⾊が⾚、 半径が0.5の球を作って。"}, ]; } # Page. 46 ![Page Image](https://bcdn.docswell.com/page/YE9YZNG3J3.jpg) ChatGPT のメッセージ role 意味 system ChatGPTの役割の設定やキャラ付けに使⽤ user 利⽤者からのメッセージ。質問や依頼などする際に使⽤。 assistant ChatGPTからの回答。 詳細： https://platform.openai.com/docs/guides/chat # Page. 47 ![Page Image](https://bcdn.docswell.com/page/GE861KVL7D.jpg) サンプルコードの内容: ボタン押下時の処理 <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 次はここの解説 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> # Page. 48 ![Page Image](https://bcdn.docswell.com/page/LEL9QZ5QJR.jpg) サンプルコードの内容: ボタン押下時の処理 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { //ChatGPTからの回答を表⽰するテキストエリアを初期化 outputText.value="Waiting for response..."; //ChatGPTにメッセージを送信して、回答を取得 let result = await SendMessage(); //ChatGPTからの回答をテキストエリアに表⽰ outputText.value=("[ChatGPTの回答]¥n"+result+"¥n¥n"); } //ChatGPTの回答からA-Frameのオブジェクトを抽出して、シーンに追加 result = CreateElements(result); //ChatGPTにメッセージを送信 async function SendMessage() { /*あとで解説*/ } //ChatGPTからの回答からA-Frameのオブジェクトを抽出して、シーンに追加 function CreateElements(text){ /*あとで解説*/ } # Page. 49 ![Page Image](https://bcdn.docswell.com/page/4JMZ1VRKEW.jpg) サンプルコードの内容: ChatGPTへの質問と回答の取得 <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = '⾃分のAPI Key'; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 次はここの解説 function CreateElements(text){ } </script> </head> # Page. 50 ![Page Image](https://bcdn.docswell.com/page/PJR6L2R679.jpg) サンプルコードの内容: ChatGPTへの質問と回答の取得 //リクエストを送信 let response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', API Key headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${API_KEY}`, }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: messageArray, temperature:0.3, ChatGPTへの命令 }), }); //ChatGPTからの回答をjson形式で取得 let data = await response.json(); //ChatGPTからの回答を格納する変数 let result="あとで結果を代⼊"; return result; # Page. 51 ![Page Image](https://bcdn.docswell.com/page/PEXMWDRD7X.jpg) サンプルコードの内容: 回答からの３Dオブジェクト抽出 <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="ElementsExtractor.js"></script> <script type="text/javascript"> let API_KEY = ' '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> </head> 次はここの解説 # Page. 52 ![Page Image](https://bcdn.docswell.com/page/3EKGVXRDJD.jpg) サンプルコードの内容: 回答からの３Dオブジェクト抽出 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ //ChatGPTからの回答からA-Frameのオブジェクトを抽出 let generatedElements = FindAframeElements(text); //A-Frameのオブジェクトのタグを⽂字列化 (TextAreaでの表⽰⽤) let result=generatedElements. map(element => element.outerHTML).join("¥n"); } return result; 今のところresultは 未使⽤ # Page. 53 ![Page Image](https://bcdn.docswell.com/page/L73NM58P75.jpg) API Keyの取得 https://platform.openai.com/signup ViewAPI Keys # Page. 54 ![Page Image](https://bcdn.docswell.com/page/87DW6DM3JG.jpg) API Keyの取得 https://platform.openai.com/signup Create new secret key # Page. 55 ![Page Image](https://bcdn.docswell.com/page/VJP9YXRPE8.jpg) API Keyの取得 https://platform.openai.com/signup ここをクリックしてコピー このダイアログは⼀度閉じると⼆度と⾒られないので、不安な⽅はコピーしたKeyをメモ帳等にペースト # Page. 56 ![Page Image](https://bcdn.docswell.com/page/2EVMGLRVEQ.jpg) API Keyの適⽤ <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア ペースト let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> # Page. 57 ![Page Image](https://bcdn.docswell.com/page/57GG8XM17L.jpg) ChatGPTからの回答を⽂字で表⽰しよう <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 ここを編集 function CreateElements(text){ } </script> Lesson02 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/4EQX98RN7P.jpg) ChatGPTからの回答を⽂字で表⽰しよう let response = await fetch('https://api.openai.com/v1/chat/completionsʼ, { /*ChatGPTに指⽰を送信*/ }); //レスポンスを受け取ったら、結果をjsonで取得 let data = await response.json(); //結果をテキストとして覚える変数 let result="あとで結果を代⼊"; //ChatGPTからレスポンスがあったかどうかを判定 if(data.choices){ //ChatGPTからの回答をテキスト形式で取得してresultに格納 result=data.choices[0].message.content; } else{ //ChatGPTからレスポンスがなかった場合、No Responseと返す。 result="No Response"; } return result; [詳細] https://platform.openai.com/docs/guides/chat/response-format Lesson02 # Page. 59 ![Page Image](https://bcdn.docswell.com/page/KJ46X28371.jpg) 動作確認 ボタンをクリック 回答 {role: "user", content: "x=0, y=1.5, z=-3の位置に、⾊が⾚、半径が0.5の球を作って。"}に対する回答が来る # Page. 60 ![Page Image](https://bcdn.docswell.com/page/LE1VNM2Z7G.jpg) テキストエリアから指⽰を出そう <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 ここを編集 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson03 # Page. 61 ![Page Image](https://bcdn.docswell.com/page/GEWL43R672.jpg) テキストエリアから指⽰を出そう async function OnClick() { //ChatGPTから結果が戻ってくるまでの表⽰ outputText.value="Waiting for response..."; //テキストエリアからプロンプトを取得 let prompt = document.getElementById('input').value; //プロンプトが空の場合、処理を終了 if (!prompt){ outputText.value="プロンプトを⼊⼒してください"; return; } //ChatGPTに送信するメッセージにプロンプトをセット messageArray[1]={role: "user", content: prompt}; //ChatGPTにメッセージを送信 let result = await SendMessage(); //ChatGPTからの回答からA-Frameの要素を抽出 CreateElements(result); } Lesson03 # Page. 62 ![Page Image](https://bcdn.docswell.com/page/47ZM2VRRE3.jpg) 動作確認 ⼊⼒ ボタンをクリック 回答 ⼊⼒した命令に対する回答が表⽰される # Page. 63 ![Page Image](https://bcdn.docswell.com/page/YJ6NV5R1JV.jpg) NextStep A-Frameで描画する際に必要な情報は オブジェクトを表すa-xxxと書かれた⾏のみ CreateElements関数内で正しく抽出 されているかどうかを確認しよう 提供済み # Page. 64 ![Page Image](https://bcdn.docswell.com/page/GJ55DY8LJ4.jpg) A-Frame要素の抽出結果を確認 <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 ここを編集 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> # Page. 65 ![Page Image](https://bcdn.docswell.com/page/9E2N8GK37R.jpg) A-Frame要素の抽出結果を確認 //ChatGPTから結果が戻ってくるまでの表⽰ outputText.value="Waiting for response..."; //テキストエリアからプロンプトを取得 let prompt = document.getElementById('input').value; //プロンプトが空の場合、処理を終了 if (!prompt){ outputText.value="プロンプトを⼊⼒してください"; return; } //ChatGPTに送信するメッセージにプロンプトをセット messageArray[1]={role: "user", content: prompt}; //ChatGPTにメッセージを送信 let result = await SendMessage(); //ChatGPTからの回答をテキストエリアに表⽰ outputText.value=("[ChatGPTの回答]¥n"+result+"¥n¥n"); //ChatGPTからの回答からA-Frameの要素を抽出 result = CreateElements(result); //ChatGPTからの回答から抽出したA-Frameの要素を表⽰ outputText.value+=("[抽出された要素]¥n"+result); Lesson04 # Page. 66 ![Page Image](https://bcdn.docswell.com/page/D7YP6VN87M.jpg) 動作確認 ChatGPTの回答からA-Frameのオブジェクトに関する要素のみが抽出されていることを確認 # Page. 67 ![Page Image](https://bcdn.docswell.com/page/VEN5ZMX9J8.jpg) ⽣成されたオブジェクトを表⽰しよう <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson05 ここを編集 # Page. 68 ![Page Image](https://bcdn.docswell.com/page/Y79YZN83E3.jpg) ⽣成されたオブジェクトを表⽰しよう //ChatGPTからの回答からA-Frameのオブジェクトを抽出 let generatedElements = FindAframeElements(text); //A-Frameのオブジェクトのタグを⽂字列化してresultに追加 let result=generatedElements.map( element => element.outerHTML).join("¥n"); //A-Frameのオブジェクトがある場合はオブジェクトをシーンに追加 if(generatedElements.length>0){ //A-Frameのオブジェクトを1つずつシーンに追加 generatedElements.forEach(element => { elmContainer.appendChild(element); }); } else{ } result = "No A-Frame primitive element found.¥n"; return result; Lesson05 # Page. 69 ![Page Image](https://bcdn.docswell.com/page/G7861K8LJD.jpg) 動作確認 # Page. 70 ![Page Image](https://bcdn.docswell.com/page/L7L9QZRQER.jpg) 問題点 前回の内容に続けて 指⽰を⼊⼒ 前回の結果が残る # Page. 71 ![Page Image](https://bcdn.docswell.com/page/4EMZ1VPK7W.jpg) 過去のシーンをクリア <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson06 ここを編集 # Page. 72 ![Page Image](https://bcdn.docswell.com/page/PER6L216J9.jpg) 過去のシーンをクリア //A-Frameのオブジェクトがある場合はオブジェクトをシーンに追加 if(generatedElements.length>0){ //シーンからすべてのオブジェクトを削除 while (elmContainer.firstChild) { elmContainer.removeChild(elmContainer.firstChild); } //A-Frameのオブジェクトを1つずつシーンに追加 generatedElements.forEach(element => { elmContainer.appendChild(element); }); } else{ result = "No A-Frame primitive element found.¥n"; } return result; Lesson06 # Page. 73 ![Page Image](https://bcdn.docswell.com/page/P7XMWDYDJX.jpg) 動作確認 過去のオブジェクトは 消えてくれる # Page. 74 ![Page Image](https://bcdn.docswell.com/page/37KGVX3DED.jpg) 問題点 時々不適切な要素が⽣成される [例えば] 古いバージョンのA-Frameでしか使えないタグ a-cameraタグ(キーボード操作に対応しない) scriptタグ # Page. 75 ![Page Image](https://bcdn.docswell.com/page/LJ3NM5GPJ5.jpg) より細かい注⽂をしよう <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 ここを編集 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson07 # Page. 76 ![Page Image](https://bcdn.docswell.com/page/8JDW6D13EG.jpg) より細かい注⽂をしよう //プロンプトをTexAreaから取得 let prompt = document.getElementById('input').value; //promptがない場合 if (!prompt){ outputText.value="プロンプトを⼊⼒してください"; return; } //細かい注⽂を追加 prompt = `下記の指⽰を実現するA-Frameのa-から始まる要素を⽣成。ただし下記の条件を満たすこと。 条件:""" - a-camera, a-assets ,a-lightは使⽤しない。 - scriptを使⽤しない。 代替案も記述 - アニメーションの設定を要求された場合は、<a-animation>ではなくanimationコンポーネントを使⽤。 - 背景の設定にbackgroundコンポーネントではなくa-sky>を使⽤。 - 結果は1つのコードブロックに記述。""" 指⽰︓ """`+prompt+`"""`; Lesson07 # Page. 77 ![Page Image](https://bcdn.docswell.com/page/VEP9YXQP78.jpg) 動作確認 # Page. 78 ![Page Image](https://bcdn.docswell.com/page/27VMGL5V7Q.jpg) 1ターンのやり取りを実現する仕組みが完成 # Page. 79 ![Page Image](https://bcdn.docswell.com/page/5JGG8X61JL.jpg) 過去の⽂脈も反映させよう やり取りを繰り返し追加・・・ messageArrayに新たな質問を追加して過去のやり取りごとChatGPTに送る # Page. 80 ![Page Image](https://bcdn.docswell.com/page/47QX984NJP.jpg) 過去の⽂脈も考慮させよう︓送信データ <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { ここを編集 } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson08 # Page. 81 ![Page Image](https://bcdn.docswell.com/page/KE46X2Q3J1.jpg) 過去の⽂脈も考慮させよう︓送信データ //A-Frameのオブジェクトの追加先 elmContainer = document.getElementById('container'); //ChatGPTからの回答を表⽰するテキストエリア outputText=document.getElementById('output'); //ChatGPTに送信するメッセージ。system:システムの役割、user:指⽰ messageArray=[ {role: "system", content: "あなたA-Frameバージョン1.4.0以降の Primitive Elementのタグを教えるアシスタントです。"}, {role: "user", content: "x=0, y=1.5, z=-3の位置に、⾊が⾚、 ]; 半径が0.5の球を作って。"}, messageArray[1]を書き換えるのではなく、 送受信するメッセージを次々に追加するので デフォルトメッセージは不要 Lesson08 # Page. 82 ![Page Image](https://bcdn.docswell.com/page/L71VNMPZJG.jpg) 過去の⽂脈も考慮させよう︓送信データ <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 ここを編集 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 function CreateElements(text){ } </script> Lesson08 # Page. 83 ![Page Image](https://bcdn.docswell.com/page/G7WL4326J2.jpg) 過去の⽂脈も考慮させよう︓送信データ //細かい注⽂を追加 prompt = `下記の指⽰を実現するA-Frameのa-から始まる要素を⽣成。ただし下記の条件を満たすこと。 条件:""" - a-camera,a-assets,a-animation,a-lightは使⽤しない。 - scriptを使⽤しない。 - 背景の設定にbackgroundコンポーネントではなくa-sky>を使⽤。 - 結果は1つのコードブロックに記述。""" 指⽰︓ """`+prompt+`"""`; //ChatGPTに送信するメッセージにプロンプトをセット messageArray[1]={role: "user", content: prompt}; messageArray.push({role: "user", content: prompt}); //ChatGPTにメッセージを送信 let result = await SendMessage(); //ChatGPTからの回答からA-Frameの要素を抽出 CreateElements(result); Lesson08 # Page. 84 ![Page Image](https://bcdn.docswell.com/page/4JZM2VDR73.jpg) 解説に使うサンプルコード︓受信データ <script type="text/javascript"> let API_KEY = ' ここにAPI Keyを貼り付ける '; let elmContainer; //A-Frameのオブジェクトの追加先 let outputText; //ChatGPTからの回答を表⽰するテキストエリア let messageArray; //ChatGPTとのやりとりを記録する配列 //初期化 window.onload=function(){ } //ボタンを押した時の挙動 async function OnClick() { } //ChatGPTにメッセージを送信 async function SendMessage() { } //ChatGPTからの回答からA-Frameの要素を抽出 ここを編集 function CreateElements(text){ } </script> Lesson09 # Page. 85 ![Page Image](https://bcdn.docswell.com/page/YE6NV511EV.jpg) 解説に使うサンプルコード︓受信データ //ChatGPTからの回答をjson形式で取得 let data = await response.json(); //ChatGPTからの回答を格納する変数 let result="あとで結果を代⼊"; //ChatGPTからレスポンスがあったかどうかを判定 if(data.choices){ //ChatGPTからの回答をテキスト形式で取得してresultに格納 result =data.choices[0].message.content; //ChatGPTからの回答をmessagesArrayに追加 messageArray.push({role: "assistant", content: result}); //messagesArrayの要素数が9を超えたら、1番⽬から2つのメッセージを削除 if(messageArray.length>9){ messageArray.splice(1,2); } } else{ text="No Response"; //ChatGPTからの回答がなければ、最後の質問を削除 messageArray.pop(); Lesson09 } # Page. 86 ![Page Image](https://bcdn.docswell.com/page/GE55DY4LE4.jpg) 動作確認 ある程度⽂脈を 考慮してくれる # Page. 87 ![Page Image](https://bcdn.docswell.com/page/972N8GV3JR.jpg) より精度の⾼いおすすめプロンプト prompt = `下記の指⽰を実現するA-Frameのa-から始まる要素をコードに追加・修正。ただし下記の条件を満たす こと。¥n` +`コード︓¥n<a-scene>¥n`+elmContainer.innerHTML+`</a-scene>¥n` 直近のコード +`条件:¥n""" - a-camera,a-assets,a-lightは使⽤しない。 - scriptを使⽤しない。 - アニメーションの設定を要求された場合は<a-animation>ではなくanimationコンポーネントを使⽤。 - 背景の設定を要求された場合は、backgroundコンポーネントではなく<a-sky>を使⽤。 - 必ず<a-sky>はシーンに存在させる。 - 結果はマークダウンのコードブロックに記述。¥n"""¥n` + `指⽰︓¥n"""¥n`+prompt+`¥n"""`; 概要 条件 ユーザーの指⽰ # Page. 88 ![Page Image](https://bcdn.docswell.com/page/DJYP6V38JM.jpg) 参考 p ChatGPT APIリファレンス https://platform.openai.com/docs/api-reference/chat p ChatGPT APIガイド https://platform.openai.com/docs/guides/chat p Node.jsを使わないでChatGPTを使⽤する⽅法 https://1-notes.com/javascript-openai-api-sample-code/ p Node.jsを使ってChatGPTを使⽤する⽅法 https://go-tech.blog/nodejs/api-ts-node/ # Page. 89 ![Page Image](https://bcdn.docswell.com/page/V7N5ZMV9E8.jpg) ソースコード 今回の内容を多少整理したコードを公開しています。ご⾃由にどうぞ。 https://github.com/TakashiYoshinaga/ChatGPT-A-Frame-Sample