基于GPT-3的聊天机器人无法向API发送消息求助

你的代码存在几个关键问题导致API调用失败，以下是具体问题和修复后的完整代码：

核心问题点 #

• OpenAI客户端初始化错误：直接使用window.openai未完成正确的客户端实例化，需要通过new OpenAI()创建配置好密钥的客户端实例。
• API方法名称错误：新版@openai/api库中，补全接口的方法是completions.create（小写开头），而非旧版的Completion.create。
• 模型标识不规范：原代码中的davinci是旧版模型简称，需使用完整的模型ID如text-davinci-003（GPT-3系列的补全模型）。
• 缺失错误处理：未添加try/catch捕获API调用异常，无法排查请求失败原因。
• 前端暴露API密钥的风险：直接在前端代码中写入API密钥会导致密钥泄露，建议通过后端代理转发请求（本修复先解决功能问题，后续务必替换为后端代理方案）。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ChatGPT Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="chat-window">
    <div class="chat-header">
      <h1>ChatGPT</h1>
    </div>
    <div class="chat-body">
      <ul class="message-list">
        <li class="message bot">
          <p>Hello! How can I help you today?</p>
        </li>
      </ul>
    </div>
    <div class="chat-footer">
      <input id="input" type="text" placeholder="Type your message here...">
      <button onclick="send()">Send</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@openai/api@4.0.0/dist/index.umd.js"></script>
  <script>
    // 初始化OpenAI客户端
    const api_key = 'YOUR_API_KEY';
    const model_engine = 'text-davinci-003';
    const openai = new window.OpenAI({
      apiKey: api_key,
      dangerouslyAllowBrowser: true // 仅用于测试，生产环境必须移除，改用后端代理
    });

    // API 호출하여 응답 받기
    const askGPT3 = async (input) => {
      try {
        console.log('Sending request to API with input:', input);
        const response = await openai.completions.create({
          model: model_engine,
          prompt: input,
          max_tokens: 1024,
          n: 1,
          stop: null,
          temperature: 0.5
        });
        return response.choices[0].text.trim();
      } catch (error) {
        console.error('API调用失败:', error);
        return '抱歉，我现在无法回复你的消息，请稍后再试。';
      }
    };

    // 대화 시작
    const startConversation = async () => {
      const botMessage = document.querySelector('.message.bot p');
      try {
        const answer = await askGPT3('Hello!');
        botMessage.innerHTML = answer;
      } catch (error) {
        botMessage.innerHTML = '初始化对话失败，请检查API配置。';
      }
    };
    startConversation();

    // 대화 전송
    const send = async () => {
      const input = document.getElementById('input').value.trim();
      if (!input) return; // 空消息不发送
      
      const messageList = document.querySelector('.message-list');
      const userMessage = `<li class="message user"><p>${input}</p></li>`;
      messageList.insertAdjacentHTML('beforeend', userMessage);
      
      // 显示加载状态
      const loadingElement = document.createElement('li');
      loadingElement.className = 'message bot';
      loadingElement.innerHTML = '<p>正在回复...</p>';
      messageList.appendChild(loadingElement);
      
      try {
        const botResponse = await askGPT3(input);
        loadingElement.innerHTML = `<p>${botResponse}</p>`;
      } catch (error) {
        loadingElement.innerHTML = '<p>回复失败，请稍后再试。</p>';
      }
      
      document.getElementById('input').value = '';
      // 滚动到最新消息
      messageList.scrollTop = messageList.scrollHeight;
    };

    // 대화 엔터키 전송
    const input = document.getElementById('input');
    input.addEventListener('keyup', (event) => {
      if (event.keyCode === 13) {
        event.preventDefault();
        send(); // 直接调用send函数，无需模拟点击按钮
      }
    });
  </script>
</body>
</html>

额外说明 #

1. 安全警告：dangerouslyAllowBrowser: true仅用于本地测试，生产环境绝对不能在前端暴露API密钥，必须搭建后端服务转发OpenAI请求，前端调用自己的后端接口。
2. 模型选择：如果需要使用GPT-3.5或GPT-4，需改用聊天接口（chat.completions.create），对应模型如gpt-3.5-turbo，补全接口仅适用于旧版GPT-3模型。
3. 错误排查：打开浏览器开发者工具（F12）的Console面板，可以查看API调用的详细错误信息，帮助定位问题（如密钥无效、配额不足等）。

内容的提问来源于stack exchange，提问作者이춘자