SunilKrishna/image-generative-ai
0
1<!DOCTYPE html>2<html>3<head>4 <title>AI Image Generator</title>5 <style>6 body { font-family: Arial; text-align: center; margin: 20px; }7 input, button { padding: 10px; font-size: 16px; margin: 5px; width: 300px; }8 img { max-width: 512px; margin-top: 20px; border: 1px solid #ccc; border-radius: 10px; }9 #status { margin-top: 10px; font-weight: bold; }10 </style>11</head>12<body>13 <h1>AI Image Generator</h1>14 <input id="prompt" type="text" placeholder="Enter a prompt" />15 <br/>16 <button onclick="generate()">Generate Image</button>17 <p id="status"></p>18 <img id="result" />19 20 <script>21 let timerInterval;22 23 async function generate() {24 const prompt = document.getElementById("prompt").value;25 const status = document.getElementById("status");26 const img = document.getElementById("result");27 28 if (!prompt) { alert("Please enter a prompt!"); return; }29 30 status.innerText = "Generating...";31 img.src = "";32 33 // Start timer34 let startTime = Date.now();35 timerInterval = setInterval(() => {36 const seconds = ((Date.now() - startTime) / 1000).toFixed(2);37 status.innerText = `Generating... ${seconds} seconds elapsed`;38 }, 100);39 40 try {41 const res = await fetch("/generate", {42 method: "POST",43 headers: { "Content-Type": "application/json" },44 body: JSON.stringify({ prompt })45 });46 47 if (!res.ok) throw new Error("Failed to generate image");48 49 clearInterval(timerInterval);50 51 const blob = await res.blob();52 img.src = URL.createObjectURL(blob);53 const totalTime = ((Date.now() - startTime) / 1000).toFixed(2);54 status.innerText = `Done ✅ Time taken: ${totalTime} seconds`;55 } catch (err) {56 clearInterval(timerInterval);57 status.innerText = "Error: " + err.message;58 }59 }60 </script>61</body>62</html>63