push first code

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . /code
+
+# Create a non-root user and switch to it
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+CMD ["python", "app.py"]

README copy.md

@@ -0,0 +1,80 @@
+---
+title: Qimma Leaderboard
+emoji: 📊
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+short_description: Qimma leaderboard
+---
+
+# Qimma Leaderboard
+
+The Qimma Leaderboard is an open evaluation platform for Arabic Large Language Models (LLMs). It tracks the performance of various models across a suite of Arabic benchmarks.
+
+## 🚀 Features
+
+*   **Leaderboard**: Real-time ranking of models based on their performance on multiple datasets (AlGhafa, ArabicMMLU, EXAMS, etc.).
+*   **Submission System**: Allows users to submit their models for evaluation.
+*   **Queue Status**: Displays the current status of submitted models (Pending, Running, Finished, Failed).
+*   **Automated Updates**: The system automatically fetches new results and updates the leaderboard.
+
+## 🛠️ Installation & Setup
+
+To run the leaderboard locally:
+
+1.  **Clone the repository:**
+    ```bash
+    git clone https://huggingface.co/spaces/qimma/Qimma-Leaderboard
+    cd Qimma-Leaderboard
+    ```
+
+2.  **Install dependencies:**
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+3.  **Set up Environment Variables:**
+    You need a Hugging Face API token to access the datasets. Set the `HF_API_TOKEN` environment variable.
+    ```bash
+    export HF_API_TOKEN="your_token_here"
+    ```
+
+4.  **Run the application:**
+    ```bash
+    python app.py
+    ```
+    The app will be available at `http://localhost:7860`.
+
+## 📂 Code Structure
+
+The repository is organized into a frontend-backend architecture using FastAPI.
+
+### Backend (`/backend`)
+Handles data processing, API endpoints, and interaction with the Hugging Face Hub.
+
+*   **`app.py`**: The main entry point. Initializes the FastAPI app, sets up routes, and manages background tasks for data synchronization.
+*   **`backend/config.py`**: Configuration settings, including repository IDs and the list of evaluation tasks (`TASKS`).
+*   **`backend/data_loader.py`**: Responsible for downloading dataset snapshots and loading leaderboard/queue data from the Hugging Face Hub.
+*   **`backend/submission_handler.py`**: Logic for processing model submissions and validating input.
+*   **`backend/helpers.py`**: Utility functions for data manipulation.
+
+### Frontend (`/frontend`)
+Contains the HTML templates served by the application.
+
+*   **`index.html`**: The landing page displaying the main leaderboard.
+*   **`leaderboard.html`**: The table component for displaying model rankings.
+*   **`submit.html`**: The form for users to submit new models.
+*   **`about.html`**: Information about the project and methodology.
+*   **`header.html`**: Common header component used across pages.
+
+## ⚙️ Configuration
+
+The evaluation tasks and model types are defined in `backend/config.py`. You can modify the `TASKS` list to add or remove benchmarks.
+
+```python
+TASKS = [
+    ("community|alghafa:_average|0", "acc_norm", "AlGhafa"),
+    # ...
+]
+```

app.py

@@ -0,0 +1,167 @@
+from fastapi import FastAPI, Request, Form, BackgroundTasks
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import JSONResponse, HTMLResponse
+import pandas as pd
+import uvicorn
+from contextlib import asynccontextmanager
+from apscheduler.schedulers.background import BackgroundScheduler
+import logging
+
+from backend.data_loader import download_dataset_snapshots, load_scoreboard, load_requests
+from backend.submission_handler import submit_model
+from backend.config import TASKS, API, hf_api_token
+
+# Logging setup
+logging.getLogger("apscheduler").setLevel(logging.WARNING)
+
+# --- Global Cache Variables ---
+GLOBAL_LEADERBOARD_DATA = []
+GLOBAL_QUEUE_DATA = {}
+
+ACCEPTED_PAGES = ["about.html", "header.html", "leaderboard.html", "submit.html"]
+
+# --- Cache Update Functions ---
+def update_leaderboard_cache():
+    """Reads data from disk, processes it, and updates the global variable."""
+    global GLOBAL_LEADERBOARD_DATA
+    try:
+        df = load_scoreboard()
+        if df.empty:
+            GLOBAL_LEADERBOARD_DATA = []
+        else:
+            # Fill numeric NaNs with 0, string NaNs with ""
+            df = df.fillna(0)
+            df = df.drop(columns=["Model Size Filter"], errors="ignore")
+            if "Model Size" in df.columns:
+                df["Model Size"] = df["Model Size"].astype(float).round(2)
+            
+            # Update global variable
+            GLOBAL_LEADERBOARD_DATA = df.to_dict(orient="records")
+    except Exception as e:
+        logging.error(f"❌ Error updating leaderboard cache: {e}")
+
+def update_queue_cache():
+    """Reads queue data from disk and updates the global variable."""
+    global GLOBAL_QUEUE_DATA
+    statuses = ["pending", "running", "finished", "failed"]
+    new_queue_data = {}
+    
+    try:
+        for status in statuses:
+            df = load_requests(status)
+            if df.empty:
+                new_queue_data[status] = []
+            else:
+                models = []
+                for _, row in df.iterrows():
+                    # Handle potential column name variations
+                    name = row.get("model", row.get("model_name", "Unknown"))
+                    user = row.get("sender", row.get("revision", "Unknown"))
+                    models.append({"name": name, "user": user})
+                new_queue_data[status] = models
+        
+        # Update global variable
+        GLOBAL_QUEUE_DATA = new_queue_data
+    except Exception as e:
+        logging.error(f"❌ Error updating queue cache: {e}")
+
+# --- Lifespan & Scheduler ---
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # 1. Trigger downloads and cache updates immediately on startup
+    download_dataset_snapshots()
+    update_leaderboard_cache()
+    update_queue_cache()
+    
+    # 2. Schedule periodic updates
+    scheduler = BackgroundScheduler()
+    
+    # Dataset snapshots (every 30 mins)
+    scheduler.add_job(download_dataset_snapshots, "interval", minutes=30)
+    
+    # Cache updates (every 10 mins)
+    scheduler.add_job(update_leaderboard_cache, "interval", minutes=10)
+    scheduler.add_job(update_queue_cache, "interval", minutes=10)
+    
+    scheduler.start()
+    
+    yield
+    
+    scheduler.shutdown()
+
+app = FastAPI(lifespan=lifespan)
+templates = Jinja2Templates(directory="frontend")
+
+# --- Routes ---
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    eval_columns = [t[2] for t in TASKS]
+    return templates.TemplateResponse("index.html", {"request": request, "eval_columns": eval_columns})
+
+@app.get("/api/leaderboard")
+async def get_leaderboard_data():
+    """Returns the cached leaderboard data."""
+    return JSONResponse(content={"data": GLOBAL_LEADERBOARD_DATA})
+
+@app.get("/api/queue")
+async def get_queue_status():
+    """Returns the cached queue status."""
+    return JSONResponse(content=GLOBAL_QUEUE_DATA)
+
+@app.post("/api/model-likes")
+async def get_model_likes(
+    model_name: str = Form(...),
+    revision: str = Form(...)
+):
+    """Fetches the number of likes for a model from Hugging Face Hub."""
+    try:
+        info = API.model_info(repo_id=model_name, revision=revision, token=hf_api_token)
+        likes = info.likes or 0
+        downloads = info.downloads or 0
+        return JSONResponse(content={"likes": likes, "downloads": downloads})
+    except Exception as e:
+        logging.error(f"Error fetching likes for {model_name}: {e}")
+        return JSONResponse(content={"error": str(e)}, status_code=400)
+
+@app.post("/api/submit")
+async def handle_submission(
+    model_name: str = Form(...),
+    model_type: str = Form(...),
+    precision: str = Form(...),
+    revision: str = Form(...),
+    weight_type: str = Form(...),
+    base_model: str = Form(None),
+    chat_template: str = Form(...)
+):
+    """Handles form submission."""
+    try:
+        result_msg = submit_model(
+            model_name=model_name,
+            base_model=base_model,
+            revision=revision,
+            precision=precision,
+            weight_type=weight_type,
+            model_type=model_type,
+            chat_template=chat_template
+        )
+
+        if result_msg.startswith("**Success**"):
+            # Optional: Trigger an immediate cache update on success so the user sees it in the queue
+            update_queue_cache() 
+            return JSONResponse(content={"status": "success", "message": result_msg}, status_code=200)
+        else:
+            return JSONResponse(content={"status": "error", "message": result_msg}, status_code=400)
+            
+    except Exception as e:
+        return JSONResponse(content={"status": "error", "message": str(e)}, status_code=400)
+
+# Dynamic route for pages
+@app.get("/{page_name}", response_class=HTMLResponse)
+async def read_page(request: Request, page_name: str):
+    if page_name not in ACCEPTED_PAGES:
+        raise HTTPException(status_code=404, detail="Page not found")
+    return templates.TemplateResponse(page_name, {"request": request})
+
+if __name__ == "__main__":
+    uvicorn.run("app:app", host="0.0.0.0", port=7860, reload=True, access_log=False)

backend/config.py

@@ -0,0 +1,18 @@
+# backend/config.py
+
+# Hugging Face dataset repos (PUBLIC)
+REQUESTS_REPO_ID = "qimma/leaderboard-requests"
+RESULTS_REPO_ID  = "qimma/leaderboard-results"
+
+# Tasks definition (task_key, metric_key, display_name)
+TASKS = [
+    ("arc", "acc_norm", "ARC"),
+    ("mmlu", "acc", "MMLU"),
+    ("hellaswag", "acc_norm", "HellaSwag"),
+]
+
+MODEL_TYPE_TO_EMOJI = {
+    "base": "🧱",
+    "chat": "💬",
+    "instruct": "🧠",
+}

backend/data_loader.py

@@ -0,0 +1,159 @@
+# backend/data_loader.py
+
+import json
+import os
+import contextlib
+import io
+from pathlib import Path
+from typing import Dict, List, Any, Optional
+
+import numpy as np
+import pandas as pd
+from huggingface_hub import snapshot_download
+
+from backend.config import (
+    REQUESTS_REPO_ID,
+    RESULTS_REPO_ID,
+    TASKS,
+    MODEL_TYPE_TO_EMOJI,
+)
+from backend.helpers import unify_precision
+
+
+# -----------------------------------------------------------------------------
+# Utilities
+# -----------------------------------------------------------------------------
+
+def silent_snapshot_download(**kwargs):
+    with contextlib.redirect_stdout(io.StringIO()), contextlib.redirect_stderr(io.StringIO()):
+        return snapshot_download(**kwargs)
+
+
+def download_datasets():
+    """
+    Download requests + results datasets (read-only, anonymous).
+    """
+    req_path = silent_snapshot_download(
+        repo_id=REQUESTS_REPO_ID,
+        repo_type="dataset",
+        allow_patterns="*.json",
+    )
+    os.environ["EVAL_REQUESTS_PATH"] = req_path
+
+    res_path = silent_snapshot_download(
+        repo_id=RESULTS_REPO_ID,
+        repo_type="dataset",
+        allow_patterns="*.json",
+    )
+    os.environ["EVAL_RESULTS_PATH"] = res_path
+
+
+# -----------------------------------------------------------------------------
+# Requests
+# -----------------------------------------------------------------------------
+
+def load_requests(status: str) -> pd.DataFrame:
+    base = os.getenv("EVAL_REQUESTS_PATH")
+    if not base:
+        return pd.DataFrame()
+
+    rows = []
+    for p in Path(base).rglob("*.json"):
+        try:
+            with open(p, "r", encoding="utf-8") as f:
+                d = json.load(f)
+        except Exception:
+            continue
+
+        if d.get("status", "").lower() == status.lower():
+            rows.append(d)
+
+    return pd.DataFrame(rows)
+
+
+# -----------------------------------------------------------------------------
+# Results parsing
+# -----------------------------------------------------------------------------
+
+def _parse_result_file(path: Path) -> Optional[Dict[str, Any]]:
+    try:
+        with open(path, "r", encoding="utf-8") as f:
+            data = json.load(f)
+    except Exception:
+        return None
+
+    cfg = data.get("config_general", {})
+    results = data.get("results", {})
+
+    model = cfg.get("model_name", "UNK")
+    precision = unify_precision(cfg.get("model_dtype", "UNK"))
+
+    row = {
+        "Model Name": model,
+        "Precision": precision,
+    }
+
+    for task_key, metric_key, display in TASKS:
+        val = np.nan
+        if task_key in results and metric_key in results[task_key]:
+            val = results[task_key][metric_key]
+        row[display] = val
+
+    return row
+
+
+def load_scoreboard() -> pd.DataFrame:
+    """
+    Main entrypoint used by the Space UI.
+    """
+    download_datasets()
+
+    result_base = os.getenv("EVAL_RESULTS_PATH")
+    if not result_base:
+        return pd.DataFrame()
+
+    rows = []
+    for p in Path(result_base).rglob("*.json"):
+        row = _parse_result_file(p)
+        if row:
+            rows.append(row)
+
+    if not rows:
+        return pd.DataFrame()
+
+    df = pd.DataFrame(rows)
+
+    # numeric
+    task_cols = [t[2] for t in TASKS]
+    df[task_cols] = df[task_cols].apply(pd.to_numeric, errors="coerce")
+    df[task_cols] = (df[task_cols] * 100).round(2)
+    df["Average"] = df[task_cols].mean(axis=1).round(2)
+
+    # merge metadata from finished requests
+    finished = load_requests("finished")
+    if not finished.empty:
+        finished["precision"] = finished["precision"].apply(unify_precision)
+        meta = finished.groupby(["model", "precision"]).last().reset_index()
+
+        def enrich(row):
+            m = meta[
+                (meta["model"] == row["Model Name"]) &
+                (meta["precision"] == row["Precision"])
+            ]
+            if not m.empty:
+                m = m.iloc[0]
+                row["License"] = m.get("license", "UNK")
+                row["Revision"] = m.get("revision", "UNK")
+                row["Model Size"] = m.get("params", 0)
+                row["Hub ❤️"] = m.get("likes", 0)
+                row["Type"] = MODEL_TYPE_TO_EMOJI.get(
+                    m.get("model_type", ""), m.get("model_type", "")
+                )
+            return row
+
+        df = df.apply(enrich, axis=1)
+
+    df = df.sort_values("Average", ascending=False).reset_index(drop=True)
+    df.insert(0, "Rank", range(1, len(df) + 1))
+
+    return df

backend/helpers.py

@@ -0,0 +1,95 @@
+import pandas as pd
+from datetime import datetime
+from huggingface_hub.hf_api import ModelInfo
+
+# constant mapping for precision normalization
+PRECISION_MAP = {
+    "torch.float16": "float16", "float16": "float16", "fp16": "float16",
+    "torch.float32": "float32", "float32": "float32", "fp32": "float32",
+    "torch.bfloat16": "bfloat16", "bfloat16": "bfloat16", "bf16": "bfloat16",
+    "8bit": "8bit",
+    "4bit": "4bit"
+}
+
+def unify_precision(raw_precision: str) -> str:
+    """
+    Map raw precision strings to canonical forms.
+    """
+    if not raw_precision:
+        return "Missing"
+    
+    clean_p = raw_precision.strip().lower()
+    
+    if clean_p in ["missing", "unk", "none"]:
+        return "Missing"
+        
+    return PRECISION_MAP.get(clean_p, "Missing")
+
+def get_model_size(model_info: ModelInfo, precision: str) -> float:
+    """
+    Return approximate model parameter size in billions.
+    Note: 'precision' arg is kept for compatibility but currently unused.
+    """
+    try:
+        # Safely access safetensors, defaulting to None if attribute missing
+        safetensors = getattr(model_info, "safetensors", None)
+        total_bytes = safetensors.get("total", 0) if safetensors else 0
+        model_size = round(total_bytes / 1e9, 3)
+    except (AttributeError, TypeError):
+        return 0.0
+
+    # Specific logic for GPTQ models
+    if model_info.modelId and "gptq" in model_info.modelId.lower():
+        return model_size * 8
+        
+    return model_size
+
+def parse_datetime(dt_str: str) -> datetime:
+    """
+    Safely parse an ISO datetime string into a Python datetime object.
+    """
+    try:
+        # Remove Z for compatibility with older fromisoformat versions
+        return datetime.fromisoformat(dt_str.replace("Z", ""))
+    except (ValueError, TypeError):
+        return datetime.min
+
+def fix_df_for_display(df: pd.DataFrame) -> pd.DataFrame:
+    """
+    Converts list columns to strings for st.dataframe compatibility.
+    """
+    if df.empty:
+        return df
+
+    target_cols = ["license", "model_type"]
+    
+    for col in target_cols:
+        if col in df.columns:
+            df[col] = df[col].apply(
+                lambda x: ", ".join(x) if isinstance(x, list) else str(x)
+            )
+            
+    return df
+
+# --- Helper: Filter Options Generator ---
+def get_filter_options(df, column):
+    if df.empty:
+        return ["Missing"]
+    opts = sorted(df[column].dropna().unique().tolist())
+    if "Missing" not in opts:
+        opts.append("Missing")
+    return opts
+
+# Helper for Categorical Filters (Handles 'Missing')
+def apply_cat_filter(df_in, col_name, selected_opts):
+    if not selected_opts:
+        return df_in
+    if "Missing" in selected_opts:
+        # Valid matches OR Nulls OR "Missing" string
+        return df_in[
+            df_in[col_name].isin(selected_opts) | 
+            df_in[col_name].isna() | 
+            (df_in[col_name] == "Missing") |
+            (df_in[col_name] == "")
+        ]
+    return df_in[df_in[col_name].isin(selected_opts)]

backend/submission_handler.py

@@ -0,0 +1,635 @@
+import json
+import logging
+from datetime import datetime, timedelta
+from typing import Tuple, Optional, Any, Dict, List
+import requests
+
+import pandas as pd
+from huggingface_hub import ModelCard, HfApi
+from transformers import AutoConfig, AutoTokenizer
+
+# Import local modules
+from backend.config import API, REQUESTS_REPO_ID, hf_api_token, SLACK_WEBHOOK_URL
+from backend.data_loader import load_requests
+from backend.helpers import unify_precision, get_model_size, parse_datetime
+
+# Configure logger
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class SlackNotifier:
+    """
+    Handles all Slack notifications for the Arabic leaderboard system.
+    """
+    
+    def __init__(self, webhook_url: str):
+        """
+        Initialize with Slack webhook URL.
+        
+        Args:
+            webhook_url: Slack incoming webhook URL
+        """
+        self.webhook_url = webhook_url
+    
+    def _send_message(self, blocks: List[Dict], text: str = "") -> bool:
+        """
+        Send a message to Slack using Block Kit.
+        
+        Args:
+            blocks: List of Slack block elements
+            text: Fallback plain text
+            
+        Returns:
+            True if successful, False otherwise
+        """
+        try:
+            payload = {
+                "blocks": blocks,
+                "text": text  # Fallback for notifications
+            }
+            
+            response = requests.post(
+                self.webhook_url,
+                json=payload,
+                headers={"Content-Type": "application/json"},
+                timeout=10
+            )
+            
+            if response.status_code != 200:
+                logger.error(f"Slack API error: {response.status_code} - {response.text}")
+                return False
+            
+            return True
+            
+        except Exception as e:
+            logger.error(f"Failed to send Slack message: {e}")
+            return False
+    
+    def notify_new_submission(self, submission_data: Dict) -> bool:
+        """
+        Notify when a new model is submitted for evaluation.
+        
+        Args:
+            submission_data: Dictionary containing submission details
+        """
+        model_name = submission_data.get("model", "Unknown")
+        org = model_name.split("/")[0] if "/" in model_name else "Unknown"
+        precision = submission_data.get("precision", "UNK")
+        weight_type = submission_data.get("weight_type", "Unknown")
+        params = submission_data.get("params", "Unknown")
+        
+        blocks = [
+            {
+                "type": "header",
+                "text": {
+                    "type": "plain_text",
+                    "text": "🆕 New Model Submission",
+                    "emoji": True
+                }
+            },
+            {
+                "type": "section",
+                "fields": [
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Model:*\n{model_name}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Organization:*\n{org}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Precision:*\n{precision}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Weight Type:*\n{weight_type}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Parameters:*\n{params}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Status:*\n⏳ PENDING"
+                    }
+                ]
+            },
+            {
+                "type": "context",
+                "elements": [
+                    {
+                        "type": "mrkdwn",
+                        "text": f"Submitted at: {submission_data.get('submitted_time', 'Unknown')}"
+                    }
+                ]
+            }
+        ]
+        
+        return self._send_message(
+            blocks=blocks,
+            text=f"New submission: {model_name}"
+        )
+    
+    def notify_evaluation_failed(self, model_name: str, error_message: str, 
+                                  submission_data: Optional[Dict] = None) -> bool:
+        """
+        Notify when model evaluation fails.
+        
+        Args:
+            model_name: Name of the model
+            error_message: Description of the failure
+            submission_data: Optional submission details
+        """
+        blocks = [
+            {
+                "type": "header",
+                "text": {
+                    "type": "plain_text",
+                    "text": "❌ Evaluation Failed",
+                    "emoji": True
+                }
+            },
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": f"*Model:* {model_name}\n*Error:* {error_message}"
+                }
+            }
+        ]
+        
+        if submission_data:
+            blocks.append({
+                "type": "section",
+                "fields": [
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Precision:*\n{submission_data.get('precision', 'UNK')}"
+                    },
+                    {
+                        "type": "mrkdwn",
+                        "text": f"*Revision:*\n{submission_data.get('revision', 'main')}"
+                    }
+                ]
+            })
+        
+        blocks.append({
+            "type": "context",
+            "elements": [
+                {
+                    "type": "mrkdwn",
+                    "text": f"Failed at: {datetime.utcnow().isoformat()}Z"
+                }
+            ]
+        })
+        
+        return self._send_message(
+            blocks=blocks,
+            text=f"Evaluation failed: {model_name}"
+        )
+    
+    def notify_evaluation_success(self, model_name: str, results: Dict) -> bool:
+        """
+        Notify when model evaluation succeeds and is added to leaderboard.
+        
+        Args:
+            model_name: Name of the model
+            results: Dictionary containing evaluation results/metrics
+        """
+        blocks = [
+            {
+                "type": "header",
+                "text": {
+                    "type": "plain_text",
+                    "text": "✅ Evaluation Completed",
+                    "emoji": True
+                }
+            },
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": f"*Model:* {model_name}\n*Status:* Successfully added to leaderboard! 🎉"
+                }
+            }
+        ]
+        
+        # Add metrics if available
+        if results:
+            metric_fields = []
+            for key, value in results.items():
+                if isinstance(value, (int, float)):
+                    metric_fields.append({
+                        "type": "mrkdwn",
+                        "text": f"*{key}:*\n{value:.4f}" if isinstance(value, float) else f"*{key}:*\n{value}"
+                    })
+            
+            if metric_fields:
+                blocks.append({
+                    "type": "section",
+                    "fields": metric_fields[:10]  # Limit to 10 fields
+                })
+        
+        blocks.append({
+            "type": "context",
+            "elements": [
+                {
+                    "type": "mrkdwn",
+                    "text": f"Completed at: {datetime.utcnow().isoformat()}Z"
+                }
+            ]
+        })
+        
+        return self._send_message(
+            blocks=blocks,
+            text=f"Evaluation success: {model_name}"
+        )
+    
+    def notify_top5_update(self, top5_models: List[Dict], changed: bool = True) -> bool:
+        """
+        Notify about new top 5 models with LinkedIn post suggestion.
+        
+        Args:
+            top5_models: List of top 5 model dictionaries with scores
+            changed: Whether the top 5 has changed
+        """
+        if not changed:
+            return True  # Don't send if nothing changed
+        
+        blocks = [
+            {
+                "type": "header",
+                "text": {
+                    "type": "plain_text",
+                    "text": "🏆 Top 5 Leaderboard Update!",
+                    "emoji": True
+                }
+            },
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": "*The Top 5 Arabic LLMs have been updated!*"
+                }
+            }
+        ]
+        
+        # Add top 5 list
+        leaderboard_text = ""
+        for idx, model in enumerate(top5_models[:5], 1):
+            model_name = model.get("model", "Unknown")
+            score = model.get("average_score", model.get("score", 0))
+            medal = ["🥇", "🥈", "🥉", "4️⃣", "5️⃣"][idx - 1]
+            leaderboard_text += f"{medal} *{model_name}* - Score: {score:.2f}\n"
+        
+        blocks.append({
+            "type": "section",
+            "text": {
+                "type": "mrkdwn",
+                "text": leaderboard_text
+            }
+        })
+        
+        # Generate LinkedIn post
+        linkedin_post = self._generate_linkedin_post(top5_models[:5])
+        
+        blocks.extend([
+            {
+                "type": "divider"
+            },
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": "*📱 Suggested LinkedIn Post:*"
+                }
+            },
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": f"```{linkedin_post}```"
+                }
+            },
+            {
+                "type": "context",
+                "elements": [
+                    {
+                        "type": "mrkdwn",
+                        "text": "Copy the post above and share on LinkedIn!"
+                    }
+                ]
+            }
+        ])
+        
+        return self._send_message(
+            blocks=blocks,
+            text="Top 5 leaderboard updated!"
+        )
+    
+    def _generate_linkedin_post(self, top5_models: List[Dict]) -> str:
+        """
+        Generate a LinkedIn post text for the top 5 models.
+        
+        Args:
+            top5_models: List of top 5 model dictionaries
+            
+        Returns:
+            Formatted LinkedIn post text
+        """
+        post = "🚀 Arabic LLM Leaderboard Update!\n\n"
+        post += "We're excited to share the latest rankings for Arabic Language Models:\n\n"
+        
+        for idx, model in enumerate(top5_models, 1):
+            model_name = model.get("model", "Unknown")
+            score = model.get("average_score", model.get("score", 0))
+            medal = ["🥇", "🥈", "🥉", "4️⃣", "5️⃣"][idx - 1]
+            post += f"{medal} {model_name} - {score:.2f}\n"
+        
+        post += "\n"
+        post += "These models are pushing the boundaries of Arabic NLP! "
+        post += "Check out our full leaderboard to explore more models and benchmarks.\n\n"
+        post += "#ArabicNLP #LLM #AI #MachineLearning #ArabicAI #OpenSource #HuggingFace"
+        
+        return post
+
+
+# Integration helper functions
+
+def integrate_with_submission(original_submit_func):
+    """
+    Decorator to integrate Slack notifications with the submit_model function.
+    
+    Usage:
+        @integrate_with_submission
+        def submit_model(...):
+            # original implementation
+    """
+    def wrapper(*args, **kwargs):
+        result = original_submit_func(*args, **kwargs)
+        
+        # If submission was successful, send notification
+        if result.startswith("**Success**"):
+            try:
+                from backend.config import SLACK_WEBHOOK_URL
+                notifier = SlackNotifier(SLACK_WEBHOOK_URL)
+                
+                # Extract submission data from arguments
+                submission_data = {
+                    "model": args[0] if len(args) > 0 else kwargs.get("model_name"),
+                    "base_model": args[1] if len(args) > 1 else kwargs.get("base_model"),
+                    "revision": args[2] if len(args) > 2 else kwargs.get("revision"),
+                    "precision": args[3] if len(args) > 3 else kwargs.get("precision"),
+                    "weight_type": args[4] if len(args) > 4 else kwargs.get("weight_type"),
+                    "submitted_time": datetime.utcnow().isoformat() + "Z"
+                }
+                
+                notifier.notify_new_submission(submission_data)
+            except Exception as e:
+                logger.error(f"Failed to send Slack notification: {e}")
+        
+        return result
+    
+    return wrapper
+
+
+def already_in_queue(df: pd.DataFrame, model_name: str, revision: str, precision: str) -> bool:
+    """
+    Check if (model, revision, precision) is already in the provided dataframe.
+    """
+    if df.empty:
+        return False
+    
+    # Create a boolean mask for matching rows
+    mask = (
+        (df["model"] == model_name) &
+        (df["revision"] == revision) &
+        (df["precision"] == unify_precision(precision))
+    )
+    return not df[mask].empty
+
+
+def check_model_card(repo_id: str) -> Tuple[bool, str]:
+    """
+    Validate that the model card exists, has a license, and is of sufficient length.
+    """
+    try:
+        card = ModelCard.load(repo_id)
+    except Exception:
+        return False, "No model card found. Please add a README.md describing your model and license."
+
+    # Check for license metadata
+    has_license = card.data.license is not None or (
+        "license_name" in card.data and "license_link" in card.data
+    )
+    if not has_license:
+        return False, "No license metadata found in the model card."
+
+    # Check content length
+    if len(card.text) < 200:
+        return False, "Model card is too short (<200 chars). Please add more details."
+
+    return True, ""
+
+
+def is_model_on_hub(
+    model_name: str, 
+    revision: str, 
+    token: Optional[str] = None, 
+    trust_remote_code: bool = False, 
+    test_tokenizer: bool = True
+) -> Tuple[bool, str, Any]:
+    """
+    Verifies if the model and tokenizer can be loaded from the Hub.
+    Returns: (success, error_message, config_object)
+    """
+    # 1. Check Configuration
+    try:
+        config = AutoConfig.from_pretrained(
+            model_name,
+            revision=revision,
+            trust_remote_code=trust_remote_code,
+            token=token
+        )
+    except ValueError:
+        return False, "requires `trust_remote_code=True`. Not automatically allowed.", None
+    except Exception as e:
+        return False, f"not loadable from hub: {str(e)}", None
+
+    # 2. Check Tokenizer (optional but recommended)
+    if test_tokenizer:
+        try:
+            _ = AutoTokenizer.from_pretrained(
+                model_name,
+                revision=revision,
+                trust_remote_code=trust_remote_code,
+                token=token
+            )
+        except Exception as e:
+            return False, f"tokenizer not loadable: {str(e)}", None
+
+    return True, "", config
+
+
+def check_org_threshold(org_name: str) -> Tuple[bool, str]:
+    """
+    Enforce rate limit: Each org can only submit 5 models in the last 7 days.
+    """
+    df_all = load_requests("") # Load all requests
+    if df_all.empty:
+        return True, ""
+
+    # Extract organization name safely
+    df_all["org_name"] = df_all["model"].apply(lambda m: m.split("/")[0] if "/" in m else m)
+    
+    # Filter for specific org
+    df_org = df_all[df_all["org_name"] == org_name].copy()
+    if df_org.empty:
+        return True, ""
+
+    # Parse dates and clean data
+    df_org["datetime"] = df_org["submitted_time"].apply(parse_datetime)
+    df_org = df_org.dropna(subset=["datetime"])
+
+    # Calculate threshold
+    now = datetime.utcnow()
+    week_ago = now - timedelta(days=7)
+    df_recent = df_org[df_org["datetime"] >= week_ago]
+
+    if len(df_recent) >= 5:
+        # Calculate when the next slot opens
+        earliest_submission = df_recent.sort_values(by="datetime").iloc[0]["datetime"]
+        next_slot = earliest_submission + timedelta(days=7)
+        msg_next = next_slot.isoformat(timespec="seconds") + "Z"
+        return (
+            False,
+            f"Your org '{org_name}' has reached the 5-submissions-per-week limit. You can submit again after {msg_next}."
+        )
+
+    return True, ""
+
+@integrate_with_submission
+def submit_model(
+    model_name: str,
+    base_model: str,
+    revision: str,
+    precision: str,
+    weight_type: str,
+    model_type: str,
+    chat_template: str
+) -> str:
+    """
+    Main controller: Validation -> Info Extraction -> Submission Upload.
+    Returns a markdown formatted string message for the UI.
+    """
+    # --- 1. Input Sanitization ---
+    model_name = model_name.strip()
+    base_model = base_model.strip()
+    revision = revision.strip() or "main"
+    precision = precision.strip()
+
+    
+    
+    if not model_name:
+        return "**Error**: Model name cannot be empty (use 'org/model')."
+
+    try:
+        org, repo_id = model_name.split("/")
+    except ValueError:
+        return "**Error**: Please specify model as 'org/model'."
+
+    # --- 2. validation Pipeline ---
+    
+    # A. Check Model Card
+    card_ok, card_msg = check_model_card(model_name)
+    if not card_ok:
+        return f"**Error**: {card_msg}"
+
+    # B. Check Hub Existence (Base vs Target)
+    if weight_type.lower() in ["adapter", "delta"]:
+        if not base_model:
+            return "**Error**: For adapter/delta, you must provide a valid `base_model`."
+        ok_base, base_err, _ = is_model_on_hub(
+            base_model, revision, hf_api_token, trust_remote_code=True
+        )
+        if not ok_base:
+            return f"**Error**: Base model '{base_model}' {base_err}"
+    else:
+        ok_model, model_err, _ = is_model_on_hub(
+            model_name, revision, hf_api_token, trust_remote_code=True
+        )
+        if not ok_model:
+            return f"**Error**: Model '{model_name}' {model_err}"
+
+    # C. Fetch Model Info (Likes, License, Private Status)
+    try:
+        info = API.model_info(model_name, revision=revision, token=hf_api_token)
+    except Exception as e:
+        return f"**Error**: Could not fetch model info. {str(e)}"
+
+    model_license = info.card_data.license
+    model_likes = info.likes or 0
+    model_private = bool(getattr(info, "private", False))
+
+    # D. Check Queue Duplication
+    if already_in_queue(load_requests("finished"), model_name, revision, precision):
+        return f"**Warning**: '{model_name}' (rev='{revision}', prec='{precision}') has already been evaluated."
+    
+    if already_in_queue(load_requests("pending"), model_name, revision, precision):
+        return f"**Warning**: '{model_name}' (rev='{revision}', prec='{precision}') is already in PENDING."
+
+    # E. Check Rate Limit
+    under_threshold, limit_msg = check_org_threshold(org)
+    if not under_threshold:
+        return f"**Error**: {limit_msg}"
+
+    # --- 3. Submission Construction ---
+    precision_final = unify_precision(precision)
+    if precision_final == "Missing":
+        precision_final = "UNK"
+
+    model_params = get_model_size(model_info=info, precision=precision)
+    current_time = datetime.utcnow().isoformat() + "Z"
+    is_chat = (chat_template.strip().lower() == "yes")
+
+    submission_data = {
+        "model":          model_name,
+        "base_model":     base_model,
+        "revision":       revision,
+        "precision":      precision_final,
+        "weight_type":    weight_type,
+        "status":         "PENDING",
+        "submitted_time": current_time,
+        "model_type":     model_type,
+        "likes":          model_likes,
+        "params":         model_params,
+        "license":        model_license,
+        "private":        model_private,
+        "job_id":         None,
+        "job_start_time": None,
+        "chat_template":  is_chat
+    }
+
+    # Define path in the requests dataset
+    private_str = "True" if model_private else "False"
+    file_path = f"{org}/{repo_id}_eval_request_{private_str}_{precision_final}_{weight_type}.json"
+
+    # --- 4. Upload to Hub ---
+    try:
+        API.upload_file(
+            path_or_fileobj=json.dumps(submission_data, indent=2).encode("utf-8"),
+            path_in_repo=file_path,
+            repo_id=REQUESTS_REPO_ID,
+            repo_type="dataset",
+            token=hf_api_token,
+            commit_message=f"Add {model_name} to eval queue"
+        )
+    except Exception as e:
+        logger.error(f"Submission upload failed: {e}")
+        return f"**Error**: Could not upload to '{REQUESTS_REPO_ID}': {str(e)}"
+    if SLACK_WEBHOOK_URL:
+        notifier = SlackNotifier(SLACK_WEBHOOK_URL)
+        notifier.notify_new_submission(submission_data)
+    return f"Model '{model_name}' submitted for evaluation!"

frontend/about.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - QIMMA Leaderboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' }, animation: { 'fade-in': 'fadeIn 0.5s ease-out' }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } } } } }
+    </script>
+    <style>
+        .gradient-text {
+            background: linear-gradient(to right, #4F46E5, #06B6D4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
+
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">About QIMMA</h1>
+            <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+                Understanding the methodology and metrics behind the Open Arabic LLM Leaderboard.
+            </p>
+        </div>
+
+        <div class="space-y-12 animate-fade-in">
+
+            <section
+                class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
+                <div class="flex items-center gap-3 mb-4">
+                    <div
+                        class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
+                        <i data-lucide="info" class="w-6 h-6"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">What is QIMMA?</h2>
+                </div>
+                <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
+                    <p class="mb-4">
+                        QIMMA (Summit in Arabic) is a comprehensive leaderboard designed to evaluate and compare the
+                        performance of Large Language Models (LLMs) on Arabic language tasks. As the field of Arabic NLP
+                        grows, there is a pressing need for a standardized, transparent, and rigorous benchmark to
+                        assess model capabilities.
+                    </p>
+                    <p>
+                        Our goal is to foster innovation in the Arabic AI ecosystem by providing researchers and
+                        developers with clear insights into model performance across a diverse set of linguistic and
+                        reasoning challenges.
+                    </p>
+                </div>
+            </section>
+
+            <section
+                class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
+                <div class="flex items-center gap-3 mb-4">
+                    <div
+                        class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
+                        <i data-lucide="cpu" class="w-6 h-6"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">How It Works</h2>
+                </div>
+                <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
+                    <p class="mb-6">
+                        The leaderboard utilizes a robust evaluation pipeline powered by <a
+                            href="https://github.com/EleutherAI/lm-evaluation-harness" target="_blank"
+                            class="text-indigo-600 dark:text-indigo-400 hover:underline">EleutherAI's LM Evaluation
+                            Harness</a>. We ensure fair comparisons by running all models in a controlled environment
+                        with consistent settings.
+                    </p>
+
+                    <h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">Evaluation Pipeline</h3>
+                    <ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
+                        <li><strong>Submission:</strong> Users submit their Hugging Face model ID.</li>
+                        <li><strong>Queue:</strong> Models are added to a processing queue.</li>
+                        <li><strong>Execution:</strong> Our GPU cluster loads the model and runs the benchmark suite.
+                        </li>
+                        <li><strong>Scoring:</strong> Results are computed, aggregated, and published to the
+                            leaderboard.</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section
+                class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
+                <div class="flex items-center gap-3 mb-4">
+                    <div
+                        class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
+                        <i data-lucide="bar-chart-2" class="w-6 h-6"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Benchmarks & Metrics</h2>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div
+                        class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
+                        <h4 class="font-bold text-slate-800 dark:text-slate-200 mb-2">ArabicMMLU</h4>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">Massive Multitask Language Understanding
+                            adapted for Arabic, covering diverse topics from STEM to humanities.</p>
+                    </div>
+                    <div
+                        class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
+                        <h4 class="font-bold text-slate-800 dark:text-slate-200 mb-2">EXAMS</h4>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">A benchmark for evaluating model
+                            performance on high school examinations across various subjects.</p>
+                    </div>
+                    <div
+                        class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
+                        <h4 class="font-bold text-slate-800 dark:text-slate-200 mb-2">AlGhafa</h4>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">A suite of multiple-choice QA tasks
+                            designed to test native Arabic reasoning and cultural knowledge.</p>
+                    </div>
+                    <div
+                        class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
+                        <h4 class="font-bold text-slate-800 dark:text-slate-200 mb-2">MadinahQA</h4>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">A question answering dataset focusing on
+                            religious and historical knowledge relevant to the Arab world.</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
+            <h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">Citation</h3>
+            <div class="max-w-4xl mx-auto relative group">
+                <div class="absolute top-3 right-3">
+                    <button onclick="copyCitation()"
+                        class="p-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 shadow-sm transition-all"
+                        title="Copy to clipboard">
+                        <i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <pre id="citationCode"
+                    class="bg-slate-100 dark:bg-slate-900/50 p-6 rounded-xl border border-slate-200 dark:border-slate-700 overflow-x-auto text-xs sm:text-sm text-slate-600 dark:text-slate-400 font-mono leading-relaxed">@misc{QIMMA,
+  author = {Alzubaidi, Ahmed and Boussaha, Basma El Amel and Alobeidli, Hamza and Alqadi, Leen and Alkaabi, Omar and Alswuidi, Shaikha and Hacid, Hakim},
+  title = {QIMMA Leaderboard},
+  year = {2025},
+  publisher = {QIMMA},
+  howpublished = {https://huggingface.co/spaces/qimma/Qimma-Leaderboard}
+}</pre>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+        if (window.lucide) lucide.createIcons();
+        // Dark mode check for standalone viewing
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        }
+
+        // Copy Citation
+        function copyCitation() {
+            const text = document.getElementById('citationCode').innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                const icon = document.getElementById('copyIcon');
+                icon.setAttribute('data-lucide', 'check');
+                icon.classList.add('text-emerald-500');
+                lucide.createIcons();
+
+                setTimeout(() => {
+                    icon.setAttribute('data-lucide', 'copy');
+                    icon.classList.remove('text-emerald-500');
+                    lucide.createIcons();
+                }, 2000);
+            });
+        }
+
+    </script>
+</body>
+
+</html>

frontend/header.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Header - QIMMA Leaderboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
+    </script>
+</head>
+
+<body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
+
+    <div>
+        <div class="text-center mb-10 pt-8">
+            <h1
+                class="text-4xl font-extrabold tracking-tight sm:text-6xl mb-4 inline-flex items-center justify-center gap-4">
+                <span
+                    class="text-transparent bg-clip-text bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">
+                    QIMMA Leaderboard
+                </span>
+            </h1>
+            <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">Evaluate and compare the performance
+                of Arabic Large Language Models.</p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
+            <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4
+                transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
+                <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl"><i data-lucide="database"
+                        class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i></div>
+                <div>
+                    <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Total Models</p>
+                    <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-total-models">--</h3>
+                </div>
+            </div>
+
+            <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4
+                transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
+                <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl"><i data-lucide="activity"
+                        class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i></div>
+                <div class="w-full">
+                    <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2">Eval Status</p>
+                    <div class="grid grid-cols-4 gap-1 text-center mb-2">
+                        <div>
+                            <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--
+                            </div>
+                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Done</div>
+                        </div>
+                        <div>
+                            <div class="text-lg font-bold text-rose-600 dark:text-rose-400" id="stat-failed">--</div>
+                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Failed</div>
+                        </div>
+                        <div>
+                            <div class="text-lg font-bold text-blue-600 dark:text-blue-400" id="stat-running">--</div>
+                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Run</div>
+                        </div>
+                        <div>
+                            <div class="text-lg font-bold text-amber-500 dark:text-amber-400" id="stat-queue">--</div>
+                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Queue</div>
+                        </div>
+                    </div>
+                    <div class="flex w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-700">
+                        <div id="bar-done" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%">
+                        </div>
+                        <div id="bar-failed" class="bg-rose-500 h-full transition-all duration-500" style="width: 0%">
+                        </div>
+                        <div id="bar-running" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%">
+                        </div>
+                        <div id="bar-queue" class="bg-amber-500 h-full transition-all duration-500" style="width: 0%">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 
+                transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
+
+                <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
+                    <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
+                </div>
+                <div>
+                    <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Benchmarks</p>
+                    <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-metrics">--</h3>
+                </div>
+            </div>
+
+            <div class="bg-emerald-900 rounded-xl p-6 shadow-sm text-white relative overflow-hidden group col-span-1 sm:col-span-2 lg:col-span-1
+                transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
+                <div
+                    class="absolute -right-4 -top-4 bg-emerald-800 w-24 h-24 rounded-full opacity-50 group-hover:scale-110 transition-transform">
+                </div>
+
+                <div class="flex justify-between items-start mb-4 relative z-10">
+                    <p class="text-sm font-medium text-emerald-200 uppercase tracking-wider">Podium</p>
+                    <i data-lucide="trophy" class="w-5 h-5 text-yellow-400"></i>
+                </div>
+                <div id="top-performers-list" class="space-y-3 relative z-10">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        window.updateHeaderStats = function (safeQ) {
+            if (!safeQ) return;
+
+            const doneCount = allData ? allData.length : safeQ.finished.length;
+            const failedCount = safeQ.failed ? safeQ.failed.length : 0;
+            const runningCount = safeQ.running ? safeQ.running.length : 0;
+            const queueCount = safeQ.pending ? safeQ.pending.length : 0;
+
+            // Update Text
+            const setTxt = (id, val) => { if (document.getElementById(id)) document.getElementById(id).innerText = val; };
+            setTxt('stat-done', doneCount);
+            setTxt('stat-failed', failedCount);
+            setTxt('stat-running', runningCount);
+            setTxt('stat-queue', queueCount);
+
+            // Update Bars
+            const total = doneCount + failedCount + runningCount + queueCount;
+            if (total > 0) {
+                document.getElementById('bar-done').style.width = (doneCount / total * 100) + "%";
+                document.getElementById('bar-failed').style.width = (failedCount / total * 100) + "%";
+                document.getElementById('bar-running').style.width = (runningCount / total * 100) + "%";
+                document.getElementById('bar-queue').style.width = (queueCount / total * 100) + "%";
+            }
+        };
+
+        function renderHeaderTableStats(data) {
+            const $ = (selector) => document.querySelector(selector);
+
+            if ($('#stat-total-models')) $('#stat-total-models').innerText = data.length;
+            if ($('#stat-metrics') && window.EVAL_COLUMNS) $('#stat-metrics').innerText = window.EVAL_COLUMNS.filter(c => c !== "Average").length;
+
+            // Podium Logic
+            const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
+            if (avgK && $('#top-performers-list')) {
+                const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
+                const rankStyles = ['bg-yellow-400 text-emerald-900', 'bg-slate-300 text-emerald-900', 'bg-orange-300 text-emerald-900'];
+
+                $('#top-performers-list').innerHTML = top3.map((m, i) => `
+                    <div class="flex items-center gap-3">
+                        <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
+                        <span class="text-sm font-semibold truncate">${m["Model Name"]}</span>
+                        <span class="ml-auto text-xs font-mono text-emerald-300">${parseFloat(m[avgK]).toFixed(1)}</span>
+                    </div>
+                `).join('');
+            }
+        }
+
+        window.initHeader = async function () {
+            renderHeaderTableStats(allData);
+        };
+
+        window.initHeader();
+        if (window.lucide) lucide.createIcons();
+    </script>
+
+</body>
+
+</html>

frontend/index.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QIMMA - Open Arabic LLM Leaderboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
+    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a' }, animation: { 'fade-in': 'fadeIn 0.5s ease-out' }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } } } } }
+    </script>
+</head>
+
+<body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
+
+    <div class="absolute top-6 right-6 z-50">
+        <button onclick="toggleDarkMode()"
+            class="p-2 rounded-full bg-white text-slate-600 shadow-md hover:bg-slate-100 dark:bg-slate-800 dark:text-yellow-400 dark:hover:bg-slate-700 transition-all">
+            <i data-lucide="moon" id="themeIcon" class="h-5 w-5"></i>
+        </button>
+    </div>
+
+    <div class="max-w-[98%] mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div id="dynamic-header-container">
+            <div class="p-12 flex justify-center"><i data-lucide="loader-2"
+                    class="w-10 h-10 animate-spin text-indigo-600"></i></div>
+        </div>
+
+        <div class="border-b border-slate-200 dark:border-slate-700 mb-6">
+            <nav class="-mb-px flex space-x-8 justify-center">
+                <button onclick="switchTab('about')" id="tab-btn-about"
+                    class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">ⓘ
+                    About</button>
+                <button onclick="switchTab('leaderboard')" id="tab-btn-leaderboard"
+                    class="border-indigo-500 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🏅
+                    LLM Leaderboard</button>
+                <button onclick="switchTab('submit')" id="tab-btn-submit"
+                    class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🚀
+                    Submit Model</button>
+            </nav>
+        </div>
+
+        <div id="tab-content-leaderboard" class="block animate-fade-in">
+            <div class="flex justify-center p-12"><i data-lucide="loader-2"
+                    class="w-8 h-8 animate-spin text-indigo-600"></i></div>
+        </div>
+
+        <div id="tab-content-submit" class="hidden max-w-5xl mx-auto animate-fade-in"></div>
+        <div id="tab-content-about" class="hidden max-w-[97%] mx-auto animate-fade-in"></div>
+
+        <div class="mt-16 text-center border-t border-slate-200 dark:border-slate-700 pt-8">
+            <p class="text-slate-500 dark:text-slate-400 text-sm">&copy; 2025 QIMMA Leaderboard. Built with ❤️ for the
+                Arabic AI Community.</p>
+        </div>
+    </div>
+
+    <script id="eval-columns-data" type="application/json">
+        {{ eval_columns | tojson }}
+    </script>
+
+    <script>
+        window.EVAL_COLUMNS = JSON.parse(document.getElementById('eval-columns-data').textContent);
+        const $ = s => document.querySelector(s);
+
+        function toggleDarkMode() {
+            const isDark = document.documentElement.classList.toggle('dark');
+            localStorage.theme = isDark ? 'dark' : 'light';
+            $('#themeIcon').setAttribute('data-lucide', isDark ? 'sun' : 'moon');
+            lucide.createIcons();
+        }
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) toggleDarkMode();
+
+        async function init() {
+            try {
+                const res = await fetch('/api/leaderboard');
+                const json = await res.json();
+                window.allData = json.data || [];
+
+                await Promise.all([
+                    loadTabContent('/header.html', '#dynamic-header-container'),
+                    loadTabContent('/leaderboard.html', '#tab-content-leaderboard')
+                ]);
+
+                if (window.initLeaderboard) {
+                    window.initLeaderboard(allData);
+                }
+
+                loadTabContent('/about.html', '#tab-content-about');
+                loadTabContent('/submit.html', '#tab-content-submit');
+
+            } catch (err) {
+                console.error(err);
+                $('#tab-content-leaderboard').innerHTML = `<div class="p-8 text-center text-rose-500">Error loading leaderboard.</div>`;
+            }
+        }
+
+        async function loadTabContent(url, selector) {
+            const container = $(selector);
+            if (!container || container.dataset.loaded) return;
+            try {
+                const res = await fetch(url);
+                if (!res.ok) throw new Error(`Status: ${res.status}`);
+                const html = await res.text();
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                container.innerHTML = doc.body.innerHTML;
+                container.dataset.loaded = "true";
+                if (window.lucide) lucide.createIcons();
+                doc.body.querySelectorAll('script').forEach(oldScript => {
+                    const newScript = document.createElement('script');
+                    Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
+                    newScript.textContent = oldScript.textContent;
+                    document.body.appendChild(newScript);
+                });
+            } catch (err) { console.error(`Failed to load ${url}:`, err); }
+        }
+
+        function switchTab(tab) {
+            ['leaderboard', 'submit', 'about'].forEach(t => {
+                $(`#tab-content-${t}`).classList[t === tab ? 'remove' : 'add']('hidden');
+                $(`#tab-btn-${t}`).className = t === tab
+                    ? "border-indigo-500 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 border-b-2 py-4 px-1 font-medium text-sm transition-colors"
+                    : "border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors";
+            });
+        }
+
+        init();
+        lucide.createIcons();
+    </script>
+</body>
+
+</html>

frontend/leaderboard.html

@@ -0,0 +1,1045 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaderboard - QIMMA Leaderboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
+    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
+    </script>
+</head>
+
+<body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100 relative">
+
+    <style>
+        #table-wrapper {
+            max-height: 700px;
+            overflow-y: auto;
+            overflow-x: auto;
+            position: relative;
+            z-index: 0;
+            border-radius: 1rem;
+            border: 1px solid #cbd5e1;
+        }
+
+        .dark #table-wrapper {
+            border: 1px solid #334155;
+        }
+
+        #table-wrapper::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        #table-wrapper::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        #table-wrapper::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+
+        .dark #table-wrapper::-webkit-scrollbar-thumb {
+            background: #475569;
+        }
+
+        .gridjs-wrapper {
+            height: auto !important;
+            max-height: none !important;
+            overflow: visible !important;
+            border: none !important;
+            border-radius: 0 !important;
+            box-shadow: none !important;
+            background: transparent !important;
+        }
+
+        .gridjs-container {
+            color: inherit;
+            background-color: transparent;
+            overflow: visible !important;
+        }
+
+        .gridjs-head {
+            position: sticky;
+            top: 0;
+            z-index: 20;
+        }
+
+        .gridjs-th {
+            background-color: #f1f5f9;
+            position: relative;
+            z-index: 20;
+            border-top: none !important;
+        }
+
+        .dark .gridjs-head,
+        .dark th.gridjs-th {
+            background-color: #0f172a !important;
+            border-color: #334155;
+            color: #cbd5e1;
+        }
+
+        .dark td.gridjs-td {
+            background-color: #1e293b;
+            border-color: #334155;
+            color: #cbd5e1;
+        }
+
+        .dark .gridjs-tr:hover td {
+            background-color: #334155;
+        }
+
+        table.gridjs-table {
+            width: 100% !important;
+            table-layout: fixed;
+        }
+
+        td.gridjs-td {
+            white-space: nowrap;
+            padding: 12px 24px !important;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        th.gridjs-th,
+        td.gridjs-td {
+            border-left: none !important;
+            border-right: none !important;
+        }
+
+        .line-clamp-2-custom {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            white-space: normal !important;
+            line-height: 1.3;
+            word-break: break-word;
+        }
+
+        .slider-container {
+            position: relative;
+            width: 100%;
+            height: 20px;
+            margin-top: 10px;
+        }
+
+        .slider-track {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            height: 6px;
+            background: #e2e8f0;
+            border-radius: 10px;
+            z-index: 1;
+        }
+
+        .dark .slider-track {
+            background: #334155;
+        }
+
+        .slider-range {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            height: 6px;
+            background: #4F46E5;
+            z-index: 2;
+            border-radius: 10px;
+        }
+
+        input[type=range].dual-slider {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            -webkit-appearance: none;
+            appearance: none;
+            pointer-events: none;
+            background: transparent;
+            z-index: 3;
+            margin: 0;
+        }
+
+        input[type=range].dual-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            pointer-events: auto;
+            height: 18px;
+            width: 18px;
+            border-radius: 50%;
+            background: #4F46E5;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+
+        input[type=range].dual-slider::-moz-range-thumb {
+            pointer-events: auto;
+            height: 18px;
+            width: 18px;
+            border-radius: 50%;
+            background: #4F46E5;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+
+        .tooltip-trigger:hover .tooltip-content {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes slideUp {
+            from {
+                transform: translate(-50%, -45%);
+                opacity: 0;
+            }
+
+            to {
+                transform: translate(-50%, -50%);
+                opacity: 1;
+            }
+        }
+
+        .modal-backdrop {
+            animation: fadeIn 0.2s ease-out forwards;
+        }
+
+        .modal-content {
+            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+    </style>
+
+    <!-- Header & Search -->
+    <div class="flex justify-center mb-6 pt-10">
+        <div class="relative w-full sm:w-[75%]">
+            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                <i data-lucide="search" class="h-5 w-5 text-slate-400"></i>
+            </div>
+            <input type="text" id="searchInput"
+                class="block w-full pl-11 pr-72 py-3 border border-slate-300 dark:border-slate-600 rounded-full bg-white dark:bg-slate-800 dark:text-white placeholder-slate-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm shadow-sm transition-colors"
+                placeholder="Search models (e.g. Falcon, Qwen)...">
+            <div class="absolute inset-y-0 right-0 flex items-center pr-2 gap-4">
+                <span id="modelCounter" class="text-sm font-bold text-slate-500 dark:text-slate-400 tabular-nums">-- /
+                    --</span>
+                <button onclick="window.toggleFilterPanel()" id="filterBtn"
+                    class="flex items-center px-4 py-1.5 text-sm font-medium rounded-full text-slate-700 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-200 transition-all">
+                    <i data-lucide="sliders-horizontal" class="h-4 w-4 mr-2"></i> Filters
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filter Panel -->
+    <div id="filterPanel"
+        class="hidden w-full sm:w-[75%] mx-auto bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 mb-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Size Slider -->
+            <div>
+                <div class="flex justify-between items-center mb-2">
+                    <label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Model Size</label>
+                    <span id="sizeValue"
+                        class="text-sm font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-slate-700 px-2 py-1 rounded"></span>
+                </div>
+                <div class="slider-container">
+                    <div class="slider-track"></div>
+                    <div class="slider-range" id="sliderRange"></div>
+                    <input type="range" id="minSizeSlider" class="dual-slider">
+                    <input type="range" id="maxSizeSlider" class="dual-slider">
+                </div>
+                <div class="flex justify-between text-xs text-slate-400 dark:text-slate-500 mt-3">
+                    <span id="minSizeLabel"></span>
+                    <span id="maxSizeLabel"></span>
+                </div>
+            </div>
+
+            <!-- Precision -->
+            <div>
+                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Precision</label>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3" id="precisionFilterContainer"></div>
+            </div>
+
+            <!-- Type & License -->
+            <div
+                class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6 p-5 rounded-xl border border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/30">
+                <div>
+                    <label
+                        class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 flex items-center gap-2">
+                        <i data-lucide="cpu" class="w-4 h-4 text-slate-400"></i> Model Type
+                    </label>
+                    <div class="flex flex-wrap gap-2" id="typeFilterContainer"></div>
+                </div>
+                <div>
+                    <label
+                        class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 flex items-center gap-2">
+                        <i data-lucide="scale" class="w-4 h-4 text-slate-400"></i> License
+                    </label>
+                    <div class="flex flex-wrap gap-2" id="licenseFilterContainer"></div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-6 pt-4 border-t border-slate-100 dark:border-slate-700 flex justify-end">
+            <button onclick="window.resetFilters()"
+                class="text-sm text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 underline">Reset
+                all filters</button>
+        </div>
+    </div>
+
+    <!-- Table Controls -->
+    <div class="w-full sm:w-[95%] mx-auto flex justify-end mb-2 relative gap-2">
+        <!-- Table Options Button -->
+        <button onclick="window.toggleTableOps(event)" id="tableOpsTrigger"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 transition-colors select-none">
+            <i data-lucide="settings-2" id="tableOpsIcon" class="h-5 w-5"></i> <span>Table Options</span>
+        </button>
+        <!-- Table Options Menu -->
+        <div id="tableOpsMenu"
+            class="hidden absolute top-10 right-40 z-50 w-72 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700">
+
+            <!-- Header with Reset -->
+            <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
+                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Table Options</span>
+                <button onclick="window.resetTableOps()"
+                    class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
+                        data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
+            </div>
+
+            <!-- Section 1: Ranking Mode -->
+            <div class="mb-5">
+                <h4 class="text-xs font-bold text-slate-400 mb-3 flex items-center gap-2">
+                    Ranking Mode
+                    <div class="relative tooltip-trigger group cursor-help">
+                        <i data-lucide="info"
+                            class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
+                        <div
+                            class="tooltip-content invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-slate-800 text-white text-xs rounded shadow-lg transition-all z-50 text-left pointer-events-none">
+                            <p>
+                                <strong>Static:</strong> shows the average value across all benchmarks.<br>
+                                <strong>Dynamic:</strong> updates the rank based on the current sort and filters.
+                            </p>
+                            <div
+                                class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800">
+                            </div>
+                        </div>
+                    </div>
+
+                </h4>
+                <div class="flex bg-slate-100 dark:bg-slate-700/50 p-1 rounded-lg">
+                    <button onclick="window.setRankMode('static')" id="rankBtnStatic"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all bg-white dark:bg-slate-600 shadow-sm text-indigo-600 dark:text-indigo-300">Static</button>
+                    <button onclick="window.setRankMode('dynamic')" id="rankBtnDynamic"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Dynamic</button>
+                </div>
+            </div>
+
+            <!-- Section 2: Avg Score Calc -->
+            <div>
+                <h4 class="text-xs font-bold text-slate-400 mb-3 flex items-center gap-2">
+                    Average Score Calculation
+                    <div class="relative tooltip-trigger group cursor-help">
+                        <i data-lucide="info"
+                            class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
+                        <div
+                            class="tooltip-content invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-slate-800 text-white text-xs rounded shadow-lg transition-all z-50 text-left pointer-events-none">
+                            <p>
+                                <strong>All Scores</strong> Calculates the average across all benchmarks.<br>
+                                <strong>Visible Only</strong> Recalculates the average using only the evaluation columns
+                                currently shown.
+                            </p>
+                            <div
+                                class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800">
+                            </div>
+                        </div>
+
+                    </div>
+                </h4>
+                <div class="flex bg-slate-100 dark:bg-slate-700/50 p-1 rounded-lg">
+                    <button onclick="window.setAvgMode('all')" id="avgBtnAll"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all bg-white dark:bg-slate-600 shadow-sm text-indigo-600 dark:text-indigo-300">All
+                        Scores</button>
+                    <button onclick="window.setAvgMode('visible')" id="avgBtnVisible"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Visible
+                        Only</button>
+                </div>
+            </div>
+
+            <!-- Section 3: Display Score -->
+            <div class="mt-5">
+                <h4 class="text-xs font-bold text-slate-400 mb-3 flex items-center gap-2">
+                    Score Status Display
+                    <div class="relative tooltip-trigger group cursor-help">
+                        <i data-lucide="info"
+                            class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
+                        <div
+                            class="tooltip-content invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-slate-800 text-white text-xs rounded shadow-lg transition-all z-50 text-left pointer-events-none">
+                            <p>
+                                <strong>All:</strong> Visual progress bars on all score columns.<br>
+                                <strong>Avg Only:</strong> Progress bar on Average, raw text on other score columns.<br>
+                                <strong>Raw:</strong> Raw text numbers on all score columns.
+                            </p>
+                            <div
+                                class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800">
+                            </div>
+                        </div>
+                    </div>
+                </h4>
+                <div class="flex bg-slate-100 dark:bg-slate-700/50 p-1 rounded-lg">
+                    <button onclick="window.setScoreDisplay('all')" id="scoreBtnAll"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all bg-white dark:bg-slate-600 shadow-sm text-indigo-600 dark:text-indigo-300">All</button>
+                    <button onclick="window.setScoreDisplay('avg')" id="scoreBtnAvg"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Avg
+                        Only</button>
+                    <button onclick="window.setScoreDisplay('raw')" id="scoreBtnRaw"
+                        class="flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">Raw</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Col Visibility -->
+        <button onclick="window.toggleColMenu(event)" id="colMenuTrigger"
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 transition-colors select-none">
+            <i data-lucide="book-open" id="colMenuIcon" class="h-5 w-5"></i> <span>Column Visibility</span>
+        </button>
+        <div id="colMenu"
+            class="hidden absolute top-10 right-0 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700">
+            <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
+                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Visible Columns</span>
+                <button onclick="window.resetColumns()"
+                    class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
+                        data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
+            </div>
+            <div class="mb-5">
+                <h4 class="text-xs font-bold text-slate-400 mb-2 flex justify-between">Eval Scores <span
+                        id="count-scores" class="text-slate-500"></span></h4>
+                <div id="colListScores" class="flex flex-wrap gap-2"></div>
+            </div>
+            <div>
+                <h4 class="text-xs font-bold text-slate-400 mb-2 flex justify-between">Model Details <span
+                        id="count-details" class="text-slate-500"></span></h4>
+                <div id="colListDetails" class="flex flex-wrap gap-2"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full sm:w-[95%] mx-auto mb-20">
+        <div id="table-wrapper" class="bg-white dark:bg-slate-800 shadow-sm transition-colors"></div>
+    </div>
+
+    <div id="modelModal" class="hidden fixed inset-0 z-[100]" aria-labelledby="modal-title" role="dialog"
+        aria-modal="true">
+        <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity modal-backdrop"
+            onclick="window.closeModelDetails()"></div>
+
+        <div
+            class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-[95%] md:w-[60%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 modal-content">
+
+            <div
+                class="sticky top-0 z-10 flex items-start justify-between px-6 py-5 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-100 dark:border-slate-800">
+                <div>
+                    <h3 id="modalTitle"
+                        class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white leading-tight break-words pr-4">
+                    </h3>
+                </div>
+                <button type="button" onclick="window.closeModelDetails()"
+                    class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors p-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800">
+                    <i data-lucide="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+
+            <div class="p-6 space-y-8">
+                <!-- 4 Blocks: Rank, Avg, Size, Hub -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <!-- Block 1: Rank -->
+                    <div
+                        class="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
+                        <span
+                            class="text-xs font-bold uppercase text-amber-600 dark:text-amber-400 mb-1 flex items-center gap-1"><i
+                                data-lucide="trophy" class="w-3 h-3"></i> Rank</span>
+                        <span id="modalRank" class="text-3xl font-black text-amber-700 dark:text-amber-300">#--</span>
+                    </div>
+                    <!-- Block 2: Avg -->
+                    <div
+                        class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
+                        <span
+                            class="text-xs font-bold uppercase text-indigo-600 dark:text-indigo-400 mb-1 flex items-center gap-1"><i
+                                data-lucide="bar-chart-2" class="w-3 h-3"></i> Average</span>
+                        <span id="modalAvg" class="text-3xl font-black text-indigo-700 dark:text-indigo-300">--</span>
+                    </div>
+                    <!-- Block 3: Size -->
+                    <div
+                        class="bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 rounded-xl flex flex-col items-center justify-center text-center">
+                        <span
+                            class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400 mb-1 flex items-center gap-1"><i
+                                data-lucide="box" class="w-3 h-3"></i> Size</span>
+                        <span id="modalSize" class="text-2xl font-bold text-slate-700 dark:text-slate-200">--</span>
+                    </div>
+                    <!-- Block 4: Hub -->
+                    <div
+                        class="bg-pink-50 dark:bg-pink-900/20 border border-pink-100 dark:border-pink-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
+                        <span
+                            class="text-xs font-bold uppercase text-pink-600 dark:text-pink-400 mb-1 flex items-center gap-1"><i
+                                data-lucide="heart" class="w-3 h-3"></i> Hub Likes</span>
+                        <span id="modalLikes" class="text-2xl font-bold text-pink-700 dark:text-pink-300">--</span>
+                    </div>
+                </div>
+
+                <!-- Metadata Line -->
+                <div
+                    class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-slate-400 border-y border-slate-100 dark:border-slate-800 py-4">
+                    <span class="flex items-center gap-1" title="License"><i data-lucide="scale"
+                            class="w-3.5 h-3.5"></i> <span id="modalLicense">--</span></span>
+                    <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
+
+                    <span class="flex items-center gap-1" title="Precision"><i data-lucide="cpu"
+                            class="w-3.5 h-3.5"></i> <span id="modalPrecision">--</span></span>
+                    <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
+
+                    <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit"
+                            class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">--</span></span>
+                </div>
+
+                <!-- Links -->
+                <div class="flex flex-col sm:flex-row gap-3 justify-center">
+                    <a id="modalLinkHF" href="#" target="_blank"
+                        class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg bg-slate-900 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 font-medium transition-colors">
+                        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+                            class="w-5 h-5 mr-2" alt="HF"> View on Hugging Face
+                    </a>
+                    <a id="modalLinkDetails" href="#" target="_blank"
+                        class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 font-medium transition-colors">
+                        <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Evaluation Details
+                    </a>
+                </div>
+
+                <!-- Chart Area -->
+                <div>
+                    <h4 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-wider">Evaluation Results</h4>
+                    <div id="modalChart" class="space-y-3">
+                        <!-- Bars injected here -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div
+                class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
+                <button onclick="window.closeModelDetails()"
+                    class="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200">Close Details</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+            (function () {
+                const $ = s => document.querySelector(s);
+                const $$ = s => [...document.querySelectorAll(s)];
+                const EVAL_COLUMNS = window.EVAL_COLUMNS;
+
+                let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
+                let currentSort = { colId: null, dir: 'none' };
+
+                // New State
+                let tableOptions = {
+                    rankMode: 'static', // 'static' | 'dynamic'
+                    avgMode: 'all',      // 'all' | 'visible'
+                    scoreDisplay: 'all'  // 'all' | 'avg' | 'raw'
+                };
+
+                window.initLeaderboard = function (data) {
+                    lbData = data;
+
+                    const sizes = lbData.map(r => r["Model Size"] || 0);
+                    minMeta = sizes.length ? Math.ceil(Math.min(...sizes)) : 0;
+                    maxMeta = sizes.length ? Math.ceil(Math.max(...sizes)) : 100;
+
+                    if (!lbData.length) {
+                        $('#table-wrapper').innerHTML = "<div class='p-8 text-center text-slate-500'>No data loaded.</div>";
+                        return;
+                    }
+
+                    setupFilters();
+                    prepareColumns(lbData);
+                    renderTable(lbData);
+                    applyFilters();
+                    buildColMenuDOM();
+
+                    $('#searchInput').addEventListener('keyup', applyFilters);
+
+                    // Close menus on outside click
+                    document.addEventListener('click', e => {
+                        const t = e.target;
+                        // Col Menu
+                        if (!$('#colMenu').classList.contains('hidden') && !$('#colMenu').contains(t) && !$('#colMenuTrigger').contains(t)) {
+                            toggleColMenu();
+                        }
+                        // Table Ops Menu
+                        if (!$('#tableOpsMenu').classList.contains('hidden') && !$('#tableOpsMenu').contains(t) && !$('#tableOpsTrigger').contains(t)) {
+                            toggleTableOps();
+                        }
+                    });
+
+                    if (window.lucide) lucide.createIcons();
+                };
+
+                // --- MENU LOGIC ---
+                window.toggleColMenu = toggleColMenu;
+                window.toggleTableOps = toggleTableOps;
+                window.setRankMode = setRankMode;
+                window.setAvgMode = setAvgMode;
+                window.setScoreDisplay = setScoreDisplay;
+
+                function toggleColMenu(e) {
+                    e?.stopPropagation();
+                    $('#colMenu').classList.toggle('hidden');
+                    $('#tableOpsMenu').classList.add('hidden');
+                    $('#colMenuIcon').setAttribute('data-lucide', $('#colMenu').classList.contains('hidden') ? 'book-open' : 'x');
+                    if (window.lucide) lucide.createIcons();
+                }
+
+                function toggleTableOps(e) {
+                    e?.stopPropagation();
+                    $('#tableOpsMenu').classList.toggle('hidden');
+                    $('#colMenu').classList.add('hidden');
+                    if (window.lucide) lucide.createIcons();
+                }
+
+                window.resetTableOps = function () {
+                    tableOptions.rankMode = 'static';
+                    tableOptions.avgMode = 'all';
+                    tableOptions.scoreDisplay = 'all';
+                    updateOptionUI();
+                    prepareColumns(lbData); // Re-prepare columns to reset formatters
+                    applyFilters();
+                };
+
+                function updateOptionUI() {
+                    const activeClass = "bg-white dark:bg-slate-600 shadow-sm text-indigo-600 dark:text-indigo-300";
+                    const inactiveClass = "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200";
+
+                    const setBtn = (id, isActive) => {
+                        const btn = $(id);
+                        if (btn) btn.className = `flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${isActive ? activeClass : inactiveClass}`;
+                    }
+
+                    setBtn('#rankBtnStatic', tableOptions.rankMode === 'static');
+                    setBtn('#rankBtnDynamic', tableOptions.rankMode === 'dynamic');
+                    setBtn('#avgBtnAll', tableOptions.avgMode === 'all');
+                    setBtn('#avgBtnVisible', tableOptions.avgMode === 'visible');
+
+                    // New UI Update
+                    setBtn('#scoreBtnAll', tableOptions.scoreDisplay === 'all');
+                    setBtn('#scoreBtnAvg', tableOptions.scoreDisplay === 'avg');
+                    setBtn('#scoreBtnRaw', tableOptions.scoreDisplay === 'raw');
+                }
+
+                function setRankMode(mode) {
+                    tableOptions.rankMode = mode;
+                    updateOptionUI();
+                    applyFilters();
+                }
+
+                function setAvgMode(mode) {
+                    tableOptions.avgMode = mode;
+                    updateOptionUI();
+                    applyFilters();
+                }
+
+                function setScoreDisplay(mode) {
+                    tableOptions.scoreDisplay = mode;
+                    updateOptionUI();
+                    prepareColumns(lbData); // Formatting changed, so we must rebuild columns
+                    applyFilters();
+                }
+
+                // --- MODAL LOGIC ---
+                window.openModelDetails = function (modelName) {
+                    const model = lbData.find(r => r["Model Name"] === modelName);
+                    if (!model) return;
+
+                    const fullPath = model["Model Name"];
+                    const splitIndex = fullPath.indexOf('/');
+                    const hasOrg = splitIndex !== -1;
+                    const displayModel = hasOrg ? fullPath.substring(splitIndex + 1) : fullPath;
+                    const displayOrg = hasOrg ? fullPath.substring(0, splitIndex) : null;
+
+                    $('#modalTitle').innerHTML = `
+        <div class="flex flex-col">
+            <span>${displayModel}</span>
+            ${displayOrg ? `
+            <div class="flex items-center gap-1.5 mt-1 text-base font-normal text-slate-500 dark:text-slate-400">
+                <i data-lucide="building-2" class="w-4 h-4"></i>
+                <span>${displayOrg}</span>
+            </div>` : ''}
+        </div>
+    `;
+
+                    // Reset values
+                    $('#modalRank').innerText = "#" + model["Rank"];
+                    $('#modalAvg').innerText = parseFloat(model["Average"]).toFixed(2);
+                    $('#modalSize').innerText = model["Model Size"] + "B";
+                    $('#modalLikes').innerText = "--";
+                    // We don't have an ID for downloads yet in the static HTML, so we rely on the injected HTML below
+                    $('#modalLicense').innerText = model["License"];
+                    $('#modalPrecision').innerText = model["Precision"];
+                    $('#modalRevision').innerText = model["Revision"];
+
+                    // --- 1. MODIFIED: Added Download Span to Metadata Line ---
+                    // I added the separator dot and the Downloads span at the end of this block
+                    const metadataHtml = `
+        <span class="flex items-center gap-1" title="License"><i data-lucide="scale" class="w-3.5 h-3.5"></i> <span id="modalLicense">${model["License"]}</span></span>
+        <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
+
+        <span class="flex items-center gap-1" title="Precision"><i data-lucide="cpu" class="w-3.5 h-3.5"></i> <span id="modalPrecision">${model["Precision"]}</span></span>
+        <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
+
+        <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit" class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">${model["Revision"]}</span></span>
+        <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
+
+        <span class="flex items-center gap-1" title="Downloads (last 30 days)">
+            <i data-lucide="download" class="w-3.5 h-3.5"></i> 
+            <span id="modalDownloads">--</span>
+        </span>
+    `;
+
+                    const metaContainer = document.querySelector('#modelModal .border-y');
+                    if (metaContainer) metaContainer.innerHTML = metadataHtml;
+
+                    // --- Fetch Logic to include Downloads ---
+                    const formData = new FormData();
+                    formData.append('model_name', model["Model Name"]);
+                    formData.append('revision', model["Revision"]);
+
+                    fetch('/api/model-likes', {
+                        method: 'POST',
+                        body: formData
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.likes !== undefined) {
+                                $('#modalLikes').innerText = data.likes;
+                            }
+                            // Check if API returns downloads and update
+                            if (data.downloads !== undefined) {
+                                const dl = document.getElementById('modalDownloads');
+                                if (dl) dl.innerText = data.downloads; // You might want to format this (e.g., 1.5k)
+                            }
+                        })
+                        .catch(error => console.error('Error fetching stats:', error));
+
+                    $('#modalLinkHF').href = `https://huggingface.co/${model["Model Name"]}`;
+
+                    const cleanName = model["Model Name"].replace(/\//g, '__');
+                    const datasetId = `OALL/details_${cleanName}_v2`;
+                    $('#modalLinkDetails').href = `https://huggingface.co/datasets/${datasetId}`;
+
+                    const chartContainer = $('#modalChart');
+                    chartContainer.innerHTML = "";
+
+                    EVAL_COLUMNS.forEach(col => {
+                        const score = parseFloat(model[col]) || 0;
+                        const hue = (Math.max(0, Math.min(100, score)) / 100) * 120;
+
+                        const barHtml = `
+            <div class="flex items-center gap-3 group">
+                <div class="w-32 text-sm font-medium text-slate-600 dark:text-slate-400 truncate text-right shrink-0" title="${col}">${col}</div>
+                <div class="flex-1 h-3 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden relative">
+                    <div class="h-full rounded-full transition-all duration-500 ease-out" style="width: 0%; background-color: hsl(${hue}, 75%, 50%);" id="bar-${col.replace(/\s+/g, '')}"></div>
+                </div>
+                <div class="w-12 text-sm font-bold text-slate-700 dark:text-slate-200 text-right shrink-0">${score.toFixed(2)}</div>
+            </div>
+        `;
+                        chartContainer.insertAdjacentHTML('beforeend', barHtml);
+
+                        setTimeout(() => {
+                            const bar = document.getElementById(`bar-${col.replace(/\s+/g, '')}`);
+                            if (bar) bar.style.width = `${score}%`;
+                        }, 100);
+                    });
+
+                    $('#modelModal').classList.remove('hidden');
+                    document.body.style.overflow = 'hidden';
+                    if (window.lucide) lucide.createIcons();
+                };
+                window.closeModelDetails = function () {
+                    $('#modelModal').classList.add('hidden');
+                    document.body.style.overflow = '';
+                };
+
+                // --- TABLE LOGIC ---
+                window.toggleSort = function (colId) {
+                    currentSort = (currentSort.colId !== colId) ? { colId, dir: 'asc' } : { colId: (currentSort.dir === 'asc' ? colId : null), dir: (currentSort.dir === 'asc' ? 'desc' : 'none') };
+                    prepareColumns(lbData);
+                    applyFilters();
+                };
+
+                window.toggleFilterPanel = function () {
+                    $('#filterPanel').classList.toggle('hidden');
+                    const btn = $('#filterBtn');
+                    ['bg-indigo-100', 'text-indigo-700', 'ring-2', 'ring-indigo-500', 'bg-slate-100'].forEach(c => btn.classList.toggle(c));
+                };
+
+                window.resetFilters = function () {
+                    $('#searchInput').value = "";
+                    $('#minSizeSlider').value = minMeta;
+                    $('#maxSizeSlider').value = maxMeta;
+                    $$('input[type="checkbox"]').forEach(c => c.checked = true);
+                    $('#minSizeSlider').dispatchEvent(new Event('input'));
+                    applyFilters();
+                };
+
+                window.resetColumns = function () {
+                    tableColumns.forEach(c => c.hidden = !(["Average", "Rank", "Model Name"].includes(c.id) || EVAL_COLUMNS.includes(c.id)));
+                    applyFilters();
+                    buildColMenuDOM();
+                };
+
+                window.applyFilters = applyFilters;
+
+                function applyFilters() {
+                    if (!lbData.length) return;
+                    const sVal = $('#searchInput').value.toLowerCase();
+                    const minSz = parseInt($('#minSizeSlider').value);
+                    const maxSz = (parseInt($('#maxSizeSlider').value) === maxMeta) ? 99999 : parseInt($('#maxSizeSlider').value);
+
+                    const getVals = cls => $$(`.${cls}:checked`).map(c => c.value);
+                    const [precs, types, lics] = [getVals('precision-chk'), getVals('type-chk'), getVals('license-chk')];
+
+                    // 1. Filter Data
+                    let filtered = lbData.filter(r =>
+                        (r["Model Name"] || "").toLowerCase().includes(sVal) &&
+                        (r["Model Size"] || 0) >= minSz && (r["Model Size"] || 0) <= maxSz &&
+                        (!precs.length || precs.includes(r["Precision"])) &&
+                        (!types.length || types.includes(r["Full Type"])) &&
+                        (!lics.length || lics.includes(r["License"]))
+                    ).map(row => ({ ...row }));
+
+                    // 2. Handle Average Score Calculation (If Visible Only)
+                    if (tableOptions.avgMode === 'visible') {
+                        const visibleCols = tableColumns.filter(c => EVAL_COLUMNS.includes(c.id) && !c.hidden).map(c => c.id);
+                        filtered.forEach(row => {
+                            if (visibleCols.length > 0) {
+                                const sum = visibleCols.reduce((acc, col) => acc + (parseFloat(row[col]) || 0), 0);
+                                row['Average'] = (sum / visibleCols.length);
+                            } else {
+                                row['Average'] = 0;
+                            }
+                        });
+                    }
+
+                    // 3. Sort Data
+                    if (currentSort.colId && currentSort.dir !== 'none') {
+                        filtered.sort((a, b) => {
+                            let [vA, vB] = [a[currentSort.colId], b[currentSort.colId]];
+                            if (EVAL_COLUMNS.includes(currentSort.colId) || currentSort.colId.includes("Average")) [vA, vB] = [vB, vA];
+                            const [nA, nB] = [parseFloat(vA), parseFloat(vB)];
+                            if (!isNaN(nA) && !isNaN(nB)) {
+                                return currentSort.dir === 'asc' ? nA - nB : nB - nA;
+                            }
+                            return vA.toString().localeCompare(vB.toString()) * (currentSort.dir === 'asc' ? 1 : -1);
+                        });
+                    }
+
+                    // 4. Handle Ranking Mode
+                    if (tableOptions.rankMode === 'dynamic') {
+                        filtered.forEach((row, index) => {
+                            row['Rank'] = index + 1;
+                        });
+                    }
+
+                    // 5. Update Grid
+                    grid.updateConfig({ data: filtered, columns: tableColumns }).forceRender();
+                    $('#modelCounter').innerText = `${filtered.length} / ${lbData.length}`;
+                }
+
+                function renderTable(data) {
+                    $('#table-wrapper').innerHTML = "";
+                    grid = new gridjs.Grid({
+                        columns: tableColumns, data: data, sort: false, search: false, pagination: false, fixedHeader: true, height: 'auto', autoWidth: false, resizable: true,
+                        style: { table: { 'width': '100%' } },
+                        className: {
+                            table: 'text-sm text-left',
+                            th: 'bg-slate-100 dark:bg-darkbg text-slate-800 dark:text-slate-200 font-bold px-6 py-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors cursor-pointer relative z-10',
+                            td: 'bg-white dark:bg-darkcard text-slate-600 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700 px-6 py-3'
+                        }
+                    }).render($('#table-wrapper'));
+                }
+
+                function prepareColumns(data) {
+                    const keys = Object.keys(data[0] || {});
+                    const typeIdx = keys.findIndex(k => ["T", "Type", "Full Type"].includes(k));
+                    const vis = tableColumns.reduce((acc, c) => ({ ...acc, [c.id]: c.hidden }), {});
+
+                    tableColumns = keys.map(key => {
+                        const isScore = EVAL_COLUMNS.includes(key), isAvg = key.includes("Average");
+                        let name = key;
+                        let icon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+                        let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
+
+                        if (currentSort.colId === key) {
+                            cls = "text-indigo-600 dark:text-indigo-400";
+                            icon = currentSort.dir === 'desc'
+                                ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>`
+                                : `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>`;
+                        }
+
+                        const headerHtml = `<div onclick="window.toggleSort('${key}')" class="flex items-center justify-between gap-2 cursor-pointer select-none w-full h-full"><span>${name}</span><span class="${cls}">${icon}</span></div>`;
+
+                        const def = {
+                            id: key,
+                            name: gridjs.html(headerHtml),
+                            hidden: vis[key] ?? (!isScore && !["Average", "Rank", "Model Name"].includes(key)),
+                            group: isScore ? 'scores' : 'details',
+                            width: '140px',
+                            sort: false
+                        };
+
+                        if (key === "Model Size") {
+                            def.formatter = (c) => gridjs.html(`<span class="font-mono">${c}B</span>`);
+                        }
+
+                        if (key === "Model Name") {
+                            def.width = '400px';
+                            def.formatter = (c, r) => {
+                                const type = (typeIdx > -1 && r.cells[typeIdx]) ? r.cells[typeIdx].data : "";
+                                const tMap = { "chat": "💬", "pretrained": "🟢", "fine-tuned": "🔶" };
+                                const tIcon = tMap[type] || type;
+
+                                return gridjs.html(`
+                        <div class="relative w-full h-[38px] flex items-center group pr-6">
+                            ${type ? `<span class="mr-2 text-lg select-none" title="${type}">${tIcon}</span>` : ''}
+                            <div onclick="window.openModelDetails('${c}')" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer line-clamp-2-custom leading-[1.3] select-text" title="Click for details">${c}</div>
+                        </div>
+                    `);
+                            };
+                        } else if (isScore || isAvg) {
+
+                            // -- NEW LOGIC FOR SCORE DISPLAY STATUS --
+                            const renderBar = (c) => {
+                                const n = parseFloat(c); if (isNaN(n)) return c;
+                                const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
+                                return gridjs.html(`<div class="flex justify-center"><div style="background: linear-gradient(to right, hsla(${h},85%,50%,0.3) ${n}%, hsla(${h},85%,50%,0.05) ${n}%); border: 1px solid hsla(${h},85%,40%,0.3);" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`);
+                            };
+
+                            const renderRaw = (c) => {
+                                const n = parseFloat(c); if (isNaN(n)) return c;
+                                return gridjs.html(`<div class="flex justify-center text-xs font-bold text-slate-700 dark:text-slate-300 py-1">${n.toFixed(2)}</div>`);
+                            };
+
+                            let shouldUseBar = false;
+
+                            if (tableOptions.scoreDisplay === 'all') {
+                                shouldUseBar = true;
+                            } else if (tableOptions.scoreDisplay === 'avg') {
+                                shouldUseBar = isAvg;
+                            } else if (tableOptions.scoreDisplay === 'raw') {
+                                shouldUseBar = false;
+                            }
+
+                            def.formatter = shouldUseBar ? renderBar : renderRaw;
+
+                        } else if (key === "Rank") {
+                            def.width = '110px';
+                            def.formatter = (c) => {
+                                const rank = parseInt(c);
+                                let badge = `<span class="font-mono font-bold text-slate-700 dark:text-slate-200">#${rank}</span>`;
+
+                                if (rank === 1) badge = `<span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-700/50 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm box-decoration-clone">1 🥇</span>`;
+                                if (rank === 2) badge = `<span class="bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-600 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">2 🥈</span>`;
+                                if (rank === 3) badge = `<span class="bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300 border border-orange-200 dark:border-orange-700/50 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">3 🥉</span>`;
+
+                                return gridjs.html(`<div class="flex justify-center items-center h-full">${badge}</div>`);
+                            };
+                        }
+                        return key === "Full Type" || key === "T" ? { ...def, hidden: true } : def;
+                    });
+                }
+
+                function setupFilters() {
+                    const minS = $('#minSizeSlider'), maxS = $('#maxSizeSlider');
+                    minS.min = maxS.min = minMeta;
+                    minS.max = maxS.max = maxMeta;
+                    minS.value = minMeta;
+                    maxS.value = maxMeta;
+
+                    const formatLabel = (val) => {
+                        return val + "B";
+                    };
+
+                    $('#minSizeLabel').innerText = formatLabel(minMeta);
+                    $('#maxSizeLabel').innerText = formatLabel(maxMeta);
+
+                    const updateDualSlider = () => {
+                        let minV = parseInt(minS.value), maxV = parseInt(maxS.value);
+                        if (minV > maxV) { const tmp = minV; minS.value = maxV; maxS.value = tmp; minV = maxV; maxV = tmp; }
+
+                        const textMin = formatLabel(minV);
+                        const textMax = formatLabel(maxV);
+                        $('#sizeValue').innerText = `${textMin} - ${textMax}`;
+
+                        const range = $('#sliderRange');
+                        const percent1 = ((minV - minS.min) / (minS.max - minS.min)) * 100;
+                        const percent2 = ((maxV - maxS.min) / (maxS.max - maxS.min)) * 100;
+                        range.style.left = percent1 + "%"; range.style.width = (percent2 - percent1) + "%";
+                    };
+
+                    minS.oninput = updateDualSlider;
+                    maxS.oninput = updateDualSlider;
+                    minS.onchange = maxS.onchange = () => applyFilters();
+                    updateDualSlider();
+
+                    const createInputs = (id, key, cls, type) => {
+                        const vals = [...new Set(lbData.map(d => d[key]))].filter(Boolean);
+                        $(id).innerHTML = vals.map(v => type === 'pill'
+                            ? `<label class="cursor-pointer"><input type="checkbox" value="${v}" class="peer sr-only ${cls}" checked onchange="window.applyFilters()"><div class="px-3 py-1 rounded-full border border-slate-300 dark:border-slate-600 text-xs font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-700 hover:bg-slate-50 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 transition-all">${v}</div></label>`
+                            : `<label class="inline-flex items-center p-2 border border-slate-200 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 hover:bg-white transition cursor-pointer"><input type="checkbox" value="${v}" class="${cls} form-checkbox h-4 w-4 text-indigo-600 rounded" checked onchange="window.applyFilters()"><span class="ml-2 text-xs font-medium text-slate-700 dark:text-slate-200">${v}</span></label>`
+                        ).join('');
+                    };
+                    createInputs('#precisionFilterContainer', 'Precision', 'precision-chk', 'box');
+                    createInputs('#typeFilterContainer', 'Full Type', 'type-chk', 'pill');
+                    createInputs('#licenseFilterContainer', 'License', 'license-chk', 'pill');
+                }
+
+                function buildColMenuDOM() {
+                    const addBtns = (grp, el) => {
+                        $(el).innerHTML = '';
+                        tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type"].includes(c.id)).forEach(c => {
+                            const b = document.createElement('button');
+                            b.innerText = c.id.includes("Average") ? "Average" : (c.id === "Model Size Filter" ? "Params" : c.id);
+                            b.className = `px-2 py-1 text-xs font-medium rounded-md border transition-all select-none ${!c.hidden ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300"}`;
+                            b.onclick = (e) => {
+                                e.stopPropagation();
+                                c.hidden = !c.hidden;
+                                // Re-run filter logic to handle avg calc if mode is 'visible'
+                                applyFilters();
+                                buildColMenuDOM();
+                            };
+                            $(el).appendChild(b);
+                        });
+                        $(`#count-${grp}`).innerText = `(${tableColumns.filter(x => x.group === grp && !x.hidden).length}/${tableColumns.filter(x => x.group === grp).length})`;
+                    };
+                    addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
+                }
+
+            })();
+    </script>
+
+</body>
+
+</html>

frontend/submit.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<body class="bg-white dark:bg-slate-900">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div class="lg:col-span-2 space-y-6">
+            <div
+                class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
+                <h3 class="text-xl font-bold mb-6 flex items-center text-slate-800 dark:text-slate-100">
+                    <span
+                        class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 p-2 rounded-full mr-3">
+                        <i data-lucide="rocket" class="w-5 h-5"></i>
+                    </span>
+                    Submit Model
+                </h3>
+                <form id="submitForm" class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="space-y-4">
+                            <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model
+                                    Name</label><input required name="model_name" type="text"
+                                    placeholder="myorg/mymodel"
+                                    class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                            </div>
+                            <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model
+                                    Type</label>
+                                <div class="relative"><select name="model_type"
+                                        class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none appearance-none transition cursor-pointer">
+                                        <option value="pt">🟢 Pretrained</option>
+                                        <option value="chat">💬 Chat</option>
+                                        <option value="fine-tuned" selected>🔶 Fine-tuned</option>
+                                        <option value="merges">🤝 Merges</option>
+                                    </select><i data-lucide="chevron-down"
+                                        class="absolute right-3 top-3 h-4 w-4 text-slate-400 pointer-events-none"></i>
+                                </div>
+                            </div>
+                            <div><label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Precision</label>
+                                <div class="relative"><select name="precision"
+                                        class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none appearance-none transition cursor-pointer">
+                                        <option value="float16">float16</option>
+                                        <option value="bfloat16" selected>bfloat16</option>
+                                        <option value="8bit">8bit</option>
+                                        <option value="4bit">4bit</option>
+                                    </select><i data-lucide="chevron-down"
+                                        class="absolute right-3 top-3 h-4 w-4 text-slate-400 pointer-events-none"></i>
+                                </div>
+                            </div>
+                            <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Chat
+                                    Template?</label>
+                                <div class="flex gap-4"><label class="flex items-center"><input type="radio"
+                                            name="chat_template" value="Yes" class="text-indigo-600 h-4 w-4"><span
+                                            class="ml-2 text-sm text-slate-600 dark:text-slate-400">Yes</span></label><label
+                                        class="flex items-center"><input type="radio" name="chat_template" value="No"
+                                            checked class="text-indigo-600 h-4 w-4"><span
+                                            class="ml-2 text-sm text-slate-600 dark:text-slate-400">No</span></label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="space-y-4">
+                            <div><label
+                                    class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Revision
+                                    Commit</label><input name="revision" type="text" value="main" placeholder="main"
+                                    class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition font-mono text-sm">
+                            </div>
+                            <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Weight
+                                    Type</label>
+                                <div class="relative"><select name="weight_type"
+                                        class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none appearance-none transition cursor-pointer">
+                                        <option value="Original" selected>Original</option>
+                                        <option value="Adapter">Adapter</option>
+                                        <option value="Delta">Delta</option>
+                                    </select><i data-lucide="chevron-down"
+                                        class="absolute right-3 top-3 h-4 w-4 text-slate-400 pointer-events-none"></i>
+                                </div>
+                            </div>
+                            <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Base
+                                    Model <span class="text-xs text-slate-400 font-normal">(if
+                                        adapter)</span></label><input name="base_model" type="text"
+                                    placeholder="e.g. myorg/base-model"
+                                    class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="pt-4 border-t border-slate-100 dark:border-slate-700">
+                        <button type="submit" id="submitBtn"
+                            class="w-full py-3 px-4 rounded-xl shadow-lg shadow-indigo-500/30 text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-all flex justify-center items-center gap-2 group"><span>Submit
+                                Model</span><i data-lucide="arrow-right"
+                                class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i></button>
+                    </div>
+                    <div id="submitMsg" class="text-center text-sm font-medium min-h-[20px]"></div>
+                </form>
+            </div>
+        </div>
+
+        <div class="lg:col-span-1 space-y-4">
+            <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-4 px-2">Evaluation Status</h3>
+            <div id="sidebar-status-container" class="space-y-3">
+                <div class="p-4 text-center text-sm text-slate-400 animate-pulse">Loading queue...</div>
+            </div>
+            <div
+                class="mt-6 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+                <h4 class="font-bold text-slate-700 dark:text-slate-300 mb-2">About Submission</h4>
+                <p>Submitted models are added to the queue automatically. Results appear on the leaderboard once
+                    finished.</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        (function () {
+            // 1. Handle Sidebar Loading
+            async function updateSidebarQueue() {
+                const container = document.querySelector('#sidebar-status-container');
+                if (!container) return;
+
+                try {
+                    const res = await fetch('/api/queue');
+                    const q = await res.json();
+                    const safeQ = q || { "pending": [], "running": [], "finished": [], "failed": [] };
+
+                    if (window.updateHeaderStats) {
+                        window.updateHeaderStats(safeQ);
+                    }
+
+                    const cf = { pending: ["text-amber-500 bg-amber-500", "clock"], running: ["text-blue-500 bg-blue-500", "loader-2"], finished: ["text-emerald-500 bg-emerald-500", "check-circle"], failed: ["text-rose-500 bg-rose-500", "x-circle"] };
+
+                    container.innerHTML = Object.entries(safeQ).map(([k, items]) => `
+                        <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
+                            <button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full flex items-center justify-between p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+                                <div class="flex items-center gap-3"><div class="p-2 rounded-lg ${cf[k] ? cf[k][0] : 'text-slate-500 bg-slate-500'} bg-opacity-10 text-current"><i data-lucide="${cf[k] ? cf[k][1] : 'help-circle'}" class="w-4 h-4"></i></div><span class="text-sm font-bold capitalize text-slate-700 dark:text-slate-200">${k}</span></div><span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400">${items.length}</span>
+                            </button>
+                            <div class="hidden text-sm">${items.length ? `<div class="bg-slate-50 dark:bg-darkbg p-3 border-t border-slate-100 dark:border-slate-700 space-y-2">${items.map(i => `<div class="flex justify-between text-xs p-2 bg-white dark:bg-slate-800 rounded border border-slate-200 dark:border-slate-600"><span class="font-mono text-slate-600 dark:text-slate-300 truncate" title="${i.name}">${i.name}</span><span class="px-1.5 bg-slate-100 dark:bg-slate-700 text-slate-500 rounded">${i.user || 'anon'}</span></div>`).join('')}</div>` : `<div class="p-4 text-xs text-center text-slate-400 bg-slate-50 dark:bg-darkbg border-t border-slate-100 dark:border-slate-700 italic">No ${k} evaluations.</div>`}</div>
+                        </div>`).join('');
+
+                    if (window.lucide) lucide.createIcons();
+
+                } catch (err) {
+                    console.error("Sidebar queue error:", err);
+                    container.innerHTML = `<div class="p-4 text-center text-rose-500 text-sm">Status offline</div>`;
+                }
+            }
+
+            // 2. Handle Form Submission
+            const form = document.querySelector('#submitForm');
+            if (form) {
+                form.onsubmit = async (e) => {
+                    e.preventDefault();
+                    const btn = document.querySelector('#submitBtn');
+                    const msg = document.querySelector('#submitMsg');
+
+                    btn.disabled = true;
+                    btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Submitting...`;
+                    if (window.lucide) lucide.createIcons();
+
+                    try {
+                        const res = await fetch('/api/submit', { method: 'POST', body: new FormData(e.target) });
+                        const json = await res.json();
+
+                        if (!res.ok) throw new Error(json.detail ? JSON.stringify(json.detail) : (json.message || "Error"));
+
+                        msg.className = "text-center text-sm font-medium text-emerald-600 dark:text-emerald-400";
+                        msg.innerText = "✅ " + (json.message || "Success!");
+                        e.target.reset();
+
+                        // Update Local Sidebar & Header
+                        await updateSidebarQueue();
+
+                    } catch (err) {
+                        msg.className = "text-center text-sm font-medium text-rose-600 dark:text-rose-400";
+                        msg.innerText = "❌ " + err.message;
+                    }
+
+                    btn.disabled = false;
+                    btn.innerHTML = `<span>Submit Model</span> <i data-lucide="arrow-right" class="w-4 h-4"></i>`;
+                    if (window.lucide) lucide.createIcons();
+                };
+            }
+
+            // Init
+            updateSidebarQueue();
+        })();
+    </script>
+</body>
+
+</html>