景区导航数字人ai-scenic-ai-guide
2026-06-23 23:19:33
行业：旅游
载体：网站、H5
技术：JavaScript、PL/SQL、SQLAlchemy、Vue
业务和功能介绍
1、立项背景和目标
本项目是一款AI智能景区导游助手Web应用，覆盖全国358家5A级旅游景区。立项背景有三：一是国内旅游市场复苏后，游客对景区智能化导览服务需求激增，但现有方案以语音导览机为主，缺乏交互性与个性化；二是大语言模型成熟后，AI对话式导览成为可能，可替代传统静态语音讲解；三是多模态交互（文字/语音/图片）可降低中老年用户使用门槛。目标是打造一款面向C端的、具备商业化落地能力的智能导览产品，支持景区知识问答、路线规划、虚拟数字人陪伴讲解等核心场景。
2、软件功能、核心功能模块
应用包含八大核心功能模块：
AI对话系统：基于SSE流式协议实现实时对话与打字机效果，支持多轮会话管理（conversationId缓存），网络异常时自动降级至HTTP JSON或Mock模式；
语音交互系统：双路径设计——首选浏览器Web Speech API实现零延迟语音识别，降级方案使用Web Audio API手动编码WAV（16kHz/单声道/16bit PCM）传输至后端ASR+TTS，语音播报支持多音色切换；
Live2D数字人系统：基于PixiJS + Live2D Cubism 4集成3D动画角色，支持点击交互与口型同步。设计三层降级策略：Live2D模型 → CSS纯绘角色（含口型/眨眼动画）→ 加载中状态，确保弱网环境可用；
景区数据体系：构建358家5A景区结构化数据（含省份/城市/标签/坐标），支持名称、省份、城市、标签多维搜索，按省份分组卡片网格渲染；
管理后台数据大屏：基于ECharts实现服务人次趋势、热门问答TOP5、满意度走势、问答分类分布等核心指标可视化，按需引入优化打包体积；
路由与权限系统：完整路由守卫（未登录自动跳转/login），localStorage存储登录态，区分C端用户与管理员视图；
多模态输入：文字/语音/图片三通道输入，图片上传目前走Mock AI回复，预留多模态API接入接口；
地图与路线规划：基于Leaflet集成地图视图，支持景区位置标记与游览路线添加。
3、业务流程、功能路径描述
用户访问 → 登录页（模拟登录）→ 景区选择页（卡片网格+搜索+省份筛选）→ 选择景区进入主界面（底部Tab：对话/地图/功能区/个人中心）→ 对话页：文字输入/语音输入/图片上传 → AI流式回复 + TTS语音播报 + Live2D口型同步 → 支持多轮对话（同一景区上下文连续）→ 切换景区自动重置会话 → 管理员登录后进入管理后台 → 查看数据大屏/知识库管理/数字人配置/舆情分析。未登录状态访问任何页面自动跳转登录页。
本项目是一款AI智能景区导游助手Web应用，覆盖全国358家5A级旅游景区。立项背景有三：一是国内旅游市场复苏后，游客对景区智能化导览服务需求激增，但现有方案以语音导览机为主，缺乏交互性与个性化；二是大语言模型成熟后，AI对话式导览成为可能，可替代传统静态语音讲解；三是多模态交互（文字/语音/图片）可降低中老年用户使用门槛。目标是打造一款面向C端的、具备商业化落地能力的智能导览产品，支持景区知识问答、路线规划、虚拟数字人陪伴讲解等核心场景。
2、软件功能、核心功能模块
应用包含八大核心功能模块：
AI对话系统：基于SSE流式协议实现实时对话与打字机效果，支持多轮会话管理（conversationId缓存），网络异常时自动降级至HTTP JSON或Mock模式；
语音交互系统：双路径设计——首选浏览器Web Speech API实现零延迟语音识别，降级方案使用Web Audio API手动编码WAV（16kHz/单声道/16bit PCM）传输至后端ASR+TTS，语音播报支持多音色切换；
Live2D数字人系统：基于PixiJS + Live2D Cubism 4集成3D动画角色，支持点击交互与口型同步。设计三层降级策略：Live2D模型 → CSS纯绘角色（含口型/眨眼动画）→ 加载中状态，确保弱网环境可用；
景区数据体系：构建358家5A景区结构化数据（含省份/城市/标签/坐标），支持名称、省份、城市、标签多维搜索，按省份分组卡片网格渲染；
管理后台数据大屏：基于ECharts实现服务人次趋势、热门问答TOP5、满意度走势、问答分类分布等核心指标可视化，按需引入优化打包体积；
路由与权限系统：完整路由守卫（未登录自动跳转/login），localStorage存储登录态，区分C端用户与管理员视图；
多模态输入：文字/语音/图片三通道输入，图片上传目前走Mock AI回复，预留多模态API接入接口；
地图与路线规划：基于Leaflet集成地图视图，支持景区位置标记与游览路线添加。
3、业务流程、功能路径描述
用户访问 → 登录页（模拟登录）→ 景区选择页（卡片网格+搜索+省份筛选）→ 选择景区进入主界面（底部Tab：对话/地图/功能区/个人中心）→ 对话页：文字输入/语音输入/图片上传 → AI流式回复 + TTS语音播报 + Live2D口型同步 → 支持多轮对话（同一景区上下文连续）→ 切换景区自动重置会话 → 管理员登录后进入管理后台 → 查看数据大屏/知识库管理/数字人配置/舆情分析。未登录状态访问任何页面自动跳转登录页。
项目实现
1、整体架构和设计思路，不同模块使用的技术栈
技术栈：Vue 3 (Composition API + script setup) + TypeScript + Vite + Vue Router (Hash模式) + Pinia + Axios。图形与可视化：PixiJS + Live2D Cubism 4（数字人渲染）、ECharts（按需引入数据大屏）、Leaflet（地图）。语音：Web Speech API（TTS + ASR）、Web Audio API（WAV录制编码）。测试：Vitest。格式化：Prettier。
架构设计思路：采用“分层解耦 + 多级降级”的前端架构。视图层（Views）负责UI渲染与用户交互，服务层（api.ts）封装所有后端通信（SSE/HTTP/FormData），工具层（utils）封装TTS/语音录制/Live2D等独立能力，数据层（scenicSpots.ts）提供静态景区数据与检索工具。状态管理使用Pinia管理全局用户态与景区态，会话级数据（对话历史）存入sessionStorage（标签页关闭即清除），持久化数据（userId/登录态）存入localStorage。核心设计原则：（1）所有异步请求支持AbortController中断；（2）所有第三方依赖（Live2D/ECharts）按需加载或配置降级方案；（3）资源清理完整（onUnmounted销毁PIXI Application/AudioContext/MediaStream）。
2、“我”的负责模块和结果（尽可能量化）
本人独立完成全部前端代码的开发与调试。具体负责模块及成果：
SSE流式对话系统（api.ts 80行 + HomeView.vue 70行）：使用原生fetch + ReadableStream逐块读取，支持跨chunk缓冲区拼接、[DONE]信号解析conversationId、AbortController中断前序请求，实现流畅打字机效果；
语音交互双路径（HomeView.vue 80行 + voiceRecorder.ts 60行）：浏览器ASR（SpeechRecognition API）与后端ASR（手动WAV编码）双路径切换，降级成功率100%（后端ASR兜底）；
Live2D数字人集成与降级（Live2DCharacter.vue 约200行）：PixiJS + Live2D Cubism 4模型加载与销毁，CSS纯绘角色兜底方案（含口型/眨眼/表情切换/光环动画），三层降级保证任何环境下均有视觉反馈；
TTS语音播报（tts.ts 约80行）：多音色优先级选择（Xiaoxiao→Yunxi→Xiaoyi→Google），onvoiceschanged异步加载+3秒超时兜底
技术栈：Vue 3 (Composition API + script setup) + TypeScript + Vite + Vue Router (Hash模式) + Pinia + Axios。图形与可视化：PixiJS + Live2D Cubism 4（数字人渲染）、ECharts（按需引入数据大屏）、Leaflet（地图）。语音：Web Speech API（TTS + ASR）、Web Audio API（WAV录制编码）。测试：Vitest。格式化：Prettier。
架构设计思路：采用“分层解耦 + 多级降级”的前端架构。视图层（Views）负责UI渲染与用户交互，服务层（api.ts）封装所有后端通信（SSE/HTTP/FormData），工具层（utils）封装TTS/语音录制/Live2D等独立能力，数据层（scenicSpots.ts）提供静态景区数据与检索工具。状态管理使用Pinia管理全局用户态与景区态，会话级数据（对话历史）存入sessionStorage（标签页关闭即清除），持久化数据（userId/登录态）存入localStorage。核心设计原则：（1）所有异步请求支持AbortController中断；（2）所有第三方依赖（Live2D/ECharts）按需加载或配置降级方案；（3）资源清理完整（onUnmounted销毁PIXI Application/AudioContext/MediaStream）。
2、“我”的负责模块和结果（尽可能量化）
本人独立完成全部前端代码的开发与调试。具体负责模块及成果：
SSE流式对话系统（api.ts 80行 + HomeView.vue 70行）：使用原生fetch + ReadableStream逐块读取，支持跨chunk缓冲区拼接、[DONE]信号解析conversationId、AbortController中断前序请求，实现流畅打字机效果；
语音交互双路径（HomeView.vue 80行 + voiceRecorder.ts 60行）：浏览器ASR（SpeechRecognition API）与后端ASR（手动WAV编码）双路径切换，降级成功率100%（后端ASR兜底）；
Live2D数字人集成与降级（Live2DCharacter.vue 约200行）：PixiJS + Live2D Cubism 4模型加载与销毁，CSS纯绘角色兜底方案（含口型/眨眼/表情切换/光环动画），三层降级保证任何环境下均有视觉反馈；
TTS语音播报（tts.ts 约80行）：多音色优先级选择（Xiaoxiao→Yunxi→Xiaoyi→Google），onvoiceschanged异步加载+3秒超时兜底
示例图片视频
相似推荐
quick_server
1、背景和目标：对企业所有服务请求进行轻量级安全和速度优化，减轻服务器的并发压力。
2、quick_server系统，不依赖外部引用，即插即用，主要用来进行极速快捷安全的http请求。大大减轻服务器的并发压力。轻松实现高并发场景下极速快捷安全的http请求。
json解析转换器
1、背景和目标：一、超级快速、安全对json的解析与对象转换；二、支持分布式超高并发
2、json解析转换器，支持分布式高并发，支持百万级别访问。用于快速进行json的解析与对象转换。原有的开源工具，要么安全性不够，要么性能不够强悍，要么不支持定制，很难满足企业日益严苛的业务需求。开发的这个json解析转换器，可以同时满足以上三种需求。
消息中心
1、背景和目标：解决高并发，对外提供统一的消息处理业务
2、功能模块介绍：六大功能模块：http通讯模块、缓存模块、消息队列模块、消息重试中心模块、消息调度模块、公共模块；对外百万级别并发项目，TPS可达1000/s。作为中间件，对外提供统一的消息处理业务。所有系统，包括电子签章平台、一照通行平台、一网通办平台，消息的请求和处理都经过消息中心。轻松实现异步、解耦、削峰。
3、功能描述：支持企业所有的内部系统接入，包括电子签章平台、一照通行平台、一网通办平台。轻松实现异步、解耦、削峰。
CRM客户管理后台
立项背景：针对中小型企业客户信息分散、销售跟进过程不透明、合同管理混乱等痛点，旨在打造一个轻量级的客户全生命周期管理后台，提升销售团队协作与转化效率。
核心功能：涵盖管理员登录鉴权、客户主表管理、联系人维护、跟进记录追踪、合同管理等六大模块。支持客户信息分页查询、关键字搜索、新增编辑与逻辑删除；客户详情页以名片形式集中展示联系人、跟进记录及关联合同。
业务流程：从潜在客户录入，到日常跟进记录，再到最终合同签订与操作日志审计，覆盖完整的销售业务闭环。
个人记账与资产管理平台
本项目是一套从零搭建的全栈个人财务管理平台，目标是替代功能单一的记账工具，把日常记账、资金账户、借贷往来、预算控制、资产盘点收敛到一个数据自主的系统中。系统由 12 个业务模块、23 个控制器、170 个 REST 接口、36 张数据表构成：记账核心支持三级分类树、商家联想、多平台支付与 CSV 批量导入导出，每笔账单自动联动账户余额并留存流水日志；借贷模块实现未结清 / 已结清 / 已放弃三态模型，支持分期还款与坏账核销；预算模块提供月度 + 年度双层体系与阶梯式执行规则；资产模块通过快照与趋势图呈现净资产变化；报表模块支持从月度 / 年度报表下钻到分类明细。系统还包含完整 RBAC 权限体系、软删除回收站、8 套主题实时切换与中英双语国际化。核心业务流程为：记一笔 → 余额幂等联动 → 报表与预算同步更新；借据从创建、关联账单凭证、分期还款到三态判定的完整生命周期；以及登录后由后端菜单树动态生成侧边菜单、路由与区块双重门控的权限链路。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服