Update index.html

index.html

@@ -20,6 +20,11 @@
       background-color: #e8f0fe;
       border-color: #0b84ff;
     }
+    
+    #download-button {
+      margin-top: 20px;
+      display: none;
+    }
   </style>
 </head>
 
@@ -42,10 +47,15 @@
   <label id="status"></label>
   <input id="upload" type="file" accept="image/*" style="display: none;" />
 
+  <!-- Download Button -->
+  <button id="download-button">Download Image</button>
+  
   <script>
     const dropZone = document.getElementById('drop-zone');
     const fileInput = document.getElementById('upload');
-
+    const downloadButton = document.getElementById('download-button');
+    const container = document.getElementById('container');
+    
     dropZone.addEventListener('click', () => {
       fileInput.click();
     });
@@ -68,6 +78,24 @@
       const changeEvent = new Event('change', { bubbles: true });
       fileInput.dispatchEvent(changeEvent);
     });
+    // Observe changes to the container's background image
+    const observer = new MutationObserver(() => {
+      const backgroundImage = container.style.backgroundImage;
+    
+      // Extract the URL from the background-image style
+      const match = /url\(["']?([^"']*)["']?\)/.exec(backgroundImage);
+      if (match && match[1]) {
+        const imageUrl = match[1];
+        
+        // Set the download button href to the background image URL
+        downloadButton.setAttribute('href', imageUrl);
+        downloadButton.setAttribute('download', 'generated-image.png');
+        downloadButton.style.display = 'block';
+      }
+    });
+    
+    // Configure the observer to watch for attribute changes
+    observer.observe(container, { attributes: true, attributeFilter: ['style'] });
   </script>
 </body>