gradio_ui.py

"""
Gradio UI for MCO Agent Orchestration - Hackathon Demo

This script creates a polished Gradio user interface to showcase the MCO protocol.
The UI is designed for a compelling presentation, focusing on the agent's
orchestrated task execution without requiring user input.
"""

import gradio as gr
import asyncio

# Attempt to import the Modal app; handle gracefully if not available
try:
    from modal_implementation import run_mco_agent
except (ImportError, ModuleNotFoundError):
    print("Warning: Modal app not found. Running in local simulation mode.")
    # Define a dummy sync generator for local testing
    def run_mco_agent(prompt):
        for i in range(5):
            yield {"type": "status", "message": f"<thinking>Simulation step {i+1} for prompt: {prompt}</thinking>"}
            time.sleep(1)
        yield {"type": "final_result", "result": "<thinking>Simulation complete.</thinking>"}

def run_orchestration_and_stream_results():
    """
    Runs the MCO agent with a fixed prompt and streams back thinking and log updates.
    """
    user_prompt = "Use the mco server to orchestrate your tasks. use <thinking> xml each step of the way, while you learn about the mco orchestration."
    
    full_log = ""
    thinking_stream = ""
    
    try:
        # The agent runner is a synchronous generator from Modal
        for result in run_mco_agent.remote_gen(user_prompt):
            message = result.get("message", result.get("result", ""))

            if result.get("type") == "status":
                full_log += message + "\n\n"
                thinking_stream = message
            elif result.get("type") == "error":
                error_msg = f"<error>ERROR: {message}</error>"
                full_log += error_msg + "\n\n"
                thinking_stream = error_msg
            elif result.get("type") == "final_result":
                 final_msg = message
                 full_log += f"\n--- ORCHESTRATION COMPLETE ---\n{final_msg}"
                 thinking_stream = final_msg
            
            yield thinking_stream, full_log

    except Exception as e:
        error_message = f"<error>An unexpected error occurred: {e}</error>"
        yield error_message, full_log + f"\n{error_message}"

def create_gradio_ui():
    """Creates and returns the Gradio UI Blocks for the MCO Hackathon Demo."""
    
    css = """
    body { background-color: #f7f7f7; }
    .main-title { text-align: center; font-size: 2.8em; color: #4A00E0; font-weight: bold; letter-spacing: -1px; margin-bottom: 10px; }
    .subtitle { text-align: center; font-size: 1.3em; color: #555; margin-bottom: 25px; line-height: 1.6; }
    .thinking-box { 
        border: 2px solid #8E2DE2; 
        padding: 20px; 
        border-radius: 12px; 
        background-color: #ffffff; 
        font-family: 'Courier New', Courier, monospace;
        font-size: 1.1em;
        min-height: 60px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .log-box { 
        font-family: 'Menlo', 'Monaco', 'Consolas', monospace; 
        background-color: #1e1e1e; 
        color: #d4d4d4;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 15px;
    }
    .orchestrate-button { 
        background: linear-gradient(45deg, #8E2DE2, #4A00E0) !important; 
        color: white !important; 
        font-weight: bold !important; 
        font-size: 1.2em !important;
        border-radius: 10px !important;
        padding: 15px 30px !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(74, 0, 224, 0.4);
        transition: all 0.3s ease;
    }
    .orchestrate-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(74, 0, 224, 0.5);
    }
    .gr-label { display: none !important; }
    """

    with gr.Blocks(theme=gr.themes.Soft(primary_hue="purple", secondary_hue="blue"), css=css, title="MCO Protocol Demo") as demo:
        gr.Markdown("""
        <h1 class='main-title'>🏆 The Missing Layer of Agentic AI: Orchestration 🏆</h1>
        <p class='subtitle'>
        Welcome to the future of agentic systems with the <strong>MCO Protocol</strong>. <br>
        This agent, powered by Claude on Modal, connects to an <strong>MCO Server</strong> that orchestrates its every move. <br>
        Click below to witness a complex task unfold, step-by-step, guided entirely by MCO.
        </p>
        """)

        with gr.Row():
            orchestrate_button = gr.Button("🚀 Orchestrate! 🚀", elem_classes="orchestrate-button")
        
        gr.Markdown("### 🧠 Agent's Real-time Thinking")
        agent_thinking_box = gr.Textbox(
            label="Current Status", 
            elem_classes="thinking-box",
            interactive=False,
            show_label=False
        )
        
        gr.Markdown("### 📜 Full Orchestration Log")
        agent_log_box = gr.Textbox(
            label="Log", 
            elem_classes="log-box",
            lines=20, 
            interactive=False,
            show_label=False
        )

        orchestrate_button.click(
            fn=run_orchestration_and_stream_results,
            inputs=[],
            outputs=[agent_thinking_box, agent_log_box]
        )
    
    return demo

if __name__ == "__main__":
    gradio_ui = create_gradio_ui()
    gradio_ui.launch(share=True)