challenges/home.py

import gradio as gr

from auth_utils import get_user_greeting

CHALLENGES = [
    {
        "id": "object-localization",
        "title": "Object Localization",
        "emoji": "🎯",
        "description": "Detect and segment objects in images taken by blind photographers. Submit bounding box and instance segmentation predictions evaluated with pycocotools.",
        "metrics": "bbox_mAP · bbox_AP50 · segm_mAP · segm_AP50",
        "route": "/object-localization",
        "active": True,
    },
    {
        "id": "vqa",
        "title": "Visual Question Answering",
        "emoji": "🤔",
        "description": "Answer open-ended questions about images taken by blind users. Models are evaluated on answer accuracy and relevance.",
        "metrics": "Coming soon",
        "route": "/vqa",
        "active": True,
    },
    {
        "id": "answer-therapy",
        "title": "VQA Answer Therapy",
        "emoji": "📍",
        "description": "Predict whether a visual question produces answers that all share the same image region. Evaluated with F1, Precision, and Recall across VizWiz and VQAv2 subsets.",
        "metrics": "Overall F1 · VizWiz F1 · VQAv2 F1",
        "route": "/answer-therapy",
        "active": True,
    },
]


def _single_card_html(c: dict) -> str:
    if c["active"]:
        return f"""
        <div style="border:2px solid #2563eb;border-radius:12px;padding:24px;
                    background:#f0f7ff;display:flex;flex-direction:column;
                    height:100%;box-sizing:border-box;">
            <div style="font-size:2rem;margin-bottom:8px;">{c['emoji']}</div>
            <h3 style="margin:0 0 6px 0;color:#1e40af;font-size:1rem;font-weight:700;">{c['title']}</h3>
            <p style="margin:0 0 10px 0;color:#374151;font-size:0.82rem;line-height:1.45;flex:1;">{c['description']}</p>
            <div style="background:#dbeafe;border-radius:5px;padding:4px 8px;
                        font-size:0.72rem;color:#1d4ed8;font-family:monospace;margin-bottom:14px;">
                📊 {c['metrics']}
            </div>
            <button onclick="window.location.href='{c['route']}'"
                style="background:#2563eb;color:white;border:none;padding:8px 0;width:100%;
                       border-radius:7px;font-size:0.85rem;font-weight:600;cursor:pointer;">
                Enter Challenge →
            </button>
        </div>"""
    else:
        return f"""
        <div style="border:2px solid #e5e7eb;border-radius:12px;padding:24px;
                    background:#f9fafb;display:flex;flex-direction:column;
                    height:100%;box-sizing:border-box;opacity:0.55;">
            <div style="font-size:2rem;margin-bottom:8px;">{c['emoji']}</div>
            <h3 style="margin:0 0 6px 0;color:#6b7280;font-size:1rem;font-weight:700;">{c['title']}</h3>
            <p style="margin:0 0 10px 0;color:#9ca3af;font-size:0.82rem;line-height:1.45;flex:1;">{c['description']}</p>
            <div style="background:#f3f4f6;border-radius:5px;padding:4px 8px;
                        font-size:0.72rem;color:#9ca3af;font-family:monospace;margin-bottom:14px;">
                📊 {c['metrics']}
            </div>
            <button disabled
                style="background:#e5e7eb;color:#9ca3af;border:none;padding:8px 0;width:100%;
                       border-radius:7px;font-size:0.85rem;font-weight:600;cursor:not-allowed;">
                🔒 Coming Soon
            </button>
        </div>"""


def _all_cards_html(challenges: list) -> str:
    cards = "".join(_single_card_html(c) for c in challenges)
    return f"""
    <div style="
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        width: 100%;
        box-sizing: border-box;
        padding: 4px 0;
        align-items: stretch;
    ">
        {cards}
    </div>
    """


def build_home(demo: gr.Blocks) -> None:
    with gr.Row():
        with gr.Column(scale=5):
            gr.Markdown("# 🏆 VizWiz Challenges")
            gr.Markdown(
                "Automated evaluation platform for VizWiz challenges — "
                "datasets collected from blind photographers using a smartphone app."
            )
        with gr.Column(scale=1, min_width=160):
            gr.LoginButton(size="lg")
            home_greeting = gr.Markdown("👋 Log in to submit.")

    gr.Markdown("---")
    gr.Markdown("## Challenges")
    gr.Markdown(
        "Choose a challenge to view its leaderboard, submit predictions, and track your results."
    )

    gr.HTML(_all_cards_html(CHALLENGES))

    gr.Markdown(
        "---\n*More challenges coming soon. "
        "All challenges use HuggingFace OAuth — log in once to access everything.*"
    )
    demo.load(get_user_greeting, outputs=[home_greeting])