Update app.py

app.py

@@ -116,50 +116,49 @@ def add_gallery(image, model_str, gallery):
 js="""
 <script>
 
-// Function to download an image
-downloadImage = (url, filename) => {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename || 'image.jpg';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-};
-
-// Monitor image changes
-const monitorImageChange = (imageElement) => {
-    if (!(imageElement instanceof HTMLImageElement)) {
-        console.error('The provided element is not an image.');
-        return;
+/*
+function simulateButtonPress_() {
+    const button = document.getElementById('simulate-button');
+    if (button) {
+        button.click();  // Simulate the button press
+        console.log('Button Pressed!');
     }
+}
+*/
 
-    const observer = new MutationObserver((mutationsList) => {
-        mutationsList.forEach((mutation) => {
+function simulateButtonPress() {
+    console.log('Button Pressed!');
+}
+
+// Function to observe image changes
+function observeImageChanges() {
+    // Select all images with the 'image-monitor' class
+    const images = document.querySelectorAll('.image-monitor');
+    
+    // Create a MutationObserver to watch for changes in the image src
+    const observer = new MutationObserver((mutationsList, observer) => {
+        mutationsList.forEach(mutation => {
             if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
-                console.log('Image source changed:', imageElement.src);
-                downloadImage(imageElement.src, 'downloaded_image.jpg');
+                // If the image src changes, simulate button press
+                console.log('Image changed!');
+                simulateButtonPress();
             }
         });
     });
+    
+    // Observer options: observe changes to attributes (like src)
+    const config = { attributes: true };
 
-    observer.observe(imageElement, {
-        attributes: true, // Look for attribute changes
-        attributeFilter: ['src'], // Only watch for 'src' changes
+    // Start observing each image
+    images.forEach(image => {
+        observer.observe(image, config);
     });
+}
 
-    console.log('Now monitoring image changes for:', imageElement);
-};
-
-// Start monitoring after page load
-window.addEventListener('load', () => {
-    const img = document.querySelector('svelte-1pijsyv'); // Select the target image element
-    if (img) {
-        monitorImageChange(img);
-    } else {
-        console.error('No image found to monitor.');
-    }
-});
+// Start observing
+observeImageChanges();
 
+console.log("Yo");
     
 </script>
 """
@@ -187,7 +186,7 @@ with gr.Blocks(fill_width=True, head=js) as demo:
         with gr.Column(scale=1):
             with gr.Group():
                 with gr.Row():
-                    output = [gr.Image(label=m, show_download_button=True, 
+                    output = [gr.Image(label=m, show_download_button=True, elem_classes="image-monitor",
                               interactive=False, width=112, height=112, show_share_button=False, format="png",
                               visible=True) for m in default_models]
                     current_models = [gr.Textbox(m, visible=False) for m in default_models]