Update app.py

app.py

@@ -223,17 +223,14 @@ demo = gr.Interface(
 """
 }
 
-# Create an app selector that loads apps dynamically
+# Create an app selector that loads apps via iframe
 def create_main_app():
-    with gr.Blocks(title="Dynamic Gradio App Generator") as demo:
+    with gr.Blocks(title="Dynamic Gradio App Generator", css="#app-iframe { width: 100%; height: 600px; border: none; }") as demo:
         gr.Markdown("# 🔄 Dynamic Gradio App Generator")
         gr.Markdown("Select an app type to load it dynamically without refreshing the page")
         
-        # Create placeholders for dynamic app loading
-        app_blocks_container = gr.Blocks(visible=False)
-        with app_blocks_container:
-            # This container will be dynamically replaced
-            app_placeholder = gr.Markdown("Loading app...")
+        # App selection and display state
+        current_app = gr.State("")
         
         with gr.Row():
             with gr.Column(scale=1):
@@ -264,12 +261,12 @@ def create_main_app():
                 # Status message
                 status_msg = gr.Markdown("Select an app and click 'Load Selected App'")
             
-            with gr.Column(scale=2):
-                # This is where our dynamically loaded app will appear
-                app_container = gr.Group(visible=True)
-                with app_container:
-                    gr.Markdown("### App Preview")
-                    gr.Markdown("No app loaded yet. Select an app and click 'Load Selected App'.")
+            with gr.Column(scale=2, elem_id="app-container"):
+                # This HTML component will hold the iframe
+                app_iframe = gr.HTML(
+                    value="<p>No app loaded yet. Select an app and click 'Load Selected App'.</p>",
+                    label="App Preview"
+                )
         
         # Update description and code when selection changes
         def update_description_and_code(selection):
@@ -284,93 +281,38 @@ def create_main_app():
             outputs=[app_description, code_display]
         )
         
-        # Load the selected app
-        @gr.on(load_btn, "click")
-        def load_selected_app(selection):
-            try:
-                # Create the app
-                app_func = APP_REGISTRY[selection]["function"]
-                app = app_func()
-                
-                # Update the container content (this is done via JavaScript)
-                return {
-                    status_msg: f"Successfully loaded {APP_REGISTRY[selection]['title']}",
-                    app_container: gr.update(visible=False),  # Hide temporarily for replacement
-                }
-            except Exception as e:
-                error_msg = str(e)
-                return {
-                    status_msg: f"Error loading app: {error_msg}",
-                    app_container: gr.update(visible=True),
-                }
+        # Load the selected app using an iframe
+        def load_app_in_iframe(app_name, previous_app):
+            if app_name not in APP_REGISTRY:
+                return (
+                    f"Error: App '{app_name}' not found",
+                    "<p>App not found!</p>",
+                    previous_app
+                )
+            
+            # If the same app is already loaded, just notify the user
+            if app_name == previous_app:
+                return (
+                    f"{APP_REGISTRY[app_name]['title']} is already loaded",
+                    f'<iframe id="app-iframe" src="/{app_name}"></iframe>',
+                    app_name
+                )
+            
+            # Create iframe HTML
+            iframe_html = f'<iframe id="app-iframe" src="/{app_name}"></iframe>'
+            
+            return (
+                f"Successfully loaded {APP_REGISTRY[app_name]['title']}",
+                iframe_html,
+                app_name
+            )
         
-        # This uses Gradio's JavaScript event handling to dynamically mount the app
-        demo.load(None, js="""
-        function() {
-            let loadedAppIframe = null;
-            let intervalId = null;
-                
-            // Function to handle the "Load Selected App" button click
-            document.addEventListener('click', function(event) {
-                // Find button by text or class
-                if (event.target.textContent === 'Load Selected App' || 
-                    (event.target.parentElement && event.target.parentElement.textContent === 'Load Selected App')) {
-                    
-                    // Get the selected app
-                    const radioButtons = document.querySelectorAll('input[type="radio"]');
-                    let selectedApp = null;
-                    
-                    for (const radio of radioButtons) {
-                        if (radio.checked) {
-                            selectedApp = radio.value;
-                            break;
-                        }
-                    }
-                    
-                    if (!selectedApp) return;
-                    
-                    // Stop any previous timer
-                    if (intervalId) {
-                        clearInterval(intervalId);
-                    }
-                    
-                    // Show loading indicator
-                    const appContainer = document.querySelector('.app-preview');
-                    if (appContainer) {
-                        appContainer.innerHTML = '<p>Loading app...</p>';
-                    }
-                    
-                    // Create route for app
-                    const appUrl = '/' + selectedApp;
-                    
-                    // Clean up previous iframe if exists
-                    if (loadedAppIframe) {
-                        loadedAppIframe.remove();
-                    }
-                    
-                    // Create an iframe and load the app
-                    loadedAppIframe = document.createElement('iframe');
-                    loadedAppIframe.style.width = '100%';
-                    loadedAppIframe.style.height = '600px';
-                    loadedAppIframe.style.border = 'none';
-                    loadedAppIframe.src = appUrl;
-                    
-                    // Find the app container column (second column)
-                    const columns = document.querySelectorAll('.gradio-column');
-                    if (columns.length > 1) {
-                        columns[1].innerHTML = ''; // Clear existing content
-                        columns[1].appendChild(loadedAppIframe);
-                    }
-                    
-                    // Update the status
-                    const statusEl = document.querySelector('#status-message');
-                    if (statusEl) {
-                        statusEl.textContent = 'App loaded successfully';
-                    }
-                }
-            });
-        }
-        """)
+        # Connect the button to the load function
+        load_btn.click(
+            load_app_in_iframe,
+            inputs=[app_selection, current_app],
+            outputs=[status_msg, app_iframe, current_app]
+        )
     
     return demo
 
@@ -379,12 +321,11 @@ def create_app():
     # Create the main selector app
     main_app = create_main_app()
     
-    # Create all the individual apps
+    # Create all the individual apps and mount them at their respective paths
     for app_name, app_info in APP_REGISTRY.items():
         app_func = app_info["function"]
         if app_func:
             app_instance = app_func()
-            # This is for Gradio 4.x - it mounts each app at its own route
             main_app = gr.mount_gradio_app(main_app, app_instance, f"/{app_name}")
     
     return main_app