changes to font color

app.py

@@ -13,20 +13,20 @@ except UnicodeDecodeError:
     with open("styles.css", "r", encoding="latin-1") as f:
         custom_css = f.read()
 
-# Add more specific selector for Gradio and add white backgrounds
+# 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: #FFFFFF !important;
+    background-color: #27272A !important;
 }
 .gradio-container .search-panel, 
 div.gradio-container [class*="block"] .search-panel {
-    background-color: #FFFFFF !important;
+    background-color: #27272A !important;
 }
 """
 custom_css += additional_css
 
-# Create a custom theme with light colors for our panels
+# Create a custom theme with dark gray for our panels
 class CustomTheme(gr.themes.Base):
     def __init__(self):
         super().__init__(
@@ -35,60 +35,27 @@ class CustomTheme(gr.themes.Base):
             neutral_hue=colors.gray,
             text_size=gr.themes.sizes.text_lg
         )
-        # Set global background colors to white
+        # Don't set any global background colors
         self.block_border_width = "0px"
         self.block_shadow = "none"
-        self.block_background_fill = "#FFFFFF"
-        self.background_fill_primary = "#FFFFFF"
-        self.background_fill_secondary = "#FFFFFF"
 
-# Add additional CSS for the new styles, making everything white
+# Add additional CSS for the new styles, being more specific
 custom_css += """
 /* Only override specific panels by ID */
 #checkbox-panel,
 #search-panel {
-    background-color: #FFFFFF !important;
+    background-color: #27272A !important;
 }
-
 /* Only affect immediate children of these specific panels */
 #checkbox-panel > *,
 #search-panel > * {
-    background-color: #FFFFFF !important;
+    background-color: transparent !important;
 }
-
 /* Target checkbox inputs specifically */
 #checkbox-panel input[type="checkbox"],
 #search-panel input[type="text"] {
-    background-color: #FFFFFF !important;
-}
-"""
-
-# CSS for the page
-css = """
-/* Additional style to ensure text color in textareas is black */
-textarea, input, textarea[data-testid="textbox"] {
-    color: #000000 !important;
-}
-
-/* Fix for block labels in gradio */
-span[data-testid="block-info"] {
-    color: #000000 !important;
     background-color: transparent !important;
 }
-
-/* Additional style to ensure text color in textareas and inputs is black */
-textarea, input, textarea[data-testid="textbox"] {
-    color: #000000 !important;
-}
-
-/* Force black text color for search textbox */
-.search-panel textarea,
-textarea.scroll-hide,
-textarea.svelte-173056l,
-textarea[data-testid="textbox"] {
-    color: #000000 !important;
-    caret-color: #000000 !important;
-}
 """
 
 def strip_timestamp(name):
@@ -287,15 +254,13 @@ def get_color_for_value(value, min_val, max_val):
         norm = (value - min_val) / (max_val - min_val)
     if norm < 0.5:
         ratio = norm / 0.5
-        # Darker red for lower values
-        r = 180
-        g = int(140 * ratio)
+        r = 255
+        g = int(255 * ratio)
         b = 0
     else:
         ratio = (norm - 0.5) / 0.5
-        # Darker green for higher values
-        r = int(140 * (1 - ratio))
-        g = 140
+        r = int(255 * (1 - ratio))
+        g = 255
         b = 0
     return f"#{r:02X}{g:02X}{b:02X}"
 
@@ -385,7 +350,7 @@ def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail,
 # Create our custom theme instance
 custom_theme = CustomTheme()
 
-with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo:
+with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme) 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>')
     
@@ -394,23 +359,10 @@ with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo
     <script>
     // Function to fix background colors
     function fixBackgrounds() {
-        // Add a style tag to force all block-info spans to be black
-        var styleEl = document.createElement('style');
-        styleEl.textContent = `
-            span[data-testid="block-info"] { color: #000000 !important; }
-            .svelte-1gfkn6j { color: #000000 !important; }
-            .search-panel label, 
-            .search-panel .label-wrap,
-            .search-panel span,
-            #search-panel span,
-            div[id="search-panel"] span { color: #000000 !important; }
-        `;
-        document.head.appendChild(styleEl);
-        
         // Only fix specific panels by ID
         var checkboxPanel = document.getElementById('checkbox-panel');
         if (checkboxPanel) {
-            checkboxPanel.style.backgroundColor = '#F0F0F0';
+            checkboxPanel.style.backgroundColor = '#27272A';
             
             // Only make checkboxes and their direct containers transparent
             var checkboxes = checkboxPanel.querySelectorAll('input[type="checkbox"]');
@@ -419,85 +371,40 @@ with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo
                 if (parent) parent.style.backgroundColor = 'transparent';
                 checkbox.style.backgroundColor = 'transparent';
                 
-                // Find and style the associated label to be black
+                // Find and style the associated label to be white
                 var label = checkbox.nextElementSibling;
                 if (label && label.tagName === 'LABEL') {
-                    label.style.color = '#000000';
+                    label.style.color = '#FFFFFF';
                 }
                 
                 // Also find any span elements that might contain the label text
                 var spans = parent.querySelectorAll('span');
                 spans.forEach(function(span) {
-                    span.style.color = '#000000';
+                    span.style.color = '#FFFFFF';
                 });
                 
                 // Find label elements in the parent container
                 var labels = parent.querySelectorAll('label');
                 labels.forEach(function(label) {
-                    label.style.color = '#000000';
+                    label.style.color = '#FFFFFF';
                 });
-                
-                // Apply custom styling for the checkbox to show orange checkmark
-                if (checkbox.checked) {
-                    checkbox.style.position = 'relative';
-                    checkbox.style.appearance = 'none';
-                    checkbox.style.backgroundColor = '#F0F0F0';
-                    checkbox.style.border = '1px solid #CCCCCC';
-                    checkbox.style.borderRadius = '3px';
-                    
-                    // Create or update the checkmark element
-                    var checkmark = checkbox.querySelector('.orange-checkmark');
-                    if (!checkmark) {
-                        checkmark = document.createElement('span');
-                        checkmark.className = 'orange-checkmark';
-                        checkmark.style.position = 'absolute';
-                        checkmark.style.left = '50%';
-                        checkmark.style.top = '50%';
-                        checkmark.style.transform = 'translate(-50%, -50%)';
-                        checkmark.style.color = '#c34700';
-                        checkmark.style.fontSize = '14px';
-                        checkmark.style.fontWeight = 'bold';
-                        checkmark.innerText = '✓';
-                        checkbox.appendChild(checkmark);
-                    }
-                }
             });
         }
         
         var searchPanel = document.getElementById('search-panel');
         if (searchPanel) {
-            searchPanel.style.backgroundColor = '#F0F0F0';
+            searchPanel.style.backgroundColor = '#27272A';
             
             // Only make search input and its direct container transparent
             var searchInput = searchPanel.querySelector('input[type="text"]');
             if (searchInput) {
                 var parent = searchInput.parentElement;
                 if (parent) parent.style.backgroundColor = 'transparent';
-                searchInput.style.backgroundColor = '#FFFFFF';
+                searchInput.style.backgroundColor = 'transparent';
                 // Ensure the border is visible and matches text color
-                searchInput.style.border = '2px solid #000000';
-                searchInput.style.color = '#000000';
+                searchInput.style.border = '2px solid #FFFFFF';
+                searchInput.style.color = '#FFFFFF';
             }
-            
-            // Make sure the label is black
-            var searchLabels = searchPanel.querySelectorAll('label, .label-wrap, .label-wrap span');
-            searchLabels.forEach(function(label) {
-                label.style.color = '#000000';
-            });
-            
-            // Target the specific span element that contains the label text
-            var blockInfoSpans = document.querySelectorAll('span[data-testid="block-info"]');
-            blockInfoSpans.forEach(function(span) {
-                span.style.color = '#000000';
-            });
-            
-            // Also target elements with the svelte class
-            var svelteElements = document.querySelectorAll('.svelte-1gfkn6j');
-            svelteElements.forEach(function(element) {
-                if (element.textContent.includes('Search models')) {
-                    element.style.color = '#000000';
-                }
-            });
         }
     }
     
@@ -529,8 +436,7 @@ with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo
         search_input = gr.Textbox(
             label="Search models",
             placeholder="Type to filter…",
-            elem_classes="search-input",
-            elem_id="search-input"
+            elem_classes="search-input"
         )
     
     hidden_sort_state = gr.State(value={"sort_by": "Average Score", "ascending": False})
@@ -613,53 +519,5 @@ with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo
 
     demo.load(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
 
-# JavaScript to change panel backgrounds
-searchpanel_js = """
-function applyStyles() {
-    // Add a style tag to the head to ensure textarea text color only
-    var styleElement = document.createElement('style');
-    styleElement.textContent = `
-        textarea, 
-        textarea[data-testid="textbox"], 
-        textarea.scroll-hide, 
-        textarea.svelte-173056l {
-            color: #000000 !important;
-            caret-color: #000000 !important;
-            background-color: #FFFFFF !important;
-        }
-        
-        /* Make all backgrounds white */
-        body, div, span, input, textarea, select, button {
-            background-color: #FFFFFF !important;
-        }
-        
-        /* Ensure all text is black */
-        body, div, span, input, textarea, select, button, label, p, h1, h2, h3, h4, h5, h6 {
-            color: #000000 !important;
-        }
-    `;
-    document.head.appendChild(styleElement);
-
-    // Wait for the DOM to be fully loaded
-    var searchPanel = document.querySelector('.search-panel');
-    if (searchPanel) {
-        // Only focus on making the text black
-        var searchTextarea = searchPanel.querySelector('textarea[data-testid="textbox"]');
-        if (searchTextarea) {
-            // ONLY set color, not background
-            searchTextarea.setAttribute('style', 'color: #000000 !important; background-color: #FFFFFF !important;');
-        }
-    }
-}
-
-// Call the function when page loads
-document.addEventListener('DOMContentLoaded', applyStyles);
-// Also call it after a short delay to catch elements that might load later
-setTimeout(applyStyles, 500);
-// And set an interval to catch any dynamically loaded elements
-setInterval(applyStyles, 2000);
-"""
-
 if __name__ == "__main__":
-    demo.load(js=searchpanel_js)
     demo.launch()

styles.css

@@ -3,16 +3,16 @@
    ------------------------------------------------------------------ */
    body {
     font-family: Arial, sans-serif;
-    background-color: #FFFFFF;    
+    background-color: #000000;    
     margin: 20px;
-    color: #000000;              
+    color: #FFFFFF;              
 }
 
 /* ------------------------------------------------------------------
    Headings & Subtitle
    ------------------------------------------------------------------ */
 h1, h2, h3, .subtitle, .variants_container {
-    color: #000000;              
+    color: #CCCCCC;              
     display: flex;
     text-align: center;
     justify-content: center;
@@ -26,7 +26,7 @@ h1 {
 
 .subtitle {
     margin-bottom: 50px;
-    color: #000000 !important;
+    color: #CCCCCC !important;
 }
 
 /* ------------------------------------------------------------------
@@ -40,20 +40,20 @@ h1 {
     justify-content: center;
     padding: 15px;
     width: fit-content;
-    color: #000000 !important;
-    background-color: #FFFFFF;
+    color: #CCCCCC!important;
+    background-color:transparent;
 }
 
 .variants_title {
     font-size: 20px;
     font-weight: 500;
-    color: #000000 !important;
+    color: #CCCCCC !important;
 }
 
-/* Force all descendants of the variants container to have black text */
+/* Force all descendants of the variants container to be dark */
 .variants_container,
 .variants_container * {
-    color: #000000 !important;
+    color: #CCCCCC!important;
 }
 
 
@@ -69,36 +69,40 @@ table {
 }
 
 table th {
-    background-color: #FFFFFF;
-    color: #000000;
+    background-color: #27272A;
+    color: #FFFFFF;
     font-weight: bold;
     font-size: 18px;
     border: 1px solid #CCCCCC; 
 }
 
 table tr:not(:first-child):nth-child(odd) {
-    background-color: #FFFFFF;
+    background-color: #27272aef;
+
 }
 
 table tr:not(:first-child):nth-child(even) {
-    background-color: #FFFFFF;
+    background-color: #27272add;
+
 }
 
 table tr:not(:first-child):nth-child(odd) td {
-    color: #000000;
+    color: #ffffff;
     border: 1px solid #CCCCCC; 
-}
+
+  }
   
-table tr:not(:first-child):nth-child(even) td {
-    color: #000000;
+  table tr:not(:first-child):nth-child(even) td {
+    color: #ffffff;
     border: 1px solid #CCCCCC; 
-}
+
+  }
   
 
 th, td {
     padding: 8px;
     text-align: center;
-    border: 1px solid #DDDDDD;
+    border: 1px solid white;
 }
 
 /* ------------------------------------------------------------------
@@ -106,7 +110,7 @@ th, td {
    ------------------------------------------------------------------ */
 button {
     background-color: #c34700b6;   
-    color: #000000;
+    color: #ffffff;
     border: none;
     padding: 8px 12px;
     border-radius: 4px;
@@ -118,32 +122,7 @@ button {
 button:hover {
     background-color: #c34800;
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-/* Style the checkbox to have an orange checkmark */
-input[type="checkbox"] {
-    accent-color: #FFFFFF;
-}
-
-/* Create a custom appearance for checked checkboxes */
-input[type="checkbox"]:checked {
-    position: relative;
-    appearance: none;
-    background-color: #FFFFFF;
-    border: 1px solid #CCCCCC;
-    border-radius: 3px;
-}
-
-input[type="checkbox"]:checked::before {
-    content: '✓';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: #c34700; /* Orange color for the checkmark */
-    font-size: 14px;
-    font-weight: bold;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
 /* ------------------------------------------------------------------
@@ -153,14 +132,14 @@ input[type="checkbox"]:checked::before {
     text-align: center;
     margin: 10px 0;
     padding: 5px;
-    background-color: #FFFFFF;
+    background-color: #27272A;
     border-radius: 5px;
     font-size: 16px;
 }
 
 .sort-info,
 .sort-info * {
-  color: #000000 !important;
+  color: #CCCCCC !important;
 }
 
 
@@ -169,7 +148,7 @@ input[type="checkbox"]:checked::before {
    ------------------------------------------------------------------ */
 .gradio-container .checkbox-container {
     margin-right: 10px;
-    background-color: #FFFFFF;
+    background-color: #27272A;
     padding: 8px;
     border-radius: 5px;
 }
@@ -178,8 +157,8 @@ input[type="checkbox"]:checked::before {
    Search Input
    ------------------------------------------------------------------ */
 input[type="text"] {
-    background-color: #FFFFFF;
-    color: #000000;
+    background-color: #27272A;
+    color: #FFFFFF;
     border: 1px solid #CCCCCC;
     border-radius: 5px;
     padding: 10px;
@@ -189,33 +168,19 @@ input[type="text"] {
 }
 
 input[type="text"]:focus {
-    border-color: #000000;
+    border-color: #FFFFFF;
     outline: none;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-}
-
-/* Target the textarea used for search input */
-textarea[data-testid="textbox"],
-.scroll-hide,
-.svelte-173056l {
-    color: #000000 !important;
-    background-color: #FFFFFF !important;
-}
-
-/* Apply the style when typing and focused */
-textarea[data-testid="textbox"]:focus {
-    color: #000000 !important;
-    background-color: #FFFFFF !important;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
 /* ------------------------------------------------------------------
    No‐results Message
    ------------------------------------------------------------------ */
 .no-results {
-    color: #000000;
+    color: #FFFFFF;
     text-align: center;
     padding: 30px;
-    background-color: #FFFFFF;
+    background-color: #27272A;
     border-radius: 10px;
     font-size: 18px;
     margin-top: 20px;
@@ -225,6 +190,10 @@ textarea[data-testid="textbox"]:focus {
    Checkbox Panel and Search Panel - High Specificity Rules
    ------------------------------------------------------------------ */
 
+/* Reset the global styles to ensure we're only affecting what we want */
+html body .gradio-container {
+    /* Default background stays as is */
+}
 
 /* Only target the specific checkbox and search panels */
 #checkbox-panel, 
@@ -232,7 +201,7 @@ div.checkbox-panel,
 div[id="checkbox-panel"],
 .gradio-container div[id="checkbox-panel"],
 .gradio-container .checkbox-panel {
-    background-color: #FFFFFF !important;
+    background-color: #27272A !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -243,27 +212,27 @@ div.search-panel,
 div[id="search-panel"],
 .gradio-container div[id="search-panel"],
 .gradio-container .search-panel {
-    background-color: #FFFFFF !important;
+    background-color: #27272A !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
 }
 
-/* Make inner components white */
+/* Make inner components transparent to let background show through */
 #checkbox-panel *, .checkbox-panel * {
-    background-color: #FFFFFF !important;
+    background-color: transparent !important;
 }
 
 #search-panel *, .search-panel * {
-    background-color: #FFFFFF !important;
+    background-color: transparent !important;
 }
 
 /* Override other styles that might be affecting the color */
 div[class*="block"] {
-    background-color: #FFFFFF !important; 
+    background-color: initial; /* Reset to default */
 }
 
-/* Make all elements white */
+/* Only make transparent what we need to be transparent */
 .checkbox-panel .form,
 .checkbox-panel .block,
 .checkbox-panel .container,
@@ -272,118 +241,42 @@ div[class*="block"] {
 .search-panel .block,
 .search-panel .container,
 .search-panel input[type="text"] {
-    background-color: #FFFFFF !important;
-}
-
-/* Make the textbox border visible with the same color as the text */
-.search-panel input[type="text"] {
-    border: 2px solid #000000 !important;
-    background-color: #FFFFFF !important;
-    color: #000000 !important;
+    background-color: transparent !important;
 }
 
-/* Ensure input text and placeholder have consistent styling */
-.search-panel input[type="text"],
-.search-panel input[type="text"]::placeholder,
-.search-panel textarea[data-testid="textbox"],
-.search-panel textarea[data-testid="textbox"]::placeholder {
-    color: rgba(0,0,0,0.7) !important;
-}
+/* Remove overly broad selectors affecting too many elements */
 
-/* Ensure the search panel label is black */
-.search-panel label,
-.search-panel .label-wrap,
-.search-panel .label-wrap span {
-    color: #000000 !important;
+/* Root level variable override */
+:root {
+    --block-background-fill: transparent !important;
+    --panel-background-fill: green !important;
 }
 
-/* Override any Gradio specific label styling */
-#search-panel label,
-div[id="search-panel"] label,
-.gradio-container #search-panel label {
-    color: #000000 !important;
+/* Make the textbox border visible with the same color as the text */
+.search-panel input[type="text"] {
+    border: 2px solid #FFFFFF !important;
+    background-color: transparent !important;
+    color: #FFFFFF !important;
 }
 
-/* Make sure the input text is black when user types */
-#search-panel input[type="text"],
-div[id="search-panel"] input[type="text"],
+/* Ensure input text and placeholder have consistent styling */
 .search-panel input[type="text"],
-#search-panel textarea,
-div[id="search-panel"] textarea,
-.search-panel textarea {
-    color: #000000 !important;
+.search-panel input[type="text"]::placeholder {
+    color: rgba(255,255,255,0.9) !important;
 }
 
-/* Style the checkbox labels to ensure they have black text */
+/* Style the checkbox labels to ensure they have white text */
 .checkbox-panel label,
 .checkbox-panel .label-wrap,
 .checkbox-panel .label-wrap span {
-    color: #000000 !important;
+    color: #FFFFFF !important;
 }
 
 /* Make the checkbox text fully opaque and sharp */
 .checkbox-panel input[type="checkbox"] + label,
 .checkbox-panel input[type="checkbox"] ~ label,
 .checkbox-panel input[type="checkbox"] ~ div label {
-    color: #000000 !important;
+    color: #FFFFFF !important;
     opacity: 1 !important;
     font-weight: normal;
-}
-
-/* Root level variable override */
-:root {
-    --block-background-fill: #FFFFFF !important;
-    --panel-background-fill: #FFFFFF !important;
-}
-
-/* Target the specific Gradio label element */
-span[data-testid="block-info"],
-.svelte-1gfkn6j,
-span.svelte-1gfkn6j,
-[data-testid="block-info"] {
-    color: #000000 !important;
-}
-
-/* Force all span elements in the search panel to be black */
-.search-panel span,
-#search-panel span,
-div[id="search-panel"] span {
-    color: #000000 !important;
-}
-
-/* Target the specific search input by ID */
-#search-input,
-#search-input label,
-#search-input span,
-[id="search-input"] + div label,
-[id="search-input"] ~ div span,
-[id="search-input"] + label {
-    color: #000000 !important;
-}
-
-/* Ultra-specific selector targeting the label span */
-div[id="search-panel"] span[data-testid="block-info"] {
-    color: #000000 !important;
-    font-weight: bold !important;
-}
-
-/* Fix for block labels in gradio */
-span[data-testid="block-info"] {
-    color: #000000 !important;
-    background-color: #FFFFFF !important;
-}
-
-/* Additional style to ensure text color in textareas and inputs is black */
-textarea, input, textarea[data-testid="textbox"] {
-    color: #000000 !important;
-}
-
-/* Force black text color for search textbox */
-.search-panel textarea,
-textarea.scroll-hide,
-textarea.svelte-173056l,
-textarea[data-testid="textbox"] {
-    color: #000000 !important;
-    caret-color: #000000 !important;
-    background-color: #FFFFFF !important;
 }