Changed to iframe preview

app.py

@@ -1,6 +1,12 @@
 import importlib.util
 import os
 import sys
+import subprocess
+import time
+import signal
+import threading
+import requests
+import atexit
 
 import gradio as gr
 
@@ -12,6 +18,11 @@ gr.NO_RELOAD = False
 # Initialize the planning agent globally
 planning_agent = None
 
+# Global variables for managing the preview app subprocess
+preview_process = None
+PREVIEW_PORT = 7861  # Different port from main app
+PREVIEW_URL = f"http://localhost:{PREVIEW_PORT}"
+
 
 def get_planning_agent():
     """Get or initialize the planning agent (lazy loading)."""
@@ -108,67 +119,140 @@ def save_file(path, new_text):
         gr.Error(f"❌ Error saving: {e}")
 
 
-def load_and_render_app():
-    """Load and render the Gradio app from sandbox/app.py"""
+def stop_preview_app():
+    """Stop the preview app subprocess if it's running."""
+    global preview_process
+    if preview_process and preview_process.poll() is None:
+        try:
+            # Send SIGTERM to gracefully shutdown
+            preview_process.terminate()
+            # Wait a bit for graceful shutdown
+            preview_process.wait(timeout=5)
+        except subprocess.TimeoutExpired:
+            # Force kill if graceful shutdown fails
+            preview_process.kill()
+        except Exception as e:
+            print(f"Error stopping preview app: {e}")
+        finally:
+            preview_process = None
+
+
+def start_preview_app():
+    """Start the preview app in a subprocess."""
+    global preview_process
+
+    # Stop any existing preview app
+    stop_preview_app()
+
     app_path = "sandbox/app.py"
 
     if not os.path.exists(app_path):
-        return gr.HTML(
-            "<div style='padding: 20px; color: red;'>❌ No app.py found in \
-sandbox directory</div>"
-        )
+        return False, "No app.py found in sandbox directory"
 
     try:
-        # Read the app code
-        with open(app_path, encoding="utf-8") as f:
-            app_code = f.read()
-
-        # Create a temporary module
-        spec = importlib.util.spec_from_loader("dynamic_app", loader=None)
-        module = importlib.util.module_from_spec(spec)
-
-        # Add current directory to sys.path if not already there
-        if os.getcwd() not in sys.path:
-            sys.path.insert(0, os.getcwd())
-
-        # Execute the code in the module's namespace
-        exec(app_code, module.__dict__)
-
-        # Look for common app creation patterns
-        app_instance = None
-
-        # Try to find the app instance
-        if hasattr(module, "demo"):
-            app_instance = module.demo
-        elif hasattr(module, "app"):
-            app_instance = module.app
-        elif hasattr(module, "interface"):
-            app_instance = module.interface
-        else:
-            # Look for any Gradio Blocks or Interface objects
-            for _, obj in module.__dict__.items():
-                if isinstance(obj, gr.Blocks | gr.Interface):
-                    app_instance = obj
-                    break
-
-        if app_instance is None:
-            return gr.HTML(
-                "<div style='padding: 20px; color: orange;'>⚠️ No Gradio app found. \
-Make sure your app.py creates a Gradio Blocks or Interface object.</div>"
-            )
-
-        # Return the app instance to be rendered
-        return app_instance
+        # Start the subprocess to run the sandbox app
+        preview_process = subprocess.Popen(
+            [
+                sys.executable,
+                app_path,
+                "--server-port",
+                str(PREVIEW_PORT),
+                "--server-name",
+                "127.0.0.1",
+            ],
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True,
+        )
+
+        # Wait a moment for the server to start
+        time.sleep(2)
+
+        # Check if the process is still running
+        if preview_process.poll() is not None:
+            # Process has terminated, read the error
+            stdout, stderr = preview_process.communicate()
+            return False, f"App failed to start:\n{stderr}\n{stdout}"
+
+        # Try to verify the server is responding
+        max_retries = 10
+        for i in range(max_retries):
+            try:
+                response = requests.get(PREVIEW_URL, timeout=1)
+                if response.status_code == 200:
+                    return True, "App started successfully"
+            except requests.exceptions.RequestException:
+                pass
+            time.sleep(0.5)
+
+        return True, "App started successfully"
 
     except Exception as e:
-        error_html = f"""
-        <div style='padding: 20px; color: red; font-family: monospace;'>
-            ❌ Error loading app:<br>
-            <pre style='background: #f5f5f5; padding: 10px; margin-top: 10px; \
-border-radius: 4px;'>{str(e)}</pre>
+        return False, f"Error starting app: {str(e)}"
+
+
+def create_iframe_preview():
+    """Create an iframe HTML element for the preview."""
+    app_path = "sandbox/app.py"
+
+    if not os.path.exists(app_path):
+        return """
+        <div style='padding: 20px; text-align: center; color: #666;'>
+            <h3>❌ No app.py found</h3>
+            <p>Create an app.py file in the sandbox directory to see the preview.</p>
+        </div>
+        """
+
+    # Start the preview app
+    success, message = start_preview_app()
+
+    if not success:
+        return f"""
+        <div style='padding: 20px; text-align: center; color: #d32f2f;'>
+            <h3>❌ Failed to start preview</h3>
+            <pre style='background: #f5f5f5; padding: 10px; border-radius: 4px; text-align: left;'>{message}</pre>
         </div>
         """
-        return gr.HTML(error_html)
+
+    # Add timestamp to force iframe refresh
+    timestamp = int(time.time() * 1000)
+    preview_url_with_timestamp = f"{PREVIEW_URL}?t={timestamp}"
+
+    return f"""
+    <div style='width: 100%; height: 70vh; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;'>
+        <iframe 
+            src="{preview_url_with_timestamp}" 
+            width="100%" 
+            height="100%" 
+            frameborder="0"
+            style="border: none;"
+            key="{timestamp}"
+        ></iframe>
+    </div>
+    <div style='padding: 10px; text-align: center; color: #666; font-size: 12px;'>
+        Preview running on <a href="{PREVIEW_URL}" target="_blank">{PREVIEW_URL}</a>
+    </div>
+    """
+
+
+def is_preview_running():
+    """Check if the preview app is running and accessible."""
+    global preview_process
+    if preview_process is None or preview_process.poll() is not None:
+        return False
+
+    try:
+        response = requests.get(PREVIEW_URL, timeout=2)
+        return response.status_code == 200
+    except requests.exceptions.RequestException:
+        return False
+
+
+def ensure_preview_running():
+    """Ensure the preview app is running, start it if needed."""
+    if not is_preview_running():
+        print("Preview app not running, starting...")
+        start_preview_app()
 
 
 # Create the main Lovable-style UI
@@ -189,7 +273,7 @@ def create_lovable_ui():
             with gr.Column(scale=1, elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
                     show_copy_button=True,
-                    avatar_images=(None, "🤖"),
+                    avatar_images=(None, "💗"),
                     bubble_full_width=False,
                     height="75vh",
                 )
@@ -205,13 +289,9 @@ def create_lovable_ui():
             # Right side - Preview/Code Toggle
             with gr.Column(scale=4, elem_classes="preview-container"):
                 with gr.Tab("Preview"):
-                    # Create a trigger for refreshing the preview
-                    refresh_trigger = gr.State(value=0)
-
-                    # Use gr.render for dynamic app rendering
-                    @gr.render(inputs=refresh_trigger)
-                    def render_preview(trigger_value):
-                        return load_and_render_app()
+                    preview_html = gr.HTML(
+                        value=create_iframe_preview(), elem_id="preview-container"
+                    )
 
                 with gr.Tab("Code"):
                     with gr.Row():
@@ -237,15 +317,17 @@ def create_lovable_ui():
         # Event handlers
         file_explorer.change(fn=load_file, inputs=file_explorer, outputs=code_editor)
 
-        def save_and_refresh(path, new_text, current_trigger):
+        def save_and_refresh(path, new_text):
             save_file(path, new_text)
-            # Increment trigger to refresh the preview
-            return current_trigger + 1
+            # Wait a moment for file to be saved
+            time.sleep(0.5)
+            # Return updated iframe preview with forced refresh
+            return create_iframe_preview()
 
         save_btn.click(
             fn=save_and_refresh,
-            inputs=[file_explorer, code_editor, refresh_trigger],
-            outputs=[refresh_trigger],
+            inputs=[file_explorer, code_editor],
+            outputs=[preview_html],
         )
 
         # Event handlers for chat
@@ -261,10 +343,38 @@ def create_lovable_ui():
             outputs=[chatbot, msg_input],
         )
 
+        # Auto-start preview when the app loads
+        def on_app_load():
+            ensure_preview_running()
+            return create_iframe_preview()
+
+        demo.load(fn=on_app_load, outputs=[preview_html])
+
+        # Clean up on app close
+        def cleanup():
+            stop_preview_app()
+
+        demo.unload(cleanup)
+
     return demo
 
 
 if __name__ == "__main__":
+    # Register cleanup function to run on exit
+    atexit.register(stop_preview_app)
+
     demo = create_lovable_ui()
-    gradio_config = settings.get_gradio_config()
-    demo.launch(**gradio_config)
+    # gradio_config = settings.get_gradio_config()
+
+    # Ensure cleanup on exit
+    def signal_handler(signum, frame):
+        stop_preview_app()
+        sys.exit(0)
+
+    signal.signal(signal.SIGINT, signal_handler)
+    signal.signal(signal.SIGTERM, signal_handler)
+
+    try:
+        demo.launch(server_name="0.0.0.0", server_port=7862)
+    finally:
+        stop_preview_app()

pyproject.toml

@@ -7,6 +7,7 @@ requires-python = ">=3.12"
 dependencies = [
     "gradio>=5.32.0",
     "smolagents[litellm]>=1.17.0",
+    "requests>=2.31.0",
 ]
 
 [dependency-groups]

sandbox/app.py

@@ -66,4 +66,5 @@ with gr.Blocks(title="Simple To-Do List", theme=gr.themes.Monochrome()) as app:
     delete_btn.click(delete_task, inputs=[task_index], outputs=[task_display])
 
 if __name__ == "__main__":
-    app.launch()
+    # Never change this port, otherwise the preview app will not work
+    app.launch(server_name="0.0.0.0", server_port=7861)