Finalizing README.md

app.py

@@ -645,6 +645,92 @@ footer a,
         transform: translateY(0);
     }
 }
+
+/* ========================================================================
+   README TAB STYLING - BLACK TEXT ON WHITE BACKGROUND
+   ======================================================================== */
+
+.readme-tab-container {
+    background-color: #ffffff !important;
+    padding: 2rem !important;
+    border-radius: 12px !important;
+    max-width: 1200px !important;
+    margin: 1rem auto !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
+}
+
+.readme-markdown,
+.readme-markdown *,
+.readme-markdown h1,
+.readme-markdown h2,
+.readme-markdown h3,
+.readme-markdown h4,
+.readme-markdown h5,
+.readme-markdown h6,
+.readme-markdown p,
+.readme-markdown li,
+.readme-markdown span,
+.readme-markdown div,
+.readme-markdown strong,
+.readme-markdown em,
+.readme-markdown code {
+    color: #000000 !important;
+    background-color: transparent !important;
+}
+
+.readme-markdown a {
+    color: #2563eb !important;
+    text-decoration: underline !important;
+}
+
+.readme-markdown a:hover {
+    color: #1d4ed8 !important;
+}
+
+.readme-markdown code {
+    background-color: #f3f4f6 !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace !important;
+}
+
+.readme-markdown pre {
+    background-color: #f3f4f6 !important;
+    padding: 1rem !important;
+    border-radius: 8px !important;
+    overflow-x: auto !important;
+}
+
+.readme-markdown pre code {
+    background-color: transparent !important;
+    padding: 0 !important;
+}
+
+.readme-markdown blockquote {
+    border-left: 4px solid #e5e7eb !important;
+    padding-left: 1rem !important;
+    color: #4b5563 !important;
+}
+
+.readme-markdown hr {
+    border-top: 1px solid #e5e7eb !important;
+}
+
+.readme-markdown table {
+    border-collapse: collapse !important;
+    width: 100% !important;
+}
+
+.readme-markdown table th,
+.readme-markdown table td {
+    border: 1px solid #e5e7eb !important;
+    padding: 0.5rem !important;
+}
+
+.readme-markdown table th {
+    background-color: #f9fafb !important;
+    font-weight: 600 !important;
+}
 """
 
 # ============================================================================
@@ -1475,198 +1561,209 @@ with gr.Blocks() as demo:
 
         # Step 3: Main App
         with gr.Step("BirdScope AI", id=3):
-            with gr.Row():
-                # Left: Chat interface (scale=2)
-                with gr.Column(scale=2):
-                    chatbot = gr.Chatbot(
-                        show_label=False,
-                        height=500,
-                        elem_classes=["chatbot-container"]
-                    )
-
-                    msg = gr.MultimodalTextbox(
-                        placeholder="Ask about birds or upload an image...",
-                        file_count="single",
-                        file_types=["image"],
-                        interactive=True,
-                        show_label=False
-                    )
-
+            with gr.Tabs():
+                with gr.Tab("💬 Chat"):
                     with gr.Row():
-                        submit = gr.Button("Send", scale=3)
-                        clear = gr.Button("Clear", scale=1)
-
-                    # Photo examples - always shown (static)
-                    gr.Markdown("**Try uploading a bird photo:**")
-                    gr.Examples(
-                        examples=PHOTO_EXAMPLES,
-                        inputs=msg,
-                        cache_examples=False
-                    )
-
-                    # Text examples - change based on agent mode (dynamic)
-                    gr.Markdown("**Or try a text query:**")
-                    text_examples = gr.Examples(
-                        examples=MULTI_AGENT_TEXT_EXAMPLES,  # Default to multi-agent text examples
-                        inputs=msg,
-                        cache_examples=False
-                    )
-
-                # Middle: Tool execution log (scale=1)
-                with gr.Column(scale=1):
-                    tool_output = gr.Textbox(
-                        value="*Waiting for tool calls...*",
-                        elem_classes=["tool-log-panel"],
-                        elem_id="tool-log-output",
-                        autoscroll=True,
-                        show_label=False,
-                        interactive=False,
-                        container=False
-                    )
-
-                # Right: Sidebar (scale=1)
-                with gr.Column(scale=1, elem_classes=["sidebar"]):
-
-                    # MCP Server Status Check
-                    mcp_status_html = gr.HTML("""
-                        <div class="mcp-badge online" style="margin-bottom: 16px; justify-content: center;">
-                            <span class="mcp-pulse"></span>
-                            <span>Powered by Modal MCP</span>
-                        </div>
-                    """)
-                    check_mcp_btn = gr.Button("Check Modal MCP Server Status", size="sm", variant="secondary", elem_classes=["modal-check-btn"])
-
-                    gr.HTML("""
-                    <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 8px; margin-bottom: 16px; line-height: 1.4;">
-                        Please be patient if the Modal MCP server needs to cold start
-                    </p>
-                    """)
-
-                    gr.Markdown("---")
-
-                    # Provider selection
-                    gr.Markdown("### SELECT LLM PROVIDER")
-                    provider = gr.Dropdown(
-                        choices=["HuggingFace", "OpenAI", "Anthropic"],
-                        value="OpenAI",
-                        show_label=False,
-                        container=False
-                    )
-
-                    # Agent Mode Selector
-                    gr.Markdown("**Agent Configuration**")
-                    gr.Markdown("Choose between unified agent or specialized routing")
-                    agent_mode = gr.Dropdown(
-                        choices=[
-                            "Supervisor (Multi-Agent)"
-                        ],
-                        value="Supervisor (Multi-Agent)",
-                        show_label=False,
-                        container=False
-                    )
-
-                    gr.Markdown("---")
-
-                    # API Keys
-                    gr.Markdown("### AUTHENTICATION")
-
-                    gr.HTML("""
-                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                        <img src="https://cdn.brandfetch.io/idGqKHD5xE/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1668516030712"
-                             alt="HuggingFace"
-                             style="width: 20px; height: 20px;">
-                        <strong style="color: #d1d5db;">HuggingFace API Key</strong>
-                    </div>
-                    """)
-                    hf_key = gr.Textbox(
-                        placeholder="hf_...",
-                        type="password",
-                        show_label=False,
-                        container=False,
-                        elem_classes=["hf-section"]
-                    )
-                    gr.Markdown("Get your key from [HF Settings](https://huggingface.co/settings/tokens)")
-
-                    gr.HTML("""
-                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                        <img src="https://cdn.oaistatic.com/_next/static/media/apple-touch-icon.59f2e898.png"
-                             alt="OpenAI"
-                             style="width: 20px; height: 20px; border-radius: 4px;">
-                        <strong style="color: #d1d5db;">OpenAI API Key</strong>
-                    </div>
-                    """)
-                    openai_key = gr.Textbox(
-                        placeholder="sk-...",
-                        type="password",
-                        show_label=False,
-                        container=False,
-                        elem_classes=["openai-section"]
-                    )
-                    gr.Markdown("Get your key from [OpenAI Platform](https://platform.openai.com/api-keys)")
-
-                    gr.HTML("""
-                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                        <img src="https://cdn.brandfetch.io/idmJWF3N06/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1721803183716"
-                             alt="Anthropic"
-                             style="width: 20px; height: 20px; filter: invert(52%) sepia(48%) saturate(779%) hue-rotate(327deg) brightness(91%) contrast(88%);">
-                        <strong style="color: #d1d5db;">Anthropic API Key</strong>
-                    </div>
-                    """)
-                    anthropic_key = gr.Textbox(
-                        placeholder="sk-ant-...",
-                        type="password",
-                        show_label=False,
-                        container=False,
-                        elem_classes=["anthropic-section"]
-                    )
-                    gr.Markdown("Get your key from [Anthropic Console](https://console.anthropic.com/settings/keys)")
-
-                    # Current Configuration Display
-                    gr.Markdown("---")
-                    gr.Markdown("### CURRENT CONFIG")
-
-                    # Generate initial config HTML
-                    session_status = gr.HTML(
-                        value=create_config_html(
-                            provider_choice="OpenAI",
-                            agent_mode_choice="Supervisor (Multi-Agent)",
-                            hf_key_input="",
-                            openai_key_input="",
-                            anthropic_key_input=""
-                        )
-                    )
-
-                    # About
-                    gr.Markdown("---")
-                    gr.Markdown("""
-                    ### ABOUT
-
-                    Built for the [Hugging Face MCP-1st-Birthday Hackathon](https://huggingface.co/MCP-1st-Birthday)
-                    """)
-
-                    gr.HTML("""
-                    <div style="text-align: center; margin: 16px 0;">
-                        <img src="https://cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/s4q7RzD3S-8xQ8ecXrSwb.png"
-                             alt="Hugging Face MCP 1st Birthday"
-                             style="max-width: 100%; height: auto; border-radius: 8px;">
-                    </div>
-                    """)
-
-                    gr.Markdown("""
-                    **MCP Servers:**
-                    - Modal GPU classifier (2 tools)
-                    - Nuthatch species database (7 tools)
-
-                    **Capabilities:**
-                    - Visual bird identification
-                    - Species reference images (Unsplash)
-                    - Audio recordings (xeno-canto)
-                    - Conservation status data
-                    - Taxonomic exploration
-                    - Separate tool log panel
-                    - Detailed execution tracking
-                    - Tool input/output inspection
-                    """)
+                        # Left: Chat interface (scale=2)
+                        with gr.Column(scale=2):
+                            chatbot = gr.Chatbot(
+                                show_label=False,
+                                height=500,
+                                elem_classes=["chatbot-container"]
+                            )
+
+                            msg = gr.MultimodalTextbox(
+                                placeholder="Ask about birds or upload an image...",
+                                file_count="single",
+                                file_types=["image"],
+                                interactive=True,
+                                show_label=False
+                            )
+
+                            with gr.Row():
+                                submit = gr.Button("Send", scale=3)
+                                clear = gr.Button("Clear", scale=1)
+
+                            # Photo examples - always shown (static)
+                            gr.Markdown("**Try uploading a bird photo:**")
+                            gr.Examples(
+                                examples=PHOTO_EXAMPLES,
+                                inputs=msg,
+                                cache_examples=False
+                            )
+
+                            # Text examples - change based on agent mode (dynamic)
+                            gr.Markdown("**Or try a text query:**")
+                            text_examples = gr.Examples(
+                                examples=MULTI_AGENT_TEXT_EXAMPLES,  # Default to multi-agent text examples
+                                inputs=msg,
+                                cache_examples=False
+                            )
+
+                        # Middle: Tool execution log (scale=1)
+                        with gr.Column(scale=1):
+                            tool_output = gr.Textbox(
+                                value="*Waiting for tool calls...*",
+                                elem_classes=["tool-log-panel"],
+                                elem_id="tool-log-output",
+                                autoscroll=True,
+                                show_label=False,
+                                interactive=False,
+                                container=False
+                            )
+
+                        # Right: Sidebar (scale=1)
+                        with gr.Column(scale=1, elem_classes=["sidebar"]):
+
+                            # MCP Server Status Check
+                            mcp_status_html = gr.HTML("""
+                                <div class="mcp-badge online" style="margin-bottom: 16px; justify-content: center;">
+                                    <span class="mcp-pulse"></span>
+                                    <span>Powered by Modal MCP</span>
+                                </div>
+                            """)
+                            check_mcp_btn = gr.Button("Check Modal MCP Server Status", size="sm", variant="secondary", elem_classes=["modal-check-btn"])
+
+                            gr.HTML("""
+                            <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 8px; margin-bottom: 16px; line-height: 1.4;">
+                                Please be patient if the Modal MCP server needs to cold start
+                            </p>
+                            """)
+
+                            gr.Markdown("---")
+
+                            # Provider selection
+                            gr.Markdown("### SELECT LLM PROVIDER")
+                            provider = gr.Dropdown(
+                                choices=["HuggingFace", "OpenAI", "Anthropic"],
+                                value="OpenAI",
+                                show_label=False,
+                                container=False
+                            )
+
+                            # Agent Mode Selector
+                            gr.Markdown("**Agent Configuration**")
+                            gr.Markdown("Choose between unified agent or specialized routing")
+                            agent_mode = gr.Dropdown(
+                                choices=[
+                                    "Supervisor (Multi-Agent)"
+                                ],
+                                value="Supervisor (Multi-Agent)",
+                                show_label=False,
+                                container=False
+                            )
+
+                            gr.Markdown("---")
+
+                            # API Keys
+                            gr.Markdown("### AUTHENTICATION")
+
+                            gr.HTML("""
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <img src="https://cdn.brandfetch.io/idGqKHD5xE/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1668516030712"
+                                     alt="HuggingFace"
+                                     style="width: 20px; height: 20px;">
+                                <strong style="color: #d1d5db;">HuggingFace API Key</strong>
+                            </div>
+                            """)
+                            hf_key = gr.Textbox(
+                                placeholder="hf_...",
+                                type="password",
+                                show_label=False,
+                                container=False,
+                                elem_classes=["hf-section"]
+                            )
+                            gr.Markdown("Get your key from [HF Settings](https://huggingface.co/settings/tokens)")
+
+                            gr.HTML("""
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <img src="https://cdn.oaistatic.com/_next/static/media/apple-touch-icon.59f2e898.png"
+                                     alt="OpenAI"
+                                     style="width: 20px; height: 20px; border-radius: 4px;">
+                                <strong style="color: #d1d5db;">OpenAI API Key</strong>
+                            </div>
+                            """)
+                            openai_key = gr.Textbox(
+                                placeholder="sk-...",
+                                type="password",
+                                show_label=False,
+                                container=False,
+                                elem_classes=["openai-section"]
+                            )
+                            gr.Markdown("Get your key from [OpenAI Platform](https://platform.openai.com/api-keys)")
+
+                            gr.HTML("""
+                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                <img src="https://cdn.brandfetch.io/idmJWF3N06/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1721803183716"
+                                     alt="Anthropic"
+                                     style="width: 20px; height: 20px; filter: invert(52%) sepia(48%) saturate(779%) hue-rotate(327deg) brightness(91%) contrast(88%);">
+                                <strong style="color: #d1d5db;">Anthropic API Key</strong>
+                            </div>
+                            """)
+                            anthropic_key = gr.Textbox(
+                                placeholder="sk-ant-...",
+                                type="password",
+                                show_label=False,
+                                container=False,
+                                elem_classes=["anthropic-section"]
+                            )
+                            gr.Markdown("Get your key from [Anthropic Console](https://console.anthropic.com/settings/keys)")
+
+                            # Current Configuration Display
+                            gr.Markdown("---")
+                            gr.Markdown("### CURRENT CONFIG")
+
+                            # Generate initial config HTML
+                            session_status = gr.HTML(
+                                value=create_config_html(
+                                    provider_choice="OpenAI",
+                                    agent_mode_choice="Supervisor (Multi-Agent)",
+                                    hf_key_input="",
+                                    openai_key_input="",
+                                    anthropic_key_input=""
+                                )
+                            )
+
+                            # About
+                            gr.Markdown("---")
+                            gr.Markdown("""
+                            ### ABOUT
+
+                            Built for the [Hugging Face MCP-1st-Birthday Hackathon](https://huggingface.co/MCP-1st-Birthday)
+                            """)
+
+                            gr.HTML("""
+                            <div style="text-align: center; margin: 16px 0;">
+                                <img src="https://cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/s4q7RzD3S-8xQ8ecXrSwb.png"
+                                     alt="Hugging Face MCP 1st Birthday"
+                                     style="max-width: 100%; height: auto; border-radius: 8px;">
+                            </div>
+                            """)
+
+                            gr.Markdown("""
+                            **MCP Servers:**
+                            - Modal GPU classifier (2 tools)
+                            - Nuthatch species database (7 tools)
+
+                            **Capabilities:**
+                            - Visual bird identification
+                            - Species reference images (Unsplash)
+                            - Audio recordings (xeno-canto)
+                            - Conservation status data
+                            - Taxonomic exploration
+                            - Separate tool log panel
+                            - Detailed execution tracking
+                            - Tool input/output inspection
+                            """)
+
+                with gr.Tab("📖 README"):
+                    with gr.Column(elem_classes=["readme-tab-container"]):
+                        try:
+                            with open("README.md", "r", encoding="utf-8") as f:
+                                readme_content = f.read()
+                            gr.Markdown(readme_content, elem_classes=["readme-markdown"])
+                        except FileNotFoundError:
+                            gr.Markdown("README.md not found", elem_classes=["readme-markdown"])
 
     # State for tool log
     tool_log_state = gr.State("*Waiting for tool calls...*")