Update app.py

app.py

@@ -210,10 +210,10 @@ enhanced_css = """
     --accent-color: #e5a50a;
     --warning-color: #ff7800;
     --text-color: #333333;
-    --background-color: #f4f6f8;
-    --card-background: #ffffff;
+    --background-color: #ffffff;
+    --card-background: #f9f9f9;
     --border-color: #e0e0e0;
-    --shadow-color: rgba(0, 0, 0, 0.08);
+    --shadow-color: rgba(0, 0, 0, 0.1);
 }
 
 /* Typography */
@@ -259,7 +259,6 @@ h3 {
     border-radius: 12px !important;
     overflow: hidden !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
-    background-color: var(--card-background);
 }
 
 .tab-nav button {
@@ -268,16 +267,12 @@ h3 {
     padding: 0.8rem 1.5rem !important;
     border-radius: 0 !important;
     transition: all 0.2s ease !important;
-    border-bottom: 2px solid transparent !important;
-    background-color: transparent !important;
-    color: var(--text-color) !important;
 }
 
 .tab-nav button.selected {
-    background-color: transparent !important;
-    color: var(--primary-color) !important;
+    background-color: var(--primary-color) !important;
+    color: white !important;
     font-weight: 600 !important;
-    border-bottom: 2px solid var(--primary-color) !important;
 }
 
 /* Card styling */
@@ -286,7 +281,6 @@ h3 {
     border: 1px solid var(--border-color) !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
     overflow: hidden !important;
-    background-color: var(--card-background) !important;
 }
 
 /* Table styling */
@@ -298,7 +292,6 @@ table {
     border-radius: 8px !important;
     overflow: hidden !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
-    background-color: var(--card-background);
 }
 
 th {
@@ -316,21 +309,20 @@ td {
     border-bottom: 1px solid var(--border-color) !important;
     font-size: 1rem !important;
     vertical-align: middle !important;
-    background-color: var(--card-background);
 }
 
-tr:last-child td {
-    border-bottom: none !important;
-}
-
-tr:nth-child(even) td {
+tr:nth-child(even) {
     background-color: #f8fafd !important;
 }
 
-tr:hover td {
+tr:hover {
     background-color: #edf2fb !important;
 }
 
+tr:first-child td {
+    border-top: none !important;
+}
+
 /* Button styling */
 button.primary, .gr-button.primary {
     background-color: var(--primary-color) !important;
@@ -370,7 +362,6 @@ button.primary:hover, .gr-button.primary:hover {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
-    color: var(--text-color) !important;
 }
 
 .gr-radio label:hover {
@@ -392,8 +383,6 @@ input, textarea, select {
     border-radius: 8px !important;
     border: 1px solid var(--border-color) !important;
     transition: all 0.2s ease !important;
-    background-color: #ffffff !important;
-    color: var(--text-color) !important;
 }
 
 input:focus, textarea:focus, select:focus {
@@ -408,7 +397,6 @@ input:focus, textarea:focus, select:focus {
     overflow: hidden !important;
     margin: 1rem 0 !important;
     border: 1px solid var(--border-color) !important;
-    background-color: var(--card-background);
 }
 
 .gr-accordion-header {
@@ -417,19 +405,17 @@ input:focus, textarea:focus, select:focus {
     font-weight: 600 !important;
     font-size: 1.1rem !important;
     color: var(--text-color) !important;
-    border-bottom: 1px solid var(--border-color) !important;
 }
 
 .gr-accordion-content {
     padding: 1rem !important;
-    background-color: var(--card-background) !important;
+    background-color: white !important;
 }
 
 /* Markdown text improvements */
 .markdown-text {
     font-size: 1.05rem !important;
     line-height: 1.7 !important;
-    color: var(--text-color) !important;
 }
 
 .markdown-text p {
@@ -447,7 +433,7 @@ input:focus, textarea:focus, select:focus {
 
 .markdown-text strong {
     font-weight: 600 !important;
-    color: #111 !important;
+    color: #333 !important;
 }
 
 /* Status indicators */
@@ -481,25 +467,21 @@ input:focus, textarea:focus, select:focus {
 /* Footer */
 .footer {
     margin-top: 2rem;
-    padding: 1.5rem 1rem;
+    padding: 1rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #555;
+    color: #666;
     border-top: 1px solid var(--border-color);
-    background-color: #e9edf1;
 }
 
-/* Enhanced leaderboard title area */
+/* Enhanced leaderboard title */
 .leaderboard-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
-    padding: 1.5rem;
-    background-color: var(--card-background);
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 12px var(--shadow-color);
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--border-color);
 }
 
 .leaderboard-title {
@@ -522,9 +504,6 @@ input:focus, textarea:focus, select:focus {
     font-size: 0.85rem;
     color: #666;
     font-style: italic;
-    background-color: #f5f7fa;
-    padding: 5px 10px;
-    border-radius: 6px;
 }
 
 /* Category selector buttons */
@@ -580,35 +559,10 @@ input:focus, textarea:focus, select:focus {
     color: #cd7f32;
     font-weight: bold;
 }
-
-/* Style for About section cards */
-.about-card {
-    background-color: #f5f7fa;
-    padding: 20px;
-    border-radius: 12px;
-    height: 100%;
-    border: 1px solid var(--border-color);
-}
-.about-card h3 {
-    text-align: center;
-    margin-top: 0;
-    color: var(--primary-color);
-}
-.about-card p {
-    color: var(--text-color);
-    font-size: 0.95rem;
-    line-height: 1.6;
-}
-.about-card-icon {
-    font-size: 2.5em;
-    text-align: center;
-    margin-bottom: 15px;
-    display: block;
-}
 """
 
 # Combine with any existing CSS
-custom_css = enhanced_css
+custom_css = enhanced_css + custom_css
 
 # --- Gradio App Definition ---
 demo = gr.Blocks(css=custom_css, theme=gr.themes.Soft())
@@ -632,19 +586,17 @@ with demo:
     """)
 
     # Introduction with enhanced styling
-    with gr.Blocks():
-        gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("📊 Leaderboard", elem_id="llm-benchmark-tab-table", id=0):
             with gr.Column():
-                with gr.Blocks():
-                    gr.HTML("""
-                    <h2 style="display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem;">
-                        <span style="font-size: 1.3em;">📈</span> Model Performance Rankings
-                    </h2>
-                    <p class="leaderboard-subtitle" style="margin-top: 0;">Select a category to view specialized performance metrics</p>
-                    """)
+                gr.HTML("""
+                <h2 style="display: flex; align-items: center; gap: 10px;">
+                    <span style="font-size: 1.3em;">📈</span> Model Performance Rankings
+                </h2>
+                <p class="leaderboard-subtitle">Select a category to view specialized performance metrics</p>
+                """)
                 
                 # Enhanced category selector
                 category_selector = gr.Radio(
@@ -652,7 +604,7 @@ with demo:
                     label="Select Performance Domain:",
                     value="🏆 Overall",
                     interactive=True,
-                    elem_classes="gr-radio"
+                    elem_classes="fancy-radio"
                 )
                 
                 # Visual separator
@@ -671,32 +623,31 @@ with demo:
                 )
                 
                 # Stats cards (visual enhancement)
-                with gr.Blocks():
-                    with gr.Row(equal_height=True):
-                        with gr.Column(scale=1):
-                            gr.HTML(f"""
-                            <div class="about-card" style="text-align: center;">
-                                <div class="about-card-icon">🔍</div>
-                                <div style="font-size: 2em; font-weight: bold; color: #1a5fb4;">{len(master_df)}</div>
-                                <div style="font-size: 1.1em; color: #666;">Models Evaluated</div>
-                            </div>
-                            """)
-                        with gr.Column(scale=1):
-                            gr.HTML(f"""
-                            <div class="about-card" style="text-align: center;">
-                                <div class="about-card-icon">🌐</div>
-                                <div style="font-size: 2em; font-weight: bold; color: #00875a;">{50}</div>
-                                <div style="font-size: 1.1em; color: #666;">Competitions</div>
-                            </div>
-                            """)
-                        with gr.Column(scale=1):
-                            gr.HTML(f"""
-                            <div class="about-card" style="text-align: center;">
-                                <div class="about-card-icon">🏅</div>
-                                <div style="font-size: 2em; font-weight: bold; color: #b58a00;">{4}</div>
-                                <div style="font-size: 1.1em; color: #666;">Performance Domains</div>
-                            </div>
-                            """)
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.HTML(f"""
+                        <div style="background-color: #f0f5ff; padding: 20px; border-radius: 12px; text-align: center;">
+                            <div style="font-size: 2em;">🔍</div>
+                            <div style="font-size: 2em; font-weight: bold; color: #1a5fb4;">{len(master_df)}</div>
+                            <div style="font-size: 1.1em; color: #666;">Models Evaluated</div>
+                        </div>
+                        """)
+                    with gr.Column(scale=1):
+                        gr.HTML(f"""
+                        <div style="background-color: #e6f7ef; padding: 20px; border-radius: 12px; text-align: center;">
+                            <div style="font-size: 2em;">🌐</div>
+                            <div style="font-size: 2em; font-weight: bold; color: #00875a;">{master_df['organizer'].nunique()}</div>
+                            <div style="font-size: 1.1em; color: #666;">Organizations</div>
+                        </div>
+                        """)
+                    with gr.Column(scale=1):
+                        gr.HTML(f"""
+                        <div style="background-color: #fff8e0; padding: 20px; border-radius: 12px; text-align: center;">
+                            <div style="font-size: 2em;">🏅</div>
+                            <div style="font-size: 2em; font-weight: bold; color: #b58a00;">{len(CATEGORIES)}</div>
+                            <div style="font-size: 1.1em; color: #666;">Performance Domains</div>
+                        </div>
+                        """)
                 
                 # Link the radio button change to the update function
                 category_selector.change(
@@ -706,147 +657,145 @@ with demo:
                 )
 
         with gr.TabItem("📚 About", elem_id="llm-benchmark-tab-about", id=1):
-            with gr.Blocks():
-                # Enhanced about section header
-                gr.HTML("""
-                <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
-                    <div style="font-size: 4em;">🧪</div>
-                    <div>
-                        <h2 style="margin: 0;">About the MLE-Dojo Benchmark</h2>
-                        <p style="margin: 5px 0 0 0; color: #666;">A comprehensive evaluation framework for AI models</p>
-                    </div>
+            # Enhanced about section
+            gr.HTML("""
+            <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
+                <div style="font-size: 4em;">🧪</div>
+                <div>
+                    <h2 style="margin: 0;">About the MLE-Dojo Benchmark</h2>
+                    <p style="margin: 5px 0 0 0; color: #666;">A comprehensive evaluation framework for AI models</p>
                 </div>
-                """)
-                
-                # Use the LLM_BENCHMARKS_TEXT variable
-                gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
-                
-                # Add methodology cards for visual enhancement
-                with gr.Row(equal_height=True):
-                    with gr.Column():
-                        gr.HTML("""
-                        <div class="about-card">
-                            <div class="about-card-icon">💡</div>
-                            <h3>MLE-Lite</h3>
-                            <p>Evaluates a model's ability to handle basic machine learning engineering tasks including 
-                            data preprocessing, feature engineering, model selection, and basic deployment.</p>
-                        </div>
-                        """)
-                    with gr.Column():
-                        gr.HTML("""
-                        <div class="about-card">
-                            <div class="about-card-icon">📊</div>
-                            <h3>Tabular</h3>
-                            <p>Tests a model's ability to process, analyze and model structured data, including 
-                            statistical analysis, predictive modeling, and data visualization with tabular datasets.</p>
-                        </div>
-                        """)
-                
-                with gr.Row(equal_height=True):
-                    with gr.Column():
-                        gr.HTML("""
-                        <div class="about-card">
-                            <div class="about-card-icon">📝</div>
-                            <h3>NLP</h3>
-                            <p>Evaluates natural language processing capabilities including text classification, 
-                            sentiment analysis, entity recognition, text generation, and language understanding.</p>
-                        </div>
-                        """)
-                    with gr.Column():
-                        gr.HTML("""
-                        <div class="about-card">
-                            <div class="about-card-icon">👁️</div>
-                            <h3>CV</h3>
-                            <p>Tests computer vision capabilities including image classification, object detection, 
-                            image generation, and visual understanding tasks across various domains.</p>
-                        </div>
-                        """)
+            </div>
+            """)
+            
+            # Use the LLM_BENCHMARKS_TEXT variable
+            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
+            
+            # Add methodology cards for visual enhancement
+            with gr.Row():
+                with gr.Column():
+                    gr.HTML("""
+                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
+                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">💡</div>
+                        <h3 style="text-align: center; margin-top: 0;">MLE-Lite</h3>
+                        <p>Evaluates a model's ability to handle basic machine learning engineering tasks including 
+                        data preprocessing, feature engineering, model selection, and basic deployment.</p>
+                    </div>
+                    """)
+                with gr.Column():
+                    gr.HTML("""
+                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
+                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">📊</div>
+                        <h3 style="text-align: center; margin-top: 0;">Tabular</h3>
+                        <p>Tests a model's ability to process, analyze and model structured data, including 
+                        statistical analysis,statistical analysis, predictive modeling, and data visualization with tabular datasets.</p>
+                    </div>
+                    """)
+            
+            with gr.Row():
+                with gr.Column():
+                    gr.HTML("""
+                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
+                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">📝</div>
+                        <h3 style="text-align: center; margin-top: 0;">NLP</h3>
+                        <p>Evaluates natural language processing capabilities including text classification, 
+                        sentiment analysis, entity recognition, text generation, and language understanding.</p>
+                    </div>
+                    """)
+                with gr.Column():
+                    gr.HTML("""
+                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
+                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">👁️</div>
+                        <h3 style="text-align: center; margin-top: 0;">CV</h3>
+                        <p>Tests computer vision capabilities including image classification, object detection, 
+                        image generation, and visual understanding tasks across various domains.</p>
+                    </div>
+                    """)
 
         # Optional: Uncomment if you want to re-enable the Submit tab
         # with gr.TabItem("🚀 Submit Model", elem_id="llm-benchmark-tab-submit", id=2):
-        #     with gr.Blocks():
-        #         with gr.Column():
-        #             gr.HTML("""
-        #             <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
-        #                 <div style="font-size: 4em;">🚀</div>
-        #                 <div>
-        #                     <h2 style="margin: 0;">Submit Your Model for Evaluation</h2>
-        #                     <p style="margin: 5px 0 0 0; color: #666;">Add your model to the MLE-Dojo leaderboard</p>
-        #                 </div>
+        #     with gr.Column():
+        #         gr.HTML("""
+        #         <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
+        #             <div style="font-size: 4em;">🚀</div>
+        #             <div>
+        #                 <h2 style="margin: 0;">Submit Your Model for Evaluation</h2>
+        #                 <p style="margin: 5px 0 0 0; color: #666;">Add your model to the MLE-Dojo leaderboard</p>
         #             </div>
-        #             """)
+        #         </div>
+        #         """)
         #
-        #             with gr.Row():
-        #                 gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
-        #             
+        #         with gr.Row():
+        #             gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
+        #         
+        #         with gr.Column():
+        #             with gr.Accordion(f"✅ Finished Evaluations ({len(finished_eval_queue_df)})", open=False):
+        #                  finished_eval_table = gr.components.Dataframe(
+        #                      value=finished_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
+        #                 )
+        #             with gr.Accordion(f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})", open=False):
+        #                  running_eval_table = gr.components.Dataframe(
+        #                      value=running_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
+        #                 )
+        #             with gr.Accordion(f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})", open=False):
+        #                 pending_eval_table = gr.components.Dataframe(
+        #                     value=pending_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
+        #                 )
+        #         
+        #         gr.HTML('<div style="height: 1px; background-color: #e0e0e0; margin: 20px 0;"></div>')
+        #         
+        #         gr.HTML("""
+        #         <h2 style="display: flex; align-items: center; gap: 10px;">
+        #             <span style="font-size: 1.3em;">📝</span> Model Submission Form
+        #         </h2>
+        #         """)
+        #         
+        #         with gr.Row():
+        #             with gr.Column():
+        #                 model_name_textbox = gr.Textbox(
+        #                     label="Model Name (on Hugging Face Hub)",
+        #                     placeholder="Enter your model name...",
+        #                     elem_classes="enhanced-input"
+        #                 )
+        #                 revision_name_textbox = gr.Textbox(
+        #                     label="Revision / Commit Hash",
+        #                     placeholder="main",
+        #                     elem_classes="enhanced-input"
+        #                 )
+        #                 model_type = gr.Dropdown(
+        #                     choices=["Type A", "Type B", "Type C"],
+        #                     label="Model Type",
+        #                     multiselect=False,
+        #                     value=None,
+        #                     interactive=True,
+        #                     elem_classes="enhanced-dropdown"
+        #                 )
         #             with gr.Column():
-        #                 with gr.Accordion(f"✅ Finished Evaluations ({len(finished_eval_queue_df)})", open=False):
-        #                      finished_eval_table = gr.components.Dataframe(
-        #                          value=finished_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                     )
-        #                 with gr.Accordion(f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})", open=False):
-        #                      running_eval_table = gr.components.Dataframe(
-        #                          value=running_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                     )
-        #                 with gr.Accordion(f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})", open=False):
-        #                     pending_eval_table = gr.components.Dataframe(
-        #                         value=pending_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                     )
-        #             
-        #             gr.HTML('<div style="height: 1px; background-color: #e0e0e0; margin: 20px 0;"></div>')
-        #             
-        #             gr.HTML("""
-        #             <h2 style="display: flex; align-items: center; gap: 10px;">
-        #                 <span style="font-size: 1.3em;">📝</span> Model Submission Form
-        #             </h2>
-        #             """)
-        #             
-        #             with gr.Row():
-        #                 with gr.Column():
-        #                     model_name_textbox = gr.Textbox(
-        #                         label="Model Name (on Hugging Face Hub)",
-        #                         placeholder="Enter your model name...",
-        #                         elem_classes="enhanced-input"
-        #                     )
-        #                     revision_name_textbox = gr.Textbox(
-        #                         label="Revision / Commit Hash",
-        #                         placeholder="main",
-        #                         elem_classes="enhanced-input"
-        #                     )
-        #                     model_type = gr.Dropdown(
-        #                         choices=["Type A", "Type B", "Type C"],
-        #                         label="Model Type",
-        #                         multiselect=False,
-        #                         value=None,
-        #                         interactive=True,
-        #                         elem_classes="enhanced-dropdown"
-        #                     )
-        #                 with gr.Column():
-        #                     precision = gr.Dropdown(
-        #                         choices=["float16", "bfloat16", "float32", "int8", "auto"],
-        #                         label="Precision",
-        #                         multiselect=False,
-        #                         value="auto",
-        #                         interactive=True,
-        #                         elem_classes="enhanced-dropdown"
-        #                     )
-        #                     weight_type = gr.Dropdown(
-        #                         choices=["Original", "Adapter", "Delta"],
-        #                         label="Weights Type",
-        #                         multiselect=False,
-        #                         value="Original",
-        #                         interactive=True,
-        #                         elem_classes="enhanced-dropdown"
-        #                     )
-        #                     base_model_name_textbox = gr.Textbox(
-        #                         label="Base Model (for delta or adapter weights)",
-        #                         placeholder="Only needed for adapter/delta weights",
-        #                         elem_classes="enhanced-input"
-        #                     )
-        #             
+        #                 precision = gr.Dropdown(
+        #                     choices=["float16", "bfloat16", "float32", "int8", "auto"],
+        #                     label="Precision",
+        #                     multiselect=False,
+        #                     value="auto",
+        #                     interactive=True,
+        #                     elem_classes="enhanced-dropdown"
+        #                 )
+        #                 weight_type = gr.Dropdown(
+        #                     choices=["Original", "Adapter", "Delta"],
+        #                     label="Weights Type",
+        #                     multiselect=False,
+        #                     value="Original",
+        #                     interactive=True,
+        #                     elem_classes="enhanced-dropdown"
+        #                 )
+        #                 base_model_name_textbox = gr.Textbox(
+        #                     label="Base Model (for delta or adapter weights)",
+        #                     placeholder="Only needed for adapter/delta weights",
+        #                     elem_classes="enhanced-input"
+        #                 )
+        #         
         #         submit_button = gr.Button(
         #             "Submit for Evaluation",
-        #             elem_classes="primary"
+        #             elem_classes="primary-button"
         #         )
         #         submission_result = gr.Markdown()
         #         submit_button.click(
@@ -856,25 +805,24 @@ with demo:
         #         )
 
     # Enhanced citation section
-    with gr.Blocks():
-        with gr.Accordion("📄 Citation", open=False, elem_classes="citation-accordion"):
-            gr.HTML("""
-            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
-                <div style="font-size: 2.5em;">📄</div>
-                <div>
-                    <h3 style="margin: 0;">How to Cite This Benchmark</h3>
-                    <p style="margin: 5px 0 0 0; color: #666;">Please use the following citation if you use this benchmark in your research</p>
-                </div>
+    with gr.Accordion("📄 Citation", open=False, elem_classes="citation-accordion"):
+        gr.HTML("""
+        <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
+            <div style="font-size: 2.5em;">📄</div>
+            <div>
+                <h3 style="margin: 0;">How to Cite This Benchmark</h3>
+                <p style="margin: 5px 0 0 0; color: #666;">Please use the following citation if you use this benchmark in your research</p>
             </div>
-            """)
-            
-            citation_button = gr.Textbox(
-                value=CITATION_BUTTON_TEXT,
-                label=CITATION_BUTTON_LABEL,
-                lines=10,
-                elem_id="citation-button",
-                show_copy_button=True,
-            )
+        </div>
+        """)
+        
+        citation_button = gr.Textbox(
+            value=CITATION_BUTTON_TEXT,
+            label=CITATION_BUTTON_LABEL,
+            lines=10,
+            elem_id="citation-button",
+            show_copy_button=True,
+        )
     
     # Footer
     gr.HTML("""