Update templates/imagine.html

templates/imagine.html

@@ -67,6 +67,36 @@
     h1 {
         text-align: center;
     }
+
+    @keyframes color-change {
+        0% {
+            background-color: red;
+        }
+
+        20% {
+            background-color: blue;
+        }
+
+        40% {
+            background-color: rgb(0, 255, 0);
+        }
+
+        60% {
+            background-color: aqua;
+        }
+
+        80% {
+            background-color: yellow;
+        }
+
+        100% {
+            background-color: red;
+        }
+    }
+
+    .color_change {
+        animation: color-change 4s infinite;
+    }
 </style>
 
 <div>
@@ -78,11 +108,14 @@
     </div>
     <div id="inputWrapper">
         <input type="text" id="contents" placeholder="Enter your prompt..."><br><br><br>
-        <button onclick="generate()">Generate Image</button>
+        <button onclick="generate()" id="generate_button">Generate Image</button>
     </div>
     </body>
     <script>
         async function generate() {
+            document.getElementById("generate_button").disabled = true
+            document.getElementById("image").classList.add("color_change");
+            document.getElementById("image").src = "";
             const contents = document.getElementById("contents").value;
             const response = await fetch("/imagine", {
                 method: "POST",
@@ -96,8 +129,9 @@
                 const blob = await response.blob();
                 const imgUrl = URL.createObjectURL(blob);
                 document.getElementById("generated_image").src = imgUrl;
-                document.getElementById("contents").value = "";
+                document.getElementById("image").classList.remove("color_change")
                 document.getElementById("image").style.border = "none";
+                document.getElementById("generate_button").disabled = false
             } else {
                 console.error("Error generating image:", response.statusText);
             }