写一个中文版html调用chatgpt ai的网站源码 并且可以移动端自适应

以下是一个中文版HTML调用ChatGPT AI的网站源码，并且可以适应移动端的自适应。

<!DOCTYPE html>
<html lang="zh-CN">
<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;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .chat-container {
            background-color: #f5f5f5;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .user-message {
            background-color: #eaf6ff;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .bot-message {
            background-color: #efffef;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .input-container {
            display: flex;
        }
        
        .input-container input {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: none;
            margin-right: 10px;
        }
        
        .input-container button {
            padding: 10px 20px;
            background-color: #4CAF50;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        
        @media (max-width: 600px) {
            .container {
                max-width: 100%;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>ChatGPT AI</h1>
        <div class="chat-container" id="chatContainer"></div>
        <div class="input-container">
            <input type="text" id="userInput" placeholder="请输入消息">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        function appendUserMessage(message) {
            const chatContainer = document.getElementById('chatContainer');
            const userMessageElement = document.createElement('div');
            userMessageElement.classList.add('user-message');
            userMessageElement.innerText = message;
            chatContainer.appendChild(userMessageElement);
        }

        function appendBotMessage(message) {
            const chatContainer = document.getElementById('chatContainer');
            const botMessageElement = document.createElement('div');
            botMessageElement.classList.add('bot-message');
            botMessageElement.innerText = message;
            chatContainer.appendChild(botMessageElement);
        }

        function sendMessage() {
            const userInput = document.getElementById('userInput');
            const message = userInput.value.trim();

            if (message) {
                appendUserMessage(message);
                userInput.value = '';

                // 调用ChatGPT AI的API发送用户消息并获取回复
                const apiUrl = 'https://api.openai.com/v1/chat/completions';
                const apiKey = 'YOUR_API_KEY';
                
                fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        "model": "gpt-3.5-turbo",
                        "messages": [
                            {"role": "system", "content": "You are a helpful assistant."},
                            {"role": "user", "content": message}
                        ]
                    })
                })
                .then(response => response.json())
                .then(data => {
                    const botMessage = data.choices[0].message.content;
                    appendBotMessage(botMessage);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
        }
    </script>
</body>
</html>

在上述代码中，你需要将YOUR_API_KEY替换为你自己的ChatGPT AI API密钥。此外，还需要引入适配移动端的CSS样式，通过@media查询来设置在移动设备上的最大宽度为600px。

请确保你已经有ChatGPT AI的API密钥，并且在使用代码之前已经安装了适当的开发环境和依赖项