javascript - How can I load the openai api configuration through js in html? - Stack Overflow

admin管理员组

文章数量:1334808

I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following:

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 console these error

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

I have tried to install it with node.js and it works fine but I don't know how to make it work in my own html

I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following:

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 console these error

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

I have tried to install it with node.js and it works fine but I don't know how to make it work in my own html

• javascript
• html
• node.js
• openai-api

Share Improve this question Follow asked May 6, 2022 at 10:05 ebsigmaebsigma 6511 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It took me a little while to figure this out.

1. Go to https://beta.openai./playground and choose the settings you want.
2. Then, click "View code" in the top right.
3. Select "curl" as the code type you want to view.
4. Copy the "curl" code.
5. Go to: https://reqbin./req/javascript/c-wyuctivp/convert-curl-to-javascript.
6. Convert the code from "curl" to "javascript/AJAX". This will change it from "curl" to a javascript/AJAX XMLHttpRequest.

Use the javascript as you would normally. The code will console log the response. You can change that to use the response in some other way in your code.

Tested and working examples (You could just adjust these examples to meet your needs, but it may be best to create your own to get the exact results you want):

Regular prompt:

let open_ai_response;

openai_test();

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

  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);
}

Using variables for the prompt:

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./v1/engines/text-davinci-002/pletions";

  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);
}

Posting the correct link that currently works:

var url = "https://api.openai./v1/pletions";

and here is how the data should look like for question answering with davinchi-003 engine:

var data = `{
              "model": "text-davinci-003",
              "prompt": "${prompt_text+question_out}",
              "temperature": 0.9,
              "max_tokens": 150,
              "top_p": 1,
              "frequency_penalty": 0.0,
              "presence_penalty": 0.6,
              "stop": [" Human:", " AI:"]
            }`;

here the prompt_text is the prompt text I sent o the engine and question_out is the question I want the engine to answer based on the prompt.

本文标签： javascriptHow can I load the openai api configuration through js in htmlStack Overflow