Upload from GitHub Actions: Improve UX and style

evals/backend.py

@@ -54,6 +54,9 @@ def make_model_table(df, models):
     df["task_metric"] = df["task"] + "_" + df["metric"]
     df = df.drop(columns=["task", "metric"])
     df = df.pivot(index="model", columns="task_metric", values="score")
+    for metric in task_metrics:
+        if metric not in df.columns:
+            df[metric] = np.nan
     df["average"] = compute_normalized_average(df, task_metrics_basic)
     df = df.sort_values(by="average", ascending=False).reset_index()
     df = pd.merge(df, models, left_on="model", right_on="id", how="left")
@@ -86,6 +89,9 @@ def make_language_table(df, languages):
     df["task_metric"] = df["task"] + "_" + df["metric"]
     df = df.drop(columns=["task", "metric"])
     df = df.pivot(index="bcp_47", columns="task_metric", values="score").reset_index()
+    for metric in task_metrics:
+        if metric not in df.columns:
+            df[metric] = np.nan
     df["average"] = compute_normalized_average(df, task_metrics_basic)
     df = pd.merge(languages, df, on="bcp_47", how="outer")
     df = df.sort_values(by="speakers", ascending=False)

frontend/src/App.js

@@ -94,10 +94,23 @@ function App () {
               🌍
             </span>
           </div>
-          <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
+          <h1 style={{ 
+            fontSize: '2.5rem', 
+            fontWeight: '600',
+            margin: '1rem 0 0.5rem 0',
+            color: '#333',
+            letterSpacing: '-0.01em'
+          }}>
               AI Language Proficiency Monitor
           </h1>
-          <p style={{ fontSize: '1.10rem', color: '#555', marginTop: '0', marginBottom: '2rem' }}>
+          <p style={{ 
+            fontSize: '1.1rem', 
+            color: '#666', 
+            margin: '0 0 2.5rem 0',
+            fontWeight: '400',
+            maxWidth: '700px',
+            lineHeight: '1.5'
+          }}>
             Comprehensive multilingual evaluation results for AI language models
           </p>
           
@@ -155,13 +168,18 @@ function App () {
           {data && (
             <>
               <div style={{ width: '100%' }}>
-                <ModelTable data={data.model_table} />
+                <ModelTable 
+                  data={data.model_table} 
+                  selectedLanguages={selectedLanguages}
+                  allLanguages={data.language_table || []}
+                />
               </div>
               <div style={{ width: '100%' }}>
                 <LanguageTable
                   data={data.language_table}
                   selectedLanguages={selectedLanguages}
                   setSelectedLanguages={setSelectedLanguages}
+                  totalModels={data.model_table?.length || 0}
                 />
               </div>
               <div style={{ width: '100%' }}>
@@ -272,7 +290,7 @@ function App () {
           style={{ width: '90vw', height: '90vh' }}
           maximizable
           modal
-          header="Interactive Visualizations"
+          header={null}
         >
           {data && (
             <div style={{ width: '100%', height: '100%' }}>

frontend/src/components/AutoComplete.js

@@ -1,102 +1,255 @@
-import { AutoComplete as PrimeAutoComplete } from 'primereact/autocomplete'
-import { useState } from 'react'
-const AutoComplete = ({ languages, onComplete }) => {
-  const [autoComplete, setAutoComplete] = useState('')
-  const [suggestions, setSuggestions] = useState([])
+import { useState, useEffect, useRef } from 'react'
 
-  const exampleCodes = ['sw','ar', 'hi', 'en']
-//  const exampleCodes = ['ar', 'hi', 'sw', 'fa']
-  const exampleLanguages = exampleCodes.map(code =>
-    languages?.find(item => item.bcp_47 === code)
-  )
+const AutoComplete = ({ languages, onComplete }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedLanguage, setSelectedLanguage] = useState(null)
+  const [filteredLanguages, setFilteredLanguages] = useState([])
+  const dropdownRef = useRef(null)
+  const inputRef = useRef(null)
 
-  const search = e => {
-    const matches = languages.filter(language => {
-      const query = e.query.toLowerCase()
-      return (
+  // Most spoken languages (by number of speakers) - you can adjust this list
+  const mostSpokenCodes = ['en', 'zh', 'hi', 'es', 'ar', 'bn', 'pt', 'ru', 'ja', 'pa', 'de', 'jv', 'ko', 'fr', 'te', 'mr', 'tr', 'ta', 'vi', 'ur']
+  
+  useEffect(() => {
+    if (!languages) return
+    
+    if (searchTerm.trim() === '') {
+      // Show most spoken languages first, then others
+      const mostSpoken = mostSpokenCodes
+        .map(code => languages.find(lang => lang.bcp_47 === code))
+        .filter(Boolean)
+      
+      const others = languages
+        .filter(lang => !mostSpokenCodes.includes(lang.bcp_47))
+        .sort((a, b) => a.language_name.localeCompare(b.language_name))
+      
+      setFilteredLanguages([...mostSpoken, ...others])
+    } else {
+      const query = searchTerm.toLowerCase()
+      const matches = languages.filter(language => 
         language.language_name.toLowerCase().includes(query) ||
         language.autonym.toLowerCase().includes(query) ||
         language.bcp_47.toLowerCase().includes(query)
       )
-    })
-    setSuggestions(matches)
+      setFilteredLanguages(matches)
+    }
+  }, [searchTerm, languages, mostSpokenCodes])
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false)
+        setSearchTerm('')
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleSelect = (language) => {
+    setSelectedLanguage(language)
+    setIsOpen(false)
+    setSearchTerm('')
+    onComplete([language])
   }
 
-  const itemTemplate = item => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between'
-      }}
-    >
-      <span>
-        {item.autonym}
-        <span style={{ color: 'gray', marginLeft: '1rem' }}>
-          {item.language_name}
-        </span>
-      </span>
-      <span style={{ color: 'gray' }}>{item.bcp_47}</span>
-    </div>
-  )
+  const handleClear = (e) => {
+    e.stopPropagation()
+    setSelectedLanguage(null)
+    onComplete([])
+  }
+
+  const handleContainerClick = () => {
+    setIsOpen(true)
+    if (!selectedLanguage) {
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    // If user starts typing while a language is selected, clear the selection to enable search
+    if (selectedLanguage && e.target.value.length > 0) {
+      setSelectedLanguage(null)
+      onComplete([])
+    }
+    setSearchTerm(e.target.value)
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      setIsOpen(false)
+      setSearchTerm('')
+    }
+  }
+
+  const containerStyle = {
+    position: 'relative',
+    display: 'inline-block',
+    minWidth: '400px',
+    maxWidth: '600px'
+  }
+
+  const buttonStyle = {
+    color: selectedLanguage ? '#333' : '#666',
+    border: '1px solid #ddd',
+    padding: '0.75rem 1rem',
+    borderRadius: '4px',
+    fontSize: '0.95rem',
+    backgroundColor: '#fff',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    minHeight: '44px',
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
+  }
+
+  const inputStyle = {
+    border: 'none',
+    outline: 'none',
+    fontSize: '0.95rem',
+    width: '100%',
+    backgroundColor: 'transparent',
+    color: '#333'
+  }
+
+  const dropdownStyle = {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    border: '1px solid #ddd',
+    borderTop: 'none',
+    borderRadius: '0 0 4px 4px',
+    maxHeight: '300px',
+    overflowY: 'auto',
+    zIndex: 1000,
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+  }
+
+  const itemStyle = {
+    padding: '0.75rem 1rem',
+    cursor: 'pointer',
+    borderBottom: '1px solid #f0f0f0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    transition: 'background-color 0.2s ease'
+  }
+
+  const clearButtonStyle = {
+    background: 'none',
+    border: 'none',
+    color: '#999',
+    cursor: 'pointer',
+    padding: '0.25rem',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    fontSize: '14px',
+    marginLeft: '0.5rem'
+  }
 
   return (
-    <>
-      <PrimeAutoComplete
-        placeholder='Search for language-specific leaderboards...'
-        value={autoComplete}
-        onChange={e => setAutoComplete(e.value)}
-        onClick={() => {
-          setAutoComplete('')
-          setSuggestions(languages)
+    <div style={containerStyle} ref={dropdownRef}>
+      <div 
+        style={buttonStyle}
+        onClick={handleContainerClick}
+        onMouseEnter={(e) => {
+          if (!selectedLanguage) {
+            e.target.style.borderColor = '#bbb'
+          }
         }}
-        onSelect={e => {
-          setAutoComplete(e.value.language_name)
-          onComplete([e.value])
-        }}
-        suggestions={suggestions}
-        completeMethod={search}
-        virtualScrollerOptions={{ itemSize: 50 }} // smaller values give layout problems
-        delay={500}
-        autoHighlight
-        autoFocus
-        itemTemplate={itemTemplate}
-        field='language_name'
-        minLength={0}
-      />
-      <span
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '1rem',
-          rowGap: '0.3rem',
-          marginTop: '1rem',
-          maxWidth: '600px',
-          justifyContent: 'center',
-          color: '#555',
-          fontSize: '0.8rem'
+        onMouseLeave={(e) => {
+          e.target.style.borderColor = '#ddd'
         }}
       >
-        <span>Examples:</span>
-        {exampleLanguages?.map(language => (
-          <a
-            onClick={() => {
-              onComplete([language])
-              setAutoComplete(language.language_name)
-            }}
-            style={{ textDecoration: 'underline', cursor: 'pointer' }}
-          >
-            {language.language_name} Leaderboard
-          </a>
-        ))}
-        {/* <li>African Leaderboard</li>
-              <li>Indic Leaderboard</li>
-              <li>Transcription Leaderboard</li>
-              <li>Dataset Availability for African Languages</li>
-              <li>GPT 4.5 Evaluation</li>
-              <li>MMLU Evaluation of Open Models</li> */}
-      </span>
-    </>
+        {selectedLanguage && !isOpen ? (
+          <>
+            <span style={{ fontWeight: '500' }}>
+              {selectedLanguage.language_name} Leaderboard
+            </span>
+            <button
+              style={clearButtonStyle}
+              onClick={handleClear}
+              onMouseEnter={(e) => {
+                e.target.style.backgroundColor = '#f0f0f0'
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.backgroundColor = 'transparent'
+              }}
+              title="View overall leaderboard"
+            >
+              ×
+            </button>
+          </>
+        ) : isOpen ? (
+          <input
+            ref={inputRef}
+            style={inputStyle}
+            placeholder={selectedLanguage ? "Type to search other languages..." : "Type to search languages..."}
+            value={searchTerm}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+          />
+        ) : (
+          <span>Search for language-specific leaderboards...</span>
+        )}
+        {(!selectedLanguage || isOpen) && (
+          <span style={{ color: '#999', fontSize: '12px' }}>
+            {isOpen ? '▲' : '▼'}
+          </span>
+        )}
+      </div>
+
+      {isOpen && (
+        <div style={dropdownStyle}>
+          {filteredLanguages.length === 0 ? (
+            <div style={{ ...itemStyle, color: '#999', cursor: 'default' }}>
+              No languages found
+            </div>
+          ) : (
+            filteredLanguages.slice(0, 20).map((language, index) => (
+              <div
+                key={language.bcp_47}
+                style={itemStyle}
+                onClick={() => handleSelect(language)}
+                onMouseEnter={(e) => {
+                  e.target.style.backgroundColor = '#f8f9fa'
+                }}
+                onMouseLeave={(e) => {
+                  e.target.style.backgroundColor = 'transparent'
+                }}
+              >
+                <div>
+                  <div style={{ fontWeight: '500', marginBottom: '2px' }}>
+                    {language.language_name} Leaderboard
+                  </div>
+                  <div style={{ fontSize: '0.85rem', color: '#666' }}>
+                    {language.autonym}
+                  </div>
+                </div>
+                <div style={{ color: '#999', fontSize: '0.8rem' }}>
+                  {language.bcp_47}
+                </div>
+              </div>
+            ))
+          )}
+          {filteredLanguages.length > 20 && (
+            <div style={{ ...itemStyle, color: '#999', cursor: 'default', fontStyle: 'italic' }}>
+              ... and {filteredLanguages.length - 20} more languages
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   )
 }
 

frontend/src/components/DatasetTable.js

@@ -103,7 +103,14 @@ const DatasetTable = ({ data }) => {
         return <div style={{ fontWeight: 'bold' }}>{rowData.group}</div>
       }}
       groupRowsBy='group'
-      header={<>Datasets</>}
+      header={
+        <span>
+          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Datasets</span>
+          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
+            Multilingual datasets used for this evaluation, and other suitable datasets
+          </span>
+        </span>
+      }
       removableSort
       filters={filters}
       filterDisplay='menu'

frontend/src/components/LanguageTable.js

@@ -6,7 +6,7 @@ import { useState, useEffect } from 'react'
 import { Slider } from 'primereact/slider'
 import ScoreColumns from './ScoreColumns'
 
-const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
+const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages, totalModels = 0 }) => {
   const [filters, setFilters] = useState({
     language_name: { value: null, matchMode: FilterMatchMode.EQUALS }, // via global search
     family: { value: null, matchMode: FilterMatchMode.IN },
@@ -122,7 +122,14 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages }) => {
       value={data.filter(
         item => !selectedLanguages.some(l => l.bcp_47 === item.bcp_47)
       )}
-      header={<>Languages</>}
+      header={
+        <span>
+          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Languages</span>
+          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
+            Average performance of {totalModels} evaluated AI models
+          </span>
+        </span>
+      }
       sortField='speakers'
       removableSort
       filters={filters}

frontend/src/components/ModelTable.js

@@ -6,7 +6,7 @@ import { useState, useEffect } from 'react'
 import Medal from './Medal'
 import { Slider } from 'primereact/slider'
 import ScoreColumns from './ScoreColumns'
-const ModelTable = ({ data }) => {
+const ModelTable = ({ data, selectedLanguages = [], allLanguages = [] }) => {
   const [filters, setFilters] = useState({
     type: { value: null, matchMode: FilterMatchMode.IN },
     size: { value: null, matchMode: FilterMatchMode.BETWEEN },
@@ -150,10 +150,47 @@ const ModelTable = ({ data }) => {
     return <div style={{ textAlign: 'center' }}>${rowData.cost?.toFixed(2)}</div>
   }
 
+  const getHeaderText = () => {
+    // Count languages that have evaluation data (average score available)
+    const evaluatedLanguagesCount = allLanguages.filter(lang => 
+      lang.average !== null && lang.average !== undefined
+    ).length
+
+    if (selectedLanguages.length === 0) {
+      return (
+        <span>
+          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
+            Average performance across {evaluatedLanguagesCount} evaluated languages
+          </span>
+        </span>
+      )
+    } else if (selectedLanguages.length === 1) {
+      return (
+        <span>
+          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
+            {selectedLanguages[0].language_name} performance
+          </span>
+        </span>
+      )
+    } else {
+      const languageNames = selectedLanguages.map(lang => lang.language_name).join(', ')
+      return (
+        <span>
+          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
+            Performance for {languageNames}
+          </span>
+        </span>
+      )
+    }
+  }
+
   return (
     <DataTable
       value={data}
-      header={<>AI Models</>}
+      header={<>{getHeaderText()}</>}
       sortField='average'
       removableSort
       filters={filters}

frontend/src/index.css

@@ -27,52 +27,87 @@ html, body, #root {
 
 .p-datatable-wrapper {
   scrollbar-color: #f0f0f0 rgba(0, 0, 0, 0);
-  border-radius: 0 0 10px 10px;  
+  border-radius: 0 0 6px 6px;
+}
+
+.p-datatable .p-datatable-tbody > tr {
+  transition: background-color 0.2s ease;
+}
+
+.p-datatable .p-datatable-tbody > tr:hover {
+  background-color: #fafafa !important;
+}
+
+.p-datatable .p-datatable-thead > tr > th {
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  font-weight: 500;
+  color: #555;
+  padding: 0.75rem 1rem;
+}
+
+.p-datatable .p-datatable-tbody > tr > td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f5f5f5;
 }
 
 #model-table {
-  border: 3px solid #5151ff;
-  border-radius: 10px;
+  border: 2px solid #d1d5ff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 #model-table .p-datatable-header {
   border-top-width: 0px;
-  border-radius: 5px 5px 0 0;
-  background: linear-gradient(to bottom, #5151ff, #0000cd);
-  color: white;
+  border-radius: 6px 6px 0 0;
+  background: #f0f3ff;
+  color: #333;
+  border-bottom: 2px solid #d1d5ff;
+  padding: 1rem 1.25rem;
+  font-weight: 500;
 }
 
 #language-table {
-  border: 3px solid #00aa00;
-  border-radius: 10px;
+  border: 2px solid #c8f2c8;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 #language-table .p-datatable-header {
   border-top-width: 0px;
-  border-radius: 5px 5px 0 0;
-  background: linear-gradient(to bottom, #17b417, #008000);
-  color: white;
+  border-radius: 6px 6px 0 0;
+  background: #f0fff0;
+  color: #333;
+  border-bottom: 2px solid #c8f2c8;
+  padding: 1rem 1.25rem;
+  font-weight: 500;
 }
 
 #dataset-table {
-  border: 3px solid #ffaa00;
-  border-radius: 10px;
+  border: 2px solid #ffe4cc;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 #dataset-table .p-datatable-header {
   border-top-width: 0px;
-  border-radius: 5px 5px 0 0;
-  background: linear-gradient(to bottom, #ffaa00, #ff8000);
-  color: white;
+  border-radius: 6px 6px 0 0;
+  background: #fff8f0;
+  color: #333;
+  border-bottom: 2px solid #ffe4cc;
+  padding: 1rem 1.25rem;
+  font-weight: 500;
 }
 
 #figure {
   width: 100%;
   min-width: 600px;
   height: 600px;
-  border: 1px solid #bdbdbd;
-  border-radius: 10px;
-  padding: 10px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1rem;
+  background: #fafafa;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .p-autocomplete-input {