open ai code



<!DOCTYPE html>
<html>
<head>
  <title>OpenAI Image Generation</title>
  <style>
    /* Add some styling to the image */
    #generated-image {
      width: 256px;  /* Set the width of the image */
      border: 1px solid black;  /* Add a border around the image */
      border-radius: 5px;  /* Round the corners of the border */
      margin-top: 10px;  /* Add some space above the image */
    }
  </style>
</head>
<body>

<!-- Add a text field for the user to enter a prompt -->
<input type="text" id="prompt" placeholder="Enter a prompt" style="width: 500px; height: 50px; font-size: 20px;">

<!-- Add a button to trigger the image generation -->
<button id="generate-button" style="font-size: 20px;">Generate Image</button>

<!-- Add an image element to display the generated image -->
<img id="generated-image" src="" alt="Generated Image">
<img id="generated-image" src="" alt="Generated Image">

<script>
  // Add a click event listener to the generate button
  document.getElementById('generate-button').addEventListener('click', function() {
    // Get the user-entered prompt from the text field
    const prompt = document.getElementById('prompt').value;

    // Your OpenAI API key
    const apiKey = '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';

    // The API endpoint for image generation
    const apiUrl = 'https://api.openai.com/v1/images/generations';

    // The data to send to the API
    const data = {
      'prompt': prompt,
      'model': 'image-alpha-001',
      'num_images': 2,
      'size': '1024x1024',
      'response_format': 'url'
    };

    // Send a POST request to the API
    fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(json => {
      // Get the URL of the generated image from the API response
      const imageUrl = json.data[0].url;

      // Set the src attribute of the image element to the generated image URL
      document.getElementById('generated-image').src = imageUrl;
    });
  });
</script>

</body>
</html>