Nicer model table with type and size and filters and colourful score bars

evals/models.py

@@ -91,7 +91,7 @@ api = HfApi()
 def get_metadata(id):
     try:
         info = api.model_info(id)
-        license = info.card_data.license.replace("_", " ").replace("mit", "MIT").title()
+        license = info.card_data.license.replace("-", " ").replace("mit", "MIT").title()
         return {
             "hf_id": info.id,
             "creation_date": info.created_at,

frontend/public/results.json

@@ -53,7 +53,7 @@
       "creation_date": "2025-01-28",
       "size": 23572403200.0,
       "type": "Open",
-      "license": "Apache-2.0",
+      "license": "Apache 2.0",
       "average": 0.58,
       "classification_accuracy": 0.55,
       "language_modeling_chrf": 0.86,

frontend/src/App.js

@@ -38,7 +38,7 @@ function App() {
         <h1>Global AI Language Monitor</h1>
         <p>Tracking language proficiency of AI models for every language</p>
         
-        <div className="data-container">
+        <div className="data-container" style={{ width: '100%' }}>
           <PrimeReactProvider>
             {loading && <p>...</p>}
             {error && <p>Error: {error}</p>}

frontend/src/components/ModelTable.js

@@ -1,73 +1,228 @@
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { FilterMatchMode } from 'primereact/api';
-import { MultiSelect } from 'primereact/multiselect';
-import { useState } from 'react';
-import Medal from './Medal';
+import { DataTable } from 'primereact/datatable'
+import { Column } from 'primereact/column'
+import { FilterMatchMode } from 'primereact/api'
+import { MultiSelect } from 'primereact/multiselect'
+import { useState, useEffect } from 'react'
+import Medal from './Medal'
+import { Slider } from 'primereact/slider'
+import ScoreField from './ScoreField'
+
 const ModelTable = ({ data }) => {
-    const [filters, setFilters] = useState({
-        "provider": { value: null, matchMode: FilterMatchMode.IN },
-        "model": { value: null, matchMode: FilterMatchMode.CONTAINS }
-    });
-    const table = data.model_table;
-    const rankBodyTemplate = (rowData) => {
-        return <Medal rank={rowData.rank} />;
-    };
+  const [filters, setFilters] = useState({
+    provider: { value: null, matchMode: FilterMatchMode.IN },
+    model: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    type: { value: null, matchMode: FilterMatchMode.IN },
+    size: { value: null, matchMode: FilterMatchMode.BETWEEN }
+  })
+  const table = data.model_table
+  const rankBodyTemplate = rowData => {
+    return <Medal rank={rowData.rank} />
+  }
+
+  const providers = [...new Set(table.map(item => item.provider))]
+  const providerRowFilterTemplate = options => {
+    return (
+      <MultiSelect
+        value={options.value}
+        options={providers}
+        onChange={e => {
+          options.filterApplyCallback(e.value)
+          setFilters(prevFilters => ({
+            ...prevFilters,
+            provider: { value: e.value, matchMode: FilterMatchMode.IN }
+          }))
+        }}
+        placeholder='All providers'
+      />
+    )
+  }
+  const typeRowFilterTemplate = options => {
+    return (
+      <MultiSelect
+        value={options.value}
+        options={['Open', 'Commercial']}
+        onChange={e => {
+          options.filterApplyCallback(e.value)
+          setFilters(prevFilters => ({
+            ...prevFilters,
+            type: { value: e.value, matchMode: FilterMatchMode.IN }
+          }))
+        }}
+        placeholder='All types'
+      />
+    )
+  }
+
+  const formatSize = size => {
+    if (size === null) {
+      return ''
+    } else if (size < 1000) {
+      return size.toFixed(0) + ''
+    } else if (size < 1000 * 1000) {
+      return (size / 1000).toFixed(0) + 'K'
+    } else if (size < 1000 * 1000 * 1000) {
+      return (size / 1000 / 1000).toFixed(0) + 'M'
+    } else {
+      return (size / 1000 / 1000 / 1000).toFixed(0) + 'B'
+    }
+  }
+
+  const SliderWithLabel = ({ value, onChange }) => {
+    const p = 10
+    const min = 8
+    const max = 12
+    const start = value === null ? min : Math.log(value[0]) / Math.log(p)
+    const stop = value === null ? max : Math.log(value[1]) / Math.log(p)
+    const [_value, _setValue] = useState([start, stop])
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        onChange({
+          value:
+            _value[0] <= min + 0.1 && _value[1] >= max - 0.1
+              ? null
+              : [p ** _value[0], p ** _value[1]]
+        })
+      }, 1000)
+      return () => clearTimeout(timer)
+    }, [_value, onChange])
+    return (
+      <div style={{ minWidth: '20rem' }}>
+        <div>{formatSize(p ** _value[0])}</div>
+        <div>{formatSize(p ** _value[1])}</div>
+        <Slider
+          value={_value}
+          onChange={e => _setValue(e.value)}
+          placeholder='All sizes'
+          min={min}
+          max={max}
+          step={0.01}
+          range
+          style={{ marginTop: '5rem' }}
+        />
+      </div>
+    )
+  }
+
+  const sizeFilterTemplate = options => {
+    return (
+      <SliderWithLabel
+        value={options.value}
+        onChange={e => {
+          options.filterApplyCallback(e.value)
+          setFilters(prevFilters => ({
+            ...prevFilters,
+            size: { value: e.value, matchMode: FilterMatchMode.BETWEEN }
+          }))
+        }}
+      />
+    )
+  }
+
+  const sizeBodyTemplate = rowData => {
+    const sizeStr = formatSize(rowData.size)
+    return <div>{sizeStr}</div>
+  }
 
-    const providers = [...new Set(table.map(item => item.provider))];
-    const providerRowFilterTemplate = (options) => {
-        return (
-            <MultiSelect
-                value={options.value}
-                options={providers}
-                onChange={(e) => {
-                    options.filterApplyCallback(e.value);
-                    setFilters(prevFilters => ({
-                        ...prevFilters,
-                        provider: { value: e.value, matchMode: FilterMatchMode.IN }
-                    }));
-                }}
-                placeholder="All providers"
-            />
-        );
-    };
+  const modelBodyTemplate = rowData => {
+    return <div style={{ fontWeight: 'bold' }}>{rowData.model}</div>
+  }
 
-    const sizeBodyTemplate = (rowData) => {
-        const size = rowData.size;
-        if (size === null) {
-            return <div>N/A</div>;
-        }
-        let sizeStr;
-        if (size < 1000) {
-            sizeStr = size.toFixed(0) + "";
-        } else if (size < 1000 * 1000) {
-            sizeStr = (size / 1000).toFixed(0) + "K";
-        } else if (size < 1000 * 1000 * 1000) {
-            sizeStr = (size / 1000 / 1000).toFixed(0) + "M";
-        } else {
-            sizeStr = (size / 1000 / 1000 / 1000).toFixed(0) + "B";
-        }
-        return <div>{sizeStr}</div>;
-    };
+  const scoreBodyTemplate = (field, options = {}) => {
+    const { minScore = 0, maxScore = 1 } = options
 
-    const modelBodyTemplate = (rowData) => {
-        // bold
-        return <div style={{ fontWeight: 'bold' }}>{rowData.model}</div>;
-    };
+    return rowData => {
+      const score = rowData[field]
+      return ScoreField(score, minScore, maxScore)
+    }
+  }
 
   return (
-    <DataTable value={table} header={<>AI Models</>} sortField="average" removableSort filters={filters} filterDisplay="menu" scrollable scrollHeight="500px">
-      <Column field="rank" body={rankBodyTemplate} />
-      <Column field="provider" header="Provider" filter filterElement={providerRowFilterTemplate} showFilterMatchModes={false} style={{ minWidth: '5rem' }} />
-      <Column field="model" header="Model" filter showFilterMatchModes={false} style={{ minWidth: '15rem' }} body={modelBodyTemplate} />
-      <Column field="type" header="Type" style={{ minWidth: '10rem' }} />
-      <Column field="size" header="Size" sortable body={sizeBodyTemplate} style={{ minWidth: '5rem' }} />
-      <Column field="average" header="Average" sortable style={{ minWidth: '5rem' }} />
-      <Column field="translation_chrf" header="Translation" sortable style={{ minWidth: '5rem' }} />
-      <Column field="classification_accuracy" header="Classification" sortable style={{ minWidth: '5rem' }} />
-      <Column field="language_modeling_chrf" header="Language Modeling" sortable style={{ minWidth: '5rem' }} />
+    <DataTable
+      value={table}
+      header={<>AI Models</>}
+      sortField='average'
+      removableSort
+      filters={filters}
+      filterDisplay='menu'
+      scrollable
+      scrollHeight='500px'
+      style={{ minWidth: '200px' }}
+    >
+      <Column field='rank' body={rankBodyTemplate} />
+      <Column
+        field='provider'
+        header='Provider'
+        filter
+        filterElement={providerRowFilterTemplate}
+        showFilterMatchModes={false}
+        style={{ minWidth: '5rem' }}
+      />
+      <Column
+        field='model'
+        header='Model'
+        filter
+        showFilterMatchModes={false}
+        style={{ minWidth: '15rem' }}
+        body={modelBodyTemplate}
+        frozen
+      />
+      <Column
+        field='type'
+        header='Type'
+        filter
+        filterElement={typeRowFilterTemplate}
+        showFilterMatchModes={false}
+        style={{ minWidth: '10rem' }}
+      />
+      <Column
+        field='size'
+        header='Size'
+        filter
+        filterElement={sizeFilterTemplate}
+        showFilterMatchModes={false}
+        sortable
+        body={sizeBodyTemplate}
+        style={{ minWidth: '5rem' }}
+      />
+      <Column
+        field='average'
+        header='Average'
+        sortable
+        body={scoreBodyTemplate('average', { minScore: 0.4, maxScore: 0.8 })}
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+      />
+      <Column
+        field='translation_chrf'
+        header='Translation'
+        sortable
+        body={scoreBodyTemplate('translation_chrf', {
+          minScore: 0.4,
+          maxScore: 0.7
+        })}
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+      />
+      <Column
+        field='classification_accuracy'
+        header='Classification'
+        sortable
+        body={scoreBodyTemplate('classification_accuracy', {
+          minScore: 0.4,
+          maxScore: 1
+        })}
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+      />
+      <Column
+        field='language_modeling_chrf'
+        header='Language Modeling'
+        sortable
+        body={scoreBodyTemplate('language_modeling_chrf', {
+          minScore: 0.8,
+          maxScore: 1
+        })}
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+      />
     </DataTable>
-    );
-};
+  )
+}
 
-export default ModelTable;
+export default ModelTable

frontend/src/components/ScoreField.js

@@ -0,0 +1,53 @@
+const ScoreField = (score, minScore, maxScore) => {
+  // Calculate percentage based on the provided min and max scores
+  // This normalizes the score to a 0-100 range for visualization
+  const normalizedScore = Math.min(Math.max(score, minScore), maxScore)
+  const percentage =
+    ((normalizedScore - minScore) / (maxScore - minScore)) * 100
+
+  // Continuous color gradient from red to green based on score
+  // For a smooth transition, calculate the RGB values directly
+
+  // Red component decreases as score increases
+  const red = Math.round(255 * (1 - percentage / 100))
+  // Green component increases as score increases
+  const green = Math.round(255 * (percentage / 100))
+  // Use a low opacity for subtlety (0.1-0.2 range)
+  const opacity = 0.1 + (percentage / 100) * 0.1
+
+  const barColor = `rgba(${red}, ${green}, 0, ${opacity.toFixed(2)})`
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        padding: '0.5rem'
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: `${percentage}%`,
+          backgroundColor: barColor,
+          zIndex: 0
+        }}
+      />
+
+      <span
+        style={{
+          position: 'relative',
+          zIndex: 1
+        }}
+      >
+        {(score * 100).toFixed(1)}%
+      </span>
+    </div>
+  )
+}
+
+export default ScoreField