changes to font color

app.py

@@ -4,8 +4,26 @@ import json
 import os
 
 # Load external CSS from the file "styles.css"
-with open("styles.css", "r") as f:
-    custom_css = f.read()
+try:
+    with open("styles.css", "r", encoding="utf-8") as f:
+        custom_css = f.read()
+except UnicodeDecodeError:
+    # Try with a different encoding if utf-8 fails
+    with open("styles.css", "r", encoding="latin-1") as f:
+        custom_css = f.read()
+
+# Add more specific selector for Gradio and add !important to improve the cascading
+additional_css = """
+.gradio-container .checkbox-panel, 
+div.gradio-container [class*="block"] .checkbox-panel {
+    background-color: green !important;
+}
+.gradio-container .search-panel, 
+div.gradio-container [class*="block"] .search-panel {
+    background-color: green !important;
+}
+"""
+custom_css += additional_css
 
 def strip_timestamp(name):
     """Remove the timestamp portion from the model name."""
@@ -300,6 +318,48 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
     gr.Markdown("# 🏆 TD-EVAL Model Evaluation Leaderboard")
     gr.HTML('<div class="subtitle">This leaderboard displays aggregated model performance across multiple evaluation metrics.</div>')
     
+    # Add JavaScript to ensure backgrounds are properly set
+    gr.HTML("""
+    <script>
+    // Function to fix background colors
+    function fixBackgrounds() {
+        // Fix checkbox panel
+        var checkboxPanels = document.querySelectorAll('.checkbox-panel');
+        for (var i = 0; i < checkboxPanels.length; i++) {
+            checkboxPanels[i].style.backgroundColor = 'green';
+        }
+        
+        // Fix search panel
+        var searchPanels = document.querySelectorAll('.search-panel');
+        for (var i = 0; i < searchPanels.length; i++) {
+            searchPanels[i].style.backgroundColor = 'green';
+        }
+        
+        // Also try to find parent blocks and set their background
+        checkboxPanels.forEach(function(panel) {
+            var parent = panel.closest('.block');
+            if (parent) {
+                parent.style.backgroundColor = 'green';
+            }
+        });
+        
+        searchPanels.forEach(function(panel) {
+            var parent = panel.closest('.block');
+            if (parent) {
+                parent.style.backgroundColor = 'green';
+            }
+        });
+    }
+    
+    // Run on page load and every second for 5 seconds to catch any delayed rendering
+    setTimeout(fixBackgrounds, 500);
+    setTimeout(fixBackgrounds, 1000);
+    setTimeout(fixBackgrounds, 2000);
+    setTimeout(fixBackgrounds, 3000);
+    setTimeout(fixBackgrounds, 4000);
+    </script>
+    """)
+    
     gr.HTML('''
       <div class="variants_container">
         <div class="variants_title">Variants:</div>
@@ -312,12 +372,12 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
       </div>
     ''')
     
-    with gr.Row(elem_classes="checkbox-panel"):
+    with gr.Row(elem_classes="checkbox-panel", elem_id="checkbox-panel"):
         cb_mwoz        = gr.Checkbox(label="mwoz",        value=True)
         cb_tau_airline = gr.Checkbox(label="tau-airline", value=True)
         cb_tau_retail  = gr.Checkbox(label="tau-retail",  value=True)
 
-    with gr.Row(elem_classes="search-panel"):
+    with gr.Row(elem_classes="search-panel", elem_id="search-panel"):
         search_input = gr.Textbox(
             label="Search models",
             placeholder="Type to filter…",
@@ -402,6 +462,52 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
     cb_tau_retail.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
     search_input.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
 
+    # Add debug info
+    gr.HTML("""
+    <div style="margin-top: 50px; border-top: 1px solid #ccc; padding-top: 20px;">
+        <h3>Debug Info</h3>
+        <p>This panel shows diagnostic information about the UI styling.</p>
+        <script>
+            function showDebugInfo() {
+                // Check for checkbox-panel
+                const checkboxPanel = document.querySelector('.checkbox-panel');
+                const searchPanel = document.querySelector('.search-panel');
+                
+                let info = "<h4>CSS Classes Investigation</h4>";
+                
+                if (checkboxPanel) {
+                    const computedStyle = window.getComputedStyle(checkboxPanel);
+                    info += "<p><strong>Checkbox Panel Background:</strong> " + 
+                           computedStyle.backgroundColor + "</p>";
+                    info += "<p><strong>Checkbox Panel Classes:</strong> " + 
+                           checkboxPanel.className + "</p>";
+                } else {
+                    info += "<p>Checkbox panel not found</p>";
+                }
+                
+                if (searchPanel) {
+                    const computedStyle = window.getComputedStyle(searchPanel);
+                    info += "<p><strong>Search Panel Background:</strong> " + 
+                           computedStyle.backgroundColor + "</p>";
+                    info += "<p><strong>Search Panel Classes:</strong> " + 
+                           searchPanel.className + "</p>";
+                } else {
+                    info += "<p>Search panel not found</p>";
+                }
+                
+                document.getElementById('debug-output').innerHTML = info;
+            }
+            
+            // Run on page load and every 2 seconds after
+            setTimeout(function() {
+                showDebugInfo();
+                setInterval(showDebugInfo, 2000);
+            }, 1000);
+        </script>
+        <div id="debug-output"></div>
+    </div>
+    """)
+
     demo.load(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
 
 if __name__ == "__main__":

styles.css

@@ -186,121 +186,84 @@ input[type="text"]:focus {
     margin-top: 20px;
 }
 
-/* ─────────────────────────────────────────────────────────────────────────
-   the checkbox‐group panel
-   ─────────────────────────────────────────────────────────────────────── */
-   .checkbox-panel {
-    background-color: green    !important;
-    padding:        12px       !important;
-    border-radius:  6px        !important;
-    margin-bottom:  1rem       !important; /* give it some breathing room */
-  }
-  
-  .checkbox-panel,
-  .checkbox-panel * {
-    color: #FFFFFF !important;
-  }
-  
-  /* ─────────────────────────────────────────────────────────────────────────
-     the search‐bar panel
-     ─────────────────────────────────────────────────────────────────────── */
-  .search-panel {
-    background-color: green    !important;
-    padding:        12px       !important;
-    border-radius:  6px        !important;
-    margin-bottom:  1rem       !important;
-  }
-  
-  .search-panel,
-  .search-panel * {
-    color: #FFFFFF !important;
-  }
-  
-  /* make the textbox itself blend with the panel */
-  .search-panel input[type="text"] {
-    background-color: transparent !important;
-    border:           1px solid #FFFFFF !important;
-  }
-  
-  /* lighten the placeholder text so it’s visible */
-  .search-panel input[type="text"]::placeholder {
-    color: rgba(255,255,255,0.7) !important;
-  }
-
-
-  
-
-.checkbox-panel { background-color: green !important; }
-.checkbox-panel, .checkbox-panel * { color: #FFF !important; }
-
-.search-panel  { background-color: green !important; }
-.search-panel, .search-panel  * { color: #FFF !important; }
+/* ------------------------------------------------------------------
+   Checkbox Panel and Search Panel - High Specificity Rules
+   ------------------------------------------------------------------ */
 
-/* your existing panel styles */
+/* Target all possible Gradio wrappers for checkbox-panel */
+div[class*="gradio-container"] div[class*="checkbox-panel"],
+div[class*="block"] div[class*="checkbox-panel"],
+div[class*="row"] div[class*="checkbox-panel"],
+.gradio-container .checkbox-panel,
+[data-testid*="row"] .checkbox-panel,
 .checkbox-panel {
     background-color: green !important;
     padding: 12px !important;
     border-radius: 6px !important;
-  }
-  .checkbox-panel, .checkbox-panel * {
-    color: #FFFFFF !important;
-  }
-  
-  /* make the checkbox “cards” transparent */
-  .checkbox-panel .checkbox-container {
-    background-color: transparent !important;
-  }
-  
-  /* similarly for the search bar row */
-  .search-panel {
+    margin-bottom: 1rem !important;
+}
+
+/* Target all possible Gradio wrappers for search-panel */
+div[class*="gradio-container"] div[class*="search-panel"],
+div[class*="block"] div[class*="search-panel"],
+div[class*="row"] div[class*="search-panel"],
+.gradio-container .search-panel,
+[data-testid*="row"] .search-panel,
+.search-panel {
     background-color: green !important;
     padding: 12px !important;
     border-radius: 6px !important;
-  }
-  .search-panel, .search-panel * {
+    margin-bottom: 1rem !important;
+}
+
+/* ------------------------------------------------------------------
+   Override any Gradio-specific styles that might be interfering
+   ------------------------------------------------------------------ */
+.gradio-container [class*="block"] {
+    background-color: inherit;
+}
+
+/* Force all checkbox-panel descendants to have white text */
+.checkbox-panel,
+.checkbox-panel *,
+.checkbox-panel label,
+.checkbox-panel input,
+.checkbox-panel .label-wrap,
+.checkbox-panel .label-wrap span {
     color: #FFFFFF !important;
-  }
-  
-  /* strip out Gradio’s default input wrapper */
-  .search-panel .gr-form-group {
-    background-color: transparent !important;
-  }
-  
-  /* placeholder styling */
-  .search-panel .search-input input::placeholder {
-    color: rgba(255,255,255,0.7) !important;
-  }
-  
-  /* ─── Kill the inner “card” backgrounds ───────────────────────────────────── */
+}
+
+/* Force all search-panel descendants to have white text */
+.search-panel,
+.search-panel *,
+.search-panel label,
+.search-panel input,
+.search-panel .label-wrap,
+.search-panel .label-wrap span {
+    color: #FFFFFF !important;
+}
+
+/* Make the form elements inside transparent */
+.search-panel input[type="text"],
+.search-panel .gr-form-group,
+.search-panel .block,
+.checkbox-panel .checkbox-container,
 .checkbox-panel .block {
     background-color: transparent !important;
-    border:           none           !important;
-    box-shadow:       none           !important;
-  }
-  
-  /* If you ever need to do the same for the search row: */
-  .search-panel .block {
-    background-color: transparent !important;
-    border:           none           !important;
-    box-shadow:       none           !important;
-  }
-  
+}
 
+/* Make the textbox border white */
+.search-panel input[type="text"] {
+    border: 1px solid #FFFFFF !important;
+}
 
-  :root {
-    --block-background-fill: var(--neutral-800);
-  }
-  
+/* Lighten the placeholder text */
+.search-panel input[type="text"]::placeholder {
+    color: rgba(255,255,255,0.7) !important;
+}
 
-  /* at the very end of styles.css */
-.checkbox-panel {
-    --block-background-fill: transparent !important;
-  }
-  .search-panel {
+/* Root level variable override */
+:root {
     --block-background-fill: transparent !important;
-  }
-  
-
-  .block {
-    background-color: red !important;
-  }
+    --panel-background-fill: green !important;
+}