使用HTML和OpenAI API构建ChatGPT聊天机器人

以下是使用HTML和OpenAI API构建ChatGPT聊天机器人的步骤。请注意，您需要一个有效的OpenAI API密钥才能运行此示例。

注册OpenAI并获取API密钥
- 访问OpenAI网站：https://platform.openai.com/。
- 创建一个帐户或登录您的现有帐户。
- 在您的帐户仪表板中，找到并复制您的API密钥。

创建HTML页面

创建一个新的HTML文件，并包含以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>ChatGPT 聊天机器人</title>
</head>
<body>
  <h1>与 ChatGPT 聊天</h1>
  <div id='chat-display'></div>
  <form id='chat-form'>
    <input type='text' id='user-input' placeholder='请输入您的消息' />
    <button type='submit'>发送</button>
  </form>
  <script src='script.js'></script>
</body>
</html>

编写JavaScript代码

创建一个名为'script.js'的文件，并将以下JavaScript代码放入其中：

const apiKey = 'YOUR_API_KEY_HERE'; // 替换为您的实际 API 密钥
const apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';

const chatForm = document.getElementById('chat-form');
const userInput = document.getElementById('user-input');
const chatDisplay = document.getElementById('chat-display');

chatForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const userMessage = userInput.value;
  userInput.value = ''; // 清空输入框
  sendMessage(userMessage);
});

async function sendMessage(message) {
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      prompt: message,
      max_tokens: 50
    })
  });
  const data = await response.json();
  const aiResponse = data.choices[0].text;
  displayMessage('你', userMessage); // 显示用户消息
  displayMessage('ChatGPT', aiResponse); // 显示 AI 响应
}

function displayMessage(sender, message) {
  const messageElement = document.createElement('div');
  messageElement.innerHTML = `<b>${sender}:</b> ${message}`;
  chatDisplay.appendChild(messageElement);
}

将JavaScript文件链接到HTML页面
- 在HTML页面的<head>部分中，添加以下代码，将'script.js'文件链接到您的HTML页面：
```
<script src='script.js'></script>
```
运行您的代码
- 在您的Web浏览器中打开HTML文件。
- 现在，您可以输入您的消息并单击“发送”按钮，您的聊天机器人将使用OpenAI API生成响应。

重要说明：

确保您已将代码中的'YOUR_API_KEY_HERE'替换为您的实际OpenAI API密钥。
此代码仅提供了一个基本示例。您可以根据需要自定义代码以添加更多功能，例如：
- 使用不同的OpenAI模型。
- 添加用户界面元素以改善用户体验。
- 保存聊天记录。
请务必遵守OpenAI的使用规则和条款。

请记住，OpenAI API是付费服务，您需要在您的帐户中支付费用才能使用它。