HRouter：LLM 路由与比对的交互式 Web 界面

HRouter 是一个基于 React + TypeScript + Tailwind CSS 构建的现代化 Web 应用，提供盲测对战模式、并排模型对比、实时性能指标监控和动态排行榜功能，帮助用户直观比较和路由不同的 LLM 模型。

• 原作者/维护者: Rohithdgrr
• 来源平台: GitHub
• 原项目名: HRouter-for-LLM-Inference
• 原始链接: https://github.com/Rohithdgrr/HRouter-for-LLM-Inference
• 发布时间: 2026-06-03

---

HRouter 是一个专为大型语言模型（LLM）设计的交互式 Web 界面工具。它解决了开发者和研究人员在日常工作中经常遇到的一个痛点：如何在不同模型之间做出选择？面对众多 LLM 选项，HRouter 提供了一套完整的对比和评估解决方案。

与纯命令行工具或简单的 API 调用不同，HRouter 强调可视化和交互性，让用户能够直观地感受不同模型的差异，并基于实际数据做出决策。

---

对战模式是 HRouter 的特色功能，采用"盲测"设计理念：

• 随机模型选择：系统从配置的模型池中随机选取两个模型进行对战
• 并排响应展示：两个模型的输出同时显示，方便直观对比
• 发光输入框设计：采用动态渐变动画的输入框，提升视觉体验
• 实时投票系统：用户可以对响应质量进行评分，积累模型表现数据
• 完整性能指标：展示延迟（latency）、每秒 token 数（tokens/sec）、token 数量、成本等关键指标

这种设计消除了品牌偏见，让用户纯粹基于输出质量进行评判。

对于需要针对性比较的场景，并排模式提供了更多控制：

• 手动模型选择：用户可以精确选择想要对比的两个模型
• 同步响应流：两个模型同时流式输出响应
• 胜者高亮：基于性能指标自动高亮表现更好的模型
• 统一设计风格：与对战模式保持一致的视觉体验

排行榜功能提供了全局视角：

• 多维度分类排名：支持文本、代码、视觉、文档、文生图、图像编辑、搜索等多个类别
• 发光搜索框：带实时过滤功能的搜索输入框
• 悬停光效：表格行和统计卡片支持悬停发光效果
• 提供商图标：快速识别模型所属平台
• 投票统计与趋势追踪：积累社区评价数据

---

HRouter 采用了现代前端技术栈：

层级	技术	说明
框架	React 19	最新版 React，支持并发特性
语言	TypeScript	类型安全，提升开发体验
样式	Tailwind CSS 4	原子化 CSS，快速构建界面
构建	Vite 6	极速冷启动，优化构建速度
动画	Framer Motion	流畅的组件动画效果
图标	Lucide React	统一风格的图标库
AI 接口	Google Gemini API	当前集成的模型提供商

src/
├── components/          # 页面组件
│   ├── BattleMode.tsx      # 对战模式界面
│   ├── SideBySideMode.tsx  # 并排对比界面
│   ├── Leaderboard.tsx     # 排行榜界面
│   ├── HRouterApp.tsx      # 主应用壳
│   ├── LandingPage.tsx     # 首页
│   ├── Sidebar.tsx         # 导航侧边栏
│   ├── Stats.tsx           # 统计视图
│   ├── ChatHistory.tsx     # 对话历史
│   ├── Settings.tsx        # 设置面板
│   ├── ModelSelector.tsx   # 模型下拉选择器
│   └── UI.tsx              # 可复用 UI 组件
├── services/
│   ├── geminiService.ts    # Gemini AI 集成
│   └── leaderboardService.ts # 排行榜数据管理
├── types.ts            # TypeScript 接口定义
├── lib/
│   └── utils.ts        # 工具函数
└── index.css           # 全局样式

---