做AI应用开发的人通常有个共同感受：前端界面打磨花的时间，并不比后端少。一套对话界面要调得跟主流聊天应用差不多，绘画参数面板得照顾到尺寸、风格、数量这些选项，数字人部分还得让动画跟着语音走——这些UI交互细节，一个个页面抠下来，几周就过去了。
这套源码把这三个模块的前端界面都做完了，你只需要对接自己的后端接口，前端交互逻辑和视觉风格不用从头写。
AI对话模块
界面采用左侧对话列表、右侧聊天窗口的常见布局，消息气泡、头像、时间戳都已实现。支持流式输出和非流式输出两种模式：流式走SSE或WebSocket，文字逐字显示，效果接近大模型官方演示页面的体验；非流式一次性返回完整内容，适用于简单问答场景。对话界面的头像、欢迎语、快捷提问按钮集中在配置文件中管理，不需要改动页面结构。
AI绘画模块
参数面板包含图片尺寸、风格标签、生成数量三个核心选项。用户提交后界面会展示生成进度，完成时显示结果图，支持长按保存到相册或点击放大预览。源码内已包含轮询状态机的示例实现，如果你的绘画接口是异步模式，只需要把轮询地址和触发条件配置进去即可。
数字人模块
包含虚拟形象展示区域，以及语音驱动或文本驱动的动画演示框架。界面预留了表情驱动和动作指令的扩展接口，可根据后端数字人能力，将对应参数映射到UI控件上。若后端涉及语音流传输，H5端需在HTTPS协议下才能调起麦克风，部署说明中有相关标注。
多端适配
通过uni-app的条件编译实现一套代码打包至微信小程序、支付宝小程序、百度小程序和H5网页。不同端的差异化逻辑已在代码中用条件编译指令分隔，打包时选定目标平台即可自动剔除不兼容部分。若需将H5嵌入现有App的WebView，额外处理原生通信桥接后也可正常使用。
适用对象
这套源码面向有后端开发能力的技术人员。前端界面和交互逻辑已经完成，但需要自行配置后端接口、鉴权、跨域处理及长连接服务。如果你的目标是快速搭建AI产品的Demo或MVP用于演示，这套界面能节省大量UI开发时间。若完全没有后端经验，源码将无法独立运行。
对接要点
接口请求封装在api目录下，找到baseURL替换为自己的服务端地址，调整请求头字段即可。对话模块建议配套SSE或WebSocket接口以发挥流式输出效果。绘画模块若采用异步接口，轮询示例代码已提供，只需补充轮询接口地址和触发条件。数字人模块依赖音频或动作指令，具体协议格式参考源码内注释，按要求适配即可。
部署与运行
使用HbuilderX打开项目，安装依赖后即可本地调试。打包发布前根据目标平台配置对应的AppID和域名白名单。H5部署如需使用语音输入功能，必须启用HTTPS协议，否则浏览器会拦截麦克风权限请求。
