# HRouter：LLM 路由与比对的交互式 Web 界面 > HRouter 是一个基于 React + TypeScript + Tailwind CSS 构建的现代化 Web 应用，提供盲测对战模式、并排模型对比、实时性能指标监控和动态排行榜功能，帮助用户直观比较和路由不同的 LLM 模型。 - 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm) - 发布时间: 2026-06-03T16:14:37.000Z - 最近活动: 2026-06-03T16:22:42.882Z - 热度: 159.9 - 关键词: LLM, React, TypeScript, Tailwind CSS, 模型对比, Web界面, Gemini API, 性能评估 - 页面链接: https://www.zingnex.cn/forum/thread/hrouter-llm-web - Canonical: https://www.zingnex.cn/forum/thread/hrouter-llm-web - Markdown 来源: ingested_event --- ## 原作者与来源 - **原作者/维护者**: Rohithdgrr - **来源平台**: GitHub - **原项目名**: HRouter-for-LLM-Inference - **原始链接**: https://github.com/Rohithdgrr/HRouter-for-LLM-Inference - **发布时间**: 2026-06-03 --- ## 项目概述 HRouter 是一个专为大型语言模型（LLM）设计的交互式 Web 界面工具。它解决了开发者和研究人员在日常工作中经常遇到的一个痛点：如何在不同模型之间做出选择？面对众多 LLM 选项，HRouter 提供了一套完整的对比和评估解决方案。 与纯命令行工具或简单的 API 调用不同，HRouter 强调**可视化**和**交互性**，让用户能够直观地感受不同模型的差异，并基于实际数据做出决策。 --- ## 核心功能模块 ### 1. 对战模式（Battle Mode） 对战模式是 HRouter 的特色功能，采用"盲测"设计理念： - **随机模型选择**：系统从配置的模型池中随机选取两个模型进行对战 - **并排响应展示**：两个模型的输出同时显示，方便直观对比 - **发光输入框设计**：采用动态渐变动画的输入框，提升视觉体验 - **实时投票系统**：用户可以对响应质量进行评分，积累模型表现数据 - **完整性能指标**：展示延迟（latency）、每秒 token 数（tokens/sec）、token 数量、成本等关键指标 这种设计消除了品牌偏见，让用户纯粹基于输出质量进行评判。 ### 2. 并排对比模式（Side-by-Side Mode） 对于需要针对性比较的场景，并排模式提供了更多控制： - **手动模型选择**：用户可以精确选择想要对比的两个模型 - **同步响应流**：两个模型同时流式输出响应 - **胜者高亮**：基于性能指标自动高亮表现更好的模型 - **统一设计风格**：与对战模式保持一致的视觉体验 ### 3. 动态排行榜（Leaderboard） 排行榜功能提供了全局视角： - **多维度分类排名**：支持文本、代码、视觉、文档、文生图、图像编辑、搜索等多个类别 - **发光搜索框**：带实时过滤功能的搜索输入框 - **悬停光效**：表格行和统计卡片支持悬停发光效果 - **提供商图标**：快速识别模型所属平台 - **投票统计与趋势追踪**：积累社区评价数据 --- ## 技术架构 ### 技术栈选择 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 # 全局样式 ``` --- ## UI/UX 设计亮点 ### 视觉设计 HRouter 在视觉设计上下了不少功夫： - **三层渐变发光效果**：聚焦时输入框呈现青色→蓝色→紫色→粉色→橙色的渐变动画 - **极简间距**：所有组件保持一致的间距规范 - **响应式设计**：适配各种屏幕尺寸 - **流畅动画与过渡**：使用 Framer Motion 实现自然的交互反馈 这些设计细节让技术工具也能拥有良好的使用体验。 --- ## 快速开始 ### 环境要求 - Node.js 18+ - Google AI Studio API Key ### 安装步骤 ```bash # 1. 克隆仓库 git clone https://github.com/Rohithdgrr/HRouter-for-LLM-Inference.git cd HRouter-for-LLM-Inference # 2. 安装依赖 npm install # 3. 配置环境变量 # 创建 .env 文件，添加： # GEMINI_API_KEY=your_gemini_api_key_here # 4. 运行开发服务器 npm run dev # 5. 打开浏览器访问 http://localhost:3000 ``` ### 生产构建 ```bash npm run build ``` --- ## 应用场景 HRouter 适合以下使用场景： 1. **模型选型评估**：在多个候选模型间做最终决策时，通过盲测获取真实反馈 2. **Prompt 工程优化**：对比不同 Prompt 在同一模型上的表现 3. **成本效益分析**：结合性能指标和价格数据，找到性价比最优解 4. **团队协作评估**：收集团队成员对模型质量的投票，形成共识 5. **模型能力研究**：系统性测试模型在特定任务（代码、视觉、文档等）上的表现 --- ## 扩展性考虑 当前 HRouter 仅集成了 Google Gemini API，但项目架构设计支持扩展： - **服务层抽象**：`geminiService.ts` 提供了清晰的接口模式 - **类型定义完善**：`types.ts` 中定义了模型、响应、指标等核心类型 - **组件化设计**：模型选择器等组件可复用 未来可以方便地添加 OpenAI、Anthropic、本地模型等其他提供商的支持。 --- ## 总结 HRouter 是一个设计精良的 LLM 评估工具，它将技术对比转化为直观的交互体验。对于需要频繁在不同模型间切换、评估的开发者来说，这个工具能显著提升工作效率。 项目的代码结构清晰，技术选型现代，适合作为学习 React + TypeScript + Tailwind CSS 技术栈的参考项目。MIT 许可证也允许自由使用和二次开发。