Update UI

app.py

@@ -141,43 +141,18 @@ def search_models(df: pd.DataFrame, search_text: str) -> pd.DataFrame:
     return df[mask]
 
 
-def filter_columns(df: pd.DataFrame, selected_cols: list[str]) -> pd.DataFrame:
+def update_leaderboard(search_text: str) -> pd.DataFrame:
     """
-    Show only selected columns in dataframe.
-
-    Args:
-        df: Full dataframe
-        selected_cols: List of column names to display
-
-    Returns:
-        Dataframe with selected columns
-    """
-    # Always include model and score columns
-    required_cols = ["model", "score"]
-
-    # Combine required and selected columns
-    cols_to_show = required_cols.copy()
-    for col in selected_cols:
-        if col not in cols_to_show and col in df.columns:
-            cols_to_show.append(col)
-
-    return df[cols_to_show]
-
-
-def update_leaderboard(search_text: str, selected_cols: list[str]) -> pd.DataFrame:
-    """
-    Update leaderboard table based on search and column selection.
+    Update leaderboard table based on search query.
 
     Args:
         search_text: Search query
-        selected_cols: Selected columns to display
 
     Returns:
-        Filtered and column-selected dataframe
+        Filtered dataframe
     """
     df = build_leaderboard_df()
     df = search_models(df, search_text)
-    df = filter_columns(df, selected_cols)
     return df
 
 
@@ -207,15 +182,6 @@ def build_demo() -> gr.Blocks:
     # Get leaderboard data
     leaderboard_df = build_leaderboard_df()
 
-    # Get all column names for checkbox selection (use actual column names from dataframe)
-    all_columns = list(leaderboard_df.columns)
-
-    # Columns available for selection (exclude model/score which are always shown)
-    available_columns = [col for col in all_columns if col not in ["model", "score"]]
-
-    # Columns displayed by default (exclude system_prompt)
-    default_columns = [col for col in available_columns if col != "system_prompt"]
-
     # Build interface
     with demo:
         # Add theme detection script
@@ -233,31 +199,19 @@ def build_demo() -> gr.Blocks:
                 with gr.TabItem("🏅 Лидерборд", elem_id="llm-benchmark-tab-table", id=0):
                     gr.Markdown("### Таблица результатов моделей DeathMath")
 
-                    # Search and column selection controls
-                    with gr.Row(elem_classes=["controls-row"]):
-                        search_box = gr.Textbox(
-                            label="Поиск по названию модели",
-                            placeholder="Введите название модели...",
-                            elem_classes=["search-box"],
-                            scale=1,
-                        )
-
-                        column_selector = gr.CheckboxGroup(
-                            choices=available_columns,  # All columns available (including system_prompt)
-                            value=default_columns,  # Default excludes system_prompt
-                            label="Отображаемые колонки",
-                            elem_classes=["column-selector"],
-                            scale=2,
-                        )
+                    # Centered search box
+                    search_box = gr.Textbox(
+                        label="Поиск по названию модели",
+                        placeholder="Введите название модели...",
+                        elem_classes=["search-box-centered"],
+                    )
 
-                    # Leaderboard table - show ALL rows
-                    # Apply initial column filtering (exclude system_prompt by default)
-                    initial_df = filter_columns(leaderboard_df, default_columns)
+                    # Leaderboard table - show ALL columns including system_prompt
+                    all_cols = leaderboard_df.columns.tolist()
 
-                    # Define datatypes for displayed columns
-                    displayed_cols = ["model", "score"] + default_columns
+                    # Define datatypes for all columns
                     column_datatypes = []
-                    for col in displayed_cols:
+                    for col in all_cols:
                         if col == "model":
                             column_datatypes.append("markdown")
                         elif col == "system_prompt":
@@ -265,25 +219,22 @@ def build_demo() -> gr.Blocks:
                         else:
                             column_datatypes.append("number")
 
+                    # Set column widths: model=240px, scores=85px, system_prompt=200px
+                    column_widths = ["240px"] + ["85px"] * (len(all_cols) - 2) + ["200px"]
+
                     leaderboard_table = gr.Dataframe(
-                        value=initial_df,  # Use filtered dataframe, not full leaderboard_df
-                        headers=displayed_cols,
+                        value=leaderboard_df,
+                        headers=all_cols,
                         datatype=column_datatypes,
-                        max_height="75vh",  # Allow scrolling for many rows
+                        max_height="75vh",
                         wrap=True,
                         interactive=False,
-                        column_widths=["240px"] + ["85px"] * (len(displayed_cols) - 1),  # Compact widths
+                        column_widths=column_widths,
                         elem_id="leaderboard-table",
                     )
 
-                    # Update table when search or column selection changes
-                    search_box.change(
-                        fn=update_leaderboard, inputs=[search_box, column_selector], outputs=[leaderboard_table]
-                    )
-
-                    column_selector.change(
-                        fn=update_leaderboard, inputs=[search_box, column_selector], outputs=[leaderboard_table]
-                    )
+                    # Update table when search changes
+                    search_box.change(fn=update_leaderboard, inputs=[search_box], outputs=[leaderboard_table])
 
                 # Submit results tab
                 with gr.TabItem("🚀 Отправить результаты", elem_id="submit-tab", id=1):

src/display/styles.py

@@ -147,6 +147,12 @@ h1, h2, h3, h4, h5, h6 {
    Tab Buttons
    ======================================== */
 
+.tab-buttons {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
 .tab-buttons button {
   font-size: 18px;
   color: var(--foreground);
@@ -197,171 +203,39 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* ========================================
-   Search Bar and Controls - Compact ASR Style
+   Centered Search Bar (Transparent Background)
    ======================================== */
 
-.controls-row {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.search-box {
-  flex: 1;
-  min-width: 250px;
+.search-box-centered {
+  max-width: 1200px;
+  width: 85%;
+  margin: 0 auto 24px auto;
 }
 
-.search-box input, .search-box textarea {
+.search-box-centered input,
+.search-box-centered textarea {
   width: 100%;
-  padding: 10px 14px !important;
-  font-size: 14px !important;
-  background: var(--card) !important;
+  padding: 12px 16px !important;
+  font-size: 15px !important;
+  background: transparent !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   color: var(--foreground) !important;
   transition: all 0.2s ease;
+  text-align: center;
 }
 
-.search-box input:focus, .search-box textarea:focus {
+.search-box-centered input:focus,
+.search-box-centered textarea:focus {
   border-color: var(--ring) !important;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
   outline: none !important;
 }
 
-.search-box input::placeholder, .search-box textarea::placeholder {
+.search-box-centered input::placeholder,
+.search-box-centered textarea::placeholder {
   color: var(--muted-foreground) !important;
-}
-
-/* ========================================
-   Column Selector - Compact ASR Style
-   ======================================== */
-
-.column-selector {
-  flex: 2;
-  min-width: 350px;
-}
-
-.column-selector label.block {
-  font-size: 13px !important;
-  font-weight: 500 !important;
-  color: var(--muted-foreground) !important;
-  margin-bottom: 8px !important;
-}
-
-/* Gradio checkbox group - horizontal compact layout */
-.column-selector .checkboxgroup-container,
-.checkboxgroup-container {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-  padding: 0 !important;
-}
-
-.column-selector .checkboxgroup-container label,
-.checkboxgroup-container label {
-  display: inline-flex !important;
-  align-items: center !important;
-  padding: 6px 12px !important;
-  margin: 0 !important;
-  background: var(--card) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: calc(var(--radius) - 2px) !important;
-  cursor: pointer !important;
-  font-size: 13px !important;
-  font-weight: 500 !important;
-  color: var(--foreground) !important;
-  transition: all 0.15s ease !important;
-  white-space: nowrap !important;
-}
-
-.column-selector .checkboxgroup-container label:hover,
-.checkboxgroup-container label:hover {
-  background: var(--accent) !important;
-  border-color: var(--primary) !important;
-}
-
-.column-selector .checkboxgroup-container input[type="checkbox"],
-.checkboxgroup-container input[type="checkbox"] {
-  width: 16px !important;
-  height: 16px !important;
-  margin: 0 6px 0 0 !important;
-  cursor: pointer !important;
-  accent-color: var(--primary) !important;
-}
-
-.column-selector .checkboxgroup-container label:has(input:checked),
-.checkboxgroup-container label:has(input:checked) {
-  background: var(--primary) !important;
-  color: var(--primary-foreground) !important;
-  border-color: var(--primary) !important;
-  font-weight: 600 !important;
-}
-
-/* Custom checkbox using ::before pseudo-element */
-
-/* Completely hide native checkbox and its checkmark */
-.checkboxgroup-container label input[type="checkbox"],
-.column-selector .checkboxgroup-container label input[type="checkbox"] {
-  position: absolute !important;
-  opacity: 0 !important;
-  width: 0 !important;
-  height: 0 !important;
-  margin: 0 !important;
-  pointer-events: none !important;
-}
-
-/* Hide any SVG icons/checkmarks that Gradio adds */
-.checkboxgroup-container label svg,
-.column-selector .checkboxgroup-container label svg,
-.checkboxgroup-container label input[type="checkbox"] + *,
-.column-selector .checkboxgroup-container label input[type="checkbox"] + * {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-/* Position label to make room for custom indicator */
-.checkboxgroup-container label,
-.column-selector .checkboxgroup-container label {
-  position: relative !important;
-  padding-left: 26px !important;
-}
-
-/* Create custom circle indicator using ::before */
-.checkboxgroup-container label::before,
-.column-selector .checkboxgroup-container label::before {
-  content: "" !important;
-  position: absolute !important;
-  left: 6px !important;
-  top: 50% !important;
-  transform: translateY(-50%) !important;
-  width: 16px !important;
-  height: 16px !important;
-  border: 2px solid var(--border) !important;
-  border-radius: 50% !important;
-  background: transparent !important;
-  transition: all 0.2s ease !important;
-  display: block !important;
-  visibility: visible !important;
-  opacity: 1 !important;
-}
-
-/* Fill circle when checked */
-.checkboxgroup-container label:has(input:checked)::before,
-.column-selector .checkboxgroup-container label:has(input:checked)::before {
-  background: var(--primary) !important;
-  border-color: var(--primary) !important;
-}
-
-/* Keep text label visible */
-.checkboxgroup-container label > span,
-.column-selector .checkboxgroup-container label > span {
-  font-size: 13px !important;
-  line-height: normal !important;
-  font-weight: 500 !important;
-  display: inline !important;
-  visibility: visible !important;
+  text-align: center;
 }
 
 /* ========================================
@@ -554,11 +428,6 @@ input:focus, textarea:focus, select:focus {
     padding: 16px;
   }
 
-  .checkbox-group {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 8px;
-  }
-
   .tab-buttons button {
     font-size: 16px;
     padding: 10px 16px;
@@ -577,10 +446,6 @@ input:focus, textarea:focus, select:focus {
 }
 
 @media (max-width: 600px) {
-  .checkbox-group {
-    grid-template-columns: 1fr;
-  }
-
   table {
     font-size: 13px;
   }