演示页面使用指南
概述
统一演示页面 (public/demo/unified-demo.html) 展示了 BossAgents 与 MTClaw 三层路由架构的性能对比和数字员工功能。通过该页面,用户可以直观地体验不同场景下的执行效果,了解端侧推理加速的优势。
访问方式
- 启动所有服务:
# 启动 BossAgents 服务
node server.js
# 启动 MTClaw 服务(如果未运行)
python mtclaw_server.py
# 启动 Ollama 服务(可选,用于端侧推理)
ollama serve
- 打开浏览器访问:
http://localhost:3006/demo/unified-demo.html
功能说明
1. 环境状态监控
- 硬件检测:自动检测 GPU 状态,显示当前运行环境
- 服务状态:实时监控 MTClaw、Ollama、BossAgents 服务状态
- 最后检测时间:显示最近一次服务检测的时间
2. 场景切换
- 场景A (MTClaw + 端侧):
- 适用环境:GPU 环境(RTX 3080)
- 执行流程:确定性操作 → 端侧脚本 (<100ms),推理任务 → Ollama deepseek-r1:8b
- 依赖服务:MTClaw + Ollama
- 场景B (MTClaw + 云端):
- 适用环境:无 GPU 环境
- 执行流程:确定性操作 → 端侧脚本 (<100ms),推理任务 → 云端 DeepSeek
- 依赖服务:MTClaw
- 场景D (无MTClaw 直连):
- 适用环境:基准对照模式
- 执行流程:所有请求 → BossAgents LLM,无端侧加速
- 依赖服务:BossAgents
3. 数字员工选择
提供8个核心数字员工:
- 📦 采购助手 (DS-PROC-001):处理采购请求、询价、订单创建
- 🏭 供应商管家 (DS-VEN-001):供应商评审、资质管理、绩效分析
- 💰 成本优化师 (DS-COST-001):成本评估、BOM分析、价格优化
- 🔧 SCSAI创建 (⟦DS-SCSAI-001⟧):创建Part、BOM、产品对象
- ✅ ECR审核员 (DS-ECR-001):工程变更请求审核、流程管理
- 📄 文档员工 (DS-DATA-001):文档生成、报告编写、内容整理
- 🏥 系统健康检查 (DS-SYS-001):系统状态检测、性能监控
- 🎨 内容生成 (DS-CONTENT-001):产品介绍、营销内容、文档撰写
4. 业务意图输入
- 文本输入框:支持最多500字符的业务意图输入
- 快捷模板:提供常用业务意图模板
- 字符计数器:实时显示已输入字符数
- 输入验证:非空校验、长度限制、XSS防护
5. 执行与结果展示
- 执行按钮:触发当前场景和员工执行
- 路由信息:显示 L1/L2/L3 路由层级和耗时
- 执行结果:展示 AI 返回的业务结果
- 耗时统计:显示端到端执行总耗时
6. 性能指标对比
- 三场景对比:并行执行场景A/B/D,对比执行耗时
- 加速比计算:显示端侧推理相比云端的加速倍数
- 路由统计:展示 L1/L2/L3 路由命中比例
- 历史记录:保留最近20次执行记录
7. 服务监控
- 定时检测:每30秒自动检测服务状态
- 状态指示:绿色圆点表示服务可用,红色表示不可用
- 降级建议:根据服务状态提供智能降级建议
- 自动恢复提示:服务恢复时显示通知
演示流程
标准演示流程
- 环境准备:确保所有服务正常运行
- 页面访问:打开演示页面,确认所有服务状态正常
- 场景选择:根据硬件环境选择合适场景
- 有 GPU:选择场景A体验端侧加速
- 无 GPU:选择场景B体验云端推理
- 基准测试:选择场景D作为对照
- 员工选择:点击选择要测试的数字员工
- 意图输入:输入业务意图或选择快捷模板
- 执行测试:点击"执行当前场景"按钮
- 结果分析:查看执行耗时、路由信息、性能指标
- 对比测试:点击"三场景对比"按钮进行性能对比
快速演示脚本
// 自动演示脚本(可在浏览器控制台执行)
async function runDemo() {
console.log('开始演示流程...');
// 1. 切换到场景A
if (window.switchScene && window.switchScene('A')) {
console.log('已切换到场景A');
}
// 2. 选择采购助手
if (window.selectStaff) {
window.selectStaff('DS-PROC-001');
console.log('已选择采购助手');
}
// 3. 输入业务意图
const intentInput = document.getElementById('intentInput');
if (intentInput) {
intentInput.value = '查询供应商报价和交期';
console.log('已输入业务意图');
}
// 4. 执行测试
setTimeout(() => {
if (window.handleExecute) {
window.handleExecute();
console.log('开始执行测试...');
}
}, 1000);
// 5. 等待执行完成,进行三场景对比
setTimeout(() => {
if (window.compareThreeScenes) {
window.compareThreeScenes('查询供应商报价和交期', 'DS-PROC-001');
console.log('开始三场景对比测试...');
}
}, 5000);
}
// 运行演示
runDemo();
故障排查
常见问题
#### 1. 服务连接失败
症状:页面显示"未连接"状态
解决方法:
# 检查 BossAgents 服务
netstat -an | findstr :3006
# 检查 MTClaw 服务
netstat -an | findstr :18790
# 检查 Ollama 服务
netstat -an | findstr :11434
# 重启相应服务
#### 2. 跨域访问错误
症状:浏览器控制台显示 CORS 错误
解决方法:
- 确认 BossAgents 服务配置了正确的 CORS 头
- 检查
server/routes/下的路由文件是否包含Access-Control-Allow-Origin: * - 重启服务使配置生效
#### 3. 演示页面无法访问
症状:404 错误或空白页面
解决方法:
- 确认文件路径:
public/demo/unified-demo.html - 检查静态资源路径是否正确
- 确认 BossAgents 服务正在运行
#### 4. 性能数据异常
症状:加速比显示异常或路由统计不准确
解决方法:
- 检查网络连接稳定性
- 确认各服务响应时间正常
- 查看浏览器控制台日志分析问题
- 验证 MTClaw 路由配置是否正确
#### 5. L1 命中率低
症状:简单请求仍走 L3 路由
解决方法:
- 检查 MTClaw 工具配置
- 验证意图关键词是否匹配 L1 规则
- 查看 MTClaw 日志分析路由决策
调试技巧
- 查看控制台日志:
- 按 F12 打开开发者工具
- 查看 Console 标签页中的日志
- 关注
[ServiceMonitor]、[SceneSwitch]、[StaffExecute]等标签
- 网络请求分析:
- 查看 Network 标签页中的请求响应
- 检查 API 调用是否成功
- 分析请求耗时和响应数据
- 性能监控:
- 使用 Performance 标签页记录性能数据
- 查看关键操作的耗时分布
- 分析渲染性能瓶颈
API 接口文档
1. 环境检测接口
// 检测服务状态
GET http://localhost:3006/api/digital-staff/mtclaw/stats
GET http://localhost:11434/api/tags
GET http://localhost:3006/
2. 数字员工执行接口
// 通过 MTClaw 路由执行
POST http://localhost:3006/api/digital-staff/run
Content-Type: application/json
{
"staffId": "DS-PROC-001",
"intent": "业务意图",
"parameters": {},
"force_edge": true, // 场景A:强制端侧
"force_cloud": true, // 场景B:强制云端
"skip_mtclaw": true // 场景D:跳过 MTClaw
}
// 直接调用 MTClaw
POST http://localhost:18790/v1/chat/completions
Content-Type: application/json
{
"model": "mtclaw-router",
"messages": [{"role": "user", "content": "业务意图"}],
"stream": false
}
3. 性能数据接口
// 获取执行历史记录
localStorage.getItem('demo_performance_history')
// 获取当前场景配置
window.ENV.sceneConfigs
// 获取员工列表
window.STAFF_LIST
配置说明
服务端口配置
- BossAgents: 3006
- MTClaw: 18790
- Ollama: 11434
环境变量
# BossAgents 配置
PORT=3006
API_BASE_URL=http://localhost:3006
# MTClaw 配置
MTCLAW_URL=http://localhost:18790/v1
# Ollama 配置
OLLAMA_URL=http://localhost:11434
演示页面配置
演示页面使用以下配置:
- API 地址:
http://localhost:3006 - 检测间隔: 30秒
- 执行超时: 30秒
- 历史记录限制: 20条
扩展开发
添加新的数字员工
- 在
staff-manager.js中注册新员工 - 在演示页面的
STAFF_LIST数组中添加员工信息 - 配置员工图标、描述和执行逻辑
添加新的场景
- 在
ENV.sceneConfigs中添加场景配置 - 实现场景对应的执行逻辑
- 更新场景切换和可用性检查函数
自定义性能指标
- 修改
addExecutionRecord函数添加自定义指标 - 更新
getPerformanceMetrics函数计算新指标 - 调整
updateMetricsPanel函数展示新指标
联系支持
如遇问题,请参考以下资源:
- 项目文档:
docs/README.md - API 文档:
docs/api-reference.md - 问题反馈:项目 Issue 页面
或联系开发团队获取技术支持。
BossAgents