app.py

import gradio as gr
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
# 读取数据
df = pd.read_csv("results.csv")
all_metrics = ["Idiom_Translation", "Lexical_Ambiguity", "Terminology_Localization",
               "Tense_Consistency", "Zero_Pronoun_Translation", "Cultural_Safety"]
all_columns=["Idiom_Translation", "Lexical_Ambiguity", "Terminology_Localization",
               "Tense_Consistency", "Zero_Pronoun_Translation", "Cultural_Safety","OverAll","Type"]

# 页面切换函数
def show_about():
    return gr.update(visible=False), gr.update(visible=True)

def show_main():
    return gr.update(visible=True), gr.update(visible=False)

# 雷达图绘制
def plot_radar(model_name):
    if model_name is None or model_name == "":
        return go.Figure()
    
    # 添加安全检查
    if len(df) == 0 or len(model_name)==0 or model_name=="" or model_name is None:
        fig = go.Figure()
        fig.add_trace(go.Scatterpolar(
            r=[0, 0, 0, 0, 0, 0],
            theta=all_metrics,
            fill='toself',
            line=dict(color='lightgray')
        ))
        fig.update_layout(
            polar=dict(
                radialaxis=dict(visible=True, range=[0, 10])
            ),
            title="请选择一个模型",
            title_x=0.5,
            showlegend=False,
            # height=400  # 固定高度避免滚动问题
        )
        return fig
    
    # 确保model_name在DataFrame中
    matching_rows = df[df["Model"] == model_name]
    if len(matching_rows) == 0:
        return go.Figure()
    
    row = matching_rows.iloc[0]
    
    # 确保只使用正确的指标数据
    values = [row[m] for m in all_metrics if m in row]
    
    if len(values) != len(all_metrics):
        return go.Figure()
    
    fig = go.Figure(data=go.Scatterpolar(
        r=values + [values[0]],  # 闭合雷达图
        theta=all_metrics + [all_metrics[0]],
        fill='toself',
        name=model_name
    ))
    
    fig.update_layout(
        polar=dict(
            radialaxis=dict(
                visible=True,
                range=[0, 10]
            )
        ),
        title=f"Performance Radar — {model_name}",
        title_x=0.5,
        showlegend=False
    )
    return fig
    # print(model_name)
    # row = df[df["Model"] == model_name].iloc[0]
    # print(row)
    # print(type(row['OverAll']))
    # r1=[row[m] for m in all_metrics]
    # print(r1)
    # fig = px.line_polar(
    #     r=r1,
    #     theta=all_metrics,
    #     line_close=True,
    #     title=f"Performance Radar — {model_name}",
    #     range_r=[0, 10],
    # )
    # fig.update_traces(fill="toself")
    # fig.update_layout(polar=dict(radialaxis=dict(visible=True, range=[0,10])))
    # return fig

# 表格过滤函数（根据搜索和列选择）
def filter_table(search_text, selected_columns):
    filtered_df = df[df["Model"].str.contains(search_text, case=False)]
    if "Model" not in selected_columns:
        selected_columns = ["Model"] + selected_columns  # 保证 Model 列始终显示
    return filtered_df[selected_columns]

def highlight_button(selected):
    updates = []
    for btn_name in ["llm", "about", "submit"]:
        if btn_name == selected:
            updates.append(gr.update(elem_classes="active"))  # 高亮
        else:
            updates.append(gr.update(elem_classes=""))        # 普通样式
    return updates[0], updates[1], updates[2]


# 自定义 CSS：借鉴 “display” 目录的设计思路
custom_css = """
<style>
/* 外层容器：让整个页面布局正常 */
.gradio-container {
    display: flex;
    flex-direction: column;
}

/* DataFrame 容器（Gradio 默认的 wrap & scroll 容器） */
.dataframe-container {
    position: relative;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

/* 表格内部滚动区域 */
.dataframe-container .wrap {
    max-height: 500px;    /* 控制表格内容高度 */
    overflow-y: auto;
    overflow-x: auto;
}

/* 表头固定（sticky） */
.dataframe-container table thead th {
    position: sticky;
    top: 0;
    background: #f9f9f9;
    z-index: 2;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

/* 表格布局与换行 */
.dataframe-container table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.dataframe-container td,
.dataframe-container th {
    word-wrap: break-word;
    white-space: normal;
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
}

/* 可选：水平滚动条样式 */
.dataframe-container .wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dataframe-container .wrap::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 4px;
}
.dataframe-container .wrap::-webkit-scrollbar-thumb:hover {
    background: #888;
}
</style>
"""

with gr.Blocks(theme="soft", title="DITING Leaderboard") as demo:
    # CSS 高亮按钮
    gr.HTML("""
    <style>
    button.active {
        background-color: #4CAF50 !important;
        color: white !important;
    }
    button {
        transition: all 0.2s;
    }
    /* 添加列名换行样式 */
    /* 可选：调整表格单元格样式 */
    .wrap-columns td {
        white-space: normal !important;
        word-wrap: break-word !important;
        # max-width: 120px;
        text-align: center;
        padding: 8px 4px;
    }
    
    </style>
    """)
    # 顶部标题
    gr.Markdown(
    """
    <div style="text-align:center">
        <h1>🧭 DITING Leaderboard</h1>
        <b>A Multi-Agent Evaluation Framework for Web Novel Translation</b><br>
             <p align="center">
                <a href="https://huggingface.co/papers/2510.09116">🤗 Hugging Face</a> |
                <a href="https://arxiv.org/pdf/2510.09116">📄 Arxiv</a> |
                <a href="https://github.com/WHUNextGen/DITING">💻 GitHub</a>
            </p>
    </div>
    """,
    elem_id="centered-title"
    )
    with gr.Accordion("📚Citation", open=False):
        gr.Markdown("""```bibtex
            @misc{zhang2025ditingmultiagentevaluationframework,
                    title={DITING: A Multi-Agent Evaluation Framework for Benchmarking Web Novel Translation}, 
                    author={Enze Zhang and Jiaying Wang and Mengxi Xiao and Jifei Liu and Ziyan Kuang and Rui Dong and Eric Dong and Sophia Ananiadou and Min Peng and Qianqian Xie},
                    year={2025},
                    eprint={2510.09116},
                    archivePrefix={arXiv},
                    primaryClass={cs.CL},
                    url={https://arxiv.org/abs/2510.09116}, 
            }
    """)
    with gr.Row():
        with gr.Column(min_width=100):
            llm_btn = gr.Button("LLM Benchmark", elem_id="btn-llm",elem_classes='active')
        with gr.Column(min_width=100):
            about_btn = gr.Button("About", elem_id="btn-about")
        with gr.Column(min_width=100):
            submit_btn = gr.Button("Submit here!", elem_id="btn-submit")

    with gr.Column(visible=True) as main_content:
        # 上方：左侧搜索/列选择，右侧雷达图
        with gr.Row():
            with gr.Column(scale=1):
                search_input = gr.Textbox(label="🔎 Search Model", placeholder="Enter model name...")
                column_selector = gr.CheckboxGroup(
                    choices=all_columns,
                    label="Select Metrics to Display",
                    value=all_columns
                )
                
            with gr.Column(scale=2):
                model_selector = gr.Dropdown(
                    choices=df["Model"].tolist(),
                    label="Select a Model for Radar",
                    value=None
                )
                radar_plot = gr.Plot(label="Radar Visualization")
                model_selector.change(plot_radar, model_selector, radar_plot)
    # 下方大表格（不可编辑）
        table = gr.Dataframe(
            df,
            interactive=False,
            wrap=True,
            label="Full Model Evaluation Table",
            elem_classes="wrap-columns"  # 添加自定义类名以便更精确地应用样式

        )
        
     
    with gr.Column(visible=False) as about_content:
        gr.Markdown("""
        # About DITING Leaderboard
        
        ## Overview
        Large language models (LLMs) have substantially advanced machine translation (MT), yet their effectiveness in translating web novels remains unclear. Existing benchmarks rely on surface-level metrics that fail to capture the distinctive traits of this genre. To address these gaps, we introduce DITING, the first comprehensive evaluation framework for web novel translation, assessing narrative and cultural fidelity across six dimensions: idiom translation, lexical ambiguity, terminology localization, tense consistency, zero-pronoun resolution, and cultural safety, supported by over 18K expert-annotated Chinese-English sentence pairs. We further propose AgentEval, a reasoning-driven multi-agent evaluation framework that simulates expert deliberation to assess translation quality beyond lexical overlap, achieving the highest correlation with human judgments among seven tested automatic metrics. To enable metric comparison, we develop MetricAlign, a meta-evaluation dataset of 300 sentence pairs annotated with error labels and scalar quality scores. Comprehensive evaluation of fourteen open, closed, and commercial models reveals that Chinese-trained LLMs surpass larger foreign counterparts, and that DeepSeek-V3 delivers the most faithful and stylistically coherent translations. Our work establishes a new paradigm for exploring LLM-based web novel translation and provides public resources to advance future research.
        
        ## Evaluation Metrics
        Our benchmark assesses models across six key dimensions:
        
        |           Task           |         Dimension         | Type  |            Scoring Criteria (2 / 1 / 0)            |
        | :----------------------: | :-----------------------: | :---: | :------------------------------------------------: |
        |    Idiom Translation     |    Idiomatic Fidelity     | Spec. |   Natural idiom use / Stiff / Literal or omitted   |
        |                          |    Cultural Adaptation    | Gen.  |  Localized meaning / Partly adapted / Misleading   |
        |                          |       Tone & Style        | Gen.  | Preserves tone / Slight drift / Lost or wrong tone |
        |    Lexical Ambiguity     |   Contextual Resolution   | Spec. |       Correct sense / Approx. / Wrong sense        |
        |                          | Pragmatic Appropriateness | Gen.  |        Natural usage / Awkward / Unnatural         |
        |                          |   Information Integrity   | Gen.  |         Complete / Minor gaps / Distorted          |
        | Terminology Localization |   Terminology Adequacy    | Spec. |         Accurate / Acceptable / Incorrect          |
        |                          |   Translation Strategy    | Gen.  |         Adapted / Partial / Blind transl.          |
        |                          |          Fluency          | Gen.  |         Smooth / Minor issue / Disruptive          |
        |    Tense Consistency     |      Tense Cohesion       | Spec. |          Consistent / Mostly ok / Broken           |
        |                          |  Structural Consistency   | Gen.  |     Clear order / Slightly unclear / Illogical     |
        |                          |        Naturalness        | Gen.  |          Fluent / Minor flaw / Unnatural           |
        | Zero-Pronoun Translation |     Referent Recovery     | Spec. |     All restored / Partial / Wrong or missing      |
        |                          |  Structural Completeness  | Gen.  |         Complete / Ambiguous / Fragmented          |
        |                          |        Naturalness        | Gen.  |            Fluent / Awkward / Unnatural            |
        |     Cultural Safety      |    Content Compliance     | Spec. |           Safe / Borderline / Offensive            |
        |                          |      Value Alignment      | Gen.  |          Positive / Minor issue / Biased           |
        |                          |  Sensitive Info Handling  | Gen.  |             Proper / Partial / Unsafe              |
        
        """)
        # with gr.Accordion("📚Citation", open=False):
        #     gr.Markdown("""```bibtex
        #         @misc{zhang2025ditingmultiagentevaluationframework,
        #               title={DITING: A Multi-Agent Evaluation Framework for Benchmarking Web Novel Translation}, 
        #               author={Enze Zhang and Jiaying Wang and Mengxi Xiao and Jifei Liu and Ziyan Kuang and Rui Dong and Eric Dong and Sophia Ananiadou and Min Peng and Qianqian Xie},
        #               year={2025},
        #               eprint={2510.09116},
        #               archivePrefix={arXiv},
        #               primaryClass={cs.CL},
        #               url={https://arxiv.org/abs/2510.09116}, 
        #         }
        #     """)
        

    # 联动搜索和列选择更新表格
    search_input.change(filter_table, [search_input, column_selector], table)
    column_selector.change(filter_table, [search_input, column_selector], table)

     # 导航按钮绑定：切换页面 + 高亮按钮
    llm_btn.click(lambda: (*show_main(), *highlight_button("llm")),
                  None, [main_content, about_content, llm_btn, about_btn, submit_btn])
    about_btn.click(lambda: (*show_about(), *highlight_button("about")),
                    None, [main_content, about_content, llm_btn, about_btn, submit_btn])
    submit_btn.click(lambda: highlight_button("submit"),
                 None, [llm_btn, about_btn, submit_btn])
    submit_btn.click(lambda: gr.Info("Submission portal coming soon!"),
                 None, None)
demo.launch()