app.py

import json
import gradio as gr

with open("results.json") as f:
    raw_data = json.load(f)

# Extract task info
task_name = raw_data.get("task", "Leaderboard")
task_description = raw_data.get("description", "")

# Extract rows from the new format
data = raw_data["datasets"][0]["sota"]["rows"]

# Sort by driving score
data = sorted(data, key=lambda x: float(x["metrics"]["Driving Score"]), reverse=True)

rows_html = ""
for idx, d in enumerate(data, 1):
    # Extract paper info
    paper_title = d.get("paper_title", "")
    paper_url = d.get("paper_url", "")
    paper = f'<a href="{paper_url}" target="_blank">📄 {paper_title}</a>' if paper_url and paper_title else ""
    
    # Extract repository info
    code_links = d.get("code_links", [])
    if code_links and len(code_links) > 0:
        repo_url = code_links[0]["url"]
        repo = f'<a href="{repo_url}" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>'
    else:
        repo = "-"
    
    row_class = "row-even" if idx % 2 == 0 else "row-odd"
    rows_html += f"""
    <tr class="{row_class}">
        <td class="model-name">{d["model_name"]}</td>
        <td class="score">{d["metrics"]["Driving Score"]}</td>
        <td class="paper-cell">{paper}</td>
        <td class="repo-cell">{repo}</td>
    </tr>
    """

html = f"""
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

* {{
    box-sizing: border-box;
}}

.leaderboard-container {{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}}

.task-header {{
    margin-bottom: 32px;
}}

.task-title {{
    font-size: 32px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}}

.task-description {{
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 8px 0;
}}

.last-updated {{
    font-size: 13px;
    color: #9ca3af;
    margin: 0 0 32px 0;
    font-style: italic;
}}

.table-leaderboard {{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 14px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}}

.table-leaderboard thead th {{
    text-align: left;
    padding: 14px 16px;
    font-weight: 500;
    font-size: 13px;
    color: #d1d5db;
    background: #fafbfc;
    border-bottom: 1px solid #f9f9f9;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}}

.table-leaderboard tbody tr {{
    transition: background-color 0.15s ease;
}}

.table-leaderboard tbody tr:not(:last-child) td {{
    border-bottom: 1px solid #fafafa;
}}

.table-leaderboard tbody tr:hover {{
    background-color: #f9fafb;
}}

.table-leaderboard td {{
    padding: 14px 16px;
    color: #374151;
    vertical-align: middle;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}}

.table-leaderboard .model-name {{
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}}

.table-leaderboard .score {{
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}}

.table-leaderboard .paper-cell {{
    max-width: 600px;
    line-height: 1.5;
}}

.table-leaderboard .paper-cell a {{
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
}}

.table-leaderboard .paper-cell a:hover {{
    text-decoration: underline;
}}

.table-leaderboard .repo-cell {{
    text-align: center;
    width: 80px;
}}

.table-leaderboard .repo-cell a {{
    color: #9ca3af;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}}

.table-leaderboard .repo-cell a:hover {{
    color: #3b82f6;
}}
</style>

<div class="leaderboard-container">
    <div class="task-header">
        <h1 class="task-title">{task_name}</h1>
        <p class="task-description">{task_description}</p>
    </div>
    
    <table class="table-leaderboard">
    <thead>
    <tr>
      <th>Model Name</th>
      <th>Driving Score ↑</th>
      <th>Paper Title</th>
      <th style="text-align: center;">Repository</th>
    </tr>
    </thead>
    <tbody>
    {rows_html}
    </tbody>
    </table>
</div>
"""


with gr.Blocks(css="""
    #component-0 {
        max-width: 1400px;
        margin: auto;
        padding: 40px 20px;
    }
""") as demo:
    gr.HTML(html)

demo.launch()