Update app.py

app.py

@@ -210,10 +210,10 @@ enhanced_css = """
     --accent-color: #e5a50a;
     --warning-color: #ff7800;
     --text-color: #333333;
-    --background-color: #ffffff;
-    --card-background: #f9f9f9;
+    --background-color: #f4f6f8;
+    --card-background: #ffffff;
     --border-color: #e0e0e0;
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    --shadow-color: rgba(0, 0, 0, 0.08);
 }
 
 /* Typography */
@@ -259,6 +259,7 @@ 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 {
@@ -267,12 +268,16 @@ 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: var(--primary-color) !important;
-    color: white !important;
+    background-color: transparent !important;
+    color: var(--primary-color) !important;
     font-weight: 600 !important;
+    border-bottom: 2px solid var(--primary-color) !important;
 }
 
 /* Card styling */
@@ -281,6 +286,7 @@ 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 */
@@ -292,6 +298,7 @@ table {
     border-radius: 8px !important;
     overflow: hidden !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
+    background-color: var(--card-background);
 }
 
 th {
@@ -309,18 +316,19 @@ td {
     border-bottom: 1px solid var(--border-color) !important;
     font-size: 1rem !important;
     vertical-align: middle !important;
+    background-color: var(--card-background);
 }
 
-tr:nth-child(even) {
-    background-color: #f8fafd !important;
+tr:last-child td {
+    border-bottom: none !important;
 }
 
-tr:hover {
-    background-color: #edf2fb !important;
+tr:nth-child(even) td {
+    background-color: #f8fafd !important;
 }
 
-tr:first-child td {
-    border-top: none !important;
+tr:hover td {
+    background-color: #edf2fb !important;
 }
 
 /* Button styling */
@@ -362,6 +370,7 @@ 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 {
@@ -383,6 +392,8 @@ 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 {
@@ -397,6 +408,7 @@ 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 {
@@ -405,17 +417,19 @@ 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: white !important;
+    background-color: var(--card-background) !important;
 }
 
 /* Markdown text improvements */
 .markdown-text {
     font-size: 1.05rem !important;
     line-height: 1.7 !important;
+    color: var(--text-color) !important;
 }
 
 .markdown-text p {
@@ -433,7 +447,7 @@ input:focus, textarea:focus, select:focus {
 
 .markdown-text strong {
     font-weight: 600 !important;
-    color: #333 !important;
+    color: #111 !important;
 }
 
 /* Status indicators */
@@ -467,21 +481,25 @@ input:focus, textarea:focus, select:focus {
 /* Footer */
 .footer {
     margin-top: 2rem;
-    padding: 1rem;
+    padding: 1.5rem 1rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #666;
+    color: #555;
     border-top: 1px solid var(--border-color);
+    background-color: #e9edf1;
 }
 
-/* Enhanced leaderboard title */
+/* Enhanced leaderboard title area */
 .leaderboard-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid var(--border-color);
+    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);
 }
 
 .leaderboard-title {
@@ -504,6 +522,9 @@ 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 */
@@ -559,10 +580,35 @@ 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
+custom_css = enhanced_css
 
 # --- Gradio App Definition ---
 demo = gr.Blocks(css=custom_css, theme=gr.themes.Soft())
@@ -586,17 +632,19 @@ with demo:
     """)
 
     # Introduction with enhanced styling
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    with gr.Blocks():
+        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():
-                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>
-                """)
+                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>
+                    """)
                 
                 # Enhanced category selector
                 category_selector = gr.Radio(
@@ -604,7 +652,7 @@ with demo:
                     label="Select Performance Domain:",
                     value="🏆 Overall",
                     interactive=True,
-                    elem_classes="fancy-radio"
+                    elem_classes="gr-radio"
                 )
                 
                 # Visual separator
@@ -623,31 +671,32 @@ with demo:
                 )
                 
                 # Stats cards (visual enhancement)
-                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>
-                        """)
+                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;">{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 class="about-card" style="text-align: center;">
+                                <div class="about-card-icon">🏅</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(
@@ -657,145 +706,147 @@ with demo:
                 )
 
         with gr.TabItem("📚 About", elem_id="llm-benchmark-tab-about", id=1):
-            # 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>
-            </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>
+            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>
-                    """)
+                </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>
+                        """)
 
         # 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.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>
+        #     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>
         #             </div>
-        #         </div>
-        #         """)
+        #             """)
         #
-        #         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.Row():
+        #                 gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
+        #             
         #             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"
-        #                 )
-        #         
+        #                 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"
+        #                     )
+        #             
         #         submit_button = gr.Button(
         #             "Submit for Evaluation",
-        #             elem_classes="primary-button"
+        #             elem_classes="primary"
         #         )
         #         submission_result = gr.Markdown()
         #         submit_button.click(
@@ -805,24 +856,25 @@ with demo:
         #         )
 
     # Enhanced citation section
-    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>
+    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>
             </div>
-        </div>
-        """)
-        
-        citation_button = gr.Textbox(
-            value=CITATION_BUTTON_TEXT,
-            label=CITATION_BUTTON_LABEL,
-            lines=10,
-            elem_id="citation-button",
-            show_copy_button=True,
-        )
+            """)
+            
+            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("""