OpenAI GPT-3 API error: Why do I get an error when I try to implement an OpenAI API in my JavaScript code?

Question

I am trying to create a simple website using HTML and JavaScript using an OpenAI API where the user inputs a query and the model generates a response. Whenever I type something in the textbox and click a button to generate something, it will always show an error. Is this a problem with CORS restrictions, or is it a problem with my code?

Here is my JavaScript code:

function generateOutput() {
    var userInput = document.getElementById("input").value;

    fetch("https://api.openai.com/v1/engines/davinci-codex/completions", {
        method:"POST",
        headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer 'MY_API'"
        },
        body: JSON.stringify({
            prompt: userInput,
            max_tokens:50,
            model: "text-davinci-003"
        }),
    })
        .then(response => {
            if (response.ok) {
                return response.json();
            }else{
                throw new Error("Error occurred while communicating with the API.")
            }
        })
        .then(data => {
            const output = data.choices[0].text.trim();
            document.getElementById("output").textContent = output;
        })  
        .catch(error => {
            document.getElementById("errorMessage").textContent = "Error occurred while communicating with the API: " + error.message;
        });
}

In this code, a user can type something, and then generate a response by clicking a button. If there is an error, it will display the text "Error occurred while communicating with the API." I tried it without the error function, and it just displayed nothing while generating my request.

Answer 1

All Engines API endpoints are deprecated.

Change the URL from this...

https://api.openai.com/v1/engines/davinci-codex/completions

...to this.

https://api.openai.com/v1/completions

You probably used ChatGPT to write this code. The problem is that even the newest OpenAI models (i.e., GPT-3.5 and GPT-4) are trained with data up to June/September 2021, when Engines API endpoints were still in use. ChatGPT doesn't know that as of June 2023, it should suggest you use the Completions API endpoint instead of the Engines API endpoint.

Try this:

function generateOutput() {
  var userInput = document.getElementById("input").value;

  fetch("https://api.openai.com/v1/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer 'MY_API'"
      },
      body: JSON.stringify({
        prompt: userInput,
        max_tokens: 50,
        model: "text-davinci-003"
      }),
    })
    .then(response => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Error occurred while communicating with the API.")
      }
    })
    .then(data => {
      const output = data.choices[0].text.trim();
      document.getElementById("output").textContent = output;
    })
    .catch(error => {
      document.getElementById("errorMessage").textContent = "Error occurred while communicating with the API: " + error.message;
    });
}