Update the root README.md

README.md

@@ -1,81 +1,49 @@
 ---
-title: Transformers.js Benchmark Server
-emoji: 🚀
+title: Transformers.js Benchmark Leaderboard
+emoji: 🏆
 colorFrom: blue
-colorTo: green
-sdk: docker
+colorTo: purple
+sdk: gradio
+sdk_version: 5.49.1
+app_file: leaderboard/src/leaderboard/app.py
 pinned: false
 ---
 
-# Transformers.js Benchmark Server
+# Transformers.js Benchmark Leaderboard
 
-A REST API server for running and managing Transformers.js benchmarks on both Node.js and browser (via Playwright) platforms.
+A Gradio-based leaderboard that displays benchmark results from a HuggingFace Dataset repository.
 
 ## Features
 
-- **Queue-based benchmark execution**: Submit benchmarks via REST API and process them sequentially
-- **Multi-platform support**: Run benchmarks on Node.js or in browsers (via Playwright)
-- **Result persistence**: Store benchmark results in JSONL format
-- **Validation**: Request validation using Zod schemas
-- **CLI client**: Command-line interface for interacting with the server
-
-## API Endpoints
-
-### Submit Benchmark
-```bash
-POST /api/benchmark
-Content-Type: application/json
-
-{
-  "platform": "node",          # "node" or "web"
-  "modelId": "Xenova/all-MiniLM-L6-v2",
-  "task": "feature-extraction",
-  "mode": "warm",              # "warm" or "cold"
-  "repeats": 3,
-  "dtype": "fp32",             # fp32, fp16, q8, int8, uint8, q4, bnb4, q4f16
-  "batchSize": 1,
-  "device": "webgpu",          # For web: "webgpu" or "wasm"
-  "browser": "chromium",       # For web: "chromium", "firefox", "webkit"
-  "headed": false
-}
-```
-
-### Get Benchmark Result
-```bash
-GET /api/benchmark/:id
-```
-
-### List All Benchmarks
-```bash
-GET /api/benchmarks
-```
-
-### Queue Status
-```bash
-GET /api/queue
-```
-
-### Clear Results
-```bash
-DELETE /api/benchmarks
-```
+- **📊 Interactive leaderboard**: Display benchmark results in a searchable/filterable table
+- **🔍 Advanced filtering**: Filter by model name, task, platform, device, mode, and dtype
+- **⭐ Recommended models**: Curated list of WebGPU-compatible beginner-friendly models
+- **🔄 Real-time updates**: Refresh data on demand from HuggingFace Dataset
+- **📈 Performance metrics**: View load time, inference time, and p50/p90 percentiles
+- **📝 Markdown export**: Export recommended models for documentation
 
 ## Architecture
 
 ```
 .
-├── bench/          # Benchmark server and execution logic
+├── leaderboard/       # Gradio-based leaderboard app
+│   ├── src/
+│   │   └── leaderboard/
+│   │       ├── app.py          # Main Gradio application
+│   │       ├── data_loader.py  # HuggingFace Dataset loader
+│   │       └── formatters.py   # Data formatting utilities
+│   ├── pyproject.toml          # Python dependencies
+│   └── README.md               # Detailed leaderboard docs
+├── bench/             # Benchmark server (separate deployment)
 │   ├── src/
 │   │   ├── core/      # Shared types and utilities
 │   │   ├── node/      # Node.js benchmark runner
-│   │   ├── web/       # Browser benchmark runner (Playwright)
-│   │   └── server/    # REST API server (Hono)
-│   └── package.json
-├── client/         # CLI client for the server
-│   ├── src/
-│   │   └── index.ts   # Yargs-based CLI
+│   │   ├── web/       # Browser benchmark runner
+│   │   └── server/    # REST API server
 │   └── package.json
-└── Dockerfile
+└── client/            # CLI client for benchmark server
+    ├── src/
+    └── package.json
 ```
 
 ## Development
@@ -84,28 +52,103 @@ DELETE /api/benchmarks
 
 1. Install dependencies:
 ```bash
-cd bench && npm install
-cd ../client && npm install
+cd leaderboard
+uv sync
 ```
 
-2. Install Playwright browsers:
+2. Configure environment variables:
 ```bash
-cd bench && npm run bench:install
+# Create .env file or export variables
+export HF_DATASET_REPO="your-username/benchmark-results"
+export HF_TOKEN="your-hf-token"  # Optional, for private datasets
 ```
 
-3. Start the server:
+3. Run the leaderboard:
 ```bash
-cd bench && npm run server
+uv run python -m leaderboard.app
 ```
 
-4. Use the CLI client:
-```bash
-cd client && npm run cli -- submit Xenova/all-MiniLM-L6-v2 feature-extraction --wait
-```
+The leaderboard will be available at: http://localhost:7861
+
+### Environment Variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `HF_DATASET_REPO` | Yes | HuggingFace dataset repository containing benchmark results |
+| `HF_TOKEN` | No | HuggingFace API token (only needed for private datasets) |
 
 ## Deployment
 
-This server is designed to run on Hugging Face Spaces using Docker. The Dockerfile includes all necessary dependencies including Playwright browsers for running web-based benchmarks.
+This leaderboard is designed to run on Hugging Face Spaces using the Gradio SDK.
+
+### Quick Deploy
+
+1. **Create a new Space** on Hugging Face:
+   - Go to https://huggingface.co/new-space
+   - Choose **Gradio** as the SDK
+   - Set the Space name (e.g., `transformersjs-benchmark-leaderboard`)
+
+2. **Upload files to your Space**:
+   ```bash
+   # Clone your Space repository
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+   cd YOUR_SPACE_NAME
+
+   # Copy leaderboard files (adjust path as needed)
+   cp -r /path/to/this/repo/leaderboard/* .
+
+   # Commit and push
+   git add .
+   git commit -m "Deploy leaderboard"
+   git push
+   ```
+
+3. **Configure Space secrets**:
+   - Go to your Space settings → **Variables and secrets**
+   - Add `HF_DATASET_REPO`: Your dataset repository (e.g., `username/benchmark-results`)
+   - Add `HF_TOKEN`: Your HuggingFace API token (if using private datasets)
+
+4. **Space will automatically deploy** and be available at:
+   ```
+   https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+   ```
+
+### Dependencies
+
+The Space automatically installs dependencies from `pyproject.toml`:
+- `gradio>=5.49.1` - Web UI framework
+- `pandas>=2.3.3` - Data manipulation
+- `huggingface-hub>=0.35.3` - Dataset loading
+- `python-dotenv>=1.1.1` - Environment variables
+
+## Data Format
+
+The leaderboard reads JSONL files from the HuggingFace Dataset repository. Each line should be a JSON object with benchmark results:
+
+```json
+{
+  "id": "benchmark-id",
+  "platform": "web",
+  "modelId": "Xenova/all-MiniLM-L6-v2",
+  "task": "feature-extraction",
+  "mode": "warm",
+  "device": "wasm",
+  "dtype": "fp32",
+  "status": "completed",
+  "result": {
+    "metrics": {
+      "load_ms": {"p50": 100, "p90": 120},
+      "first_infer_ms": {"p50": 10, "p90": 15},
+      "subsequent_infer_ms": {"p50": 8, "p90": 12}
+    }
+  }
+}
+```
+
+## Related Projects
+
+- **Benchmark Server** (`bench/`): REST API server for running benchmarks (separate Docker deployment)
+- **CLI Client** (`client/`): Command-line tool for submitting benchmarks to the server
 
 ## License