Update index.html

index.html

@@ -123,44 +123,95 @@
 
         <footer class="mt-16 text-center text-white text-opacity-70">
             <p>AI&nbsp;<i class="fas fa-heart text-red-400"></i> Stable Diffusion</p>
-            <p class="mt-2 text-sm">powered  by cloudflared workers</p>
+            <p class="mt-2 text-sm">powered by Cloudflare Workers</p>
         </footer>
     </div>
 
     <script>
-    function downloadImage(format) {
-        if (!currentImageUrl) {
-            alert("Please generate an icon first.");
-            return;
-        }
+        let currentImageUrl = "";
+
+        document.getElementById("generate-btn").addEventListener("click", function () {
+            const prompt = document.getElementById("prompt").value.trim();
+
+            if (!prompt) {
+                alert("Please enter a description for your icon.");
+                return;
+            }
+
+            document.getElementById("generate-btn").disabled = true;
+            document.getElementById("generate-btn").innerHTML = "Generating... <i class='fas fa-spinner fa-spin'></i>";
+
+            fetch("https://text-to-image.jessejesse.workers.dev", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    prompt: prompt
+                })
+            })
+            .then(response => response.blob())
+            .then(blob => {
+                const url = URL.createObjectURL(blob);
+                currentImageUrl = url;
+                document.getElementById("preview-container").innerHTML = `<img src="${url}" class="icon-preview rounded-lg shadow-xl max-w-full">`;
+                document.getElementById("download-section").classList.remove("hidden");
+                document.getElementById("generate-btn").disabled = false;
+                document.getElementById("generate-btn").innerHTML = "<i class='fas fa-magic mr-2'></i> Generate Icon";
+            })
+            .catch(error => {
+                console.error("Error:", error);
+                alert("An error occurred while generating the icon. Please try again.");
+                document.getElementById("generate-btn").disabled = false;
+                document.getElementById("generate-btn").innerHTML = "<i class='fas fa-magic mr-2'></i> Generate Icon";
+            });
+        });
+
+        document.getElementById("download-png").addEventListener("click", function () {
+            downloadImage("png");
+        });
+
+        document.getElementById("download-jpg").addEventListener("click", function () {
+            downloadImage("jpg");
+        });
 
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.src = currentImageUrl;
-
-        img.onload = function () {
-            const canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            const ctx = canvas.getContext('2d');
-            ctx.drawImage(img, 0, 0);
-
-            let mimeType = 'image/png';
-            if (format === 'jpg') mimeType = 'image/jpeg';
-            else if (format === 'ico') mimeType = 'image/x-icon';
-
-            canvas.toBlob(function (blob) {
-                const link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = `icon.${format}`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            }, mimeType);
-        };
-    }
+        document.getElementById("download-ico").addEventListener("click", function () {
+            downloadImage("ico");
+        });
+
+        function downloadImage(format) {
+            if (!currentImageUrl) {
+                alert("Please generate an icon first.");
+                return;
+            }
+
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.src = currentImageUrl;
+
+            img.onload = function () {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0);
+
+                let mimeType = 'image/png';
+                if (format === 'jpg') mimeType = 'image/jpeg';
+                else if (format === 'ico') mimeType = 'image/x-icon';
+
+                canvas.toBlob(function (blob) {
+                    const link = document.createElement('a');
+                    link.href = URL.createObjectURL(blob);
+                    link.download = `icon.${format}`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                }, mimeType);
+            };
+        }
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sudo-soldier/iconic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</body>
 </html>
- 
+