#DALL E API Integration Not Working (HTML + JS)

10 messages · Page 1 of 1 (latest)

scenic patio
#

I'm doing a test project to create a web-based image generator. Using GPT it suggested the code at the bottom. I'm getting a 400 error on the POST to https://api.openai.com/v1/images/generations. Any Ideas?

<h1>DALL-E Image Generator</h1>
<p>Enter a keyword to generate an AI image:</p>
<input type="text" id="keyword" />
<button onclick="generateImage()">Generate Image</button>
<br />
<br />
<img id="image" />

<script>
  // Set your API key
  const apiKey = "XXXXXXXXX";

  // Set the endpoint URL
  const endpoint = "https://api.openai.com/v1/images/generations";

  // Set the model to use
  const model = "image-alpha-001";

  // Set the size of the images
  const size = 512;

  // Set the response format
  const responseFormat = "url";

  // Set the headers
  const headers = {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${apiKey}`
  };

  function generateImage() {
    // Get the keyword from the input field
    const keyword = document.getElementById("keyword").value;

    // Set the prompt
    const prompt = `generate a picture of a ${keyword}`;

    // Set the number of images to generate
    const numImages = 1;

    // Set the payload
    const data = {
      model: model,
      prompt: prompt,
      num_images: numImages,
      size: size,
      response_format: responseFormat
    };

    // Send the request to the OpenAI API
    fetch(endpoint, {
      method: "POST",
      headers: headers,
      body: JSON.stringify(data)
    })
      .then(response => response.json())
      .then(json => {
        // Get the image element
        const image = document.getElementById("image");

        // Set the src attribute of the image to the URL of the generated image
        image.src = json.data[0].url;
      });
  }
</script>
#

Note: The "XXXX..." in place of the API key is just a placeholder.

If you would like the link to the demo site please send me a DM! Thank you for any help on this issue!

fickle niche
#

What’s the exact error?

elder stream
#

I think it might be your size variable. Can you try "512x512"

zinc flicker
#

Hk

late pulsar
#

You should remove model

icy sequoia
# 
<h1>DALL-E Image Generator</h1>
    <p>Enter a keyword to generate an AI image:</p>
    <input type="text" id="keyword" />
    <button onclick="generateImage()">Generate Image</button>
    <br />
    <br />
    <img id="image" />

    <script>
      // Set your API key
      const apiKey = "XXXXXXXXX";

      // Set the endpoint URL
      const endpoint = "https://api.openai.com/v1/images/generations";

      // Set the model to use
      const model = "image-alpha-001";

      // Set the size of the images
      const size = 512;

      // Set the response format
      const responseFormat = "url";

      // Set the headers
      const headers = {
        "Content-Type": "application/json",
        "Authorization": Bearer ${apiKey}
      };

      function generateImage() {
        // Get the keyword from the input field
        const keyword = document.getElementById("keyword").value;

        // Set the prompt
        const prompt = generate a picture of a ${keyword};

        // Set the number of images to generate
        const numImages = 1;

        // Set the payload
        const data = {
          model: model,
          prompt: prompt,
          num_images: numImages,
          size: size,
          response_format: responseFormat
        };

        // Send the request to the OpenAI API
        fetch(endpoint, {
          method: "POST",
          headers: headers,
          body: JSON.stringify(data)
        })
          .then(response => response.json())
          .then(json => {
            // Get the image element
            const image = document.getElementById("image");

            // Set the src attribute of the image to the URL of the generated image
            image.src = json.data[0].url;
          });
      }
    </script>
#

see, now it has syntax highlighting

late pulsar
#

I don’t see it on iOS app 😢