19.3K Views
March 24, 23
スライド概要
2023/04/30改定
2023/03/24に開催したChatGPT APIのハンズオン資料
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。
ChatGPTとA-Frameで遊ぼう
⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓福岡でARコンテンツ作成勉強会を主催
ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。
Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
ハッシュタグ #AR_Fukuoka #エンジニアカフェ
今⽇のテーマ https://twitter.com/Taka_ Yoshinaga/status/16362 80242703831041
A-FrameとChatGPTを組み合わせる ⽅法について実演&解説します︕
素材のダウンロード(任意) https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ChatGPT-20230324/Project.zip
今回必要なものや環境 ■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
A-Frame p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応
A-Frameを体験 A-Frameのページにアクセス (https://aframe.io/)
A-Frameを体験 ページの左側にサンプルがあります サンプル
A-Frameを体験 基本サンプル Hello WebVRをクリック Hello WebVR
A-Frameを体験 基本サンプル Hello WebVRをクリック 画⾯をクリック p 回転︓マウスでドラッグ p 左右︓[←][→]キー p 前後︓[↑][↓]キー ※前後左右は⾃分がどちらに動くかで考える
A-Frameを体験 360°Imageをクリックして全天球コンテンツを表⽰ 360°Image RICOH Theta
サンプルコードを⾒てみよう Hello WebVRのコードを取得 GET STARTED
サンプルコードを⾒てみよう Hello WebVR Hello WebVRに関する記述 (たったこれだけ︕)
Visual Studio Codeで動作させてみよう Openをクリックし、先ほど ダウンロードしたProjectフォルダを開く ※もしくはメニューバーから[File] -> [Open Folder]
Visual Studio Codeで動作させてみよう index.htmlを開く
Visual Studio Codeで動作させてみよう A-Frameのサンプルコードを コピー&ペースト
Ctrl / command + Sで保存
Visual Studio Codeで動作させてみよう Go Liveをクリック
Visual Studio Codeで動作させてみよう
補⾜︓タブやブラウザを閉じてしまった場合 Port:5500 をクリック Live Serverを再度起動させればOK! 再度 GoLive をクリック
ソースの確認 <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>の間に描画に関する記述をする
ソースの確認 <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の詳細)
例︓不要なオブジェクトの削除 <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内のオブジェクトの記述を 追加・削除すれば視覚的にも反映される
ChatGPTとは︖ https://chat.openai.com/ ⾔語処理が得意なAI
ChatGPTでA-Frameのソースを書かせてみる ちゃんと書いてくれる
ChatGPT API [ChatGPT APIとは] 開発者がChatGPTモデルを使⽤して⾃然⾔語処理を⾏うためのAPI。 APIを⽤いることで、開発者は⾃⾝のプログラムの中で簡単にChatGPT を利⽤して、テキスト⽣成、⽂章要約、質問応答、⾔語翻訳などのタス クを実⾏可能。 HTTP通信のPOSTで命令を送信するだけで利⽤できる。 ※) Node.jsからOpenAI APIへアクセスできる公式ライブラリを使う⽅法が⼀般的だが、 今回は環境構築を簡単にするためNode.jsを使わない⽅法を紹介。
今⽇やりたいこと 勉強会⽤に⽤意したA-FrameのテンプレートにChatGPT APIで⾃動⽣成した3Dオブジェクトの記述を動的に追加 ここに追加したい ChatGPTによる生成コード
サンプルコードのコピペ CopyPasteフォルダ内のlesson01を開く ファイル内の記述をまるっとコピー Lesson01
サンプルコードのコピペ index.html もともとの記述を削除したあと コピーしたコードをペースト Lesson01
サンプルコードのコピペ Lesson01
Ctrl / command + Sで保存
出⼒を確認 今は特に 何も表⽰されない
サンプルコードの内容
<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)
サンプルコードの内容
<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との
やり取りを実現する
サンプルコードの内容: 外部コードの導⼊
<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>
サンプルコードの内容: 外部コードの導⼊ <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
サンプルコードの内容: 外部コードの導⼊
<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>
サンプルコードの内容: 変数の宣⾔
<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>
各種変数の宣⾔
サンプルコードの内容: 関数(メソッド)の宣⾔
<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に質問
回答をもとにオブジェクト⽣成
サンプルコードの内容: 初期化の処理
<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>
サンプルコードの内容: 初期化の処理
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の球を作って。"},
];
}
ChatGPT のメッセージ role 意味 system ChatGPTの役割の設定やキャラ付けに使⽤ user 利⽤者からのメッセージ。質問や依頼などする際に使⽤。 assistant ChatGPTからの回答。 詳細: https://platform.openai.com/docs/guides/chat
サンプルコードの内容: ボタン押下時の処理
<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>
サンプルコードの内容: ボタン押下時の処理
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){ /*あとで解説*/ }
サンプルコードの内容: 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>
サンプルコードの内容: 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;
サンプルコードの内容: 回答からの3Dオブジェクト抽出
<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>
次はここの解説
サンプルコードの内容: 回答からの3Dオブジェクト抽出
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は
未使⽤
API Keyの取得 https://platform.openai.com/signup ViewAPI Keys
API Keyの取得 https://platform.openai.com/signup Create new secret key
API Keyの取得 https://platform.openai.com/signup ここをクリックしてコピー このダイアログは⼀度閉じると⼆度と⾒られないので、不安な⽅はコピーしたKeyをメモ帳等にペースト
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>
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
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
動作確認
ボタンをクリック
回答
{role: "user", content: "x=0, y=1.5, z=-3の位置に、⾊が⾚、半径が0.5の球を作って。"}に対する回答が来る
テキストエリアから指⽰を出そう
<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
テキストエリアから指⽰を出そう
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
動作確認 ⼊⼒ ボタンをクリック 回答 ⼊⼒した命令に対する回答が表⽰される
NextStep A-Frameで描画する際に必要な情報は オブジェクトを表すa-xxxと書かれた⾏のみ CreateElements関数内で正しく抽出 されているかどうかを確認しよう 提供済み
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>
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
動作確認 ChatGPTの回答から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>
Lesson05
ここを編集
⽣成されたオブジェクトを表⽰しよう
//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
動作確認
問題点 前回の内容に続けて 指⽰を⼊⼒ 前回の結果が残る
過去のシーンをクリア
<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
ここを編集
過去のシーンをクリア
//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
動作確認 過去のオブジェクトは 消えてくれる
問題点 時々不適切な要素が⽣成される [例えば] 古いバージョンのA-Frameでしか使えないタグ a-cameraタグ(キーボード操作に対応しない) 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>
Lesson07
より細かい注⽂をしよう
//プロンプトを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
動作確認
1ターンのやり取りを実現する仕組みが完成
過去の⽂脈も反映させよう やり取りを繰り返し追加・・・ messageArrayに新たな質問を追加して過去のやり取りごと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>
Lesson08
過去の⽂脈も考慮させよう︓送信データ
//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
過去の⽂脈も考慮させよう︓送信データ
<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
過去の⽂脈も考慮させよう︓送信データ
//細かい注⽂を追加
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
解説に使うサンプルコード︓受信データ
<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
解説に使うサンプルコード︓受信データ
//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
}
動作確認 ある程度⽂脈を 考慮してくれる
より精度の⾼いおすすめプロンプト
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"""`;
概要
条件
ユーザーの指⽰
参考 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/
ソースコード 今回の内容を多少整理したコードを公開しています。ご⾃由にどうぞ。 https://github.com/TakashiYoshinaga/ChatGPT-A-Frame-Sample