// https://editor.p5js.org/yining/sketches/ubpprBEg3

// https://platform.openai.com/docs/api-reference/images/create

​

// Sign in and generate your OpenAI API key here: https://platform.openai.com/api-keys

// Note: Make sure to keep your API key private because you'll be charged for all requests sent with your API key

const OPENAI_API_KEY = "replace_this_with_your_openai_api_key";

const url = "https://api.openai.com/v1/images/generations";

const options = {

  method: "POST",

  headers: {

    "Content-Type": "application/json",

    Authorization: `Bearer ${OPENAI_API_KEY}`,

  },

};

// See OpenAI API Reference for all properties in Request body:

// https://platform.openai.com/docs/api-reference/images/create

const requestBody = {

  model: "dall-e-2",

  size: "256x256",

};

​

let activePrompt;

let responseDone = true;

let activeResponseElement;

let activePromptElement;

​

let inputField;

let generateButton;

​

function setup() {

  noCanvas();

  createElement("h1", "OpenAI Image Generation Example");

  inputField = createInput("A cute cat in the space.");

  generateButton = createButton("Generate");

  generateButton.mousePressed(generate);

  activePromptElement = createP();

  activeResponseElement = createP();

}

​

function generate() {

  if (responseDone) {

    responseDone = false;

    activePrompt = inputField.value();

​

    requestBody.prompt = activePrompt;

    options.body = JSON.stringify(requestBody);

​

    activePromptElement.html("User: " + activePrompt);

    activeResponseElement.html("Dall-E: ");

​

    fetch(url, options)

      .then((response) => {

        // console.log(response);

        return response.json();

      })

      .then((response) => {

        // console.log(response);

        let img = createImg(response.data[0].url, activePrompt);

        responseDone = true;

      });

  }

}

​