Update app.py

app.py

@@ -224,6 +224,43 @@ title_html="""
             <h1 id="title-text">FLUX Capacitor</h1>
         </div>
     </center>
+
+    <script>
+        function gradioApp() {
+            const gradioShadowRoot = document.getElementsByTagName('gradio-app')[0].shadowRoot;
+            return gradioShadowRoot.getElementById('component-0') || document;
+        }
+    
+        function adjustBackground() {
+            const accordion = gradioApp().querySelector('.gradio-accordion');
+            const container = gradioApp().querySelector('.gradio-container');
+            
+            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
+        document.addEventListener('DOMContentLoaded', () => {
+            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();
+                    }
+                });
+            });
+    
+            const accordion = gradioApp().querySelector('.gradio-accordion');
+            if (accordion) {
+                observer.observe(accordion, { attributes: true });
+            }
+        });
+    </script>
 """
 
 css = """
@@ -296,32 +333,7 @@ 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