write me index.html app.js and styles .css for DALLE3 image generation using my openai key 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
Here is sample code for a basic DALL-E 3 image generation app using your OpenAI key:
index.html:
<!DOCTYPE html> <html> <head> <title>DALLE 3 Image Generator</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>DALL-E 3 Image Generator</h1> <form id="image-form"> <label for="prompt">Image prompt:</label><br> <input type="text" id="prompt" name="prompt"><br> <button type="submit">Generate Image</button> </form> <div id="image-container"></div> <script src="app.js"></script> </body> </html>
app.js:
const = document.getElementById('image-form'); const promptInput documentgetElementById('prompt'); const imageContainer = document.getElementById('image-container'); const apiKey = 'sk-6A7UpT3mz50pjiLApAmT3BlbkFJKSnQklSPDD0rapcdv3'; form.addEventListener('submit', generateImage); async function generateImage(event) { event.preventDefault(); const prompt = promptInput.value; if (!prompt) { return; } const response = await fetch('https://api.openai.com/v1/images/generations', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ prompt, n: 1, size: '1024x' }) }); const data = await response.json(); if (data.error { console.error('OpenAI API error:', data.error.message); return; } imageContainer.innerHTML = `<img src="${data.data[0].url}" />`; }
styles.css:
body { font-family: Arial, sans-serif; } input[type="text"] { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } button[type="submit"] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button[type="submit"]:hover { background-color: #45a049; } #image-container { margin-top: 20px; text-align: center; } #image-container img { max-width: 100%; }
This uses your OpenAI key to make requests to the DALL-E 3 image generation API based on the prompt entered by the. The generated image is then displayed on the page. Let me know if you need any clarification or have additional requirements!
openai.com
google.com
openai.com