ChatGPT AI 网站源码 - 使用 JavaScript 实现实时聊天 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>ChatGPT AI</title>
    <script src="https://cdn.jsdelivr.net/npm/@openai/chatgpt@1/dist/index.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .chatbox {
            width: 400px;
            height: 500px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            padding: 10px;
        }
        .input-container {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .input-field {
            width: 300px;
            padding: 5px;
        }
        .send-button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="chatbox" id="chatbox"></div>
        <div class="input-container">
            <input type="text" class="input-field" id="userInput" placeholder="Type your message..." />
            <button class="send-button" onclick="sendMessage()">Send</button>
        </div>
    </div>
<pre><code>&lt;script&gt;
    const chatbox = document.getElementById('chatbox');
    const userInput = document.getElementById('userInput');

    const chatGPT = new OpenAIChatGPT({
        model: 'gpt-3.5-turbo',
        apiKey: 'YOUR_OPENAI_API_KEY'
    });

    async function sendMessage() {
        const message = userInput.value.trim();
        if (message !== '') {
            addUserMessage(message);
            userInput.value = '';

            const response = await chatGPT.sendMessage(message);
            addBotMessage(response.choices[0].message.content);
        }
    }

    function addUserMessage(message) {
        const userMessage = document.createElement('div');
        userMessage.innerText = 'You: ' + message;
        chatbox.appendChild(userMessage);
    }

    function addBotMessage(message) {
        const botMessage = document.createElement('div');
        botMessage.innerText = 'Bot: ' + message;
        chatbox.appendChild(botMessage);
        chatbox.scrollTop = chatbox.scrollHeight;
    }
&lt;/script&gt;
</code></pre>
</body>
</html>