机器人对话

原创

IT陈寒 2025-02-11 09:35:09 ©著作权

©著作权归作者所有：来自51CTO博客作者IT陈寒的原创作品，请联系作者获取转载授权，否则将追究法律责任

根据你提供的 API 文档，下面是一个简单的 HTML 页面示例，使用 JavaScript 调用机器人对话功能。这里我们假设该 API 需要 POST 请求，并且你提供了一个有效的 API 密钥。

HTML 页面：创建一个简单的聊天界面。
JavaScript：使用 fetch 方法调用 API，传送消息并显示响应。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天机器人</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      margin: 0;
      padding: 20px;
    }
    #chatbox {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }
    #messages {
      overflow-y: auto;
      height: 400px;
      margin-bottom: 20px;
    }
    .message {
      margin-bottom: 10px;
    }
    .user {
      font-weight: bold;
      color: #007bff;
    }
    .bot {
      font-weight: bold;
      color: #28a745;
    }
    input[type="text"] {
      padding: 10px;
      width: calc(100% - 100px);
      border-radius: 4px;
      border: 1px solid #ddd;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div id="chatbox">
  <div id="messages"></div>
  <div>
    <input type="text" id="userInput" placeholder="请输入消息...">
    <button id="sendBtn">发送</button>
  </div>
</div>

<script>
  const API_URL = "https://api.siliconflow.cn/v1/chat/completions";  // 替换为真实的 API URL
  const API_KEY = "YOUR_API_KEY"; // 替换为你的API密钥

  // 获取 DOM 元素
  const sendBtn = document.getElementById('sendBtn');
  const userInput = document.getElementById('userInput');
  const messages = document.getElementById('messages');

  // 发送消息按钮点击事件
  sendBtn.addEventListener('click', () => {
    const userMessage = userInput.value.trim();
    if (!userMessage) return;

    // 添加用户消息到界面
    addMessage('user', userMessage);
    userInput.value = '';  // 清空输入框

    // 调用 API 获取机器人回应
    getBotResponse(userMessage);
  });

  // 添加消息到聊天框
  function addMessage(sender, message) {
    const msgDiv = document.createElement('div');
    msgDiv.classList.add('message');
    msgDiv.classList.add(sender);
    msgDiv.textContent = message;
    messages.appendChild(msgDiv);
    messages.scrollTop = messages.scrollHeight; // 滚动到底部
  }

  // 调用聊天 API 获取机器人的回应
  async function getBotResponse(userMessage) {
    try {
      const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${API_KEY}`,  // 使用 Bearer Token 认证
        },
        body: JSON.stringify({
          messages: [{ role: 'user', content: userMessage }],
        }),
      });

      const data = await response.json();
      if (data && data.choices && data.choices.length > 0) {
        const botMessage = data.choices[0].message.content;
        addMessage('bot', botMessage);
      } else {
        addMessage('bot', '抱歉，我没有收到有效的回应。');
      }
    } catch (error) {
      console.error('Error:', error);
      addMessage('bot', '网络错误，请稍后再试。');
    }
  }
</script>

</body>
</html>

解释：

HTML 部分：我们创建了一个简单的聊天界面，包括一个用于显示消息的区域 (#messages)，一个文本输入框 (#userInput)，以及一个发送按钮 (#sendBtn)。
CSS 部分：为了让页面看起来更简洁和现代，使用了基本的样式。
JavaScript 部分：
- getBotResponse 函数：当用户发送消息时，调用 API 并将返回的机器人回复显示在页面上。
- API 请求：使用 fetch 方法发送 POST 请求给 API，传递用户的消息，并获取机器人的回应。
- 消息显示：根据返回的数据，在聊天框中显示用户和机器人的消息。