Update app.py

app.py

@@ -223,42 +223,15 @@ demo = gr.Interface(
 """
 }
 
-# Create an endpoint to get the app configuration
-def get_app_config(app_name):
-    if app_name not in APP_REGISTRY:
-        return {"error": f"App '{app_name}' not found"}
-    
-    return {
-        "title": APP_REGISTRY[app_name]["title"],
-        "description": APP_REGISTRY[app_name]["description"],
-        "code": APP_CODES[app_name]
-    }
-
-# Create an endpoint to load an app
-def load_app_interface(app_name):
-    if app_name not in APP_REGISTRY:
-        return None
-    
-    try:
-        # Capture stdout/stderr to prevent it from polluting the response
-        stdout_buffer = io.StringIO()
-        stderr_buffer = io.StringIO()
-        
-        with redirect_stdout(stdout_buffer), redirect_stderr(stderr_buffer):
-            app = APP_REGISTRY[app_name]["function"]()
-        
-        return app
-    except Exception as e:
-        return None
-
-# Main app with dynamic loading capabilities
+# Main app with inline app loading for Gradio 3.50.2
 def create_main_app():
-    with gr.Blocks(title="Dynamic Gradio App Generator", css="#app-container { min-height: 400px; }") as demo:
+    with gr.Blocks(title="Dynamic Gradio App Generator", css="footer {visibility: hidden}") as demo:
         gr.Markdown("# 🔄 Dynamic Gradio App Generator")
-        gr.Markdown("Select an app type to load it without refreshing the page")
+        gr.Markdown("Select an app type to load it dynamically")
         
-        # Create a state variable to track the current app
-        current_app = gr.State("none")
+        # Keep track of the current loaded app
+        current_app_name = gr.State(value=None)
+        current_app_instance = gr.State(value=None)
         
         with gr.Row():
             with gr.Column(scale=1):
@@ -288,20 +261,16 @@ def create_main_app():
                 
                 # Status message
                 status_msg = gr.Markdown("Select an app and click 'Load Selected App'")
-            
-            with gr.Column(scale=2):
-                # App container (where the dynamic app will be loaded)
-                app_container = gr.HTML(
-                    value="<div id='app-container'><p>No app loaded yet. Select an app template and click 'Load Selected App'.</p></div>",
-                    label="App Preview"
-                )
         
-        # Update description and code when selection changes
+        # 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
         def update_description_and_code(selection):
-            config = get_app_config(selection)
             return (
-                f"**{config['title']}**: {config['description']}",
-                config['code']
+                f"**{APP_REGISTRY[selection]['title']}**: {APP_REGISTRY[selection]['description']}",
+                APP_CODES[selection]
             )
         
         app_selection.change(
@@ -310,104 +279,124 @@ def create_main_app():
             outputs=[app_description, code_display]
         )
         
-        # Function to dynamically load the selected app
-        def load_selected_app(app_name):
+        # 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
+                )
+            
             try:
-                # Clear the previous app
-                gr.update(value="<div id='app-container'><p>Loading app...</p></div>")
-                
-                # Create a new app instance
-                selected_app = load_app_interface(app_name)
-                if selected_app is None:
-                    return (
-                        gr.update(value="<div id='app-container'><p>Error loading app. Please try again.</p></div>"),
-                        f"Error: Could not load {APP_REGISTRY[app_name]['title']}",
-                        app_name
-                    )
-                
-                # Generate a unique ID for this app instance
-                app_id = f"app-{app_name}-{id(selected_app)}"
-                
-                # Create a custom JavaScript function that will inject the app
-                js_code = f"""
-                <div id="{app_id}-container">
-                    <p>Loading {APP_REGISTRY[app_name]['title']}...</p>
-                </div>
-                <script>
-                    (function() {{
-                        const appContainer = document.getElementById('{app_id}-container');
-                        
-                        // Create a timer to check when Gradio is fully loaded
-                        const checkInterval = setInterval(() => {{
-                            if (window.gradio_config && window.gradioApp) {{
-                                clearInterval(checkInterval);
-                                
-                                // Create a temporary element to mount the app
-                                const tempElement = document.createElement('div');
-                                document.body.appendChild(tempElement);
-                                
-                                // Move the app to our container
-                                setTimeout(() => {{
-                                    try {{
-                                        // Find the app elements with the right ID
-                                        const appElements = Array.from(
-                                            document.querySelectorAll(
-                                                `.gradio-container[id^='{app_id}']`
-                                            )
-                                        );
-                                        
-                                        if (appElements.length > 0) {{
-                                            // Move the app to our container
-                                            appContainer.innerHTML = '';
-                                            appElements.forEach(el => {{
-                                                appContainer.appendChild(el);
-                                            }});
-                                        }} else {{
-                                            appContainer.innerHTML = '<p>App loaded but could not be displayed. Please refresh the page.</p>';
-                                        }}
-                                    }} catch (e) {{
-                                        console.error('Error moving app:', e);
-                                        appContainer.innerHTML = '<p>Error loading app: ' + e.message + '</p>';
-                                    }}
-                                }}, 1000);
-                            }}
-                        }}, 100);
-                    }})();
-                </script>
-                """
+                # Create a new instance of the selected app
+                new_app_instance = APP_REGISTRY[app_name]["function"]()
                 
+                # Return values to update the UI
                 return (
-                    gr.update(value=js_code),
+                    gr.update(visible=False),
                     f"Successfully loaded {APP_REGISTRY[app_name]['title']}",
-                    app_name
+                    app_name,
+                    new_app_instance
                 )
             except Exception as e:
                 error_msg = str(e)
                 return (
-                    gr.update(value=f"<div id='app-container'><p>Error: {error_msg}</p></div>"),
+                    gr.update(value=f"Error loading app: {error_msg}"),
                     f"Error: {error_msg}",
-                    app_name
+                    previous_app_name,
+                    previous_app_instance
                 )
         
-        # Handle the load button click
+        # Handle app loading when button is clicked
         load_btn.click(
-            load_selected_app,
-            inputs=app_selection,
-            outputs=[app_container, status_msg, current_app]
+            load_app,
+            inputs=[app_selection, current_app_name, current_app_instance],
+            outputs=[app_placeholder, status_msg, current_app_name, current_app_instance]
         )
+        
+        # Custom JavaScript to handle dynamic app loading
+        demo.load(None, None, 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'])");
+                
+                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;
+                        }
+                    });
+                    
+                    if (foundNew) {
+                        // Hide the placeholder message
+                        const placeholder = shadowRoot.querySelector("#app-container gradio-markdown");
+                        if (placeholder) {
+                            placeholder.style.display = "none";
+                        }
+                    }
+                }
+            };
+            
+            // Set up an interval to check for app updates
+            setInterval(window.checkAppUpdates, 500);
+        }
+        """)
     
     return demo
 
-# Create and launch the main app
-demo = create_main_app()
+# 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
 
-# Add endpoints for direct API access to apps
-for app_name, app_info in APP_REGISTRY.items():
-    app_func = app_info["function"]
-    if app_func:
-        app = app_func()
-        demo = gr.mount_gradio_app(demo, app, f"/{app_name}")
+# Create the main app
+main_app = create_main_app()
 
 # Launch the app
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    main_app.launch(server_name="0.0.0.0", server_port=7860, share=False)