javascript - 如何使用 JavaScript 从 OpenAI API 获取数据并将其显示在我的网站上

Question

我的网站上有一个带有文本输入的简单表单。我们想要调用 OpenAI API，要求 ChatGPT 根据用户粘贴到文本框中的职位描述来查找一些类似的公司。

到目前为止，我们还无法让返回数据发挥作用。它可以正确发送职位描述数据，但无法列出公司列表。我们该如何解决这个问题？

const form = document.querySelector('form');
const generateButton = document.querySelector('#generate-button');
const companiesOutput = document.querySelector('#output-companies');

function generateCampaign(event) {
  event.preventDefault();
  const jobDescription = document.querySelector('#job-description').value;

  fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      prompt: `Give me 20 top-tier VC backed startup companies in the same space as the company in this job description:\n\n ${jobDescription}`,
      max_tokens: 50,
      temperature: 0.7
    })
  })
  .then(response => response.json())
  .then(data => {
    const companiesList = data.choices[0].text;
    companiesOutput.innerHTML = `<li>${companiesList}</li>`;
  })
  .catch(error => console.error(error));
};

form.addEventListener('submit', generateCampaign);

Answer 1

您需要将响应文本拆分为单独的公司名称，并为每个名称创建一个列表项元素。所以你需要更改这一行:

companiesOutput.innerHTML = `<li>${companiesList}</li>`;

并添加以下代码块:

const companies = companiesList.split(/\r?\n/);
companiesOutput.innerHTML = '';
companies.forEach(company => {
companiesOutput.innerHTML += `<li>${company.trim()}</li>`;
});