changes to font color

.gitattributes

@@ -34,3 +34,20 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.json filter=lfs diff=lfs merge=lfs -text
+
+# Set default behavior to automatically normalize line endings
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout
+*.py text
+*.js text
+*.html text
+*.css text
+*.md text
+
+# Denote all files that are truly binary and should not be modified
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary

app.py

@@ -26,7 +26,7 @@ div.gradio-container [class*="block"] .search-panel {
 """
 custom_css += additional_css
 
-# Create a custom theme with dark gray for our panels
+# Create a custom theme with light colors for our panels
 class CustomTheme(gr.themes.Base):
     def __init__(self):
         super().__init__(
@@ -44,7 +44,7 @@ custom_css += """
 /* Only override specific panels by ID */
 #checkbox-panel,
 #search-panel {
-    background-color: #27272A !important;
+    background-color: #F0F0F0 !important;
 }
 /* Only affect immediate children of these specific panels */
 #checkbox-panel > *,
@@ -254,13 +254,15 @@ 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
-        r = 255
-        g = int(255 * ratio)
+        # Darker red for lower values
+        r = 180
+        g = int(140 * ratio)
         b = 0
     else:
         ratio = (norm - 0.5) / 0.5
-        r = int(255 * (1 - ratio))
-        g = 255
+        # Darker green for higher values
+        r = int(140 * (1 - ratio))
+        g = 140
         b = 0
     return f"#{r:02X}{g:02X}{b:02X}"
 
@@ -359,10 +361,23 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     <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 = '#27272A';
+            checkboxPanel.style.backgroundColor = '#F0F0F0';
             
             // Only make checkboxes and their direct containers transparent
             var checkboxes = checkboxPanel.querySelectorAll('input[type="checkbox"]');
@@ -371,40 +386,85 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
                 if (parent) parent.style.backgroundColor = 'transparent';
                 checkbox.style.backgroundColor = 'transparent';
                 
-                // Find and style the associated label to be white
+                // Find and style the associated label to be black
                 var label = checkbox.nextElementSibling;
                 if (label && label.tagName === 'LABEL') {
-                    label.style.color = '#FFFFFF';
+                    label.style.color = '#000000';
                 }
                 
                 // Also find any span elements that might contain the label text
                 var spans = parent.querySelectorAll('span');
                 spans.forEach(function(span) {
-                    span.style.color = '#FFFFFF';
+                    span.style.color = '#000000';
                 });
                 
                 // Find label elements in the parent container
                 var labels = parent.querySelectorAll('label');
                 labels.forEach(function(label) {
-                    label.style.color = '#FFFFFF';
+                    label.style.color = '#000000';
                 });
+                
+                // 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 = '#27272A';
+            searchPanel.style.backgroundColor = '#F0F0F0';
             
             // 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 = 'transparent';
+                searchInput.style.backgroundColor = '#FFFFFF';
                 // Ensure the border is visible and matches text color
-                searchInput.style.border = '2px solid #FFFFFF';
-                searchInput.style.color = '#FFFFFF';
+                searchInput.style.border = '2px solid #000000';
+                searchInput.style.color = '#000000';
             }
+            
+            // 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';
+                }
+            });
         }
     }
     
@@ -436,7 +496,8 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
         search_input = gr.Textbox(
             label="Search models",
             placeholder="Type to filter…",
-            elem_classes="search-input"
+            elem_classes="search-input",
+            elem_id="search-input"
         )
     
     hidden_sort_state = gr.State(value={"sort_by": "Average Score", "ascending": False})
@@ -520,4 +581,4 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     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__":
-    demo.launch()
+    demo.launch()

styles.css

@@ -3,16 +3,16 @@
    ------------------------------------------------------------------ */
    body {
     font-family: Arial, sans-serif;
-    background-color: #000000;    
+    background-color: #FFFFFF;    
     margin: 20px;
-    color: #FFFFFF;              
+    color: #000000;              
 }
 
 /* ------------------------------------------------------------------
    Headings & Subtitle
    ------------------------------------------------------------------ */
 h1, h2, h3, .subtitle, .variants_container {
-    color: #CCCCCC;              
+    color: #000000;              
     display: flex;
     text-align: center;
     justify-content: center;
@@ -26,7 +26,7 @@ h1 {
 
 .subtitle {
     margin-bottom: 50px;
-    color: #CCCCCC !important;
+    color: #000000 !important;
 }
 
 /* ------------------------------------------------------------------
@@ -40,20 +40,20 @@ h1 {
     justify-content: center;
     padding: 15px;
     width: fit-content;
-    color: #CCCCCC!important;
-    background-color:transparent;
+    color: #000000 !important;
+    background-color: #F5F5F5;
 }
 
 .variants_title {
     font-size: 20px;
     font-weight: 500;
-    color: #CCCCCC !important;
+    color: #000000 !important;
 }
 
 /* Force all descendants of the variants container to be dark */
 .variants_container,
 .variants_container * {
-    color: #CCCCCC!important;
+    color: #000000 !important;
 }
 
 
@@ -69,40 +69,36 @@ table {
 }
 
 table th {
-    background-color: #27272A;
-    color: #FFFFFF;
+    background-color: #F0F0F0;
+    color: #000000;
     font-weight: bold;
     font-size: 18px;
     border: 1px solid #CCCCCC; 
 }
 
 table tr:not(:first-child):nth-child(odd) {
-    background-color: #27272aef;
-
+    background-color: #F8F8F8;
 }
 
 table tr:not(:first-child):nth-child(even) {
-    background-color: #27272add;
-
+    background-color: #F0F0F0;
 }
 
 table tr:not(:first-child):nth-child(odd) td {
-    color: #ffffff;
+    color: #000000;
     border: 1px solid #CCCCCC; 
-
-  }
+}
   
-  table tr:not(:first-child):nth-child(even) td {
-    color: #ffffff;
+table tr:not(:first-child):nth-child(even) td {
+    color: #000000;
     border: 1px solid #CCCCCC; 
-
-  }
+}
   
 
 th, td {
     padding: 8px;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #DDDDDD;
 }
 
 /* ------------------------------------------------------------------
@@ -110,7 +106,7 @@ th, td {
    ------------------------------------------------------------------ */
 button {
     background-color: #c34700b6;   
-    color: #ffffff;
+    color: #000000;
     border: none;
     padding: 8px 12px;
     border-radius: 4px;
@@ -122,7 +118,32 @@ button {
 button:hover {
     background-color: #c34800;
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+/* Style the checkbox to have an orange checkmark */
+input[type="checkbox"] {
+    accent-color: #F0F0F0;
+}
+
+/* Create a custom appearance for checked checkboxes */
+input[type="checkbox"]:checked {
+    position: relative;
+    appearance: none;
+    background-color: #F0F0F0;
+    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;
 }
 
 /* ------------------------------------------------------------------
@@ -132,14 +153,14 @@ button:hover {
     text-align: center;
     margin: 10px 0;
     padding: 5px;
-    background-color: #27272A;
+    background-color: #F0F0F0;
     border-radius: 5px;
     font-size: 16px;
 }
 
 .sort-info,
 .sort-info * {
-  color: #CCCCCC !important;
+  color: #000000 !important;
 }
 
 
@@ -148,7 +169,7 @@ button:hover {
    ------------------------------------------------------------------ */
 .gradio-container .checkbox-container {
     margin-right: 10px;
-    background-color: #27272A;
+    background-color: #F5F5F5;
     padding: 8px;
     border-radius: 5px;
 }
@@ -157,8 +178,8 @@ button:hover {
    Search Input
    ------------------------------------------------------------------ */
 input[type="text"] {
-    background-color: #27272A;
-    color: #FFFFFF;
+    background-color: #FFFFFF;
+    color: #000000;
     border: 1px solid #CCCCCC;
     border-radius: 5px;
     padding: 10px;
@@ -168,19 +189,19 @@ input[type="text"] {
 }
 
 input[type="text"]:focus {
-    border-color: #FFFFFF;
+    border-color: #000000;
     outline: none;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
 /* ------------------------------------------------------------------
    No‐results Message
    ------------------------------------------------------------------ */
 .no-results {
-    color: #FFFFFF;
+    color: #000000;
     text-align: center;
     padding: 30px;
-    background-color: #27272A;
+    background-color: #F5F5F5;
     border-radius: 10px;
     font-size: 18px;
     margin-top: 20px;
@@ -190,10 +211,6 @@ input[type="text"]: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, 
@@ -201,7 +218,7 @@ div.checkbox-panel,
 div[id="checkbox-panel"],
 .gradio-container div[id="checkbox-panel"],
 .gradio-container .checkbox-panel {
-    background-color: #27272A !important;
+    background-color: #F0F0F0 !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -212,7 +229,7 @@ div.search-panel,
 div[id="search-panel"],
 .gradio-container div[id="search-panel"],
 .gradio-container .search-panel {
-    background-color: #27272A !important;
+    background-color: #F0F0F0 !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -244,39 +261,73 @@ div[class*="block"] {
     background-color: transparent !important;
 }
 
-/* Remove overly broad selectors affecting too many elements */
-
-/* Root level variable override */
-:root {
-    --block-background-fill: transparent !important;
-    --panel-background-fill: green !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;
+    border: 2px solid #000000 !important;
+    background-color: #FFFFFF !important;
+    color: #000000 !important;
 }
 
 /* Ensure input text and placeholder have consistent styling */
 .search-panel input[type="text"],
 .search-panel input[type="text"]::placeholder {
-    color: rgba(255,255,255,0.9) !important;
+    color: rgba(0,0,0,0.7) !important;
+}
+
+/* Ensure the search panel label is black */
+.search-panel label,
+.search-panel .label-wrap,
+.search-panel .label-wrap span {
+    color: #000000 !important;
+}
+
+/* Override any Gradio specific label styling */
+#search-panel label,
+div[id="search-panel"] label,
+.gradio-container #search-panel label {
+    color: #000000 !important;
+}
+
+/* Make sure the input text is black when user types */
+#search-panel input[type="text"],
+div[id="search-panel"] input[type="text"],
+.search-panel input[type="text"] {
+    color: #000000 !important;
 }
 
-/* Style the checkbox labels to ensure they have white text */
+/* Style the checkbox labels to ensure they have black text */
 .checkbox-panel label,
 .checkbox-panel .label-wrap,
 .checkbox-panel .label-wrap span {
-    color: #FFFFFF !important;
+    color: #000000 !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: #FFFFFF !important;
+    color: #000000 !important;
     opacity: 1 !important;
     font-weight: normal;
+}
+
+/* Root level variable override */
+:root {
+    --block-background-fill: transparent !important;
+    --panel-background-fill: #F0F0F0 !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;
 }