ChatGPT AI 网站源码 - 移动端自适应聊天机器人 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
<pre><code>    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .chat-container {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .chat-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    
    .chat-message {
        margin-bottom: 10px;
    }
&lt;/style&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@openai/chatgpt&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    const chatModel = 'gpt-3.5-turbo'; // 替换为您的ChatGPT模型
    
    const chat = new OpenAI.ChatCompletion(chatModel);
    
    async function sendMessage() {
        const userInput = document.getElementById('user-input').value;
        appendMessage('user', userInput);
        document.getElementById('user-input').value = '';
        
        const message = {
            role: 'system',
            content: 'You are a helpful assistant that speaks English.',
        };
        
        const response = await chat.send(userInput);
        appendMessage('assistant', response.choices[0].message.content);
    }
    
    function appendMessage(role, content) {
        const chatContainer = document.getElementById('chat-container');
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message');
        messageElement.classList.add(role);
        messageElement.innerText = content;
        chatContainer.appendChild(messageElement);
    }
&lt;/script&gt;
</code></pre>
</head>
<body>
    <div class="container">
        <h1>ChatGPT AI</h1>
        <div id="chat-container" class="chat-container"></div>
        <input type="text" id="user-input" class="chat-input" placeholder="Type your message...">
        <button onclick="sendMessage()">Send</button>
    </div>
</body>
</html>