Upload app.py

app.py

@@ -0,0 +1,679 @@
+import streamlit as st
+import base64
+import pandas as pd
+import os
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+os.path.join(BASE_DIR, "utils", "title_icon.png")
+
+# 读取图片并转为 base64
+def get_image_base64(image_path):
+    with open(image_path, "rb") as f:
+        return base64.b64encode(f.read()).decode()
+
+# 设置 dataframe 样式：斑马纹 + 表头黑色加粗
+def style_dataframe(df):
+    def row_style(row):
+        if row.name % 2 == 0:
+            return ['background-color: #f9f9f9'] * len(row)
+        return ['background-color: #ffffff'] * len(row)
+
+    return df.style.set_table_styles([
+        # 表头样式
+        {'selector': 'th', 'props': [
+            ('background-color', '#f0f0f0'),
+            ('color', '#000000'),
+            ('font-weight', 'bold'),
+            ('text-align', 'left'),
+            ('padding', '8px')
+        ]},
+        # 单元格样式
+        {'selector': 'td', 'props': [
+            ('text-align', 'left'),
+            ('padding', '8px')
+        ]},
+        # 表头文字样式
+        {'selector': 'th.col_heading', 'props': [
+            ('background-color', '#f0f0f0'),
+            ('color', '#000000'),
+            ('font-weight', 'bold')
+        ]}
+    ]).apply(row_style, axis=1)
+
+def df_to_html_table(df, height=400):
+    html = f'<div style="max-height: {height}px; overflow-y: auto; border: 1px solid #d0d0d0; border-radius: 8px;">'
+    html += '<table style="width: 100%; border-collapse: collapse; font-size: 14px;">'
+    
+    # 调整表头：font-weight 改为 normal，padding 第一个值调小
+    html += '<thead><tr style="background-color: #e8e8e8; position: sticky; top: 0; z-index: 1;">'
+    for col in df.columns:
+        html += f'<th style="padding: 6px 14px; text-align: left; font-weight: normal; font-size: 15px; color: #000; border-bottom: 2px solid #ccc;">{col}</th>'
+    html += '</tr></thead><tbody>'
+    
+    # 调整单元格：padding 第一个值调小
+    for i, (_, row) in enumerate(df.iterrows()):
+        bg = '#f5f5f5' if i % 2 == 0 else '#ffffff'
+        html += f'<tr style="background-color: {bg};">'
+        for val in row:
+            html += f'<td style="padding: 4px 14px; text-align: left; border-bottom: 1px solid #eee;">{val}</td>'
+        html += '</tr>'
+    
+    html += '</tbody></table></div>'
+    return html
+
+st.set_page_config(
+    page_title="RAGRouter-Bench: A Dataset and Benchmark for Adaptive RAG Routing",
+    layout="wide", 
+    initial_sidebar_state="expanded",
+)
+
+#背景颜色
+st.markdown("""
+<style>
+/* 隐藏顶部深色栏 */
+header[data-testid="stHeader"] {
+    background-color: #ffffff;
+}
+
+/* 左边侧边栏 - 灰色背景 */
+[data-testid="stSidebar"] {
+    display: none;
+}
+
+/* 右边主内容区 - 白色背景 */
+[data-testid="stMain"] {
+    background-color: #ffffff;
+}
+
+/* 隐藏顶部 header 的高度 */
+header[data-testid="stHeader"] {
+    height: 0 !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+}
+
+/* 减少顶部间距 - 调整这个值 */
+.block-container {
+    padding-top: 0 !important;  /* 移除顶部留白 */
+    max-width: 1200px;      /* 最大宽度 */
+    padding-left: 2rem;     /* 左边距 */
+    padding-right: 2rem;    /* 右边距 */
+}
+
+/* 标签页字体大小和样式 */
+.stTabs [data-baseweb="tab"] p {
+    font-size: 18px !important;      /* 字体大小 */
+    font-weight: bold;    /* 加粗 */
+    padding: 10px 20px;   /* 内边距 */
+    color: #333333;       /* 字体颜色 */
+}
+
+/* 给所有 tabs 区域加边框 */
+[data-testid="stTabs"] {
+    border: 2px solid #e0e0e0;
+    border-radius: 15px;
+    padding: 5px 5px 35px 20px;
+    background-color: #fafafa;
+    margin-bottom: 5px;
+}
+
+/* tabs 固定高度和滚动 (Leaderboard 700px) */
+.stTabs [data-baseweb="tab-panel"] {
+    max-height: 600px !important;
+    overflow-y: auto !important;
+}
+
+/* 表格内容左对齐 - glide-data-grid */
+[data-testid="stDataFrame"] .dvn-scroller,
+[data-testid="stDataFrame"] [class*="cell"],
+[data-testid="stDataFrame"] div[style*="justify-content"] {
+    text-align: left !important;
+    justify-content: flex-start !important;
+}
+
+/* glide data editor 单元格 */
+.gdg-cell {
+    justify-content: flex-start !important;
+}
+
+code {
+    background-color: transparent !important;
+    color: #333 !important;
+}
+
+pre {
+    background-color: #f5f5f5 !important;
+    color: #333 !important;
+}
+
+pre code {
+    background-color: transparent !important;
+    color: #333 !important;
+}
+</style>
+""", unsafe_allow_html=True)
+
+#标题
+title_icon = get_image_base64("utils/title_icon.png")
+st.markdown(f"""
+<div style="background-color: #f0f0f0;
+            padding: 20px 20px;
+            margin: 0 -30rem 20px -30rem;">
+    <h1 style="text-align: center;
+               font-size: 36px;
+               background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+               -webkit-background-clip: text;
+               -webkit-text-fill-color: transparent;
+               padding: 5px;
+               margin: 0;">
+        <img src="data:image/png;base64,{title_icon}" width="45" style="vertical-align: middle; margin-right: 1px;">
+    RAGRouter-Bench:<br> A Dataset and Benchmark for Adaptive RAG Routing
+    </h1>
+</div>
+""", unsafe_allow_html=True)
+
+# 统计横幅
+st.markdown("""
+<div style="
+    background-color: #e8f4fc;
+    border: 2px solid #b8d4e8;
+    border-radius: 15px;
+    margin: 0 auto 30px auto;
+    max-width: 100%;
+    text-align: center;
+    font-size: 18px;
+    color: #333;
+">
+    <span style="margin: 0 5px;"><strong>📚 4 Corpus Domains</strong></span>|
+    <span style="margin: 0 5px;"><strong>📄 21K Documents</strong></span>|
+    <span style="margin: 0 5px;"><strong>❓ 7.7K Query Types</strong></span>|
+    <span style="margin: 0 5px;"><strong>📊 3 Dimension Evaluations</strong></span>|
+    <span style="margin: 0 5px;"><strong>🔄 5 RAG Paradigms</strong></span>|
+    <span style="margin: 0 5px;"><strong>🤖 2 LLMs Tested</strong></span>
+</div>
+""", unsafe_allow_html=True)
+
+# 主内容 - 添加锚点ID
+# About 部分
+with st.container():
+    about_icon = get_image_base64("utils/about_icon.png")
+
+    st.markdown(f"""
+    <h2 id="about" style="color: #333333;
+                        padding-bottom: 10px;
+                        font-family: 'Ubuntu Mono', monospace;
+                        font-size: 30px;">
+        <img src="data:image/png;base64,{about_icon}" width="30" style="vertical-align: middle; margin-right: 1px;">
+        About
+    </h2>
+    """, unsafe_allow_html=True)
+
+    # About 内的标签页
+    about_tab1, about_tab2, about_tab3 = st.tabs(["📋 Overview", "⭐ Key Features", "🚀 Get Started"])
+
+    with about_tab1:
+        pipeline_img = get_image_base64("utils/Overall_Pipeline.png")
+
+        st.markdown(f"""
+        <div style="padding-right: 10px;">
+            <div style="text-align: center; margin: 1px 0;">
+                <img src="data:image/png;base64,{pipeline_img}" width="50%" style="border-radius: 10px;">
+                <p style="color: #666; font-size: 16px;">Overall Pipeline</p>
+            </div>
+            <div style="font-size: 16px; line-height: 1.4; color: #333; text-align: justify;">
+            <p>Retrieval-Augmented Generation (RAG) has become a core paradigm for grounding large language models with external knowledge. 
+            Despite extensive efforts exploring diverse retrieval strategies, <strong>existing studies predominantly focus on query-side complexity or isolated method improvements, lacking a systematic understanding of how RAG paradigms behave across different query–corpus contexts and effectiveness–efficiency trade-offs</strong>. 
+            In this work, we introduce RAGRouter-Bench, the first dataset and benchmark designed for adaptive RAG routing. 
+            RAGRouter-Bench revisits retrieval from a query–corpus compatibility perspective and standardizes five representative RAG paradigms for systematic evaluation across 7,727 queries and 21,460 documents spanning diverse domains. 
+            The benchmark incorporates three canonical query types together with fine-grained semantic and structural corpus metrics, as well as a unified evaluation for both generation quality and resource consumption. 
+            Experiments with DeepSeek-V3 and LLaMA-3.1-8B demonstrate that <strong>no single RAG paradigm is universally optimal, that paradigm applicability is strongly shaped by query–corpus interactions, and that increased advanced mechanism does not necessarily yield better effectiveness–efficiency trade-offs</strong>. 
+            These findings underscore the necessity of routing-aware evaluation and establish a foundation for adaptive, interpretable, and generalizable next-generation RAG systems.</p>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with about_tab2:
+        bench_img = get_image_base64("utils/Data_Profile.png")
+        
+        st.markdown(f"""
+        <div style="padding-right: 10px;">
+            <div style="text-align: center; margin: 1px 0;">
+                <img src="data:image/png;base64,{bench_img}" width="70%">
+                <p style="color: #666; font-size: 16px;">Benchmark Features</p>
+            </div>
+            <div style="font-size: 16px; line-height: 1.4; color: #333; text-align: left;">
+            <p style="margin-top: 1px; margin-bottom: 1px;"><strong>🌐 Multi-Domain Corpora</strong></p>
+            <ul>
+            <li><strong>Wikipedia (MuSiQue)</strong>: Encyclopedic knowledge with explicit entity relations (5,427 documents)</li>
+            <li><strong>Literature (QuALITY)</strong>: Long-form narratives with implicit semantic structures (2,523 documents)</li>
+            <li><strong>Legal (UltraDomain)</strong>: Professional domain with dense terminology (6,510 documents)</li>
+            <li><strong>Medical (GraphRAG-Bench)</strong>: Specialized knowledge requiring precise reasoning (7,000 documents)</li>
+            </ul>
+            <p style="margin-top: 1px; margin-bottom: 1px;"><strong>❓ Three Query Types</strong></p>
+            <ul>
+            <li><strong>Factual Queries</strong>: Single-hop lookup requiring direct fact retrieval</li>
+            <li><strong>Reasoning Queries</strong>: Multi-hop inference across chained evidence (2-4 hops)</li>
+            <li><strong>Summary Queries</strong>: Global aggregation over dispersed information</li>
+            </ul>
+            <p style="margin-top: 1px; margin-bottom: 1px;"><strong>🔄 Five RAG Paradigm</strong></p>
+            <ul>
+            <li><strong>RAG Paradigm</strong>:LLM-only, NaiveRAG, GraphRAG, HybridRAG, IterativeRAG
+            </ul>
+            <p style="margin-top: 1px; margin-bottom: 1px;"><strong>📊 Dual-View Corpus Evaluation</strong></p>
+            <ul>
+            <li><strong>Structural Metrics</strong>: Connectivity (LCC Ratio, Relation Types), Density (Avg Degree, Max Centrality), Clustering Coefficient</li>
+            <li><strong>Semantic Metrics</strong>: Intrinsic Dimension, Dispersion (Avg/Min/Std Distance), Hubness</li>
+            <li><strong>Quality Assurance</strong>: LLM-based query augmentation with Verify-then-Filter validation</li>
+            </ul>
+            <p style="margin-top: 1px; margin-bottom: 1px;"><strong>⚖️ Effectiveness-Efficiency Evaluation</strong></p>
+            <ul>
+            <li><strong>Effectiveness</strong>: LLM-as-a-Judge accuracy across three dimensions (Information Coverage, Semantic Accuracy, Logical Consistency)</li>
+            <li><strong>Efficiency</strong>: Token consumption decomposed into Retrieval Cost and Generation Cost</li>
+            </ul>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+    with about_tab3:
+        paradigms_img = get_image_base64("utils/RAG_Paradigms.png")
+        
+        st.markdown(f"""
+<div style="padding-right: 10px; font-size: 16px; line-height: 1.4; color: #333;">
+<div style="text-align: center; margin: 1px 0;">
+    <img src="data:image/png;base64,{paradigms_img}" width="60%">
+    <p style="color: #666; font-size: 16px;">RAG Paradigm</p>
+</div>
+
+<a href="https://your-dataset-link.com" style="color: #667eea;" target="_blank">📥 Download RAGRouter-Bench Dataset</a>
+
+<p style="margin-top: 1px; margin-bottom: 5px;"><strong>💻 Installation</strong></p>
+<pre style="background-color: #f0f7ff !important; padding: 10px; border-radius: 5px; overflow-x: auto; border: 1px solid #cce0ff;">
+<code style="background-color: transparent !important; color: #333 !important; font-family: 'Courier New', monospace !important;">git clone https://github.com/your-repo/RAGRouter-Bench
+cd RAGRouter-Bench
+conda env create -f environment.yml
+conda activate ragBench</code></pre>
+
+<p style="margin-top: 1px; margin-bottom: 5px;"><strong>⚙️ Configuration</strong></p>
+<ul>
+<li>Set your API key in <code>Config/LLMConfig.py</code> (<code>DEEPSEEK_API_KEY</code> or <code>OPENAI_API_KEY</code>)</li>
+</ul>
+
+<p style="margin-top: 1px; margin-bottom: 5px;"><strong>🚀 Quick Start</strong></p>
+<table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
+<tr style="background-color: #f0f0f0;">
+    <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Step</th>
+    <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Command</th>
+    <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Description</th>
+</tr>
+<tr>
+    <td style="border: 1px solid #ddd; padding: 8px;">1. Process</td>
+    <td style="border: 1px solid #ddd; padding: 8px;"><code>python main.py process all --dataset musique</code></td>
+    <td style="border: 1px solid #ddd; padding: 8px;">Chunking, embedding, graph building</td>
+</tr>
+<tr>
+    <td style="border: 1px solid #ddd; padding: 8px;">2. Retrieve</td>
+    <td style="border: 1px solid #ddd; padding: 8px;"><code>python main.py retrieve graph --dataset musique</code></td>
+    <td style="border: 1px solid #ddd; padding: 8px;">Run RAG retrieval</td>
+</tr>
+<tr>
+    <td style="border: 1px solid #ddd; padding: 8px;">3. Evaluate</td>
+    <td style="border: 1px solid #ddd; padding: 8px;"><code>python main.py evaluate result --dataset musique --method graph_rag</code></td>
+    <td style="border: 1px solid #ddd; padding: 8px;">Evaluate results</td>
+</tr>
+<tr>
+    <td style="border: 1px solid #ddd; padding: 8px;">Full Pipeline</td>
+    <td style="border: 1px solid #ddd; padding: 8px;"><code>python main.py pipeline --dataset musique --method graph</code></td>
+    <td style="border: 1px solid #ddd; padding: 8px;">Run all steps</td>
+</tr>
+</table>
+
+<p style="margin-top: 15px; margin-bottom: 5px;"><strong>Available Datasets</strong></p>
+<ul>
+<li><code>musique</code> - Wikipedia (Encyclopedic)</li>
+<li><code>quality</code> - Literature (Narrative)</li>
+<li><code>ultraDomain_legal</code> - Legal (Professional)</li>
+<li><code>graphragBench_medical</code> - Medical (Professional)</li>
+</ul>
+
+<p style="margin-top: 1px; margin-bottom: 5px;"><strong>Available RAG Paradigms</strong></p>
+<ul>
+<li><code>naive</code> - NaiveRAG (vector retrieval)</li>
+<li><code>graph</code> - GraphRAG (graph traversal)</li>
+<li><code>hybrid</code> - HybridRAG (naive + graph fusion)</li>
+<li><code>iterative</code> - IterativeRAG (multi-round retrieval)</li>
+<li><code>llm_direct</code> - LLM-only (no retrieval)</li>
+</ul>
+
+<p style="margin-top: 1px; margin-bottom: 5px;"><strong>Data Format</strong></p>
+<p>Your data should be placed in <code>Dataset/Rawutils/{{dataset_name}}/</code> with:</p>
+<ul>
+<li><code>Corpus.json</code> - Document collection with <code>doc_id</code>, <code>title</code>, <code>text</code></li>
+<li><code>Question.json</code> - Queries with <code>question_id</code>, <code>question</code>, <code>answer</code>, <code>query_type</code>, <code>supporting_facts</code></li>
+</ul>
+</div>
+        """, unsafe_allow_html=True)
+
+
+
+# Leaderboard 部分
+leaderboard_icon = get_image_base64("utils/leaderboard_icon.png")
+
+st.markdown(f"""
+<h2 id="leaderboard" style="color: #333333;
+                            padding-bottom: 10px;
+                            margin-top: 10px;
+                            font-family: 'Ubuntu Mono', monospace;
+                            font-size: 30px;">
+    <img src="data:image/png;base64,{leaderboard_icon}" width="30" style="vertical-align: middle; margin-right: 1px;">
+    Leaderboard
+</h2>
+""", unsafe_allow_html=True)
+
+# Leaderboard 内的标签页
+lb_tab1, lb_tab2, lb_tab3, lb_tab4 = st.tabs(["🏆 Full Leaderboard", "📁 Corpus Metrics", "📈 Effectiveness Metrics", "⚡ Efficiency Metrics"])
+
+with lb_tab1:
+    # Full Leaderboard Explanation
+    st.markdown("""
+<div style="font-size: 15px; line-height: 1.5; color: #333; margin-bottom: 20px;">
+<p style="font-weight: bold; margin-bottom: 10px;">📋 Columns Explained:</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li><strong>Dataset</strong>: Corpus domain (MuSiQue-Wikipedia, QuALITY-Literature, Legal, Medical).</li>
+<li><strong>Method</strong>: RAG paradigm (NaiveRAG, GraphRAG, HybridRAG, IterativeRAG).</li>
+<li><strong>Factual</strong>: LLM-as-a-Judge accuracy (%) on factual queries (single-hop fact retrieval). <em>Higher is better</em>.</li>
+<li><strong>Reasoning</strong>: LLM-as-a-Judge accuracy (%) on reasoning queries (multi-hop inference, 2-4 hops). <em>Higher is better</em>.</li>
+<li><strong>Summary</strong>: LLM-as-a-Judge accuracy (%) on summary queries (global information aggregation). <em>Higher is better</em>.</li>
+<li><strong>Avg Acc</strong>: Average accuracy (%) across all three query types. <em>Higher is better</em>.</li>
+<li><strong>Token</strong>: Average token consumption per query. <em>Lower is more efficient</em>.</li>
+</ul>
+</div>
+""", unsafe_allow_html=True)
+
+    df_full = pd.read_csv("utils/full_lb.csv")
+
+    col1_f, col2_f, col3_f, col4_f = st.columns([2, 2, 2, 3])
+
+    with col1_f:
+        model_select_f = st.selectbox(
+            "Model",
+            options=["All"] + df_full["Model"].unique().tolist(),
+            index=0,
+            key="model_full"
+        )
+
+    with col2_f:
+        sort_by_f = st.selectbox(
+            "Sort by",
+            options=df_full.columns.tolist(),
+            index=df_full.columns.tolist().index("Avg Acc"),
+            key="sort_full"
+        )
+
+    with col3_f:
+        order_f = st.radio(
+            "Order",
+            options=["Descending", "Ascending"],
+            horizontal=True,
+            key="order_full"
+        )
+
+    with col4_f:
+        search_f = st.text_input("Search", placeholder="Search in all columns...", key="search_full")
+
+    df_display_f = df_full.copy()
+
+    if model_select_f != "All":
+        df_display_f = df_display_f[df_display_f["Model"] == model_select_f]
+
+    if search_f:
+        mask_f = df_display_f.apply(lambda row: row.astype(str).str.contains(search_f, case=False).any(), axis=1)
+        df_display_f = df_display_f[mask_f]
+
+    ascending_f = True if order_f == "Ascending" else False
+    df_display_f = df_display_f.sort_values(by=sort_by_f, ascending=ascending_f).reset_index(drop=True)
+
+    st.markdown(df_to_html_table(df_display_f), unsafe_allow_html=True)
+
+with lb_tab2:
+    # Structure Metrics Explanation
+    st.markdown("""
+<div style="font-size: 15px; line-height: 1.5; color: #333; margin-bottom: 20px;">
+<p style="font-weight: bold; margin-bottom: 10px;">🔗 Structural Topology Metrics:</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li>Nodes: Number of nodes in the knowledge graph.</li>
+<li><strong>Edges</strong>: Number of edges in the knowledge graph.</li>
+<li><strong>Density</strong>: Edge saturation level. <em>Excessive sparsity limits relational bridges</em>.</li>
+<li><strong>Rel_Types (Relation Type Diversity)</strong>: Semantic richness of edges for precise graph traversal.</li>
+<li><strong>Avg_Deg (Average Degree)</strong>: Average connections per node, reflecting connection intensity.</li>
+<li><strong>Comp (Connected Components)</strong>: Number of independent subgraphs.</li>
+<li><strong>LCC_Ratio (Largest Connected Component Ratio)</strong>: Proportion of nodes in the largest subgraph. <em>Low values indicate graph fragmentation that breaks multi-hop paths</em>.</li>
+<li><strong>Cluster_Coeff (Clustering Coefficient)</strong>: Local cohesiveness. <em>High values indicate tight communities that facilitate evidence aggregation</em>.</li>
+</ul>
+</div>
+""", unsafe_allow_html=True)
+
+    df_structure = pd.read_csv("utils/corpus_structure.csv")
+    col1_s, col2_s, col3_s = st.columns([2, 2, 3])
+    with col1_s:
+        sort_by_s = st.selectbox(
+            "Sort by",
+            options=df_structure.columns.tolist(),
+            index=0,
+            key="sort_structure"
+        )
+
+    with col2_s:
+        order_s = st.radio(
+            "Order",
+            options=["Descending", "Ascending"],
+            horizontal=True,
+            key="order_structure"
+        )
+
+    with col3_s:
+        search_s = st.text_input("Search", placeholder="Search in all columns...", key="search_structure")
+
+    df_display_s = df_structure.copy()
+    if search_s:
+        mask_s = df_display_s.apply(lambda row: row.astype(str).str.contains(search_s, case=False).any(), axis=1)
+        df_display_s = df_display_s[mask_s]
+    ascending_s = True if order_s == "Ascending" else False
+    df_display_s = df_display_s.sort_values(by=sort_by_s, ascending=ascending_s).reset_index(drop=True)
+    st.markdown(df_to_html_table(df_display_s, height=200), unsafe_allow_html=True)
+
+    # Semantic Metrics Explanation
+    st.markdown("""
+<div style="font-size: 15px; line-height: 1.5; color: #333; margin-top: 30px; margin-bottom: 20px;">
+<p style="font-weight: bold; margin-bottom: 10px;">🧠 Semantic Space Metrics:</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li><strong>Chunks</strong>: Number of text chunks in the corpus.</li>
+<li><strong>Int_Dim (Intrinsic Dimension)</strong>: Effective degrees of freedom estimated via TwoNN. <em>High dimensionality exacerbates the curse of dimensionality, diminishing distance-based similarity</em>.</li>
+<li><strong>Hubness</strong>: Skewness of k-occurrence distribution, measuring retrieval interference. <em>High values indicate hub vectors that dominate nearest-neighbor lists, causing bias toward frequently retrieved but potentially irrelevant passages</em>.</li>
+<li><strong>Avg_Dist (Average Distance)</strong>: Average distance to centroid, reflecting overall distribution spread.</li>
+<li><strong>Std_Dist (Standard Deviation)</strong>: Distance standard deviation, revealing distributional imbalance. <em>High values indicate uneven distribution</em>.</li>
+<li><strong>Min_Dist (Minimum Distance)</strong>: Distance of closest cluster pair, identifying most confusable semantic regions. <em>Low dispersion causes semantic crowding that hinders hard-negative discrimination</em>.</li>
+<li><strong>Max_Dist (Maximum Distance)</strong>: Distance of farthest cluster pair, reflecting maximum semantic space span.</li>
+</ul>
+</div>
+""", unsafe_allow_html=True)
+
+    df_semantic = pd.read_csv("utils/corpus_semantic.csv")
+    col1_m, col2_m, col3_m = st.columns([2, 2, 3])
+
+    with col1_m:
+        sort_by_m = st.selectbox(
+            "Sort by",
+            options=df_semantic.columns.tolist(),
+            index=0,
+            key="sort_semantic"
+        )
+
+    with col2_m:
+        order_m = st.radio(
+            "Order",
+            options=["Descending", "Ascending"],
+            horizontal=True,
+            key="order_semantic"
+        )
+
+    with col3_m:
+        search_m = st.text_input("Search", placeholder="Search in all columns...", key="search_semantic")
+
+    df_display_m = df_semantic.copy()
+    if search_m:
+        mask_m = df_display_m.apply(lambda row: row.astype(str).str.contains(search_m, case=False).any(), axis=1)
+        df_display_m = df_display_m[mask_m]
+    ascending_m = True if order_m == "Ascending" else False
+    df_display_m = df_display_m.sort_values(by=sort_by_m, ascending=ascending_m).reset_index(drop=True)
+    st.markdown(df_to_html_table(df_display_m, height=200), unsafe_allow_html=True)
+
+with lb_tab3:
+    # Metrics Explanation
+    st.markdown("""
+<div style="font-size: 15px; line-height: 1.5; color: #333; margin-bottom: 20px;">
+<p style="font-weight: bold; margin-bottom: 10px;">📊 Metrics Explained:</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li><strong>Sem_F1 (Semantic F1)</strong>: Token-level semantic similarity between generated and reference answers using BERTScore. Range: 0-1, <em>higher is better</em>.</li>
+<li><strong>COV (Coverage)</strong>: Extent to which the answer covers key information using sentence embeddings. Range: 0-1, <em>higher is better</em>.</li>
+<li><strong>Faith_H (Faithfulness Hard)</strong>: Strict support relationship between answer and retrieved content. Range: 0-1, <em>higher is better</em>.</li>
+<li><strong>Faith_S (Faithfulness Soft)</strong>: Relaxed support relationship between answer and retrieved content. Range: 0-1, <em>higher is better</em>.</li>
+<li><strong>LLM_Cor_Pct (LLM-as-a-Judge)</strong>: Correctness rate via LLM ternary classification, aligned with human judgment. Range: 0-100%, <em>higher is better</em>.</li>
+</ul>
+</div>
+""", unsafe_allow_html=True)
+
+    # Model files mapping
+    model_files = {
+        "DeepSeek-V3": "utils/effect_deepseek.csv",
+        "Llama-3-8B": "utils/effect_llama.csv"
+    }
+
+    # Controls
+    col1_e, col2_e, col3_e, col4_e = st.columns([2, 2, 2, 3])
+
+    with col1_e:
+        model_select = st.selectbox(
+            "Model",
+            options=list(model_files.keys()),
+            index=0,
+            key="model_effect"
+        )
+
+    df_effect = pd.read_csv(model_files[model_select])
+
+    with col2_e:
+        sort_by_e = st.selectbox(
+            "Sort by",
+            options=df_effect.columns.tolist(),
+            index=0,
+            key="sort_effect"
+        )
+
+    with col3_e:
+        order_e = st.radio(
+            "Order",
+            options=["Descending", "Ascending"],
+            horizontal=True,
+            key="order_effect"
+        )
+
+    with col4_e:
+        search_e = st.text_input("Search", placeholder="Search in all columns...", key="search_effect")
+
+    df_display_e = df_effect.copy()
+
+    if search_e:
+        mask_e = df_display_e.apply(lambda row: row.astype(str).str.contains(search_e, case=False).any(), axis=1)
+        df_display_e = df_display_e[mask_e]
+
+    ascending_e = True if order_e == "Ascending" else False
+    df_display_e = df_display_e.sort_values(by=sort_by_e, ascending=ascending_e).reset_index(drop=True)
+
+    st.markdown(df_to_html_table(df_display_e), unsafe_allow_html=True)
+
+with lb_tab4:
+    # Cost Explanation
+    st.markdown("""
+<div style="font-size: 15px; line-height: 1.5; color: #333; margin-bottom: 20px;">
+<p style="font-weight: bold; margin-bottom: 10px;">💰 Cost Explained:</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li><strong>Total_Tokens</strong>: Total token consumption = Retrieval_Total + Generation_Total.</li>
+<li><strong>Retrieval_Total</strong>: Total tokens in retrieval phase = Retrieval_Input + Retrieval_Output. Includes entity extraction, multi-turn queries. For GraphRAG/HybridRAG, includes amortized one-time graph construction cost.</li>
+<li><strong>Generation_Total</strong>: Total tokens in generation phase = Generation_Input + Generation_Output. Primarily determined by context length.</li>
+<li><strong>Avg_Context_Tokens</strong>: Average retrieved context length per query. <em>Higher means more retrieved content but also higher cost</em>.</li>
+<li><strong>Num_Questions</strong>: Number of queries in the dataset.</li>
+</ul>
+</div>
+""", unsafe_allow_html=True)
+
+    # Read data
+    df_efficiency = pd.read_csv("utils/retrieval_generation_cost.csv")
+
+    # Controls
+    col1, col2, col3 = st.columns([2, 2, 3])
+
+    with col1:
+        sort_by = st.selectbox(
+            "Sort by",
+            options=df_efficiency.columns.tolist(),
+            index=df_efficiency.columns.tolist().index("Total_Tokens")  # 默认按 total_tokens 排序
+        )
+
+    with col2:
+        order = st.radio(
+            "Order",
+            options=["Descending", "Ascending"],
+            horizontal=True
+        )
+
+    with col3:
+        search = st.text_input("Search", placeholder="Search in all columns...")
+
+    df_display = df_efficiency.copy()
+
+    if search:
+        mask = df_display.apply(lambda row: row.astype(str).str.contains(search, case=False).any(), axis=1)
+        df_display = df_display[mask]
+
+    ascending = True if order == "Ascending" else False
+    df_display = df_display.sort_values(by=sort_by, ascending=ascending).reset_index(drop=True)
+    st.markdown(df_to_html_table(df_display), unsafe_allow_html=True)
+
+
+# Questions & Contact 部分
+contact_icon = get_image_base64("utils/contact_icon.png")
+
+st.markdown(f"""
+<h2 id="contact" style="color: #333333;
+                        padding-bottom: 10px;
+                        margin-top: 10px;
+                        font-family: 'Ubuntu Mono', monospace;
+                        font-size: 30px;">
+    <img src="data:image/png;base64,{contact_icon}" width="30" style="vertical-align: middle; margin-right: 1px;">
+    Questions & Contact
+</h2>
+""", unsafe_allow_html=True)
+
+st.markdown("""
+<div style="
+    border: 2px solid #e0e0e0;
+    border-radius: 15px;
+    padding: 25px 30px;
+    background-color: #fafafa;
+    margin-bottom: 10px;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+">
+<p style="margin-bottom: 5px;">
+If you have any questions about RAGRouter-Bench, please feel free to reach out to us:
+</p>
+<ul style="margin: 0; padding-left: 20px;">
+<li><strong>Email</strong>: <a href="mailto:RAGRouterBench@example.com" style="color: #667eea;">RAGRouterBench@example.com</a></li>
+<li><strong>GitHub</strong>: <a href="https://github.com/your-repo/RAGRouter-Bench" style="color: #667eea;" target="_blank">github.com/your-repo/RAGRouter-Bench</a></li>
+</ul>
+<p style="margin-top: 5px; margin-bottom: 0;">
+For bug reports or feature requests, please open an issue on our GitHub repository.
+</p>
+</div>
+""", unsafe_allow_html=True)