.history/app_20250318191111.py

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

# # Set up page config
# st.set_page_config(
#     page_title="VeriFact Leaderboard",
#     layout="wide"
# )

# # load header
# with open("_header.md", "r") as f:
#     HEADER_MD = f.read()

# # Load the image
# image = Image.open("test.png")
# logo_image = Image.open("./factrbench.png")

# # Custom CSS for the page
# st.markdown(
#     """
#     <style>
#     @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400&display=swap');

#     html, body, [class*="css"] {
#         font-family: 'Arial', sans-serif; /* or use a similar sans-serif font */
#         background-color: #f9f9f9;  /* Light grey background */
#     }

#     .title {
#         font-size: 42px;
#         font-weight: bold;
#         text-align: center;
#         color: #333;
#         margin-bottom: 5px;
#     }

#     .description {
#         font-size: 22px;
#         text-align: center;
#         margin-bottom: 30px;
#         color: #555;
#     }

#     .header, .metric {
#         align-items: left;
#         font-family: 'Arial', sans-serif; /* or use a similar sans-serif font */
#         margin-bottom: 20px;
#     }

#     .container {
#         max-width: 1000px;  
#         margin: 0 auto;  
#         padding: 5px;
#     }

#     table {
#         width: 100%;
#         border-collapse: collapse;
#         border-radius: 10px;
#         overflow: hidden;
#     }

#     th, td {
#         padding: 8px;
#         text-align: center;
#         border: 1px solid #ddd;
#         font-family: 'Arial', sans-serif; /* or use a similar sans-serif font */
#         font-size: 16px;
#         transition: background-color 0.3s;
#     }

#     th {
#         background-color: #f2f2f2;
#         font-weight: bold;
#     }

#     td:hover {
#         background-color: #eaeaea;
#     }
#     </style>
#     """,
#     unsafe_allow_html=True
# )

# # Display title and description
# st.markdown('<div class="container">', unsafe_allow_html=True)
# # st.image(logo_image, output_format="PNG", width=200)

# # Convert the image to base64
# buffered = BytesIO()
# logo_image.save(buffered, format="PNG")
# img_data = base64.b64encode(buffered.getvalue()).decode("utf-8")
# st.markdown(
#     f"""
#     <style>
#     .logo-container {{
#         display: flex;
#         justify-content: flex-start;  /* Aligns to the left */
#     }}
#     .logo-container img {{
#         width: 50%;  /* Adjust this to control the width, e.g., 50% of container width */
#         margin: 0 auto; 
#         max-width: 700px;  /* Set a maximum width */
#         background-color: transparent;
#     }}
#     </style>
#     <div class="logo-container">
#         <img src="data:image/png;base64,{img_data}" alt="VeriFact Leaderboard Logo">
#     </div>
#     """,
#     unsafe_allow_html=True
# )

# # header_md_text = HEADER_MD # make some parameters later
# # gr.Markdown(header_md_text, elem_classes="markdown-text") 

# st.markdown(
#     '''
#     <div class="header">
#         <br/>
#         <p style="font-size:22px;">
#         VERIFACT: Enhancing Long-Form Factuality Evaluation with Refined Fact Extraction and Reference Facts
#         </p>
#         <p style="font-size:20px;">
#             # 📑 <a href="">Paper</a> | 💻 <a href="">GitHub</a> | 🤗 <a href="">HuggingFace</a> 
#             ⚙️ <strong>Version</strong>: <strong>V1</strong> | <strong># Models</strong>: 8 | Updated: <strong>???</strong>
#         </p>
#     </div>
#     ''',
#     unsafe_allow_html=True
# )


# # st.markdown('<div class="title">VeriFact Leaderboard</div>',
# #             unsafe_allow_html=True)
# # st.markdown('<div class="description">Long-Form Factuality Evaluation with Refined Fact Extraction and Reference Facts</div>', unsafe_allow_html=True)
# st.markdown('</div>', unsafe_allow_html=True)

# # Load the data
# data_path = "verifact_data.csv"
# df = pd.read_csv(data_path)

# # Assign ranks within each tier based on factuality_score
# df['rank'] = df.groupby('tier')['Overall'].rank(
#     ascending=False, method='min').astype(int)

# # Replace NaN values with '-'
# df.fillna('-', inplace=True)

# df['original_order'] = df.groupby('tier').cumcount()

# # Create tabs
# st.markdown("""
#     <style>
#         .stTabs [data-baseweb="tab-list"] button [data-testid="stMarkdownContainer"] p {
#             font-size: 20px;
#         }
#     </style>
# """, unsafe_allow_html=True)

# tab1, tab2 = st.tabs(["Leaderboard", "Benchmark Details"])

# # Tab 1: Leaderboard
# with tab1:
#     # df['original_order'] = df.groupby('tier').cumcount()
#     # print(df['original_order'])
    
#     # st.markdown('<div class="title">Leaderboard</div>', unsafe_allow_html=True)
#     st.markdown('<div class="tab-content">', unsafe_allow_html=True)

#     st.markdown("""
#     <div class="metric" style="font-size:20px; font-weight: bold;">
#     Metrics Explanation
#     </div>
#     """, unsafe_allow_html=True)

#     st.markdown("""
#     <div class="metric" style="font-size:16px;">
#         <br/>
#         <p>
#         <strong> 🎯 Factual Precision </strong> measures the ratio of supported units divided by all units averaged over model responses. <strong> 🌀 Hallucination Score </strong> quantifies the incorrect or inconclusive contents within a model response, as described in the paper. We also provide statistics on the average length of the response in terms of the number of tokens, the average verifiable units existing in the model responses (<strong>Avg. # Units</strong>), the average number of units labelled as undecidable (<strong>Avg. # Undecidable</strong>), and the average number of units labelled as unsupported (<strong>Avg. # Unsupported</strong>).  
#         </p>
#         <p>
#         🔒 for closed LLMs; 🔑 for open-weights LLMs; 🚨 for newly added models
#         </p>
#     </div>
#     """,
#     unsafe_allow_html=True
#     )
    
#     st.markdown("""
#     <style>
#         /* Selectbox text */
#         div[data-baseweb="select"] > div {
#             font-size: 20px;
#         }
        
#         /* Dropdown options */
#         div[role="listbox"] ul li {
#             font-size: 20px !important;
#         }
        
#         /* Checkbox label */
#         .stCheckbox label p {
#             font-size: 20px !important;
#         }
        
#         /* Selectbox label */
#         .stSelectbox label p {
#             font-size: 20px !important;
#         }
#     </style>
# """, unsafe_allow_html=True)
    
#     # Dropdown menu to filter tiers
#     tiers = ['All Metrics', 'Precision', 'Recall', 'F1']
#     selected_tier = st.selectbox('Select metric:', tiers)

#     # Filter the data based on the selected tier
#     if selected_tier != 'All Metrics':
#         filtered_df = df[df['tier'] == selected_tier]
#     else:
#         filtered_df = df

#     sort_by_factuality = st.checkbox('Sort by overall score')

#     # Sort the dataframe based on Factuality Score if the checkbox is selected
#     if sort_by_factuality:
#         updated_filtered_df = filtered_df.sort_values(
#             by=['tier', 'Overall'], ascending=[True, False]
#         )
#     else:
#         updated_filtered_df = filtered_df.sort_values(
#             by=['tier', 'original_order']
#         )

#     # Create HTML for the table
#     if selected_tier == 'All Metrics':
#         html = '''
#         <table>
#             <thead>
#                 <tr>
#                     <th>Metric</th>
#                     <th>Rank</th>
#                     <th>Model</th>
#                     <th>Factbench</th>
#                     <th>Reddit</th>
#                     <th>Overall</th>
#                 </tr>
#             </thead>
#             <tbody>
#         '''
#     else:
#         html = '''
#         <table>
#             <thead>
#                 <tr>
#                     <th>Rank</th>
#                     <th>Model</th>
#                     <th>Factbench</th>
#                     <th>Reddit</th>
#                     <th>Overall</th>
#                 </tr>
#             </thead>
#             <tbody>
#         '''

#     # Generate the rows of the table
#     current_tier = None
#     for i, row in updated_filtered_df.iterrows():
#         html += '<tr>'

#         # Only display the 'Tier' column if 'All Tiers' is selected
#         if selected_tier == 'All Metrics':
#             if row['tier'] != current_tier:
#                 current_tier = row['tier']
#                 html += f'<td rowspan="8" style="vertical-align: middle;">{current_tier}</td>'

#         # Fill in model and scores
#         html += f'''
#             <td>{row['rank']}</td>
#             <td>{row['model']}</td>
#             <td>{row['FactBench']}</td>
#             <td>{row['Reddit']}</td>
#             <td>{row['Overall']}</td>
#         </tr>
#     '''

#     # Close the table
#     html += '''
#     </table>
#     '''

#     # Display the table
#     st.markdown(html, unsafe_allow_html=True)

#     st.markdown('</div>', unsafe_allow_html=True)

# # Tab 2: Details
# with tab2:
#     st.markdown('<div class="tab-content">', unsafe_allow_html=True)

#     # st.markdown('<div class="title"></div>',
#     #             unsafe_allow_html=True)
#     st.image(image, use_column_width=True)

#     st.markdown('### VERIFY: A Pipeline for Factuality Evaluation')
#     st.write(
#         "Language models (LMs) are widely used by an increasing number of users, "
#         "underscoring the challenge of maintaining factual accuracy across a broad range of topics. "
#         "We present VERIFY (Verification and Evidence Retrieval for Factuality evaluation), "
#         "a pipeline to evaluate LMs' factual accuracy in real-world user interactions."
#     )

#     st.markdown('### Content Categorization')
#     st.write(
#         "VERIFY considers the verifiability of LM-generated content and categorizes content units as "
#         "`supported`, `unsupported`, or `undecidable` based on the retrieved web evidence. "
#         "Importantly, VERIFY's factuality judgments correlate better with human evaluations than existing methods."
#     )

#     st.markdown('### Hallucination Prompts & FactBench Dataset')
#     st.write(
#         "Using VERIFY, we identify 'hallucination prompts' across diverse topics—those eliciting the highest rates of "
#         "incorrect or unverifiable LM responses. These prompts form FactBench, a dataset of 985 prompts across 213 "
#         "fine-grained topics. Our dataset captures emerging factuality challenges in real-world LM interactions and is "
#         "regularly updated with new prompts."
#     )

#     st.markdown('</div>', unsafe_allow_html=True)

# # # Tab 3: Links
# # with tab3:
# #     st.markdown('<div class="tab-content">', unsafe_allow_html=True)

# #     st.markdown('<div class="title">Submit your model information on our Github</div>',
# #                 unsafe_allow_html=True)

# #     st.markdown(
# #         '[Test your model locally!](https://github.com/FarimaFatahi/FactEval)')
# #     st.markdown(
# #         '[Submit results or issues!](https://github.com/FarimaFatahi/FactEval/issues/new)')

# #     st.markdown('</div>', unsafe_allow_html=True)


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

# Set up page config
st.set_page_config(
    page_title="VeriFact Leaderboard",
    layout="wide"
)

# load header
with open("_header.md", "r") as f:
    HEADER_MD = f.read()

# Load the image
image = Image.open("test.png")
logo_image = Image.open("./factrbench.png")

# Custom CSS for the page
st.markdown(
    """
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400&display=swap');

    html, body, [class*="css"] {
        font-family: 'Arial', sans-serif;
        background-color: #f9f9f9;
    }

    .title {
        font-size: 42px;
        font-weight: bold;
        text-align: center;
        color: #333;
        margin-bottom: 5px;
    }

    .description {
        font-size: 22px;
        text-align: center;
        margin-bottom: 30px;
        color: #555;
    }

    .header, .metric {
        align-items: left;
        margin-bottom: 20px;
    }

    .container {
        max-width: 1000px;  
        margin: 0 auto;  
        padding: 5px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 10px;
        overflow: hidden;
    }

    th, td {
        padding: 8px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    td:hover {
        background-color: #eaeaea;
    }
    </style>
    """,
    unsafe_allow_html=True
)

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

st.markdown(
    f"""
    <div class="logo-container" style="display:flex; justify-content: flex-start;">
        <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;">
        VERIFACT: Enhancing Long-Form Factuality Evaluation with Refined Fact Extraction and Reference Facts
        </p>
        <p style="font-size:20px;">
            # 📑 <a href="">Paper</a> | 💻 <a href="">GitHub</a> | 🤗 <a href="">HuggingFace</a> 
            ⚙️ <strong>Version</strong>: <strong>V1</strong> | <strong># Models</strong>: 8 | Updated: <strong>???</strong>
        </p>
    </div>
    ''',
    unsafe_allow_html=True
)

# Load the data
data_path = "verifact_data.csv"
df = pd.read_csv(data_path)

# Assign ranks within each tier
df['rank'] = df.groupby('tier')['Overall'].rank(
    ascending=False, method='min').astype(int)

df.fillna('-', inplace=True)
df['original_order'] = df.groupby('tier').cumcount()

# Tabs
tab1, tab2 = st.tabs(["Leaderboard", "Benchmark Details"])

# Tab 1: Leaderboard
with tab1:
    st.markdown('<div class="metric" style="font-size:20px; font-weight: bold;">Metrics Explanation</div>', unsafe_allow_html=True)

    st.markdown("""
        <div class="metric" style="font-size:16px;">
            <p>
            <strong> 🎯 Factual Precision </strong>, <strong> 🌀 Hallucination Score </strong> and other statistics are described in the paper.  
            🔒 for closed LLMs; 🔑 for open-weights LLMs; 🚨 for newly added models
            </p>
        </div>
    """, unsafe_allow_html=True)

    tiers = ['All Metrics', 'Precision', 'Recall', 'F1']
    selected_tier = st.selectbox('Select metric:', tiers)

    if selected_tier != 'All Metrics':
        filtered_df = df[df['tier'] == selected_tier]
    else:
        filtered_df = df

    sort_by_factuality = st.checkbox('Sort by overall score')
    if sort_by_factuality:
        updated_filtered_df = filtered_df.sort_values(by=['tier', 'Overall'], ascending=[True, False])
    else:
        updated_filtered_df = filtered_df.sort_values(by=['tier', 'original_order'])

    # 缩小表格：用容器包裹并限制最大宽度
    html = '<div style="max-width: 1000px; margin: 0 auto;"><table>'
    html += """<thead><tr>""" + ("<th>Metric</th>" if selected_tier == 'All Metrics' else "") + "<th>Rank</th><th>Model</th><th>Factbench</th><th>Reddit</th><th>Overall</th></tr></thead><tbody>"

    current_tier = None
    for _, row in updated_filtered_df.iterrows():
        html += '<tr>'
        if selected_tier == 'All Metrics' and row['tier'] != current_tier:
            current_tier = row['tier']
            html += f'<td rowspan="8" style="vertical-align: middle;">{current_tier}</td>'
        html += f'<td>{row["rank"]}</td><td>{row["model"]}</td><td>{row["FactBench"]}</td><td>{row["Reddit"]}</td><td>{row["Overall"]}</td></tr>'

    html += '</tbody></table></div>'
    st.markdown(html, unsafe_allow_html=True)

# Tab 2: Benchmark Details
with tab2:
    # 图片剧中显示
    buffered_img = BytesIO()
    image.save(buffered_img, format="PNG")
    image_data = base64.b64encode(buffered_img.getvalue()).decode("utf-8")

    st.markdown(f'''<div style="text-align:center;">
        <img src="data:image/png;base64,{image_data}" style="max-width:800px; width:100%; height:auto;" />
    </div>''', unsafe_allow_html=True)

    st.markdown('### VERIFY: A Pipeline for Factuality Evaluation')
    st.write("Language models (LMs) are widely used by an increasing number of users, underscoring the challenge of maintaining factual accuracy across a broad range of topics. We present VERIFY (Verification and Evidence Retrieval for Factuality evaluation), a pipeline to evaluate LMs' factual accuracy in real-world user interactions.")

    st.markdown('### Content Categorization')
    st.write("VERIFY considers the verifiability of LM-generated content and categorizes content units as `supported`, `unsupported`, or `undecidable` based on the retrieved web evidence. Importantly, VERIFY's factuality judgments correlate better with human evaluations than existing methods.")

    st.markdown('### Hallucination Prompts & FactBench Dataset')
    st.write("Using VERIFY, we identify 'hallucination prompts' across diverse topics—those eliciting the highest rates of incorrect or unverifiable LM responses. These prompts form FactBench, a dataset of 985 prompts across 213 fine-grained topics. Our dataset captures emerging factuality challenges in real-world LM interactions and is regularly updated with new prompts.")