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

下面是一个使用HTML调用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;
        }
        
        .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;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@openai/chatgpt"></script>
    <script>
        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);
        }
    </script>
</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>

这是一个简单的网页，它包含一个包含聊天消息的容器和一个输入框和发送按钮。当用户输入消息并点击发送按钮时，它将向ChatGPT AI发送请求，并将用户输入的消息和ChatGPT的回复显示在聊天容器中。

此代码还使用了OpenAI的ChatGPT JavaScript库，所以确保在<head>标签中包含正确的脚本链接。

此代码还具有基本的CSS样式，使聊天容器和输入框看起来更好。您可以根据需要进行自定义。此外，该代码还使用了max-width属性来确保在移动设备上适当显示，并使用@media查询进行响应式调整