Model table using React

evals.py

@@ -481,6 +481,10 @@ def mean(lst):
     return sum(lst) / len(lst) if lst else None
 
 
+def fmt_name(s):
+    return " ".join(w.capitalize() for w in s.split("-")).replace("Gpt", "GPT").replace("ai", "AI")
+
+
 async def main():
     print("running evaluations")
     results = [
@@ -517,13 +521,32 @@ async def main():
         .reset_index()
     )
     all_results = {
-        "tasks": task_results.replace({np.nan:None}).to_dict(orient="records"),
-        "models": model_results.replace({np.nan:None}).to_dict(orient="records"),
-        "languages": lang_results.replace({np.nan:None}).to_dict(orient="records"),
-        "scores": results.replace({np.nan:None}).to_dict(orient="records"),
+        "tasks": task_results.replace({np.nan: None}).to_dict(orient="records"),
+        "models": model_results.replace({np.nan: None}).to_dict(orient="records"),
+        "languages": lang_results.replace({np.nan: None}).to_dict(orient="records"),
+        "scores": results.replace({np.nan: None}).to_dict(orient="records"),
     }
-    with open("frontend/public/results.json", "w") as f:
+    with open("results.json", "w") as f:
         json.dump(all_results, f, indent=2, ensure_ascii=False)
+    model_results["task_metric"] = model_results["task"] + "_" + model_results["metric"]
+    model_results = model_results.drop(columns=["task", "metric"])
+    model_table = model_results.pivot(
+        index="model", columns="task_metric", values="score"
+    ).fillna(0)
+    model_table["average"] = model_table.mean(axis=1)
+    model_table = model_table.sort_values(by="average", ascending=False)
+    model_table = model_table.round(2).reset_index()
+    model_table["provider"] = model_table["model"].str.split("/").str[0].apply(fmt_name)
+    model_table["model"] = model_table["model"].str.split("/").str[1].apply(fmt_name)
+    model_table["rank"] = model_table.index + 1
+    model_table = model_table[
+        ["rank", "provider", "model", "average", *model_table.columns[1:-3]]
+    ]
+    all_tables = {
+        "model_table": model_table.to_dict(orient="records"),
+    }
+    with open("frontend/public/results.json", "w") as f:
+        json.dump(all_tables, f, indent=2, ensure_ascii=False)
 
 
 if __name__ == "__main__":

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "primereact": "^10.9.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-scripts": "5.0.1",
@@ -3833,6 +3834,25 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
+      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6363,6 +6383,12 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6689,6 +6715,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -13559,6 +13595,29 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/primereact": {
+      "version": "10.9.3",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.3.tgz",
+      "integrity": "sha512-mvIVw4Ap5HfEviWdnPFY14h9Bf8k4rTMkq7swHsJhNfgyH88osrdbjuDQ66mPwjPgI6DwqN2jMo4zxNNxe7nGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -13996,6 +14055,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "primereact": "^10.9.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",

frontend/public/results.json

@@ -0,0 +1,44 @@
+{
+  "model_table": [
+    {
+      "rank": 1,
+      "provider": "Google",
+      "model": "Gemini 2.0 Flash 001",
+      "average": 0.68,
+      "classification_accuracy": 0.87,
+      "language_modeling_chrf": 0.96,
+      "translation_bleu": 0.36,
+      "translation_chrf": 0.53
+    },
+    {
+      "rank": 2,
+      "provider": "OpenAI",
+      "model": "GPT 4o Mini",
+      "average": 0.56,
+      "classification_accuracy": 0.51,
+      "language_modeling_chrf": 0.95,
+      "translation_bleu": 0.31,
+      "translation_chrf": 0.47
+    },
+    {
+      "rank": 3,
+      "provider": "MistralAI",
+      "model": "Mistral Small 24b Instruct 2501",
+      "average": 0.54,
+      "classification_accuracy": 0.57,
+      "language_modeling_chrf": 0.9,
+      "translation_bleu": 0.26,
+      "translation_chrf": 0.42
+    },
+    {
+      "rank": 4,
+      "provider": "Meta Llama",
+      "model": "Llama 3.3 70b Instruct",
+      "average": 0.53,
+      "classification_accuracy": 0.51,
+      "language_modeling_chrf": 0.94,
+      "translation_bleu": 0.25,
+      "translation_chrf": 0.43
+    }
+  ]
+}

frontend/src/App.css

@@ -1,38 +1,39 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: #ffffff;
+  min-height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  justify-content: flex-start;
+  padding-top: 60px;
+  color: #333;
+}
+
+.emoji-container {
+  margin-bottom: 10px;
+}
+
+.header-emoji {
+  font-size: 70px;
 }
 
-.App-link {
-  color: #61dafb;
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+  font-weight: 700;
+  color: #222;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+p {
+  font-size: 1.15rem;
+  color: #555;
+  margin-top: 0;
 }

frontend/src/App.js

@@ -1,22 +1,50 @@
-import logo from './logo.svg';
 import './App.css';
+import { useState, useEffect } from 'react';
+import { PrimeReactProvider } from 'primereact/api';
+import "primereact/resources/themes/lara-light-cyan/theme.css";
+import ModelTable from './components/ModelTable';
+
+        
 
 function App() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch('/results.json')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(jsonData => {
+        setData(jsonData);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <div className="emoji-container">
+          <span role="img" aria-label="Hugging Face Emoji" className="header-emoji">🌍</span>
+        </div>
+        <h1>Language AI Monitor</h1>
+        <p>Tracking language proficiency of AI models for every language</p>
+        
+        <div className="data-container">
+          <PrimeReactProvider>
+            {loading && <p>...</p>}
+            {error && <p>Error: {error}</p>}
+          {data && <ModelTable data={data} />}
+          </PrimeReactProvider>
+        </div>
       </header>
     </div>
   );

frontend/src/components/Header.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Typography, Tab, Tabs, IconButton } from '@mui/material';
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+function Header() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ textAlign: 'center', mb: 4 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+        <div style={{ fontSize: '50px' }}>🤗</div>
+      </Box>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Open LLM Leaderboard Archived
+      </Typography>
+      <Typography variant="subtitle1" gutterBottom sx={{ color: 'text.secondary' }}>
+        Comparing Large Language Models in an <strong>open</strong> and <strong>reproducible</strong> way
+      </Typography>
+    
+    </Box>
+  );
+}
+
+export default Header;

frontend/src/components/Medal.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+const Medal = ({ rank }) => {
+  const baseMedalStyle = {
+    margin: '0px',
+    fontWeight: '900',
+    fontStretch: '150%',
+    fontFamily: 'Inter, -apple-system, sans-serif',
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '0.95rem',
+    lineHeight: '1',
+    padding: '0px',
+    position: 'relative'
+  }
+  const medalStyle1 = {
+    ...baseMedalStyle,
+    color: 'rgb(181, 138, 27)',
+    background:
+      'linear-gradient(135deg, rgb(255, 247, 224) 0%, rgb(255, 215, 0) 100%)',
+    border: '1px solid rgba(212, 160, 23, 0.35)',
+    boxShadow: 'rgba(212, 160, 23, 0.8) 1px 1px 0px'
+  }
+  const medalStyle2 = {
+    color: 'rgb(102, 115, 128)',
+    background:
+      'linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(216, 227, 237) 100%)',
+    border: '1px solid rgba(124, 139, 153, 0.35)',
+    boxShadow: 'rgba(124, 139, 153, 0.8) 1px 1px 0px'
+  }
+  const medalStyle3 = {
+    color: 'rgb(184, 92, 47)',
+    background:
+      'linear-gradient(135deg, rgb(253, 240, 233) 0%, rgb(255, 188, 140) 100%)',
+    border: '1px solid rgba(204, 108, 61, 0.35)',
+    boxShadow: 'rgba(204, 108, 61, 0.8) 1px 1px 0px'
+  }
+  const medalStyle = {
+    ...baseMedalStyle,
+    ...(rank < 4 ? [medalStyle1, medalStyle2, medalStyle3][rank - 1] : {})
+  }
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex'
+      }}
+    >
+      <div style={medalStyle}>{rank}</div>
+    </div>
+  )
+}
+
+export default Medal;

frontend/src/components/ModelTable.js

@@ -0,0 +1,48 @@
+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';
+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 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"
+            />
+        );
+    };
+
+  return (
+    <DataTable value={table} header={<>AI Models</>} sortField="average" removableSort filters={filters} filterDisplay="menu">
+      <Column field="rank" body={rankBodyTemplate} />
+      <Column field="provider" header="Provider" filter filterElement={providerRowFilterTemplate} showFilterMatchModes={false} />
+      <Column field="model" header="Model" filter showFilterMatchModes={false} />
+      <Column field="average" header="Average" sortable />
+      <Column field="translation_chrf" header="Translation" sortable />
+      <Column field="classification_accuracy" header="Classification" sortable />
+      <Column field="language_modeling_chrf" header="Language Modeling" sortable />
+    </DataTable>
+    );
+};
+
+export default ModelTable;