AI对话页面-大模型护栏

为解决大模型输出内容存在违规、偏见、敏感信息泄露等风险，搭建 AI 对话安全护栏网页端系统，目标是在用户与大模型交互全流程做内容管控，实现输入检测、输出过滤、风险拦截，保障大模型应用安全合规使用。系统核心模块包含对话交互模块、安全护栏网关模块、会话管理模块、风险日志审计模块。对话交互模块提供聊天界面，支持流式输出展示大模型返回结果；安全护栏网关负责对用户提问和模型回复进行多维度内容审核，识别暴力、色情、政治、隐私泄露类风险；会话管理维护多轮对话上下文，支持新建、切换、删除会话；风险日志审计记录每轮对话风险标签、拦截结果，便于追溯复盘。业务流程：用户在页面输入提问，请求先经过安全护栏网关校验输入内容，若命中风险规则直接拦截并返回提示；输入安全则转发给大模型服务获取流式回答，模型返回内容再次经过输出侧安全检测，过滤风险片段后，将安全内容流式渲染到前端页面，产生风险的对话完整记录存入审计日志。

项目采用前后端分离架构，前端基于 Vue3+ElementPlus 搭建页面，使用 SSE+ReadableStream 实现大模型流式对话渲染；后端网关基于 APISIX 做请求转发与安全校验，对接内容风控服务与大模型推理服务。我独立负责前端全部开发工作，封装 SSE 请求工具，处理流式分片解析、自动重连、异常中断逻辑，实现会话列表管理、风险提示弹窗、审计日志查询页面，优化大数据量会话渲染性能，页面交互响应耗时降低 35%。开发过程遇到 SSE 流乱码、缓冲区堆积造成内存上涨、网络断开区分业务报错和网络异常、跨域等难点；通过按 SSE 协议分割二进制流、及时释放读取器资源做缓冲区清理、自定义错误码区分错误类型、配置网关 CORS 策略解决跨域，同时增加心跳检测与退避重连策略保障对话稳定性，上线后风险对话拦截页面展示正常，流式对话无乱码内存泄漏问题。