Update app.py

app.py

@@ -223,15 +223,17 @@ demo = gr.Interface(
 """
 }
 
-# Main app with inline app loading for Gradio 3.50.2
+# Create an app selector that loads apps dynamically
 def create_main_app():
-    with gr.Blocks(title="Dynamic Gradio App Generator", css="footer {visibility: hidden}") as demo:
+    with gr.Blocks(title="Dynamic Gradio App Generator") as demo:
         gr.Markdown("# 🔄 Dynamic Gradio App Generator")
-        gr.Markdown("Select an app type to load it dynamically")
+        gr.Markdown("Select an app type to load it dynamically without refreshing the page")
         
-        # Keep track of the current loaded app
-        current_app_name = gr.State(value=None)
-        current_app_instance = gr.State(value=None)
+        # 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...")
         
         with gr.Row():
             with gr.Column(scale=1):
@@ -261,12 +263,15 @@ 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'.")
         
-        # App container (this will be dynamically updated with different apps)
-        with gr.Row(id="app-container"):
-            app_placeholder = gr.Markdown("No app loaded yet. Select an app and click 'Load Selected App'.")
-
-        # Update description when selection changes
+        # Update description and code when selection changes
         def update_description_and_code(selection):
             return (
                 f"**{APP_REGISTRY[selection]['title']}**: {APP_REGISTRY[selection]['description']}",
@@ -279,124 +284,112 @@ def create_main_app():
             outputs=[app_description, code_display]
         )
         
-        # Function to load the selected app within the main app
-        def load_app(app_name, previous_app_name, previous_app_instance):
-            if app_name not in APP_REGISTRY:
-                return (
-                    gr.update(value="App not found!"),
-                    f"Error: App '{app_name}' not found",
-                    previous_app_name,
-                    previous_app_instance
-                )
-            
-            # If we already have this app loaded, just return it
-            if app_name == previous_app_name and previous_app_instance is not None:
-                return (
-                    gr.update(visible=False),
-                    f"{APP_REGISTRY[app_name]['title']} is already loaded",
-                    app_name,
-                    previous_app_instance
-                )
-            
+        # Load the selected app
+        @gr.on(load_btn, "click")
+        def load_selected_app(selection):
             try:
-                # Create a new instance of the selected app
-                new_app_instance = APP_REGISTRY[app_name]["function"]()
+                # Create the app
+                app_func = APP_REGISTRY[selection]["function"]
+                app = app_func()
                 
-                # Return values to update the UI
-                return (
-                    gr.update(visible=False),
-                    f"Successfully loaded {APP_REGISTRY[app_name]['title']}",
-                    app_name,
-                    new_app_instance
-                )
+                # 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 (
-                    gr.update(value=f"Error loading app: {error_msg}"),
-                    f"Error: {error_msg}",
-                    previous_app_name,
-                    previous_app_instance
-                )
-        
-        # Handle app loading when button is clicked
-        load_btn.click(
-            load_app,
-            inputs=[app_selection, current_app_name, current_app_instance],
-            outputs=[app_placeholder, status_msg, current_app_name, current_app_instance]
-        )
+                return {
+                    status_msg: f"Error loading app: {error_msg}",
+                    app_container: gr.update(visible=True),
+                }
         
-        # Custom JavaScript to handle dynamic app loading
-        demo.load(None, None, None, _js="""
+        # This uses Gradio's JavaScript event handling to dynamically mount the app
+        demo.load(None, js="""
         function() {
-            // Function to handle app loading and swapping
-            window.loadGradioApp = function(appName, appInstance) {
-                const appContainer = document.getElementById('app-container');
-                if (!appContainer) return;
-                
-                // Clear existing app container
-                while (appContainer.firstChild) {
-                    appContainer.removeChild(appContainer.firstChild);
-                }
-                
-                // Add new app to container
-                if (appInstance && appInstance.wrapper) {
-                    appContainer.appendChild(appInstance.wrapper);
-                }
-            };
-            
-            // Function to check for app updates
-            window.checkAppUpdates = function() {
-                const gradioEl = document.querySelector("gradio-app");
-                if (!gradioEl) return;
-                
-                const shadowRoot = gradioEl.shadowRoot || gradioEl;
-                const appContainer = shadowRoot.querySelector("#app-container");
-                if (!appContainer) return;
-                
-                // Find any newly loaded app by looking for interface/blocks elements
-                const newAppElements = shadowRoot.querySelectorAll(".gradio-container:not([id='main-container'])");
+            let loadedAppIframe = null;
+            let intervalId = null;
                 
-                if (newAppElements.length > 0) {
-                    let foundNew = false;
-                    newAppElements.forEach(el => {
-                        // Only move elements that aren't already in our container
-                        if (!appContainer.contains(el)) {
-                            // Move the app to our container
-                            appContainer.innerHTML = '';
-                            appContainer.appendChild(el);
-                            foundNew = true;
-                        }
-                    });
+            // 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;
                     
-                    if (foundNew) {
-                        // Hide the placeholder message
-                        const placeholder = shadowRoot.querySelector("#app-container gradio-markdown");
-                        if (placeholder) {
-                            placeholder.style.display = "none";
+                    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';
+                    }
                 }
-            };
-            
-            // Set up an interval to check for app updates
-            setInterval(window.checkAppUpdates, 500);
+            });
         }
         """)
     
     return demo
 
-# Helper function to save the app name for persistence
-def save_app_name(app_name):
-    try:
-        with open("current_app.txt", "w") as f:
-            f.write(app_name)
-        return True
-    except:
-        return False
-
-# Create the main app
-main_app = create_main_app()
+# Function to create and mount all apps
+def create_app():
+    # Create the main selector app
+    main_app = create_main_app()
+    
+    # Create all the individual apps
+    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
 
 # Launch the app
 if __name__ == "__main__":
-    main_app.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    demo = create_app()
+    demo.launch(server_name="0.0.0.0", server_port=7860)