CANN-LLM WebUI：打造国产 LLM 推理的“驾驶舱

CANN-LLM WebUI打造国产 LLM 推理的“驾驶舱”cann组织链接https://atomgit.com/cannops-nn仓库链接https://atomgit.com/cann/ops-nn 目标实时显示吞吐、延迟、显存、NPU 利用率可视化各优先级队列状态、KV Cache 分布交互功能查看/取消正在运行的请求日志流滚动显示最新推理日志技术栈纯 C 后端 WebSocket Vue3 前端嵌入式✅ 所有数据来自 CANN Profiling API 内部调度器状态一、系统架构MetricsRequest EventsCancel RequestCANN-LLM EngineMetrics CollectorEvent BusWebSocket ServerVue3 WebUIHTTP DELETE二、后端实现C1.指标采集器MetricsCollector// metrics_collector.hstructSystemMetrics{doubletokens_per_sec0;doubleavg_latency_ms0;size_t gpu_memory_used0;floatnpu_utilization0.0f;structQueueStats{intpending0;intrunning0;}high,medium,low;std::vectorstd::stringrecent_logs;};classMetricsCollector{SystemMetrics metrics_;std::mutex mtx_;public:voidupdate_from_engine(constEngineStatestate){std::lock_guardlock(mtx_);// 从调度器获取队列状态metrics_.highstate.scheduler.get_queue_stats(Priority::HIGH);// 从 hcll 获取显存metrics_.gpu_memory_usedhcllQueryUsedMemory();// 从 CANN Profiling API 获取 NPU 利用率metrics_.npu_utilizationcann::profiling::get_device_util(0);// 计算吞吐滑动窗口metrics_.tokens_per_secstate.token_counter.rate_last_10s();}SystemMetricsget_snapshot(){std::lock_guardlock(mtx_);returnmetrics_;}};cann::profiling::get_device_util()通过aclprofAPI 实现2.WebSocket 服务嵌入式使用轻量级库如uWebSockets或Boost.Beast// webui_server.cppvoidWebUIServer::start_websocket(){server.listen(8081,[](auto*ws){// 新客户端连接autometrics_jsonjson_serializer(metrics_collector_.get_snapshot());ws-send(metrics_json);// 每 500ms 推送更新start_timer(500ms,[ws,this](){if(ws-is_open()){autoupdatejson_serializer(metrics_collector_.get_snapshot());ws-send(update);}});});}3.活跃请求列表接口// 提供 /api/requests?statusrunningstd::vectorRequestInfoget_active_requests(){std::vectorRequestInfolist;for(autoseq:scheduler_.get_all_sequences()){if(!seq-is_finished()!seq-is_cancelled()){list.push_back({.idseq-id(),.priorityto_string(seq-priority()),.prompt_lenseq-prompt_len(),.generated_lenseq-generated_len(),.kv_blocksseq-block_table.size(),.created_atseq-timestamp()});}}returnlist;}三、前端实现嵌入式 Vue3将前端资源编译为 C 字符数组或打包进 binarywebui/index.html简化templatedivclassdashboard!-- 核心指标卡片 --divclassmetric-cardh3吞吐/h3p{{ metrics.tokens_per_sec.toFixed(1) }} tokens/s/p/div!-- 队列状态 --divclassqueue-bardivclassbar high:style{width: highRatio %}High/divdivclassbar medium:style{width: mediumRatio %}Medium/divdivclassbar low:style{width: lowRatio %}Low/div/div!-- 活跃请求表 --tabletrv-forreq in activeRequests:keyreq.idtd{{ req.id }}/tdtd{{ req.priority }}/tdtd{{ req.generated_len }}/tdtdbuttonclickcancelRequest(req.id)❌ Cancel/button/td/tr/table!-- 实时日志 --divclasslog-paneldivv-forlog in logs:keylog{{ log }}/div/div/div/templatescriptexportdefault{data(){return{metrics:{},activeRequests:[],logs:[]};},mounted(){// 连接 WebSocketconstwsnewWebSocket(ws://localhost:8081);ws.onmessage(event){constdataJSON.parse(event.data);this.metricsdata.metrics;this.activeRequestsdata.requests;this.logsdata.logs.slice(-50);// 保留最近 50 行};},methods:{cancelRequest(id){fetch(/requests/${id},{method:DELETE}).then(()this.refresh());// 重新拉取列表}}}/script 使用xxd -i index.html webui_embedded.h将前端嵌入 C 二进制四、关键可视化组件1.KV Cache 热力图X 轴Block IDY 轴Layer ID颜色引用计数红色高共享蓝色独占点击 block 可查看所属请求2.NPU 利用率时间序列折线图显示过去 5 分钟利用率阈值线80%标红预警3.请求生命周期甘特图每个请求显示排队时间 推理时间 生成 token 数支持按 priority 着色五、部署与访问启动服务后./llm_server --enable-webui --port8080--webui-port8081浏览器访问http://server-ip:8081无需额外依赖所有静态资源由 C 二进制提供。六、安全与生产建议认证添加--webui-tokenxxx前端需携带 Token只读模式可通过--webui-readonly禁用取消按钮日志脱敏自动过滤 prompt 中的敏感词如 API Key七、结语透明即信任一个优秀的推理系统不仅要跑得快更要看得清。通过内建WebUI 控制台CANN-LLM 实现了运维友好快速定位瓶颈开发友好直观验证调度策略用户友好自助管理请求这标志着国产 AI 软件栈从“黑盒加速”走向“白盒可控”的重要一步。CANN-LLM WebUI 将随 v1.0 正式版一同开源是否希望下一篇深入如何用 CANN Profiler 生成火焰图并嵌入 WebUI或提供完整的 CI/CD 流水线配置GitLab CI Ascend 云欢迎告诉我