agent and preview working

app.py

@@ -1,6 +1,4 @@
-import atexit
 import os
-import signal
 import subprocess
 import sys
 import time
@@ -8,15 +6,14 @@ from pathlib import Path
 
 import gradio as gr
 import requests
+from smolagents.agents import MultiStepAgent
+from smolagents.gradio_ui import stream_to_gradio
 
-from manager_agent import GradioManagerAgent
-from utils import load_file
+# from src.manager_agent import GradioManagerAgent
+from src.utils import load_file
 
-gr.NO_RELOAD = False
-
-# Global variables for managing the preview app subprocess
 preview_process = None
-PREVIEW_PORT = 7861  # Different port from main app
+PREVIEW_PORT = 7860  # Different port from main app
 PREVIEW_URL = f"http://localhost:{PREVIEW_PORT}"
 
 
@@ -40,33 +37,6 @@ def find_app_py_in_sandbox():
     return str(app_files[0])
 
 
-def generate_ai_response(message, history):
-    """Generate AI response using the manager agent for planning and \
-coding agent for implementation."""
-
-    history.append({"role": "user", "content": message})
-    manager_agent_instance = GradioManagerAgent()
-
-    if manager_agent_instance is None:
-        # Fallback to mock response if planning agent fails to initialize
-        response = (
-            "Sorry, the manager agent is not available. "
-            "Please check your API_KEY environment variable."
-        )
-        history.append({"role": "assistant", "content": response})
-        return history, ""
-
-    try:
-        manager_result = manager_agent_instance(message)
-        history.append({"role": "assistant", "content": manager_result})
-
-    except Exception as e:
-        error_response = f"I encountered an error: {str(e)}"
-        history.append({"role": "assistant", "content": error_response})
-
-    return history, ""
-
-
 def save_file(path, new_text):
     if path is None:
         gr.Warning("⚠️ No file selected.")
@@ -152,16 +122,6 @@ def start_preview_app():
 
 def create_iframe_preview():
     """Create an iframe HTML element for the preview."""
-    app_path = find_app_py_in_sandbox()
-
-    if not app_path or 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()
 
@@ -216,134 +176,225 @@ def ensure_preview_running():
         start_preview_app()
 
 
-# Create the main Likable UI
-def create_likable_ui():
-    with gr.Blocks(
-        title="💗Likable",
-        theme=gr.themes.Soft(),
-        fill_height=True,
-        fill_width=True,
-    ) as demo:
-        gr.Markdown("# 💗Likable")
-        gr.Markdown(
-            "*AI-powered Gradio app builder - Plans and implements \
-complete applications*"
-        )
+class GradioUI:
+    """A one-line interface to launch your agent in Gradio"""
 
-        with gr.Row(elem_classes="main-container"):
-            # Left side - Chat Interface
-            with gr.Column(scale=1, elem_classes="chat-container"):
-                chatbot = gr.Chatbot(
-                    show_copy_button=True,
-                    avatar_images=(None, "💗"),
-                    type="messages",
-                    height="75vh",
-                )
-
-                with gr.Row():
-                    msg_input = gr.Textbox(
-                        placeholder="Describe the Gradio app you want to build...",
-                        scale=4,
-                        container=False,
-                    )
-                    send_btn = gr.Button("Build App", scale=1, variant="primary")
+    def __init__(self, agent: MultiStepAgent):
+        self.agent = agent
 
-            # Right side - Preview/Code Toggle
-            with gr.Column(scale=4, elem_classes="preview-container"):
-                with gr.Tab("Preview"):
-                    preview_html = gr.HTML(
-                        value=create_iframe_preview(), elem_id="preview-container"
-                    )
+    def interact_with_agent(self, prompt, messages, session_state):
+        import gradio as gr
 
-                with gr.Tab("Code"):
-                    with gr.Row():
-                        save_btn = gr.Button("Save", size="sm")
-                    with gr.Row(equal_height=True):
-                        file_explorer = gr.FileExplorer(
-                            scale=1,
-                            file_count="single",
-                            value="app.py",
-                            root_dir="sandbox",
-                        )
+        # Get the agent type from the template agent
+        if "agent" not in session_state:
+            session_state["agent"] = self.agent
 
-                        # Get initial code content dynamically
-                        def get_initial_code():
-                            app_path = find_app_py_in_sandbox()
-                            if app_path and os.path.exists(app_path):
-                                return load_file(app_path)
-                            return "# No app created yet - use the chat to create one!"
-
-                        code_editor = gr.Code(
-                            scale=3,
-                            value=get_initial_code(),
-                            language="python",
-                            visible=True,
-                            interactive=True,
-                            autocomplete=True,
+        try:
+            messages.append(
+                gr.ChatMessage(role="user", content=prompt, metadata={"status": "done"})
+            )
+            yield messages
+
+            for msg in stream_to_gradio(
+                session_state["agent"], task=prompt, reset_agent_memory=False
+            ):
+                if isinstance(msg, gr.ChatMessage):
+                    messages[-1].metadata["status"] = "done"
+                    messages.append(msg)
+                elif isinstance(msg, str):  # Then it's only a completion delta
+                    msg = msg.replace("<", r"\<").replace(
+                        ">", r"\>"
+                    )  # HTML tags seem to break Gradio Chatbot
+                    if messages[-1].metadata["status"] == "pending":
+                        messages[-1].content = msg
+                    else:
+                        messages.append(
+                            gr.ChatMessage(
+                                role="assistant",
+                                content=msg,
+                                metadata={"status": "pending"},
+                            )
                         )
+                yield messages
 
-        # Event handlers
-        file_explorer.change(fn=load_file, inputs=file_explorer, outputs=code_editor)
-
-        def save_and_refresh(path, new_text):
-            save_file(path, new_text)
-            # 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],
-            outputs=[preview_html],
-        )
-
-        # Event handlers for chat - updated to use the combined planning and
-        # coding function
-        msg_input.submit(
-            generate_ai_response,
-            inputs=[msg_input, chatbot],
-            outputs=[chatbot, msg_input],
-        )
-
-        send_btn.click(
-            generate_ai_response,
-            inputs=[msg_input, chatbot],
-            outputs=[chatbot, msg_input],
+            yield messages
+        except Exception as e:
+            yield messages
+            raise gr.Error(f"Error in interaction: {str(e)}")
+
+    def log_user_message(self, text_input, file_uploads_log):
+        import gradio as gr
+
+        return (
+            text_input
+            + (
+                f"\nYou have been provided with these files, which might be helpful or not: {file_uploads_log}"
+                if len(file_uploads_log) > 0
+                else ""
+            ),
+            "",
+            gr.Button(interactive=False),
         )
 
-        # 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])
+    def launch(self, share: bool = True, **kwargs):
+        self.create_app().launch(debug=True, share=share, **kwargs)
+
+    def create_app(self):
+        import gradio as gr
+
+        # with gr.Blocks(theme="ocean", fill_height=True) as demo:
+        with gr.Blocks(
+            title="💗Likable",
+            theme=gr.themes.Soft(),
+            fill_height=True,
+            fill_width=True,
+        ) as demo:
+            gr.Markdown("# 💗Likable")
+
+            with gr.Row(elem_classes="main-container"):
+                # Left side - Chat Interface
+                with gr.Column(scale=1, elem_classes="chat-container"):
+                    chatbot = gr.Chatbot(
+                        # show_copy_button=True,
+                        avatar_images=(
+                            None,
+                            "http://em-content.zobj.net/source/apple/419/growing-heart_1f497.png",
+                        ),
+                        type="messages",
+                        resizable=True,
+                    )
 
-        # Clean up on app close
-        def cleanup():
-            stop_preview_app()
+                    with gr.Column():
+                        text_input = gr.Textbox(
+                            placeholder="Ask Likable...",
+                            scale=4,
+                            container=False,
+                        )
+                        submit_btn = gr.Button("↑", size="sm", variant="primary")
 
-        demo.unload(cleanup)
+                # Right side - Preview/Code Toggle
+                with gr.Column(scale=4, elem_classes="preview-container"):
+                    with gr.Tab("Preview"):
+                        preview_html = gr.HTML(
+                            value=create_iframe_preview(), elem_id="preview-container"
+                        )
 
-    return demo
+                    with gr.Tab("Code"):
+                        with gr.Row():
+                            save_btn = gr.Button("Save", size="sm")
+                        with gr.Row(equal_height=True):
+                            file_explorer = gr.FileExplorer(
+                                scale=1,
+                                file_count="single",
+                                value="app.py",
+                                root_dir="sandbox",
+                            )
+
+                            # Get initial code content dynamically
+                            def get_initial_code():
+                                app_path = find_app_py_in_sandbox()
+                                if app_path and os.path.exists(app_path):
+                                    return load_file(app_path)
+                                return (
+                                    "# No app created yet - use the chat to create one!"
+                                )
+
+                            code_editor = gr.Code(
+                                scale=3,
+                                value=get_initial_code(),
+                                language="python",
+                                visible=True,
+                                interactive=True,
+                                autocomplete=True,
+                            )
+            # Add session state to store session-specific data
+            session_state = gr.State({})
+            stored_messages = gr.State([])
+            file_uploads_log = gr.State([])
+
+            # Set up event handlers
+            file_explorer.change(
+                fn=load_file, inputs=file_explorer, outputs=code_editor
+            )
+
+            def save_and_refresh(path, new_text):
+                save_file(path, new_text)
+                # 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],
+                outputs=[preview_html],
+            )
+
+            text_input.submit(
+                self.log_user_message,
+                [text_input, file_uploads_log],
+                [stored_messages, text_input, submit_btn],
+            ).then(
+                self.interact_with_agent,
+                [stored_messages, chatbot, session_state],
+                [chatbot],
+            ).then(
+                fn=create_iframe_preview,
+                inputs=[],
+                outputs=[preview_html],
+            ).then(
+                lambda: (
+                    gr.Textbox(
+                        interactive=True,
+                        placeholder="Ask Likable...",
+                    ),
+                    gr.Button(interactive=True),
+                ),
+                None,
+                [text_input, submit_btn],
+            )
+
+            submit_btn.click(
+                self.log_user_message,
+                [text_input, file_uploads_log],
+                [stored_messages, text_input, submit_btn],
+            ).then(
+                self.interact_with_agent,
+                [stored_messages, chatbot, session_state],
+                [chatbot],
+            ).then(
+                fn=create_iframe_preview,
+                inputs=[],
+                outputs=[preview_html],
+            ).then(
+                lambda: (
+                    gr.Textbox(
+                        interactive=True,
+                        placeholder="Ask Likable....",
+                    ),
+                    gr.Button(interactive=True),
+                ),
+                None,
+                [text_input, submit_btn],
+            )
+
+            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)
+    from kiss_agent import KISSAgent
 
-    demo = create_likable_ui()
-    # 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()
+    agent = KISSAgent()
+    GradioUI(agent).launch(share=False, server_name="0.0.0.0", server_port=7862)

kiss_agent.py

@@ -0,0 +1,164 @@
+import os
+import subprocess
+from pathlib import Path
+
+from smolagents import LiteLLMModel, MCPClient, ToolCallingAgent, tool
+
+from src.settings import settings
+
+PROMPT_TEMPLATE = """You are an expert software developer for Gradio.
+You are given a task to develop a Gradio application and can use all the tools at your disposal to do so.
+You always try to do everything inside of the app.py file. Only in rare cases you might need to edit or create other files.
+
+The overarching goal is always to create a Gradio application.
+
+Here is the user's request:
+{task}
+
+Always test the app.py file after you have made changes to it!
+"""
+
+
+@tool
+def python_editor(whole_edit: str) -> str:
+    """
+    Edit python files using aider's whole edit format. You can use this tool to edit any python file or create a new one.
+
+    Your input should be a string in the following format:
+    [filename]
+    ```python
+    [complete file content]
+    ```
+
+    For example:
+    app.py
+    ```python
+    import gradio as gr
+    ...
+    ```
+
+    Args:
+        whole_edit: The new complete content in whole edit format
+
+    Returns:
+        Status message indicating success or failure
+    """
+    try:
+        # Split into lines and find first non-empty line as filename
+        lines = whole_edit.strip().split("\n")
+        if not lines:
+            return "Error: Empty input provided"
+
+        filename = next((line.strip() for line in lines if line.strip()), None)
+        if not filename:
+            return "Error: No filename found in input"
+
+        # Find code block content between ```
+        content = whole_edit.strip()
+        start_marker = content.find("```")
+        if start_marker == -1:
+            return "Error: No code block found"
+
+        # Find the end of the first line after ```
+        start_content = content.find("\n", start_marker) + 1
+        end_marker = content.find("```", start_content)
+
+        if end_marker == -1:
+            # No closing ```, take everything after the opening ```
+            file_content = content[start_content:]
+        else:
+            file_content = content[start_content:end_marker]
+
+        # Create the file path and write content
+        file_path = Path("./sandbox") / filename
+        file_path.parent.mkdir(parents=True, exist_ok=True)
+
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(file_content.rstrip())  # Remove trailing whitespace
+
+        line_count = (
+            len(file_content.strip().split("\n")) if file_content.strip() else 0
+        )
+        return f"Successfully wrote {line_count} lines to {filename}"
+
+    except Exception as e:
+        return f"Error applying whole edit: {str(e)}"
+
+
+@tool
+def test_app_py() -> str:
+    """
+    Test if the current app.py runs without syntax errors.
+
+    Returns:
+        Test result message
+    """
+    try:
+        app_path = Path("sandbox") / "app.py"
+
+        if not app_path.exists():
+            return "Error: app.py does not exist"
+
+        # Store original working directory
+        original_cwd = os.getcwd()
+
+        # Change to project directory for testing
+        os.chdir(app_path.parent)
+
+        # Test syntax by attempting to compile
+        result = subprocess.run(
+            ["python", "-m", "py_compile", "app.py"],
+            capture_output=True,
+            text=True,
+        )
+
+        # Change back to original directory
+        os.chdir(original_cwd)
+
+        if result.returncode == 0:
+            return "✅ app.py syntax check passed successfully"
+        else:
+            return f"❌ Syntax error in app.py:\n{result.stderr}"
+
+    except Exception as e:
+        # Restore working directory on error
+        try:
+            os.chdir(original_cwd)
+        except NameError:
+            pass
+        return f"Error testing app.py: {str(e)}"
+
+
+class KISSAgent(ToolCallingAgent):
+    def __init__(
+        self,
+        model_id: str | None = None,
+        api_base_url: str | None = None,
+        api_key: str | None = None,
+        prompt_template: str | None = None,
+        **kwargs,
+    ):
+        model_id = model_id or settings.manager_model_id
+        api_base_url = api_base_url or settings.api_base_url
+        api_key = api_key or settings.api_key
+        self.prompt_template = prompt_template or PROMPT_TEMPLATE
+
+        # Initialize the language model
+        model = LiteLLMModel(
+            model_id=model_id,
+            api_base=api_base_url,
+            api_key=api_key,
+        )
+
+        # Initialize the parent CodeAgent
+        super().__init__(
+            tools=[python_editor, test_app_py],
+            model=model,
+            add_base_tools=False,
+            **kwargs,
+        )
+
+    def run(self, task: str, **kwargs) -> str:
+        """Override run method to format prompt with task before calling parent run."""
+        formatted_prompt = self.prompt_template.format(task=task)
+        return super().run(formatted_prompt, **kwargs)

pyproject.toml

@@ -11,6 +11,7 @@ dependencies = [
     "smolagents[litellm,mcp]>=1.17.0",
     "selenium>=4.25.0",
     "requests>=2.32.0",
+    "watchdog>=5.0.0",
 ]
 
 [dependency-groups]
@@ -49,5 +50,5 @@ members = [
     "sandbox/calculator_app",
     "sandbox/gradio_calculator",
     "sandbox/gradio_calculator_app",
-    "sandbox/simple_calculator",
+    "sandbox/simple_calculator", "sandbox/todo_list_app", "sandbox/calculator", "sandbox/todo_app", "sandbox/gradio_todo_app", "sandbox/gradio_hello_world", "sandbox/sandbox/todo-app", "sandbox/to_do_list_app", "sandbox/sandbox/to-do-app", "sandbox/todo_gradio_app", "sandbox/sandbox/to-do-list", "sandbox/sandbox/calculator",
 ]

src/test_gradio_manager.py

@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+"""
+Test script demonstrating GradioManagerAgent with Gradio UI integration.
+
+This script shows how to use the GradioManagerAgent with the GradioUI
+to create a web interface for the multi-agent development workflow.
+"""
+
+import sys
+import os
+
+# Add the current directory to the path so we can import our modules
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+try:
+    from manager_agent import GradioManagerAgent
+    from smolagents.gradio_ui import GradioUI
+
+    def main():
+        """Main function to launch the Gradio UI with the GradioManagerAgent."""
+        print("🚀 Initializing GradioManagerAgent...")
+
+        # Create the manager agent
+        manager_agent = GradioManagerAgent()
+
+        print(f"✅ Manager agent created successfully!")
+        print(f"   - Name: {manager_agent.name}")
+        print(f"   - Description: {manager_agent.description[:100]}...")
+        print(f"   - Is CodeAgent: {hasattr(manager_agent, 'run')}")
+
+        # Create the Gradio UI
+        print("\n🎨 Creating Gradio UI...")
+        gradio_ui = GradioUI(agent=manager_agent)
+
+        print("✅ Gradio UI created successfully!")
+        print("\n🌐 Launching Gradio interface...")
+        print("   - The interface will be available at the URL shown below")
+        print("   - You can now interact with the multi-agent development workflow")
+        print("   - Try asking: 'Create a simple calculator app'")
+
+        # Launch the Gradio interface
+        # Note: Set share=False for local development, share=True to create a public link
+        gradio_ui.launch(share=False, server_name="0.0.0.0", server_port=7860)
+
+    if __name__ == "__main__":
+        main()
+
+except ImportError as e:
+    print(f"❌ Import error: {e}")
+    print("Please make sure all dependencies are installed and modules are available.")
+    sys.exit(1)
+except Exception as e:
+    print(f"❌ Error: {e}")
+    sys.exit(1)