ChatGPTとA-Frameで遊ぼう

17.7K Views

March 24, 23

スライド概要

2023/04/30改定
2023/03/24に開催したChatGPT APIのハンズオン資料

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

ChatGPTとA-Frameで遊ぼう

2.

⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓福岡でARコンテンツ作成勉強会を主催

3.

ARコンテンツ作成勉強会(略称:AR Fukuoka)の概要 [形式] AR/VRコンテンツの作り⽅や関連技術を主にハンズオン形式で体験。 [規模] 参加⼈数はコロナ前は約5~10名/回、現在は約10~20名/回。 [参加条件] AR/VRの開発に興味があれば初⼼者⼤歓迎。専⾨知識は不要。

4.

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

5.

ハッシュタグ #AR_Fukuoka #エンジニアカフェ

6.

今⽇のテーマ https://twitter.com/Taka_ Yoshinaga/status/16362 80242703831041

7.

A-FrameとChatGPTを組み合わせる ⽅法について実演&解説します︕

8.

素材のダウンロード(任意) https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ChatGPT-20230324/Project.zip

9.

今回必要なものや環境 ■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

10.

A-Frame p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応

11.

A-Frameを体験 A-Frameのページにアクセス (https://aframe.io/)

12.

A-Frameを体験 ページの左側にサンプルがあります サンプル

13.

A-Frameを体験 基本サンプル Hello WebVRをクリック Hello WebVR

14.

A-Frameを体験 基本サンプル Hello WebVRをクリック 画⾯をクリック p 回転︓マウスでドラッグ p 左右︓[←][→]キー p 前後︓[↑][↓]キー ※前後左右は⾃分がどちらに動くかで考える

15.

A-Frameを体験 360°Imageをクリックして全天球コンテンツを表⽰ 360°Image RICOH Theta

16.

サンプルコードを⾒てみよう Hello WebVRのコードを取得 GET STARTED

17.

サンプルコードを⾒てみよう Hello WebVR Hello WebVRに関する記述 (たったこれだけ︕)

18.

Visual Studio Codeで動作させてみよう Openをクリックし、先ほど ダウンロードしたProjectフォルダを開く ※もしくはメニューバーから[File] -> [Open Folder]

19.

Visual Studio Codeで動作させてみよう index.htmlを開く

20.

Visual Studio Codeで動作させてみよう A-Frameのサンプルコードを コピー&ペースト

21.

Ctrl / command + Sで保存

22.

Visual Studio Codeで動作させてみよう Go Liveをクリック

23.

Visual Studio Codeで動作させてみよう

24.

補⾜︓タブやブラウザを閉じてしまった場合 Port:5500 をクリック Live Serverを再度起動させればOK! 再度 GoLive をクリック

25.

ソースの確認 <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>の間に描画に関する記述をする

26.

ソースの確認 <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の詳細)

27.

例︓不要なオブジェクトの削除 <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内のオブジェクトの記述を 追加・削除すれば視覚的にも反映される

28.

ChatGPTとは︖ https://chat.openai.com/ ⾔語処理が得意なAI

29.

ChatGPTでA-Frameのソースを書かせてみる ちゃんと書いてくれる

30.

ChatGPT API [ChatGPT APIとは] 開発者がChatGPTモデルを使⽤して⾃然⾔語処理を⾏うためのAPI。 APIを⽤いることで、開発者は⾃⾝のプログラムの中で簡単にChatGPT を利⽤して、テキスト⽣成、⽂章要約、質問応答、⾔語翻訳などのタス クを実⾏可能。 HTTP通信のPOSTで命令を送信するだけで利⽤できる。 ※) Node.jsからOpenAI APIへアクセスできる公式ライブラリを使う⽅法が⼀般的だが、 今回は環境構築を簡単にするためNode.jsを使わない⽅法を紹介。

31.

今⽇やりたいこと 勉強会⽤に⽤意したA-FrameのテンプレートにChatGPT APIで⾃動⽣成した3Dオブジェクトの記述を動的に追加 ここに追加したい ChatGPTによる生成コード

32.

サンプルコードのコピペ CopyPasteフォルダ内のlesson01を開く ファイル内の記述をまるっとコピー Lesson01

33.

サンプルコードのコピペ index.html もともとの記述を削除したあと コピーしたコードをペースト Lesson01

34.

サンプルコードのコピペ Lesson01

35.

Ctrl / command + Sで保存

36.

出⼒を確認 今は特に 何も表⽰されない

37.
[beta]
サンプルコードの内容
<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)

38.
[beta]
サンプルコードの内容
<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との
やり取りを実現する

39.
[beta]
サンプルコードの内容: 外部コードの導⼊
<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>

40.

サンプルコードの内容: 外部コードの導⼊ <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

41.
[beta]
サンプルコードの内容: 外部コードの導⼊
<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>

42.
[beta]
サンプルコードの内容: 変数の宣⾔
<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>

各種変数の宣⾔

43.
[beta]
サンプルコードの内容: 関数(メソッド)の宣⾔
<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に質問

回答をもとにオブジェクト⽣成

44.
[beta]
サンプルコードの内容: 初期化の処理
<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>

45.
[beta]
サンプルコードの内容: 初期化の処理
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の球を作って。"},
];
}

46.

ChatGPT のメッセージ role 意味 system ChatGPTの役割の設定やキャラ付けに使⽤ user 利⽤者からのメッセージ。質問や依頼などする際に使⽤。 assistant ChatGPTからの回答。 詳細: https://platform.openai.com/docs/guides/chat

47.
[beta]
サンプルコードの内容: ボタン押下時の処理
<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>

48.
[beta]
サンプルコードの内容: ボタン押下時の処理
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){ /*あとで解説*/ }

49.
[beta]
サンプルコードの内容: 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>

50.
[beta]
サンプルコードの内容: 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;

51.
[beta]
サンプルコードの内容: 回答からの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>

次はここの解説

52.
[beta]
サンプルコードの内容: 回答からの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は
未使⽤

53.

API Keyの取得 https://platform.openai.com/signup ViewAPI Keys

54.

API Keyの取得 https://platform.openai.com/signup Create new secret key

55.

API Keyの取得 https://platform.openai.com/signup ここをクリックしてコピー このダイアログは⼀度閉じると⼆度と⾒られないので、不安な⽅はコピーしたKeyをメモ帳等にペースト

56.
[beta]
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>

57.
[beta]
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

58.
[beta]
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

59.
[beta]
動作確認
ボタンをクリック
回答

{role: "user", content: "x=0, y=1.5, z=-3の位置に、⾊が⾚、半径が0.5の球を作って。"}に対する回答が来る

60.
[beta]
テキストエリアから指⽰を出そう
<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

61.
[beta]
テキストエリアから指⽰を出そう
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

62.

動作確認 ⼊⼒ ボタンをクリック 回答 ⼊⼒した命令に対する回答が表⽰される

63.

NextStep A-Frameで描画する際に必要な情報は オブジェクトを表すa-xxxと書かれた⾏のみ CreateElements関数内で正しく抽出 されているかどうかを確認しよう 提供済み

64.
[beta]
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>

65.
[beta]
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

66.

動作確認 ChatGPTの回答からA-Frameのオブジェクトに関する要素のみが抽出されていることを確認

67.
[beta]
⽣成されたオブジェクトを表⽰しよう
<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
ここを編集

68.
[beta]
⽣成されたオブジェクトを表⽰しよう
//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

69.

動作確認

70.

問題点 前回の内容に続けて 指⽰を⼊⼒ 前回の結果が残る

71.
[beta]
過去のシーンをクリア
<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
ここを編集

72.
[beta]
過去のシーンをクリア
//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

73.

動作確認 過去のオブジェクトは 消えてくれる

74.

問題点 時々不適切な要素が⽣成される [例えば] 古いバージョンのA-Frameでしか使えないタグ a-cameraタグ(キーボード操作に対応しない) scriptタグ

75.
[beta]
より細かい注⽂をしよう
<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

76.
[beta]
より細かい注⽂をしよう
//プロンプトを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

77.

動作確認

78.

1ターンのやり取りを実現する仕組みが完成

79.

過去の⽂脈も反映させよう やり取りを繰り返し追加・・・ messageArrayに新たな質問を追加して過去のやり取りごとChatGPTに送る

80.
[beta]
過去の⽂脈も考慮させよう︓送信データ
<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

81.
[beta]
過去の⽂脈も考慮させよう︓送信データ
//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

82.
[beta]
過去の⽂脈も考慮させよう︓送信データ
<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

83.
[beta]
過去の⽂脈も考慮させよう︓送信データ
//細かい注⽂を追加
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

84.
[beta]
解説に使うサンプルコード︓受信データ
<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

85.
[beta]
解説に使うサンプルコード︓受信データ
//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
}

86.

動作確認 ある程度⽂脈を 考慮してくれる

87.
[beta]
より精度の⾼いおすすめプロンプト
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"""`;

概要

条件

ユーザーの指⽰

88.

参考 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/

89.

ソースコード 今回の内容を多少整理したコードを公開しています。ご⾃由にどうぞ。 https://github.com/TakashiYoshinaga/ChatGPT-A-Frame-Sample