如何在 JavaScript 中使用 ChatGPT 插件？

Question

我最近尝试将 ChatGPT 导入到我的 js 项目中以在 HTML 中使用它，但响应为空。我想用它来生成随机故事。你知道这可能是什么原因造成的吗？

const form = 0;
const mytextInput = 0;
const responseTextarea = 0;

function dok(){
    form = document.getElementById(`chat-form`);
    mytextInput = document.getElementById('mytext');
    responseTextarea = document.getElementById('response');
    document.getElementById("response").innerHTML = response;
}


const API_KEY = "sk-proj-d127W0pgdYpbW6uDRaUvT3BlbkFJ90Q1QFAuCi7UMkxxES8P";
const response = "";

async function generate()   {
    const mytext = mytextInput.value.trim();
    const mytext2 = "hello"
    if (mytext2) {
        try {
            response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${API_KEY}`
                },
                body: JSON.stringify({
                    model: 'gpt-4o',
                    messages: [{ role: 'user', content: mytext }],
                    temperature: 1.0,
                    top_p: 0.7,
                    n: 1,
                    stream: false,
                    presence_penalty: 0,
                    frequency_penalty: 0,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                responseTextarea.value = data.choices[0].message.content;
                
            } else {
                responseTextarea.value = 'Error: Unable to process your request.';
            }
        } catch (error) {
            console.error(error);
            responseTextarea.value = 'Error: Unable to process your request.';
        }
    }
};

我尝试完全重写它，使用 YouTube 教程，但没有任何效果，当我最终修复了代码中的所有错误时。

npm run dev

> [email protected] dev
> node skript1.js

Answer 1

const form = document.getElementById(`chat-form`);
const mytextInput = document.getElementById('mytext');
const responseTextarea = document.getElementById('response');

const API_KEY = "sk-proj-d127W0pgdYpbW6uDRaUvT3BlbkFJ90Q1QFAuCi7UMkxxES8P";
let response = "";

async function generate() {
  const mytext = mytextInput.value.trim(); // Get user input from mytextInput

  if (mytext) { // Check if user input exists
    try {
      response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
          model: 'gpt-4o',
          messages: [{ role: 'user', content: mytext }],
          temperature: 1.0,
          top_p: 0.7,
          n: 1,
          stream: false,
          presence_penalty: 0,
          frequency_penalty: 0,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        responseTextarea.value = data.choices[0].message.content;
      } else {
        responseTextarea.value = 'Error: Unable to process your request.';
      }
    } catch (error) {
      console.error(error);
      responseTextarea.value = 'Error: Unable to process your request.';
    }
  } else {
    responseTextarea.value = "Please enter a starting prompt."; // Inform user to enter text
  }
};

此代码现在应该：

1. 一开始就正确获取 DOM 元素。
2. 使用用户的输入 (mytext) 作为 ChatGPT API 调用的提示。
3. 如果用户未输入任何文本，则向他们提供反馈。