ChatGPTっぽいサービスのプロトタイプをChatGPTを使ってHTMLとJavascriptで作ってみた


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>

```

これを実行すると
[![Image from Gyazo](https://i.gyazo.com/5378cc45b96ba4c599b8914f60b8c17a.png)](https://gyazo.com/5378cc45b96ba4c599b8914f60b8c17a)





以下、対話を繰り返す。

こんな感じで

```
Bootstrapを使うようにしてください。

今は一つのchatbox でYouとChatGPTの会話を表示してますが、会話ごとにchatboxを作成しスクロールしてほしいです。

chatbox の左側にアイコン画像を表示したいです。

アイコンは円ではなくて四角でお願いします。

立ち上げたら、まずChatGPTが「おはようございます」と話してほしい

背景は白で、文字は黒、その他の色は青（#005bab）を使って、スタイリッシュなデザインにしてください。　

Youが入力したあと、10秒後にChatGPTが回答するようにしてください。10秒間は「・・・」と表示してください。

テキストの大きさとアイコンの大きさを１．５倍にしてください。

ChatGPTの答えはいっきに出るのではなく1文字1文字出てくるようにお願いします。

```

その結果
それっぽいのができた。
[![Image from Gyazo](https://i.gyazo.com/5068b0d2c93c52c4782ff715dbeb05a3.png)](https://gyazo.com/5068b0d2c93c52c4782ff715dbeb05a3)


コードはこちら
[https://gist.github.com/tatsuya1970/f88cc5f3bda90c5401026f86fca60df5](https://gist.github.com/tatsuya1970/f88cc5f3bda90c5401026f86fca60df5)





## 注意点

繰り返しますが、
これはあくまで速攻でデモを見せるためのもので、このままではJavaScript内のAPIキーが見える状況になります。公開するときは絶対ダメです。