ChatGPTとA-Frameで遊ぼう

⾃⼰紹介⽒名︓吉永崇 (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

https://twitter.com/Taka_Yoshinaga/status/1636280242703831041

7.

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

8.

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

https://github.com/TakashiYoshinaga/AR-Fukuoka/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/)

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>の間に描画に関する記述をする

https://aframe.io/releases/1.4.0/aframe.min.js

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の詳細)

https://aframe.io/docs/1.4.0/primitives/a-box.html

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

https://chat.openai.com/

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

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]

サンプルコードの内容: 回答からの３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>

次はここの解説

52.

[beta]

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

53.

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

https://platform.openai.com/signup

54.

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

https://platform.openai.com/signup

55.

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

https://platform.openai.com/signup

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

https://platform.openai.com/docs/guides/chat/response-format

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

https://github.com/TakashiYoshinaga/ChatGPT-A-Frame-Sample

ChatGPTとA-Frameで遊ぼう

Takashi Yoshinaga

関連スライド

ARCore Geospatial API x Unityハンズオン by AR Fukuoka

Unityで始めるWebAR with ZapWorks

Getting Started with ARCore Geospatial API & Unity

AR.jsとA-Frameではじめるお手軽WebAR/VR

はじめようShader Graph: クロマキー処理

XREAL Air and Nreal Light開発入門

各ページのテキスト