Update app.py

app.py

@@ -9,9 +9,6 @@ import io
 # Set environment variable to avoid matplotlib permission issues
 os.environ['MPLCONFIGDIR'] = '/tmp'
 
-# Toggle for different applications
-CURRENT_APP = "selector"
-
 # Example app implementations
 APP_REGISTRY = {
     "hello_world": {
@@ -226,16 +223,47 @@ demo = gr.Interface(
 """
 }
 
-# Function to create the selector app
-def create_selector():
-    with gr.Blocks(title="Gradio App Generator") as demo:
+# 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
+def create_main_app():
+    with gr.Blocks(title="Dynamic Gradio App Generator", css="#app-container { min-height: 400px; }") as demo:
         gr.Markdown("# 🔄 Dynamic Gradio App Generator")
-        gr.Markdown("Select an app type to load it, or use the LLM to generate one")
+        gr.Markdown("Select an app type to load it without refreshing the page")
+        
+        # Create a state variable to track the current app
+        current_app = gr.State("none")
         
         with gr.Row():
             with gr.Column(scale=1):
                 # App selection area
-                gr.Markdown("### 1. Choose an App Template")
+                gr.Markdown("### Choose an App Template")
                 app_selection = gr.Radio(
                     choices=list(APP_REGISTRY.keys()),
                     value="hello_world",
@@ -260,31 +288,21 @@ def create_selector():
                 
                 # Status message
                 status_msg = gr.Markdown("Select an app and click 'Load Selected App'")
-                
-                # Simulated LLM area
-                gr.Markdown("### 2. Or Describe a New App")
-                
-                app_description_input = gr.Textbox(
-                    label="Describe the app you want",
-                    placeholder="e.g., A calculator app that can add, subtract, multiply and divide",
-                    lines=3
-                )
-                
-                generate_btn = gr.Button("Generate & Load App")
             
-            with gr.Column(scale=1):
-                # Preview placeholder
-                preview_box = gr.Markdown(
-                    """
-                    ### App Preview
-                    
-                    No app loaded yet. Select an app template or describe a new app to load.
-                    """
+            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 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']}", APP_CODES[selection]
+            config = get_app_config(selection)
+            return (
+                f"**{config['title']}**: {config['description']}",
+                config['code']
+            )
         
         app_selection.change(
             update_description_and_code,
@@ -292,75 +310,103 @@ def create_selector():
             outputs=[app_description, code_display]
         )
         
-        # Function to load the selected app
-        def load_app(app_name):
-            # Save the app name to a file so it persists
-            with open("current_app.txt", "w") as f:
-                f.write(app_name)
-            
-            return f"Loading {APP_REGISTRY[app_name]['title']}... Refresh the page to see it."
+        # Function to dynamically load the selected app
+        def load_selected_app(app_name):
+            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>
+                """
+                
+                return (
+                    gr.update(value=js_code),
+                    f"Successfully loaded {APP_REGISTRY[app_name]['title']}",
+                    app_name
+                )
+            except Exception as e:
+                error_msg = str(e)
+                return (
+                    gr.update(value=f"<div id='app-container'><p>Error: {error_msg}</p></div>"),
+                    f"Error: {error_msg}",
+                    app_name
+                )
         
+        # Handle the load button click
         load_btn.click(
-            load_app,
+            load_selected_app,
             inputs=app_selection,
-            outputs=status_msg
-        )
-        
-        # Function to handle app generation from description
-        def generate_app(description):
-            if not description:
-                return "Please enter a description first."
-            
-            # Simple keyword matching to choose an app
-            description = description.lower()
-            
-            if "hello" in description or "greet" in description:
-                app_name = "hello_world"
-            elif "calculat" in description or "math" in description or "add" in description:
-                app_name = "calculator"
-            elif "image" in description or "filter" in description or "photo" in description:
-                app_name = "image_filter"
-            else:
-                # Default to hello world
-                app_name = "hello_world"
-            
-            # Save the app name to a file
-            with open("current_app.txt", "w") as f:
-                f.write(app_name)
-            
-            return f"Generated and loading {APP_REGISTRY[app_name]['title']}... Refresh the page to see it."
-        
-        generate_btn.click(
-            generate_app,
-            inputs=app_description_input,
-            outputs=status_msg
+            outputs=[app_container, status_msg, current_app]
         )
     
     return demo
 
-# Check which app to load
-if os.path.exists("current_app.txt"):
-    try:
-        with open("current_app.txt", "r") as f:
-            app_name = f.read().strip()
-            if app_name in APP_REGISTRY:
-                CURRENT_APP = app_name
-            else:
-                CURRENT_APP = "selector"
-    except:
-        CURRENT_APP = "selector"
+# Create and launch the main app
+demo = create_main_app()
 
-# Launch the appropriate app
-if CURRENT_APP == "selector":
-    demo = create_selector()
-else:
-    try:
-        # Try to create the requested app
-        demo = APP_REGISTRY[CURRENT_APP]["function"]()
-    except Exception as e:
-        # Fall back to selector on error
-        print(f"Error loading app {CURRENT_APP}: {str(e)}")
-        demo = create_selector()
+# 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}")
 
 # Launch the app
 if __name__ == "__main__":