如何在html中通过js加载openai api配置？

Question

我试图在我的 html 中通过 js 发送请求，以便 openai 分析它并发送响应，但是如果在 js 中我输入以下内容：

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
apiKey: "sk-0000000000000ZXXXXXXXXXXXXXX",
});
const openai = new OpenAIApi(configuration);

async function test() {
console("test")
const response = await openai.createCompletion("text-davinci-002", {
prompt: "hello",
temperature: 0.7,
max_tokens: 64,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
});
console.log(response)
}
test();

return 控制这些错误

Uncaught ReferenceError: require is not defined
at buttons.js:94:38

我尝试用 node.js 安装它，它工作正常，但我不知道如何让它在我自己的 html

中工作

Answer 1

我花了一点时间才弄明白。

转到 https://beta.openai.com/playground 并选择所需的设置。
然后，点击右上角的“查看代码”。
Select“curl”作为您要查看的代码类型。
复制“curl”代码。
前往：https://reqbin.com/req/javascript/c-wyuctivp/convert-curl-to-javascript.
将代码从“curl”转换为“javascript/AJAX”。这会将其从“curl”更改为 javascript/AJAX XMLHttpRequest。

像往常一样使用 javascript。该代码将控制台记录响应。您可以更改它以在您的代码中以其他方式使用响应。

经过测试和工作的示例（您可以调整这些示例以满足您的需要）：

常规提示：

let open_ai_response;

openai_test();

async function openai_test() {
  
  var url = "https://api.openai.com/v1/engines/text-davinci-002/completions";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);

  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Authorization", "Bearer YOUR_OPEN_AI_KEY_GOES_HERE");

  xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
        open_ai_response = xhr.responseText;
        console.log(open_ai_response);
     }};

  var data = `{
    "prompt": "YOUR TEXT HERE.",
    "temperature": 0.7,
    "max_tokens": 256,
    "top_p": 1,
    "frequency_penalty": 0.75,
    "presence_penalty": 0
  }`;

  xhr.send(data);
}

为提示使用变量：

let open_ai_response;

openai_test();

async function openai_test() {
  
  var prompt_text = "YOUR TEXT HERE."
  var prompt_text2 = "MORE TEXT HERE."
  
  var url = "https://api.openai.com/v1/engines/text-davinci-002/completions";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);

  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Authorization", "Bearer YOUR_OPEN_AI_KEY_GOES_HERE");

  xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
        open_ai_response = xhr.responseText;
        console.log(open_ai_response);
     }};

  var data = `{
    "prompt": "${prompt_text + prompt_text2}",
    "temperature": 0.7,
    "max_tokens": 256,
    "top_p": 1,
    "frequency_penalty": 0.75,
    "presence_penalty": 0
  }`;

  xhr.send(data);
}

如何在html中通过js加载openai api配置？

How can I load the openai api configuration through js in html?

html

javascript

node.js

openai