New frontend, based on new Open LLM Leaderboard version

We also modernize the build chain.

Note: we import some code processing data from the `results` dataset, which was
actually authored by Clémentine Fourrier and Mauricio Diaz.

.gitignore

@@ -43,3 +43,6 @@ package-lock.json
 .env.*
 !.env.example
 
+
+logs/
+__pycache__/

Dockerfile

@@ -2,10 +2,10 @@
 FROM node:18 as frontend-build
 WORKDIR /app
 COPY frontend/package*.json ./
-RUN npm install
+RUN yarn install
 COPY frontend/ ./
 
-RUN npm run build
+RUN yarn build
 
 # Build backend
 FROM python:3.12-slim
@@ -36,6 +36,7 @@ RUN apt-get update && apt-get install -y \
     && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
     && apt-get install -y nodejs \
     && rm -rf /var/lib/apt/lists/*
+RUN npm install --global yarn
 
 # Copy frontend server and build
 COPY --from=frontend-build /app/build ./frontend/build
@@ -44,7 +45,7 @@ COPY --from=frontend-build /app/server.js ./frontend/
 
 # Install frontend production dependencies
 WORKDIR /app/frontend
-RUN npm install --production
+RUN yarn install --production
 WORKDIR /app
 
 # Environment variables
@@ -59,4 +60,4 @@ USER user
 EXPOSE 7860
 
 # Start both servers with wait-for
-CMD ["sh", "-c", "uvicorn app.asgi:app --host 0.0.0.0 --port 7861 & while ! nc -z localhost 7861; do sleep 1; done && cd frontend && npm run serve"]
+CMD ["sh", "-c", "uvicorn app.asgi:app --host 0.0.0.0 --port 7861 & while ! nc -z localhost 7861; do sleep 1; done && cd frontend && node index.cjs"]

backend/app/config/base.py

@@ -20,7 +20,7 @@ HAS_HIGHER_RATE_LIMIT = []
 
 # HuggingFace configuration
 HF_TOKEN = os.environ.get("HF_TOKEN")
-HF_ORGANIZATION = "open-llm-leaderboard"
+HF_ORGANIZATION = "fr-gouv-coordination-ia"
 API = {
     "INFERENCE": "https://api-inference.huggingface.co/models",
     "HUB": "https://huggingface.co"
@@ -32,7 +32,4 @@ DATASETS_CACHE = CACHE_ROOT / "datasets"
 MODELS_CACHE = CACHE_ROOT / "models"
 VOTES_CACHE = CACHE_ROOT / "votes"
 EVAL_CACHE = CACHE_ROOT / "eval-queue"
-
-# Repository configuration
-QUEUE_REPO = f"{HF_ORGANIZATION}/requests"
-EVAL_REQUESTS_PATH = EVAL_CACHE / "eval_requests.jsonl"
+RESULTS_CACHE = CACHE_ROOT / "results"

backend/app/config/hf_config.py

@@ -8,7 +8,7 @@ from app.core.cache import cache_config
 logger = logging.getLogger(__name__)
 
 # Organization or user who owns the datasets
-HF_ORGANIZATION = "open-llm-leaderboard"
+HF_ORGANIZATION = "fr-gouv-coordination-ia"
 
 # Get HF token directly from environment
 HF_TOKEN = os.environ.get("HF_TOKEN")
@@ -23,6 +23,7 @@ QUEUE_REPO = f"{HF_ORGANIZATION}/requests"
 AGGREGATED_REPO = f"{HF_ORGANIZATION}/contents"
 VOTES_REPO = f"{HF_ORGANIZATION}/votes"
 OFFICIAL_PROVIDERS_REPO = f"{HF_ORGANIZATION}/official-providers"
+RESULTS_REPO = f"{HF_ORGANIZATION}/results"
 
 # File paths from cache config
 VOTES_PATH = cache_config.votes_file

backend/app/services/leaderboard.py

@@ -6,34 +6,284 @@ from fastapi import HTTPException
 import logging
 from app.config.base import HF_ORGANIZATION
 from app.core.formatting import LogFormatter
+from dataclasses import dataclass
+from enum import Enum
+import json
+import os
+import glob
+from transformers import AutoConfig
+from transformers.models.auto.tokenization_auto import AutoTokenizer
+import dateutil
+import numpy as np
+from huggingface_hub import snapshot_download
+from app.services.models import ModelService
+
+from app.config import (
+    RESULTS_CACHE,
+    EVAL_CACHE,
+    HF_TOKEN,
+)
+
+from app.config.hf_config import (
+    RESULTS_REPO,
+)
 
 logger = logging.getLogger(__name__)
 
+## All the model information that we might need
+## TODO move all these classes to proper place
+@dataclass
+class ModelDetails:
+    name: str
+    display_name: str = ""
+    symbol: str = ""  # emoji
+
+class ModelType(Enum):
+    PT = ModelDetails(name="pretrained", symbol="🟢")
+    FT = ModelDetails(name="fine-tunedondomain-specificdatasets", symbol="🔶")
+    IFT = ModelDetails(name="instruction-tuned", symbol="⭕")
+    RL = ModelDetails(name="RL-tuned", symbol="🟦")
+    CHAT = ModelDetails(name="chatmodels")
+    Unknown = ModelDetails(name="", symbol="?")
+
+    def to_str(self):
+        return f"{self.value.name}"
+
+    @staticmethod
+    def from_str(type):
+        if "fine-tuned" in type or "🔶" in type:
+            return ModelType.FT
+        if "pretrained" in type or "🟢" in type:
+            return ModelType.PT
+        if "RL-tuned" in type or "🟦" in type:
+            return ModelType.RL
+        if "instruction-tuned" in type or "⭕" in type or "chatmodels" in type :
+            return ModelType.CHAT
+        return ModelType.Unknown
+
+
+class WeightType(Enum):
+    Adapter = ModelDetails("Adapter")
+    Original = ModelDetails("Original")
+    Delta = ModelDetails("Delta")
+
+
+class Precision(Enum):
+    float16 = ModelDetails("float16")
+    bfloat16 = ModelDetails("bfloat16")
+    Unknown = ModelDetails("?")
+
+    def from_str(precision):
+        if precision in ["torch.float16", "float16"]:
+            return Precision.float16
+        if precision in ["torch.bfloat16", "bfloat16"]:
+            return Precision.bfloat16
+        return Precision.Unknown
+
+@dataclass
+class Task:
+    benchmark: str
+    metric: str
+    normalized_metric: str
+    col_name: str
+
+class Tasks(Enum):
+    # task_key in the json file, metric_key in the json file, name to display in the leaderboard
+    # task0 = Task("IFEVal-fr", "metric_name", "IFEVal-fr")
+    # task1 = Task("GPQA-fr", "metric_name", "GPQA-fr")
+    # task2 = Task("BAC-fr", "metric_name", "BAC-fr")
+    task0 = Task("community|gpqa-fr|0", "acc", "norm_acc", "GPQA-fr")  # On pourrait vouloir mettre "Connaissances"
+    task1 = Task("community|ifeval-fr|0", "norm_acc", "norm_acc", "IFEval-fr") # FIXME norm_acc should be acc # et "Suivi d'instructions"
+
+def is_model_on_hub(model_name: str, revision: str, token: str = None, trust_remote_code=False, test_tokenizer=False) -> tuple[bool, str]:
+    """Checks if the model model_name is on the hub, and whether it (and its tokenizer) can be loaded with AutoClasses."""
+    try:
+        config = AutoConfig.from_pretrained(model_name, revision=revision, trust_remote_code=trust_remote_code, token=token)
+        if test_tokenizer:
+            try:
+                tk = AutoTokenizer.from_pretrained(model_name, revision=revision, trust_remote_code=trust_remote_code, token=token)
+            except ValueError as e:
+                return (
+                    False,
+                    f"uses a tokenizer which is not in a transformers release: {e}",
+                    None
+                )
+            except Exception as e:
+                return (False, "'s tokenizer cannot be loaded. Is your tokenizer class in a stable transformers release, and correctly configured?", None)
+        return True, None, config
+
+    except ValueError:
+        return (
+            False,
+            "needs to be launched with `trust_remote_code=True`. For safety reason, we do not allow these models to be automatically submitted to the leaderboard.",
+            None
+        )
+
+    except Exception as e:
+        return False, "was not found on hub!", None
+
+@dataclass
+class EvalResult:
+    """Represents one full evaluation. Built from a combination of the result and request file for a given run."""
+
+    eval_name: str  # org_model_precision (uid)
+    full_model: str  # org/model (path on hub)
+    org: str
+    model: str
+    revision: str  # commit hash, "" if main
+    results: dict
+    normalized_results: dict
+    precision: Precision = Precision.Unknown
+    model_type: ModelType = ModelType.Unknown  # Pretrained, fine tuned, ...
+    weight_type: WeightType = WeightType.Original  # Original or Adapter
+    architecture: str = "Unknown"
+    license: str = "?"
+    likes: int = 0
+    num_params: int = 0
+    date: str = ""  # submission date of request file
+    still_on_hub: bool = False
+
+    @classmethod
+    def init_from_json_file(self, json_filepath):
+        """Inits the result from the specific model result file"""
+        with open(json_filepath) as fp:
+            data = json.load(fp)
+
+        config = data.get("config_general")
+
+        # Precision
+        precision = Precision.from_str(config.get("model_dtype"))
+
+        # Get model and org
+        org_and_model = config.get("model_name", config.get("model_args", None))
+        org_and_model = org_and_model.split("/", 1)
+
+        if len(org_and_model) == 1:
+            org = None
+            model = org_and_model[0]
+            result_key = f"{model}_{precision.value.name}"
+        else:
+            org = org_and_model[0]
+            model = org_and_model[1]
+            result_key = f"{org}_{model}_{precision.value.name}"
+        full_model = "/".join(org_and_model)
+
+        still_on_hub, _, model_config = is_model_on_hub(
+            full_model, config.get("model_sha", "main"), trust_remote_code=True, test_tokenizer=False
+        )
+        architecture = "?"
+        if model_config is not None:
+            architectures = getattr(model_config, "architectures", None)
+            if architectures:
+                architecture = ";".join(architectures)
+
+        # Extract results available in this file (some results are split in several files)
+        results = {}
+        normalized_results = {}
+        for task in Tasks:
+            task = task.value
+
+            # We average all scores of a given metric (not all metrics are present in all files)
+            accs = np.array([v.get(task.metric, None) for k, v in data["results"].items() if task.benchmark == k])
+            if accs.size == 0 or any([acc is None for acc in accs]):
+                continue
+
+            mean_acc = np.mean(accs) * 100.0
+            results[task.benchmark] = mean_acc
+
+            r = data["results"][task.benchmark].get(task.normalized_metric, None)
+            if r is None:
+                continue
+            normalized_results[task.benchmark] = r * 100.0
+
+        return self(
+            eval_name=result_key,
+            full_model=full_model,
+            org=org,
+            model=model,
+            results=results,
+            normalized_results=normalized_results,
+            precision=precision,
+            revision=config.get("model_sha", ""),
+            still_on_hub=still_on_hub,
+            architecture=architecture,
+        )
+
+    def update_with_request_file(self, existing_models):
+        """Finds the relevant request file for the current model and updates info with it"""
+        for status, models in existing_models.items():
+            if status == "finished":
+                for model in models:
+                    if model["name"] == self.full_model and model["precision"] == self.precision.value.name: # FIXME and model["revision"] == model_data["revision"]:
+                        self.model_type = ModelType.from_str(model["model_type"])
+                        self.weight_type = WeightType[model["weight_type"]]
+                        #self.license = request.get("license", "?")
+                        #self.likes = request.get("likes", 0)
+                        #self.num_params = request.get("params", 0)
+                        #self.date = request.get("submitted_time", "")
+                        return
+        print(
+            f"Could not find request file for {self.org}/{self.model} with precision {self.precision.value.name}"
+        )
+
 class LeaderboardService:
     def __init__(self):
+        self.model_service = ModelService()
         pass
+
+    async def get_raw_eval_results(self, results_path: str, requests_path: str) -> list[EvalResult]:
+        """From the path of the results folder root, extract all needed info for results"""
+        model_result_filepaths = []
+
+        for root, _, files in os.walk(results_path):
+            # We should only have json files in model results
+            if len(files) == 0 or any([not f.endswith(".json") for f in files]):
+                continue
+
+            # Sort the files by date
+            try:
+                files.sort(key=lambda x: x.removesuffix(".json").removeprefix("results_")[:-7])
+            except dateutil.parser._parser.ParserError:
+                files = [files[-1]]
+
+            for file in files:
+                model_result_filepaths.append(os.path.join(root, file))
+
+        eval_results = {}
+        await self.model_service.initialize()
+        for model_result_filepath in model_result_filepaths:
+            # Creation of result
+            eval_result = EvalResult.init_from_json_file(model_result_filepath)
+            existing_models = await self.model_service.get_models()
+            eval_result.update_with_request_file(existing_models)
+
+            # Store results of same eval together
+            eval_name = eval_result.eval_name
+            if eval_name in eval_results.keys():
+                eval_results[eval_name].results.update({k: v for k, v in eval_result.results.items() if v is not None})
+            else:
+                eval_results[eval_name] = eval_result
+
+        return eval_results.values()
+
         
-    async def fetch_raw_data(self) -> List[Dict[str, Any]]:
+    async def fetch_raw_data(self) -> List[EvalResult]:
         """Fetch raw leaderboard data from HuggingFace dataset"""
         try:
             logger.info(LogFormatter.section("FETCHING LEADERBOARD DATA"))
             logger.info(LogFormatter.info(f"Loading dataset from {HF_ORGANIZATION}/contents"))
-            
-            dataset = datasets.load_dataset(
-                f"{HF_ORGANIZATION}/contents",
-                cache_dir=cache_config.get_cache_path("datasets")
-            )["train"]
-            
-            df = dataset.to_pandas()
-            data = df.to_dict('records')
-            
-            stats = {
-                "Total_Entries": len(data),
-                "Dataset_Size": f"{df.memory_usage(deep=True).sum() / 1024 / 1024:.1f}MB"
-            }
-            for line in LogFormatter.stats(stats, "Dataset Statistics"):
-                logger.info(line)
-                
+
+            # TODO: cache
+            snapshot_download(
+                repo_id=RESULTS_REPO,
+                local_dir=RESULTS_CACHE,
+                repo_type="dataset",
+                tqdm_class=None,
+                etag_timeout=30,
+                token=HF_TOKEN,
+            )
+
+            data = await self.get_raw_eval_results(RESULTS_CACHE, EVAL_CACHE)
             return data
             
         except Exception as e:
@@ -95,114 +345,98 @@ class LeaderboardService:
             logger.error(LogFormatter.error("Failed to format leaderboard data", e))
             raise HTTPException(status_code=500, detail=str(e))
 
-    async def transform_data(self, data: Dict[str, Any]) -> Dict[str, Any]:
+    async def transform_data(self, data: EvalResult) -> Dict[str, Any]:
         """Transform raw data into the format expected by the frontend"""
         try:
             # Extract model name for logging
-            model_name = data.get("fullname", "Unknown")
+            model_name = data.full_model
             logger.debug(LogFormatter.info(f"Transforming data for model: {model_name}"))
             
             # Create unique ID combining model name, precision, sha and chat template status
-            unique_id = f"{data.get('fullname', 'Unknown')}_{data.get('Precision', 'Unknown')}_{data.get('Model sha', 'Unknown')}_{str(data.get('Chat Template', False))}"
-            
+            unique_id = f"{data.full_model}_{data.precision}" # FIXME missing _{data.get('Model sha', 'Unknown')}_{str(data.get('Chat Template', False))}"
+
             evaluations = {
-                "ifeval": {
-                    "name": "IFEval",
-                    "value": data.get("IFEval Raw", 0),
-                    "normalized_score": data.get("IFEval", 0)
-                },
-                "bbh": {
-                    "name": "BBH",
-                    "value": data.get("BBH Raw", 0),
-                    "normalized_score": data.get("BBH", 0)
-                },
-                "math": {
-                    "name": "MATH Level 5",
-                    "value": data.get("MATH Lvl 5 Raw", 0),
-                    "normalized_score": data.get("MATH Lvl 5", 0)
-                },
-                "gpqa": {
-                    "name": "GPQA",
-                    "value": data.get("GPQA Raw", 0),
-                    "normalized_score": data.get("GPQA", 0)
+                "ifeval_fr": {
+                    "name": "IFEval FR",
+                    "value": data.results.get("community|ifeval-fr|0", 0),
+                    "normalized_score": data.normalized_results.get("community|ifeval-fr|0", 0),
                 },
-                "musr": {
-                    "name": "MUSR",
-                    "value": data.get("MUSR Raw", 0),
-                    "normalized_score": data.get("MUSR", 0)
+                "gpqa_fr": {
+                    "name": "GPQA FR",
+                    "value": data.results.get("community|gpqa-fr|0", 0),
+                    "normalized_score": data.normalized_results.get("community|gpqa-fr|0", 0), 
                 },
-                "mmlu_pro": {
-                    "name": "MMLU-PRO",
-                    "value": data.get("MMLU-PRO Raw", 0),
-                    "normalized_score": data.get("MMLU-PRO", 0)
+                "bac_fr": {
+                    "name": "BAC FR",
+                    "value": 0, # FIXME
+                    "normalized_score": 0 # FIXME
                 }
             }
 
-            features = {
-                "is_not_available_on_hub": data.get("Available on the hub", False),
-                "is_merged": data.get("Merged", False),
-                "is_moe": data.get("MoE", False),
-                "is_flagged": data.get("Flagged", False),
-                "is_official_provider": data.get("Official Providers", False)
-            }
+            features = { }
 
-            metadata = {
-                "upload_date": data.get("Upload To Hub Date"),
-                "submission_date": data.get("Submission Date"),
-                "generation": data.get("Generation"),
-                "base_model": data.get("Base Model"),
-                "hub_license": data.get("Hub License"),
-                "hub_hearts": data.get("Hub ❤️"),
-                "params_billions": data.get("#Params (B)"),
-                "co2_cost": data.get("CO₂ cost (kg)", 0)
-            }
+            # FIXME
+            #    "is_not_available_on_hub": data.get("Available on the hub", False),
+            #    "is_merged": data.get("Merged", False),
+            #    "is_moe": data.get("MoE", False),
+            #    "is_flagged": data.get("Flagged", False),
+            #    "is_official_provider": data.get("Official Providers", False)
+            #}
+
+            metadata = { }
+
+            # FIXME
+            #    "upload_date": data.get("Upload To Hub Date"),
+            #    "submission_date": data.get("Submission Date"),
+            #    "generation": data.get("Generation"),
+            #    "base_model": data.get("Base Model"),
+            #    "hub_license": data.get("Hub License"),
+            #    "hub_hearts": data.get("Hub ❤️"),
+            #    "params_billions": data.get("#Params (B)"),
+            #    "co2_cost": data.get("CO₂ cost (kg)", 0)
+            #}
 
             # Clean model type by removing emojis if present
-            original_type = data.get("Type", "")
-            model_type = original_type.lower().strip()
-            
-            # Remove emojis and parentheses
-            if "(" in model_type:
-                model_type = model_type.split("(")[0].strip()
-            model_type = ''.join(c for c in model_type if not c in '🔶🟢🟩💬🤝🌸 ')
-                
+            model_type = data.model_type
+
+            # FIXME
             # Map old model types to new ones
-            model_type_mapping = {
-                "fine-tuned": "fined-tuned-on-domain-specific-dataset",
-                "fine tuned": "fined-tuned-on-domain-specific-dataset",
-                "finetuned": "fined-tuned-on-domain-specific-dataset",
-                "fine_tuned": "fined-tuned-on-domain-specific-dataset",
-                "ft": "fined-tuned-on-domain-specific-dataset",
-                "finetuning": "fined-tuned-on-domain-specific-dataset",
-                "fine tuning": "fined-tuned-on-domain-specific-dataset",
-                "fine-tuning": "fined-tuned-on-domain-specific-dataset"
-            }
+            #model_type_mapping = {
+            #    "fine-tuned": "fined-tuned-on-domain-specific-dataset",
+            #    "fine tuned": "fined-tuned-on-domain-specific-dataset",
+            #    "finetuned": "fined-tuned-on-domain-specific-dataset",
+            #    "fine_tuned": "fined-tuned-on-domain-specific-dataset",
+            #    "ft": "fined-tuned-on-domain-specific-dataset",
+            #    "finetuning": "fined-tuned-on-domain-specific-dataset",
+            #    "fine tuning": "fined-tuned-on-domain-specific-dataset",
+            #    "fine-tuning": "fined-tuned-on-domain-specific-dataset"
+            #}
 
-            mapped_type = model_type_mapping.get(model_type.lower().strip(), model_type)
-            
-            if mapped_type != model_type:
-                logger.debug(LogFormatter.info(f"Model type mapped: {original_type} -> {mapped_type}"))
+            #mapped_type = model_type_mapping.get(model_type.lower().strip(), model_type)
+
+            #if mapped_type != model_type:
+            #    logger.debug(LogFormatter.info(f"Model type mapped: {model_type} -> {mapped_type}"))
             
             transformed_data = {
                 "id": unique_id,
                 "model": {
-                    "name": data.get("fullname"),
-                    "sha": data.get("Model sha"),
-                    "precision": data.get("Precision"),
-                    "type": mapped_type,
-                    "weight_type": data.get("Weight type"),
-                    "architecture": data.get("Architecture"),
-                    "average_score": data.get("Average ⬆️"),
-                    "has_chat_template": data.get("Chat Template", False)
+                    "name": data.full_model,
+                    "sha": "", # FIXME data.get("Model sha"),
+                    "precision": data.precision.name,
+                    "type": model_type.to_str(),
+                    "weight_type": data.weight_type.name,
+                    "architecture": data.architecture,
+                    "average_score": sum([v for v in data.results.values() if v is not None]) / len(Tasks),
+                    "has_chat_template": False, # FIXME data.get("Chat Template", False),
                 },
                 "evaluations": evaluations,
                 "features": features,
                 "metadata": metadata
             }
-            
+
             logger.debug(LogFormatter.success(f"Successfully transformed data for {model_name}"))
             return transformed_data
             
         except Exception as e:
-            logger.error(LogFormatter.error(f"Failed to transform data for {data.get('fullname', 'Unknown')}", e))
+            logger.error(LogFormatter.error(f"Failed to transform data for {data.full_model}", e))
             raise

backend/app/services/models.py

@@ -16,11 +16,12 @@ from concurrent.futures import ThreadPoolExecutor
 import tempfile
 
 from app.config import (
+    HF_TOKEN
+)
+from app.config.hf_config import (
+    HF_ORGANIZATION,
     QUEUE_REPO,
-    HF_TOKEN,
-    EVAL_REQUESTS_PATH
 )
-from app.config.hf_config import HF_ORGANIZATION
 from app.services.hf_service import HuggingFaceService
 from app.utils.model_validation import ModelValidator
 from app.services.votes import VoteService
@@ -186,7 +187,9 @@ class ModelService(HuggingFaceService):
                     "wait_time": f"{wait_time.total_seconds():.1f}s",
                     "submission_time": content["submitted_time"],
                     "status": target_status,
-                    "precision": content.get("precision", "Unknown")
+                    "precision": content.get("precision", "Unknown"),
+                    "model_type": content["model_type"],
+                    "weight_type": content["weight_type"],
                 }
                 
                 progress.update()

docker-compose.yml

@@ -27,7 +27,6 @@ services:
     environment:
       - NODE_ENV=${ENVIRONMENT:-development}
       - CHOKIDAR_USEPOLLING=true
-      - PORT=${FRONTEND_PORT:-7860}
-    command: npm start
+    command: yarn dev --host 0.0.0.0 --port ${FRONTEND_PORT:-7860}
     stdin_open: true
     tty: true

frontend/Dockerfile.dev

@@ -2,14 +2,11 @@ FROM node:18
 
 WORKDIR /app
 
-# Install required global dependencies
-RUN npm install -g react-scripts
-
 # Copy package.json and package-lock.json
 COPY package*.json ./
 
 # Install project dependencies
-RUN npm install
+RUN yarn install
 
 # Volume will be mounted here, no need for COPY
-CMD ["npm", "start"]
+CMD ["yarn", "dev"]

frontend/README.md

@@ -1,80 +1,8 @@
-# Frontend - Open LLM Leaderboard 🏆
+# React + Vite
 
-React interface for exploring and comparing open-source language models.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## 🏗 Architecture
+Currently, two official plugins are available:
 
-```mermaid
-flowchart TD
-    Client(["User Browser"]) --> Components["React Components"]
-
-    subgraph Frontend
-        Components --> Context["Context Layer<br>• LeaderboardContext<br>• Global State"]
-
-        API["API Layer<br>• /api/leaderboard/formatted<br>• TanStack Query"] --> |Data Feed| Context
-
-        Context --> Hooks["Hooks Layer<br>• Data Processing<br>• Filtering<br>• Caching"]
-
-        Hooks --> Features["Features<br>• Table Management<br>• Search & Filters<br>• Display Options"]
-        Features --> Cache["Cache Layer<br>• LocalStorage<br>• URL State"]
-    end
-
-    API --> Backend["Backend Server"]
-
-    style Backend fill:#f96,stroke:#333,stroke-width:2px
-```
-
-## ✨ Core Features
-
-- 🔍 **Search & Filters**: Real-time filtering, regex search, advanced filters
-- 📊 **Data Visualization**: Interactive table, customizable columns, sorting
-- 🔄 **State Management**: URL sync, client-side caching (5min TTL)
-- 📱 **Responsive Design**: Mobile-friendly, dark/light themes
-
-## 🛠 Tech Stack
-
-- React 18 + Material-UI
-- TanStack Query & Table
-- React Router v6
-
-## 📁 Project Structure
-
-```
-src/
-├── pages/
-│   └── LeaderboardPage/
-│       ├── components/      # UI Components
-│       ├── context/        # Global State
-│       └── hooks/          # Data Processing
-├── components/             # Shared Components
-└── utils/                 # Helper Functions
-```
-
-## 🚀 Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm start
-
-# Production build
-npm run build
-```
-
-## 🔧 Environment Variables
-
-```env
-# API Configuration
-REACT_APP_API_URL=http://localhost:8000
-REACT_APP_CACHE_DURATION=300000  # 5 minutes
-```
-
-## 🔄 Data Flow
-
-1. API fetches leaderboard data from backend
-2. Context stores and manages global state
-3. Hooks handle data processing and filtering
-4. Components render based on processed data
-5. Cache maintains user preferences and URL state
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

frontend/dist/assets/index-kQJbKSsj.css

@@ -0,0 +1 @@
+:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}

frontend/{public → dist}/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/logo32.png" />
+    <link rel="icon" href="/logo32.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
@@ -26,7 +26,7 @@
       property="og:description"
       content="Interactive leaderboard for comparing LLM performance across multiple benchmarks. Features real-time filtering, community voting, and comprehensive model analysis with benchmarks like IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
     />
-    <meta property="og:image" content="%PUBLIC_URL%/og-image.png" />
+    <meta property="og:image" content="/og-image.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -42,13 +42,13 @@
       property="twitter:description"
       content="Interactive leaderboard for comparing LLM performance across multiple benchmarks. Features real-time filtering, community voting, and comprehensive model analysis with benchmarks like IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
     />
-    <meta property="twitter:image" content="%PUBLIC_URL%/og-image.png" />
+    <meta property="twitter:image" content="/og-image.png" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -78,19 +78,11 @@
         -webkit-overflow-scrolling: touch;
       }
     </style>
+    <script type="module" crossorigin src="/assets/index-DMNVfo70.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-kQJbKSsj.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

frontend/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

frontend/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/logo32.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+    <meta
+      name="description"
+      content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
+    />
+    <meta
+      property="og:title"
+      content="Open LLM Leaderboard - Compare Open Source Large Language Models"
+    />
+    <meta
+      property="og:description"
+      content="Interactive leaderboard for comparing LLM performance across multiple benchmarks. Features real-time filtering, community voting, and comprehensive model analysis with benchmarks like IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
+    />
+    <meta property="og:image" content="/og-image.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta
+      property="twitter:url"
+      content="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
+    />
+    <meta
+      property="twitter:title"
+      content="Open LLM Leaderboard - Compare Open Source Large Language Models"
+    />
+    <meta
+      property="twitter:description"
+      content="Interactive leaderboard for comparing LLM performance across multiple benchmarks. Features real-time filtering, community voting, and comprehensive model analysis with benchmarks like IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
+    />
+    <meta property="twitter:image" content="/og-image.png" />
+    <!--
+      Notice the use of  in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>
+      Open LLM Leaderboard - Compare Open Source Large Language Models
+    </title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      html,
+      body {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      #root {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    </style>
+
+    <link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
+    <link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
+    <link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
+
+    <link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -1,8 +1,18 @@
 {
-  "name": "open-llm-leaderboard",
-  "version": "0.1.0",
+  "name": "frontend2",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "predev": "react-dsfr update-icons",
+    "prebuild": "react-dsfr update-icons"
+  },
   "dependencies": {
+    "@codegouvfr/react-dsfr": "^1.17.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@huggingface/hub": "^0.14.0",
@@ -13,43 +23,24 @@
     "@tanstack/react-query": "^5.62.2",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.9",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "http-proxy-middleware": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0",
-    "react-scripts": "5.0.1",
-    "serve-static": "^1.15.0",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "serve": "node server.js"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react-router-dom": "^6.28.0"
   },
-  "proxy": "http://backend:8000"
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "vite": "^6.0.5"
+  }
 }

frontend/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

frontend/{server.js → server.cjs}

@@ -30,7 +30,7 @@ app.use(
 
 // Serve static files from the build directory
 app.use(
-  express.static(path.join(__dirname, "build"), {
+  express.static(path.join(__dirname, "dist"), {
     // Don't cache HTML files
     setHeaders: (res, path) => {
       if (path.endsWith(".html")) {

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/{App.js → App.jsx}

@@ -13,7 +13,8 @@ import LeaderboardPage from "./pages/LeaderboardPage/LeaderboardPage";
 import AddModelPage from "./pages/AddModelPage/AddModelPage";
 import QuotePage from "./pages/QuotePage/QuotePage";
 import VoteModelPage from "./pages/VoteModelPage/VoteModelPage";
-import Footer from "./components/Footer/Footer";
+import { Header } from "@codegouvfr/react-dsfr/Header";
+import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import getTheme from "./config/theme";
 import { useThemeMode } from "./hooks/useThemeMode";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -94,6 +95,16 @@ function App() {
                   color: "text.primary",
                 }}
               >
+                <Header
+                  brandTop={<>INTITULE<br />OFFICIEL</>}
+                  homeLinkProps={{
+                    href: '/',
+                    title: 'Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'
+                  }}
+                  id="fr-header-simple-header-with-service-title-and-tagline"
+                  serviceTagline="baseline - précisions sur l'organisation"
+                  serviceTitle="Nom du site / service"
+                />
                 <Navigation onToggleTheme={toggleTheme} mode={mode} />
                 <Box
                   sx={{
@@ -112,7 +123,31 @@ function App() {
                     <Route path="/vote" element={<VoteModelPage />} />
                   </Routes>
                 </Box>
-                <Footer />
+                <Footer
+                  accessibility="fully compliant"
+                  contentDescription="
+                    Ce message est à remplacer par les informations de votre site.
+
+                    Comme exemple de contenu, vous pouvez indiquer les informations 
+                    suivantes : Le site officiel d’information administrative pour les entreprises.
+                    Retrouvez toutes les informations et démarches administratives nécessaires à la création, 
+                    à la gestion et au développement de votre entreprise.
+                    "
+                  partnersLogos={{
+                    sub: [
+                      {
+                        alt: '[À MODIFIER - texte alternatif de l’image]',
+                        href: '#',
+                        imgUrl: 'static/media/placeholder.16x9.3d46f94c.png'
+                      },
+                      {
+                        alt: '[À MODIFIER - texte alternatif de l’image]',
+                        href: '#',
+                        imgUrl: 'static/media/placeholder.16x9.3d46f94c.png'
+                      }
+                    ]
+                  }}
+                />
               </Box>
             </LeaderboardProvider>
           </Router>

frontend/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

frontend/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

frontend/src/main.jsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
+startReactDsfr({ defaultColorScheme: "system" });
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AddModelPage/components/ModelSubmissionForm/{ModelSubmissionForm.js → ModelSubmissionForm.jsx}

@@ -21,8 +21,8 @@ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import { alpha } from "@mui/material/styles";
 import InfoIconWithTooltip from "../../../../components/shared/InfoIconWithTooltip";
-import { MODEL_TYPES } from "../../../../pages/LeaderboardPage/components/Leaderboard/constants/modelTypes";
-import { SUBMISSION_PRECISIONS } from "../../../../pages/LeaderboardPage/components/Leaderboard/constants/defaults";
+import { MODEL_TYPES } from "../../../LeaderboardPage/components/Leaderboard/constants/modelTypes";
+import { SUBMISSION_PRECISIONS } from "../../../LeaderboardPage/components/Leaderboard/constants/defaults";
 import AuthContainer from "../../../../components/shared/AuthContainer";
 
 const WEIGHT_TYPES = [

frontend/src/pages/LeaderboardPage/{LeaderboardPage.js → LeaderboardPage.jsx}

@@ -3,8 +3,8 @@ import Leaderboard from "./components/Leaderboard/Leaderboard";
 import { Box } from "@mui/material";
 import PageHeader from "../../components/shared/PageHeader";
 import Logo from "../../components/Logo/Logo";
-import { useLeaderboardData } from "../../pages/LeaderboardPage/components/Leaderboard/hooks/useLeaderboardData";
-import { useLeaderboard } from "../../pages/LeaderboardPage/components/Leaderboard/context/LeaderboardContext";
+import { useLeaderboardData } from "./components/Leaderboard/hooks/useLeaderboardData";
+import { useLeaderboard } from "./components/Leaderboard/context/LeaderboardContext";
 
 function LeaderboardPage() {
   const { data, isLoading, error } = useLeaderboardData();