app.py

"""Explainor - AI Agent that explains any topic in fun persona voices.

MCP's 1st Birthday Hackathon Submission
Track: MCP in Action (Creative)
Team: kaiser-data
"""

import os
import tempfile
import gradio as gr
from dotenv import load_dotenv

from src.personas import PERSONAS, get_persona_names, get_persona
from src.agent import run_agent
from src.tts import generate_speech

# Load environment variables
load_dotenv()


# Custom CSS for better styling
CUSTOM_CSS = """
/* Dark mode input fix */
.dark input, .dark textarea {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* Header styling */
.header-container {
    text-align: center;
    padding: 1rem 0;
}

/* Card-like sections */
.input-section, .output-section {
    border-radius: 12px;
    padding: 1rem;
}

/* Primary button enhancement */
.primary-btn {
    font-size: 1.1rem !important;
    padding: 0.75rem 2rem !important;
}

/* Audio section layout */
.audio-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Persona cards in examples */
.example-row {
    margin-top: 0.5rem;
}

/* Footer styling */
.footer {
    text-align: center;
    opacity: 0.8;
    font-size: 0.9rem;
}

/* MCP badge */
.mcp-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
    font-weight: bold;
}
"""


def format_sources(sources: list[dict]) -> str:
    """Format sources as markdown."""
    if not sources:
        return "*No external sources used*"

    md = ""
    for i, src in enumerate(sources, 1):
        if src.get("url"):
            md += f"{i}. [{src['title']}]({src['url']})\n"
        else:
            md += f"{i}. {src['title']} ({src.get('source', 'General')})\n"
    return md


def format_mcp_tools(tools: list[dict]) -> str:
    """Format tools used as markdown table."""
    if not tools:
        return "*Waiting for explanation...*"

    md = "| Tool | Description |\n|------|-------------|\n"
    for tool in tools:
        md += f"| {tool['icon']} `{tool['name']}` | {tool['desc']} |\n"
    return md


def explain_topic(topic: str, persona_name: str, audience: str = "", progress=gr.Progress()):
    """Main function to explain a topic in a persona's voice."""
    if not topic.strip():
        return "Please enter a topic to explain!", "", "", ""

    if not persona_name:
        persona_name = "5-Year-Old"

    steps_log = []
    explanation = ""
    sources = []
    mcp_tools = []

    progress(0, desc="Starting...")

    for update in run_agent(topic, persona_name, audience):
        if update["type"] == "step":
            step_text = f"**{update['title']}**\n{update['content']}"
            steps_log.append(step_text)

            if update["step"] == "research":
                progress(0.2, desc="🔍 Researching...")
            elif update["step"] == "research_done":
                progress(0.4, desc="📚 Research complete")
                if "sources" in update:
                    sources = update["sources"]
            elif update["step"] == "generating":
                progress(0.6, desc="🎭 Generating explanation...")

        elif update["type"] == "result":
            explanation = update["explanation"]
            sources = update.get("sources", sources)
            mcp_tools = update.get("mcp_tools", [])
            progress(1.0, desc="✅ Done!")

    steps_md = "\n\n---\n\n".join(steps_log)
    sources_md = format_sources(sources)
    mcp_md = format_mcp_tools(mcp_tools)

    return explanation, sources_md, steps_md, mcp_md


def generate_audio(explanation: str, persona_name: str, progress=gr.Progress()):
    """Generate audio from the explanation text."""
    if not explanation or not explanation.strip():
        return None

    if not persona_name:
        persona_name = "5-Year-Old"

    persona = get_persona(persona_name)
    voice_id = persona["voice_id"]
    voice_settings = persona.get("voice_settings")

    progress(0.3, desc="🔊 Generating audio...")

    try:
        audio_bytes = generate_speech(explanation, voice_id, voice_settings)
        with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as f:
            f.write(audio_bytes)
            audio_path = f.name
        progress(1.0, desc="✅ Audio ready!")
        return audio_path
    except Exception as e:
        progress(1.0, desc="❌ Audio failed")
        raise gr.Error(f"Audio generation failed: {str(e)}")


def create_app():
    """Create and configure the Gradio app."""

    # Build persona choices
    persona_choices = [
        f"{PERSONAS[name]['emoji']} {name}"
        for name in get_persona_names()
    ]

    # Audience choices
    audience_choices = [
        "👤 Just me",
        "👵 Confused grandmother",
        "🤖 Skeptical robot",
        "👽 Alien visitor",
        "🧟 Zombie",
        "👔 Stressed CEO",
    ]

    with gr.Blocks(title="Explainor", fill_width=True) as app:

        # ===== HEADER =====
        gr.Markdown(
            """
            <div style="text-align: center; padding: 1rem 0;">
                <h1>🎭 Explainor</h1>
                <p style="font-size: 1.2rem; opacity: 0.9;">Learn anything through the voice of your favorite characters!</p>
            </div>
            """,
            elem_classes=["header-container"]
        )

        # ===== INPUT SECTION =====
        with gr.Group():
            # Topic input - full width, prominent
            topic_input = gr.Textbox(
                label="What do you want to learn about?",
                placeholder="Try: Quantum Computing, Blockchain, Black Holes, Climate Change...",
                lines=1,
                scale=2,
            )

            # Persona and Audience in one row
            with gr.Row():
                persona_dropdown = gr.Dropdown(
                    choices=persona_choices,
                    value=persona_choices[0],
                    label="🎭 Explainer",
                    scale=1,
                )
                audience_dropdown = gr.Dropdown(
                    choices=audience_choices,
                    value=audience_choices[0],
                    label="👤 Audience",
                    scale=1,
                )

        # ===== ACTION BUTTON =====
        explain_btn = gr.Button(
            "✨ Explain it to me!",
            variant="primary",
            size="lg",
            elem_classes=["primary-btn"],
        )

        # ===== OUTPUT SECTION =====
        with gr.Group():
            explanation_output = gr.Textbox(
                label="📖 Explanation",
                lines=6,
            )

            # Audio controls in a row
            with gr.Row():
                read_aloud_btn = gr.Button(
                    "🔊 Read Aloud",
                    variant="secondary",
                    scale=1,
                )
                audio_output = gr.Audio(
                    label="Listen",
                    type="filepath",
                    autoplay=True,
                    scale=3,
                )

        # ===== DETAILS SECTION (Tabs) =====
        with gr.Accordion("📊 Details", open=False):
            with gr.Tabs():
                with gr.TabItem("🔧 Agent Tools"):
                    mcp_output = gr.Markdown("*Run an explanation to see tool calls*")

                with gr.TabItem("📚 Sources"):
                    sources_output = gr.Markdown("*Sources will appear here*")

                with gr.TabItem("🔍 Trace"):
                    steps_output = gr.Markdown("*Execution trace will appear here*")

        # ===== EXAMPLES =====
        gr.Markdown("### 💡 Try these examples")
        gr.Examples(
            examples=[
                ["Quantum Computing", "👶 5-Year-Old"],
                ["Blockchain", "👨‍🍳 Gordon Ramsay"],
                ["Black Holes", "🏴‍☠️ Pirate"],
                ["Machine Learning", "🎭 Shakespeare"],
                ["Climate Change", "🏄 Surfer Dude"],
                ["The Force", "🧙 Yoda"],
            ],
            inputs=[topic_input, persona_dropdown],
            label="",
        )

        # ===== MCP INFO =====
        with gr.Accordion("🔌 MCP Server", open=False):
            gr.Markdown(
                """
                This app is an **MCP Server**! Connect it to Claude Desktop or any MCP client:

                ```
                https://kaiser-data-mcp-1st-birthday-explainor.hf.space/gradio_api/mcp/sse
                ```

                **Available Tools:** `explain_topic`, `generate_audio`
                """
            )

        # ===== FOOTER =====
        gr.Markdown(
            """
            <div style="text-align: center; padding: 1rem 0; opacity: 0.7; font-size: 0.85rem;">
                <strong>MCP's 1st Birthday Hackathon</strong> · Track: MCP in Action (Creative)<br/>
                Powered by <a href="https://nebius.com">Nebius AI</a> + <a href="https://elevenlabs.io">ElevenLabs</a> ·
                Made with ❤️ by <strong>kaiser-data</strong>
            </div>
            """,
            elem_classes=["footer"]
        )

        # ===== EVENT HANDLERS =====
        def process_and_explain(topic, persona_with_emoji, audience_with_emoji):
            persona_name = persona_with_emoji.split(" ", 1)[1] if " " in persona_with_emoji else persona_with_emoji
            audience = ""
            if audience_with_emoji and "Just me" not in audience_with_emoji:
                audience = audience_with_emoji.split(" ", 1)[1] if " " in audience_with_emoji else audience_with_emoji
            return explain_topic(topic, persona_name, audience)

        def process_audio(explanation, persona_with_emoji):
            persona_name = persona_with_emoji.split(" ", 1)[1] if " " in persona_with_emoji else persona_with_emoji
            return generate_audio(explanation, persona_name)

        # Explain button click
        explain_btn.click(
            fn=process_and_explain,
            inputs=[topic_input, persona_dropdown, audience_dropdown],
            outputs=[explanation_output, sources_output, steps_output, mcp_output],
        )

        # Enter key in topic input
        topic_input.submit(
            fn=process_and_explain,
            inputs=[topic_input, persona_dropdown, audience_dropdown],
            outputs=[explanation_output, sources_output, steps_output, mcp_output],
        )

        # Read aloud button
        read_aloud_btn.click(
            fn=process_audio,
            inputs=[explanation_output, persona_dropdown],
            outputs=[audio_output],
        )

    return app


# Create the app
app = create_app()

if __name__ == "__main__":
    enable_mcp = os.getenv("ENABLE_MCP_SERVER", "true").lower() == "true"

    app.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        mcp_server=enable_mcp,
        css=CUSTOM_CSS,
    )