Update app.py

app.py

@@ -216,30 +216,7 @@ def query(prompt, is_negative=False, steps=30, cfg_scale=7, sampler="DPM++ 2M Ka
         print(f"Error when trying to open the image: {e}")
         return None, None, None
 
-js_code = """
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        const accordion = document.querySelector('.gr.Accordion');  // Adjust selector based on accordion class
-        const container = document.querySelector('.gradio-container');
-
-        function adjustBackground() {
-            if (accordion && accordion.hasAttribute('open')) {
-                container.style.backgroundSize = '900px 2100px';  // When accordion is open
-            } else {
-                container.style.backgroundSize = '900px 880px';  // When accordion is closed
-            }
-        }
 
-        // Attach event listener to the accordion toggle
-        accordion.addEventListener('click', function() {
-            setTimeout(adjustBackground, 100);  // Delay to allow accordion to fully open/close
-        });
-
-        // Initial background size based on initial state
-        adjustBackground();
-    });
-</script>
-"""
   
 title_html="""
     <center>
@@ -318,9 +295,36 @@ css = """
 
 
 with gr.Blocks(theme='Nymbo/Nymbo_Theme', css=css) as app:
+
+    app.load("""
+        const accordion = document.querySelector('.gradio-accordion');
+        const container = document.querySelector('.gradio-container');
+    
+        function adjustBackground() {
+            if (accordion && accordion.classList.contains('open')) {
+                container.style.backgroundSize = '900px 2100px';  // When accordion is open
+            } else {
+                container.style.backgroundSize = '900px 880px';  // When accordion is closed
+            }
+        }
+    
+        // Initial background size based on initial state
+        adjustBackground();
+    
+        // Use MutationObserver to watch for changes in the accordion's class
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    adjustBackground();
+                }
+            });
+        });
+    
+        observer.observe(accordion, { attributes: true });
+    """)
     
     gr.HTML(title_html) # title html 
-    gr.HTML(js_code)  # Embed the JavaScript in the Gradio app
+    
     with gr.Column(elem_id="app-container"):
         with gr.Row():
             with gr.Column(elem_id="prompt-container"):