ChatGPTっぽいサービスのデモを速攻で見せるために、サーバーとか気にしなくてもいいように、HTMLとJavascriptで作ってみた。
それも、ChatGPT（GPT-4）と対話して。
ChatGPTとの対話
まず、最初のプロンプト
# 命令書:
あなたは優秀なフロントエンドエンジニアです。
指示の通りHTMLのサンプルコードを書いてください。
# 制約条件
・HTML , CSS , Javascript は１つのHTMLファイルにしてください
・OpenAIのAPIキーは 999999999 としてください
・どんなに長いコードでも必ず一つのhtmlコードブロックに収めてください。
# 指示
・ChatGPTと同様の機能のあるウェブアプリを作ってください
必要最低限 のをすぐ作ってくれた。
APIの呼び出し方法がちょっと違ってたので、const response のJSONのところだけ手動で直した。
なお、APIキーはこちらで取得する。
https://openai.com/blog/openai-api
なお、当たり前ですが、APIキーをHTML内のJavaScriptに記載することは、APIキーが丸見えですので、通常は推奨されません。
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#chat-box {
width: 80%;
height: 400px;
margin: auto;
border: 1px solid #000;
padding: 20px;
overflow: auto;
margin-top: 50px;
background-color: #fff;
}
#user-input {
width: 80%;
margin: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="chat-box"></div>
<div id="user-input">
<input type="text" id="input-field" style="width: 80%;">
<button onclick="sendChat()">Send</button>
</div>
<script>
let inputField = document.getElementById('input-field');
async function sendChat() {
let message = inputField.value;
let chatBox = document.getElementById('chat-box');
// User's message
chatBox.innerHTML += `<p><strong>You:</strong> ${message}</p>`;
inputField.value = '';
// AI's message
try {
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey,
},
body: JSON.stringify({
'model': 'text-davinci-003',
prompt: message,
max_tokens: 60,
}),
});
const data = await response.json();
chatBox.innerHTML += `<p><strong>ChatGPT:</strong> ${data.choices[0].text}</p>`;
chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
} catch (error) {
console.error('Error:', error);
}
}
inputField.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
sendChat();
}
});
</script>
</body>
</html>
これを実行すると
以下、対話を繰り返す。
こんな感じで
Bootstrapを使うようにしてください。
今は一つのchatbox でYouとChatGPTの会話を表示してますが、会話ごとにchatboxを作成しスクロールしてほしいです。
chatbox の左側にアイコン画像を表示したいです。
アイコンは円ではなくて四角でお願いします。
立ち上げたら、まずChatGPTが「おはようございます」と話してほしい
背景は白で、文字は黒、その他の色は青（#005bab）を使って、スタイリッシュなデザインにしてください。
Youが入力したあと、10秒後にChatGPTが回答するようにしてください。10秒間は「・・・」と表示してください。
テキストの大きさとアイコンの大きさを１．５倍にしてください。
ChatGPTの答えはいっきに出るのではなく1文字1文字出てくるようにお願いします。
その結果
それっぽいのができた。
コードはこちら
https://gist.github.com/tatsuya1970/f88cc5f3bda90c5401026f86fca60df5
注意点
繰り返しますが、
これはあくまで速攻でデモを見せるためのもので、このままではJavaScript内のAPIキーが見える状況になります。公開するときは絶対ダメです。