Merge branch 'main' of https://github.com/RouteWorks/routerarena.github.io into dev

Author: shenrunzhang

.gemini /config.yaml

@@ -0,0 +1,11 @@
+# Referred to SkyRL
+have_fun: true # the bot sometimes adds lighthearted / fun comments.
+code_review:
+  disable: false
+  comment_severity_threshold: MEDIUM
+  max_review_comments: -1
+  pull_request_opened:
+    help: false
+    summary: false # enable PR summaries
+    code_review: false
+ignore_patterns: []

.github/workflows/precommit.yml

@@ -0,0 +1,12 @@
+name: pre-commit
+on: [push, pull_request]
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.x"
+      - run: pip install pre-commit
+      - run: pre-commit run --all-files

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.venv*/*
 
 npm-debug.log*
 yarn-debug.log*

.pre-commit-config.yaml

@@ -0,0 +1,36 @@
+repos:
+  # --- Basic hygiene ---
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+        exclude: '\\.svg$'
+        exclude_types: [svg]
+      - id: end-of-file-fixer
+        exclude: '\\.svg$'
+        exclude_types: [svg]
+      - id: check-json
+      - id: check-yaml
+      - id: check-added-large-files
+        args: ["--maxkb=2048"]
+      - id: check-merge-conflict
+      - id: check-case-conflict
+      - id: detect-private-key
+      - id: mixed-line-ending
+
+  # --- JS/HTML formatting and linting ---
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+      - id: prettier
+        args: [--check]
+        additional_dependencies: [prettier@3.2.5]
+        files: '\\.(js|jsx|ts|tsx|json|css|scss|md|markdown|yml|yaml|html)$'
+
+  # --- Optional: spell check or link check ---
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.2.6
+    hooks:
+      - id: codespell
+        args: ["--ignore-words-list=teh,fo"]
+        exclude: '^package-lock\.json$'

README.md

@@ -1,12 +1,6 @@
-
 # Project Overview
 
-RouterArena is the first open platform enabling comprehensive evaluation and comparison of LLM routers. The platform features:
-
-- **Principled Dataset**: 8,400 queries across 9 domains and 44 categories using Dewey Decimal Classification and Bloom's taxonomy
-- **Multi-Dimensional Metrics**: Arena Score, Cost Ratio, Optimality, Latency, and Robustness evaluation
-- **Automated Framework**: Support for both academic and commercial routers with real-time leaderboard updates
-- **Fair Comparison**: Unified evaluation protocol for transparent and reproducible results
+RouterArena is the first open platform enabling comprehensive evaluation and comparison of LLM routers. Check out the [website](https://routeworks.github.io) for more details.
 
 ## Research Team
 
@@ -20,42 +14,7 @@ RouterArena is the first open platform enabling comprehensive evaluation and com
 - Hongyi Liu (hl87@rice.edu)
 - Jiarong Xing (jxing@rice.edu)
 
-## Website Features
-
-### 🏠 Home Page
-- Project overview and key features
-- Dataset statistics and difficulty levels
-- Contact information and collaboration details
-- Interactive leaderboard preview
-
-### 🏆 Leaderboard Page
-- Comprehensive router rankings across multiple metrics
-- Search and filter functionality
-- Detailed performance metrics for each router
-- Links to papers and source code
-
-### 📝 Submit Page
-- Router submission form for evaluation
-- Clear guidelines for academic and commercial routers
-- Evaluation process explanation
-- Contact information for collaboration
-
-### ℹ️ About Page
-- Detailed project methodology
-- Research team information
-- Citation information
-- Contact and collaboration details
-
-## Technology Stack
-
-- **Frontend**: React 19.2.0 with TypeScript
-- **Routing**: React Router DOM 6.8.1
-- **Icons**: Lucide React 0.263.1
-- **Charts**: Recharts 2.8.0
-- **Styling**: CSS3 with modern features
-- **Build Tool**: Create React App
-
-## Getting Started
+## For Developers
 
 ### Prerequisites
 
@@ -90,7 +49,37 @@ npm run build
 
 This builds the app for production to the `build` folder.
 
-## Project Structure
+### Coding/PR Style Check
+
+We use pre-commit to ensure a consistent coding style. You can set it up by
+
+```
+pip install pre-commit
+pre-commit install
+```
+
+Before pushing your code, please run the following check and make sure your code passes all checks.
+
+```
+pre-commit run --all-files
+```
+
+We have set up Google Gemini to review your code. You can use it by running the following command:
+
+```
+/gemini review
+```
+
+### Web Stack
+
+- **Frontend**: React 19.2.0 with TypeScript
+- **Routing**: React Router DOM 6.8.1
+- **Icons**: Lucide React 0.263.1
+- **Charts**: Recharts 2.8.0
+- **Styling**: CSS3 with modern features
+- **Build Tool**: Create React App
+
+### Project Structure
 
 ```
 src/
@@ -114,8 +103,6 @@ src/
 └── index.tsx           # Application entry point
 ```
 
-## Key Components
-
 ### Router Data Structure
 ```typescript
 interface Router {
@@ -137,14 +124,6 @@ interface Router {
 }
 ```
 
-### Evaluation Metrics
-
-1. **Arena Score**: Overall performance combining accuracy and cost efficiency
-2. **Cost Ratio Score**: Efficiency in cost optimization relative to optimal routing
-3. **Optimality Score**: Frequency of selecting the most efficient model for each query
-4. **Latency Score**: Router overhead and response time performance
-5. **Robustness Score**: Stability against query perturbations and noise
-
 ## Contributing
 
 We welcome contributions to the RouterArena platform! Please see our submission guidelines on the website or contact us directly.
@@ -155,7 +134,7 @@ If you use RouterArena in your research, please cite our paper:
 
 ```bibtex
 @misc{lu2024routerarena,
-  title={RouterArena: An Open Platform for Comprehensive Comparison of LLM Routers}, 
+  title={RouterArena: An Open Platform for Comprehensive Comparison of LLM Routers},
   author={Yifan Lu and Rixin Liu and Jiayi Yuan and Xingqi Cui and Shenrun Zhang and Hongyi Liu and Jiarong Xing},
   year={2024},
   eprint={2510.00202},
@@ -167,9 +146,9 @@ If you use RouterArena in your research, please cite our paper:
 
 ## Contact
 
-- **Email**: yifan.lu@rice.edu
+- **Email**: yifan.lu@rice.edu, jxing@rice.edu
 - **Paper**: https://www.arxiv.org/abs/2510.00202
 
 ## Acknowledgments
 
-We thank all contributors who have made this project possible.
+We thank all contributors who have made this project possible.

src/App.css

@@ -91,9 +91,9 @@ code {
   .container {
     padding: 0 0.75rem;
   }
-  
+
   .btn {
     padding: 0.625rem 1.25rem;
     font-size: 0.9rem;
   }
-}
+}

src/components/DatasetCompositionChart.tsx

@@ -88,7 +88,7 @@ const categoryColors = [
 // Difficulty level colors
 const difficultyColors = {
   'Easy': '#22C55E',
-  'Medium': '#F59E0B', 
+  'Medium': '#F59E0B',
   'Hard': '#EF4444'
 };
 
@@ -166,7 +166,7 @@ const DatasetCompositionChart: React.FC = () => {
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
       const data = payload[0].payload;
-      
+
       // Get subcategory descriptions
       const getSubcategoryDescription = (name: string, parent: string) => {
         const descriptions: { [key: string]: { [key: string]: string } } = {
@@ -217,10 +217,10 @@ const DatasetCompositionChart: React.FC = () => {
             'Biography and genealogy': 'Personal histories & lineages'
           }
         };
-        
+
         return descriptions[parent]?.[name] || name;
       };
-      
+
       return (
         <div className="chart-tooltip">
           <p className="tooltip-title">{data.name}</p>
@@ -257,19 +257,19 @@ const DatasetCompositionChart: React.FC = () => {
                 onMouseLeave={() => setHoveredSubcategory(null)}
               >
                 {subcategoryData.map((entry, index) => (
-                  <Cell 
-                    key={`subcell-${index}`} 
+                  <Cell
+                    key={`subcell-${index}`}
                     fill={entry.color}
                     stroke={hoveredSubcategory === entry.name ? '#d1d5db' : '#fff'}
                     strokeWidth={hoveredSubcategory === entry.name ? 2 : 1}
-                    style={{ 
+                    style={{
                       filter: hoveredSubcategory === entry.name ? 'brightness(1.1) saturate(1.1)' : 'none',
                       transition: 'all 0.2s ease'
                     }}
                   />
                 ))}
               </Pie>
-              
+
               {/* Outer ring - Main categories */}
               <Pie
                 data={mainChartData}
@@ -286,27 +286,27 @@ const DatasetCompositionChart: React.FC = () => {
                 onMouseLeave={() => setHoveredCategory(null)}
               >
                 {mainChartData.map((entry, index) => (
-                  <Cell 
-                    key={`cell-${index}`} 
+                  <Cell
+                    key={`cell-${index}`}
                     fill={entry.color}
                     stroke={hoveredCategory === entry.category ? '#9ca3af' : '#fff'}
                     strokeWidth={hoveredCategory === entry.category ? 2 : 1}
-                    style={{ 
+                    style={{
                       filter: hoveredCategory === entry.category ? 'brightness(1.12) saturate(1.15)' : 'none',
                       transition: 'all 0.2s ease'
                     }}
                   />
                 ))}
               </Pie>
-              <Tooltip 
-                content={<CustomTooltip />} 
+              <Tooltip
+                content={<CustomTooltip />}
                 wrapperStyle={{ zIndex: 9999 }}
               />
             </PieChart>
           </ResponsiveContainer>
-          
+
           {/* Independent SVG Labels Overlay */}
-          <svg 
+          <svg
             className="labels-svg-overlay"
             style={{
               position: 'absolute',
@@ -322,15 +322,15 @@ const DatasetCompositionChart: React.FC = () => {
             {mainChartData.map((entry, index) => {
               const totalValue = mainChartData.reduce((sum, item) => sum + item.value, 0);
               let cumulativeValue = 0;
-              
+
               for (let i = 0; i < index; i++) {
                 cumulativeValue += mainChartData[i].value;
               }
-              
+
               const startAngle = (cumulativeValue / totalValue) * 360 - 90;
               const endAngle = ((cumulativeValue + entry.value) / totalValue) * 360 - 90;
               const midAngle = (startAngle + endAngle) / 2;
-              
+
               const RADIAN = Math.PI / 180;
               // Adaptive label radius: farther for sides, closer for top/bottom
               const baseOffset = 60;   // baseline distance beyond pie edge
@@ -345,7 +345,7 @@ const DatasetCompositionChart: React.FC = () => {
               const centerY = 400; // Exact center of 800x800 viewBox
               const x = centerX - radius * Math.sin(midAngle * RADIAN);
               const y = centerY - radius * Math.cos(midAngle * RADIAN);
-              
+
               // Create shortened versions of category names
               const getShortName = (name: string) => {
                 const shortNames: { [key: string]: string } = {
@@ -361,9 +361,9 @@ const DatasetCompositionChart: React.FC = () => {
                 };
                 return shortNames[name] || name;
               };
-              
+
               const shortName = getShortName(entry.name);
-              
+
               return (
                 <g key={index}>
                   <rect

src/components/DeferralCurve.css

@@ -89,14 +89,13 @@
     min-width: auto;
     justify-content: center;
   }
-  
+
   .legend-section h4 {
     text-align: center;
   }
-  
+
   .legend-items {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 }
-