Dall-E-3

appatalks · Nov 21, 2023 · 62f210f · 62f210f
1 parent 074d383
commit 62f210f
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/dalle.html b/dalle.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DALL-E API Request</title>
+</head>
+<body>
+    <h1>DALL-E API Request</h1>
+    <form id="apiRequestForm">
+        <label for="prompt">Enter a prompt:</label>
+        <input type="text" id="prompt" name="prompt" required>
+        <label for="size">Select Size:</label>
+        <select id="size" name="size">
+            <option value="512x512">512x512</option>
+            <option value="1024x1024">1024x1024</option>
+            <option value="1792x1024">1792x1024</option>
+            <option value="1024x1792">1024x1792</option>
+        </select>
+        <button type="submit">Generate Images</button>
+    </form>
+    <div id="result"></div>
+
+    <script>
+        let OPENAI_API_KEY;
+
+        function auth() {
+            fetch('./config.json')
+            .then(response => response.json())
+            .then(config => {
+                OPENAI_API_KEY = config.OPENAI_API_KEY;
+            });
+        }
+
+        // Call the auth() function to retrieve the API key
+        auth();
+
+        document.getElementById("apiRequestForm").addEventListener("submit", function (e) {
+            e.preventDefault();
+
+            // Get user input from the form
+            const prompt = document.getElementById("prompt").value;
+            const size = document.getElementById("size").value;
+
+            // Check if the API key is available
+            if (!OPENAI_API_KEY) {
+                alert("OpenAI API key not available. Please check your configuration.");
+                return;
+            }
+
+            // Send an API request using JavaScript fetch
+            fetch("https://api.openai.com/v1/images/generations", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${OPENAI_API_KEY}`
+                },
+                body: JSON.stringify({
+                    "model": "dall-e-3",
+                    "prompt": prompt,
+                    "n": 1, // Request 5 images
+                    "size": size
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Clear the result div before adding new images
+                document.getElementById("result").innerHTML = "";
+
+                // Display each generated image in the result div
+                data.data.forEach((image, index) => {
+                    const imgElement = document.createElement("img");
+                    imgElement.src = image.url;
+                    imgElement.alt = `Generated Image ${index + 1}`;
+                    document.getElementById("result").appendChild(imgElement);
+                });
+            })
+            .catch(error => {
+                console.error("Error:", error);
+            });
+        });
+    </script>
+</body>
+</html>
+