src/streamlit_app.py

import streamlit as st
import pandas as pd
from PIL import Image
import base64
from io import BytesIO  
import numpy as np

# ─── Page config ──────────────────────────────────────────────────────────────
st.set_page_config(page_title="ExpertLongBench Leaderboard", layout="wide")

logo_small = Image.open("src/logo.png")
logo_image = Image.open("src/ExpertLongBench.png")

def encode_image(image):
    buffered = BytesIO()
    image.save(buffered, format="PNG")
    return base64.b64encode(buffered.getvalue()).decode("utf-8")

# Display logo
# buffered = BytesIO()
# logo_image.save(buffered, format="PNG")
# img_data = base64.b64encode(buffered.getvalue()).decode("utf-8")
img_logo = encode_image(logo_small)
img_data = encode_image(logo_image)

    # <div class="logo-container" style="display:flex; justify-content: center;">
st.markdown(
    f"""
    <div class="logo-container" style="display:flex; justify-content: center; align-items: center; gap: 20px;">
        <img src="data:image/png;base64,{img_logo}" style="width:60px;"/>
        <img src="data:image/png;base64,{img_data}" style="width:50%; max-width:700px;"/>
    </div>
    """,
    unsafe_allow_html=True
)

st.markdown(
    '''
    <div class="header">
        <br/>
        <p style="font-size:22px;">
        ExpertLongBench: Benchmarking Language Models on Expert-Level Long-Form Generation with Structured Checklists
        </p>
        <p style="font-size:20px;">
              📑 <a href="https://arxiv.org/abs/2506.01241">Paper</a> | 💻 <a href="https://github.com/launchnlp/ExpertLongBench">GitHub</a> | 🤗 <a href="https://huggingface.co/datasets/launch/ExpertLongBench">Public Dataset</a> |     
               ⚙️ <strong>Version</strong>: <strong>V1</strong> | <strong># Models</strong>: 12 | Updated: <strong>June 2025</strong>
        </p>
    </div>
    ''',
    unsafe_allow_html=True
)
# ─── Load data ────────────────────────────────────────────────────────────────
@st.cache_data
def load_data(path):
    df = pd.read_json(path, lines=True)
    score_cols = [f"T{i}" for i in range(1, 12)]
    df["Avg"] = df[score_cols].mean(axis=1).round(1)
    # df["Avg"] = np.ceil(df[score_cols].mean(axis=1) * 10) / 10
    # Compute rank per column (1 = best)
    for col in score_cols + ["Avg"]:
        df[f"{col}_rank"] = df[col].rank(ascending=False, method="min").astype(int)
    return df


# one page description
st.markdown("## 🏆 Leaderboard")
# st.markdown("**Leaderboard:** higher scores shaded green; best models bolded.")

tiers = ['F1', 'Accuracy']
selected_tier = st.selectbox('Select metric:', tiers)

if selected_tier == 'F1':
    df = load_data("src/models.json")

    # Precompute max ranks for color scaling
    score_cols = [f"T{i}" for i in range(1, 12)] + ["Avg"]
    max_ranks = {col: df[f"{col}_rank"].max() for col in score_cols}
    
    # Build raw HTML table
    cols = ["Model"] + [f"T{i}" for i in range(1,12)] + ["Avg"]
    html = "<table style='border-collapse:collapse; width:100%; font-size:14px;'>"
    # header
    html += "<tr>" + "".join(f"<th style='padding:6px;'>{col}</th>" for col in cols) + "</tr>"
    # rows
    for _, row in df.iterrows():
        html += "<tr>"
        for col in cols:
            val = row[col]
            if col == "Model":
                html += f"<td style='padding:6px; text-align:left;'>{val}</td>"
            else:
                rank = int(row[f"{col}_rank"])
                norm = 1 - (rank - 1) / ((max_ranks[col] - 1) or 1)
                # interpolate green (182,243,182) → white (255,255,255)
                r = int(255 - norm*(255-182))
                g = int(255 - norm*(255-243))
                b = 255
                bold = "font-weight:bold;" if rank == 1 else ""
                style = f"background-color:rgb({r},{g},{b}); padding:6px; {bold}"
                html += f"<td style='{style}'>{val}</td>"
        html += "</tr>"
    html += "</table>"
    st.markdown(html, unsafe_allow_html=True)
else:
    df2 = load_data("src/model_acc.json")

    # Precompute max ranks for color scaling
    score_cols = [f"T{i}" for i in range(1, 12)] + ["Avg"]
    max_ranks = {col: df2[f"{col}_rank"].max() for col in score_cols}
    # Build raw HTML table
    cols = ["Model"] + [f"T{i}" for i in range(1,12)] + ["Avg"]
    html = "<table style='border-collapse:collapse; width:100%; font-size:14px;'>"
    # header
    html += "<tr>" + "".join(f"<th style='padding:6px;'>{col}</th>" for col in cols) + "</tr>"
    # rows
    for _, row in df2.iterrows():
        html += "<tr>"
        for col in cols:
            # val = row[col]
            val = f"{row[col]:.1f}" if col != "Model" else row[col]
            if col == "Model":
                html += f"<td style='padding:6px; text-align:left;'>{val}</td>"
            else:
                rank = int(row[f"{col}_rank"])
                norm = 1 - (rank - 1) / ((max_ranks[col] - 1) or 1)
                # interpolate green (182,243,182) → white (255,255,255)
                r = int(255 - norm*(255-182))
                g = int(255 - norm*(255-243))
                b = 255
                bold = "font-weight:bold;" if rank == 1 else ""
                style = f"background-color:rgb({r},{g},{b}); padding:6px; {bold}"
                html += f"<td style='{style}'>{val}</td>"
        html += "</tr>"
    html += "</table>"
    st.markdown(html, unsafe_allow_html=True)  





pipeline_image = Image.open("src/pipeline.png")
buffered2 = BytesIO()
pipeline_image.save(buffered2, format="PNG")
img_data_pipeline = base64.b64encode(buffered2.getvalue()).decode("utf-8")
st.markdown("## 🧠 Abstract")
st.write(
"""
The paper introduces ExpertLongBench, an expert-level benchmark containing 11 tasks from 9 domains that reflect realistic expert workflows and applications.
Beyond question answering, the application-driven tasks in ExpertLongBench demand long-form outputs that can exceed 5,000 tokens and strict adherence to domain-specific requirements. Notably, each task includes rubrics, designed or validated by domain experts, to specify task requirements and guide output evaluation. Furthermore, we propose CLEAR to support accurate evaluation of long-form model outputs on our benchmark.

For fine-grained, expert-aligned evaluation, CLEAR derives checklists from model outputs and reference outputs by extracting information corresponding to items on the task-specific rubrics.
Checklist items for model outputs are then compared with corresponding items for reference outputs to assess their correctness, enabling grounded evaluation.  

We benchmark 11 large language models (LLMs) and analyze components in CLEAR, showing that:
(1) existing LLMs, with the top performer achieving only a 26.8% F1 score, require significant improvement for expert-level tasks;
(2) models can generate content corresponding to the required aspects, though often not accurately; and
(3) accurate checklist extraction and comparison in CLEAR can be achieved by open-weight models for more scalable and low-cost usage.
"""
)


st.markdown("## 🧰 Evaluation Pipeline")
st.markdown(
f"""
<div class="logo-container" style="display:flex; justify-content: center;">
    <img src="data:image/png;base64,{img_data_pipeline}" style="width:90%; max-width:900px;"/>
</div>
""",
unsafe_allow_html=True
)

st.markdown('## 🤖 Submit Your Model')
st.write(
"""
We provide both 🌐 **public** and 🔒 **private** subsets of the dataset.

🧪 We recommend starting with the public set for initial testing and development.

📤 You're welcome to submit your model for evaluation on the private set — just make sure to include your results on the public set.

👉 You can submit your model through the following link: [https://forms.gle/mWa6joCfgQnwXsxeA](https://forms.gle/mWa6joCfgQnwXsxeA)
"""
)

st.markdown('## 📢 We Welcome Contributions from the Community')
st.write(
"""
We actively encourage contributions from the research community — including:

- ✅ Proposing new tasks and contributing data
- 🔁 Suggesting improvements to existing ones
- 🧠 Sharing domain-specific insights ⚖️🧪🏥📚 

Your input is invaluable in making ExpertLongBench more representative and impactful across expert domains.

If you're interested in contributing or collaborating, feel free to reach out to us: Jie Ruan (jieruan@umich.edu), Inderjeet Nair (inair@umich.edu), Shuyang Cao (caoshuy@umich.edu), Lu Wang (wangluxy@umich.edu).

Let’s build better evaluations for expert-level AI — together 🚀🤝
"""
)

st.markdown("## 📚 Citation")
st.write("""
```bibtex
@article{ruan2025expertlongbench,
  title={ExpertLongBench: Benchmarking Language Models on Expert-Level Long-Form Generation Tasks with Structured Checklists},
  author={Ruan, Jie and Nair, Inderjeet and Cao, Shuyang and Liu, Amy and Munir, Sheza and Pollens-Dempsey, Micah and Chiang, Tiffany and Kates, Lucy and David, Nicholas and Chen, Sihan and others},
  journal={arXiv preprint arXiv:2506.01241},
  year={2025}
}
""")

# # ─── Tabs ──────────────────────────────────────────────────────────────────────
# tab1, tab2, tab3, tab4 = st.tabs(["🏆 Leaderboard", "🔍 Benchmark Details", "🤖 Submit Your Model", "🧩 Community Contributions Welcome"])

# with tab1:
#     # st.markdown("**Leaderboard:** higher scores shaded green; best models bolded.")
#     # Build raw HTML table
#     cols = ["Model"] + [f"T{i}" for i in range(1,12)] + ["Avg"]
#     html = "<table style='border-collapse:collapse; width:100%; font-size:14px;'>"
#     # header
#     html += "<tr>" + "".join(f"<th style='padding:6px;'>{col}</th>" for col in cols) + "</tr>"
#     # rows
#     for _, row in df.iterrows():
#         html += "<tr>"
#         for col in cols:
#             val = row[col]
#             if col == "Model":
#                 html += f"<td style='padding:6px; text-align:left;'>{val}</td>"
#             else:
#                 rank = int(row[f"{col}_rank"])
#                 norm = 1 - (rank - 1) / ((max_ranks[col] - 1) or 1)
#                 # interpolate green (182,243,182) → white (255,255,255)
#                 r = int(255 - norm*(255-182))
#                 g = int(255 - norm*(255-243))
#                 b = 255
#                 bold = "font-weight:bold;" if rank == 1 else ""
#                 style = f"background-color:rgb({r},{g},{b}); padding:6px; {bold}"
#                 html += f"<td style='{style}'>{val}</td>"
#         html += "</tr>"
#     html += "</table>"
#     st.markdown(html, unsafe_allow_html=True)

# with tab2:
#     pipeline_image = Image.open("src/pipeline.png")
#     buffered2 = BytesIO()
#     pipeline_image.save(buffered2, format="PNG")
#     img_data_pipeline = base64.b64encode(buffered2.getvalue()).decode("utf-8")
#     st.markdown("## Abstract")
#     st.write(
#     """
#     The paper introduces ExpertLongBench, an expert-level benchmark containing 11 tasks from 9 domains that reflect realistic expert workflows and applications.
#     Beyond question answering, the application-driven tasks in ExpertLongBench demand long-form outputs that can exceed 5,000 tokens and strict adherence to domain-specific requirements. Notably, each task includes rubrics, designed or validated by domain experts, to specify task requirements and guide output evaluation. Furthermore, we propose CLEAR to support accurate evaluation of long-form model outputs on our benchmark.

#     For fine-grained, expert-aligned evaluation, CLEAR derives checklists from model outputs and reference outputs by extracting information corresponding to items on the task-specific rubrics.
#     Checklist items for model outputs are then compared with corresponding items for reference outputs to assess their correctness, enabling grounded evaluation.  

#     We benchmark 11 large language models (LLMs) and analyze components in CLEAR, showing that:
#     (1) existing LLMs, with the top performer achieving only a 26.8% F1 score, require significant improvement for expert-level tasks;
#     (2) models can generate content corresponding to the required aspects, though often not accurately; and
#     (3) accurate checklist extraction and comparison in CLEAR can be achieved by open-weight models for more scalable and low-cost usage.
#     """
#     )

    
#     st.markdown("## Pipeline")
#     st.markdown(
#     f"""
#     <div class="logo-container" style="display:flex; justify-content: center;">
#         <img src="data:image/png;base64,{img_data_pipeline}" style="width:90%; max-width:900px;"/>
#     </div>
#     """,
#     unsafe_allow_html=True
# )

# with tab3:
#     st.markdown('## 🤖 Submit Your Model')
#     st.write(
#     """
#     We provide both 🌐 **public** and 🔒 **private** subsets of the dataset.
    
#     🧪 We recommend starting with the public set for initial testing and development.
    
#     📤 You're welcome to submit your model for evaluation on the private set — just make sure to include your results on the public set.
    
#     👉 You can submit your model through the following link: [https://forms.gle/mWa6joCfgQnwXsxeA](https://forms.gle/mWa6joCfgQnwXsxeA)
#     """
#     )

# with tab4:
#     st.markdown('## 📢 We Welcome Contributions from the Community')
#     st.write(
#     """
#     We actively encourage contributions from the research community — including:
    
#     - ✅ Proposing new tasks and contributing data
#     - 🔁 Suggesting improvements to existing ones
#     - 🧠 Sharing domain-specific insights ⚖️🧪🏥📚 
    
#     Your input is invaluable in making ExpertLongBench more representative and impactful across expert domains.
    
#     If you're interested in contributing or collaborating, feel free to reach out to us: Jie Ruan (jieruan@umich.edu), Inderjeet Nair (inair@umich.edu), Shuyang Cao (caoshuy@umich.edu), Lu Wang (wangluxy@umich.edu).
    
#     Let’s build better evaluations for expert-level AI — together 🚀🤝
#     """
#     )