3.1 KiB
3.1 KiB
🚀 快速启动指南
一键启动
方法1：使用启动脚本（推荐）
cd test-client/web_client
./start.sh
方法2：手动启动
cd test-client/web_client
# 安装依赖（首次运行）
pip3 install -r requirements.txt
# 启动服务
python3 app.py
方法3：指定端口启动
# 如果5000端口被占用，可以指定其他端口
PORT=5001 python3 app.py
访问应用
启动成功后，在浏览器中打开：
- 默认地址: http://localhost:5000
- 自定义端口: http://localhost:5001 （如果使用了PORT=5001）
🎨 界面预览
启动后你将看到：
左侧面板
- 👤 用户画像 - 显示用户信息和个性化推荐
- ✅ 待办事项 - 任务管理功能
- 🔔 提醒设置 - 定时提醒展示
右侧主区域
- 🎨 主题切换 - 4种配色方案（深空黑、极光蓝、霓虹紫、科技绿）
- 💬 对话区域 - AI助手聊天界面
- ⚡ 快捷回复 - 常用问题快速输入
- 🎤 语音输入 - 语音波形动画效果
💡 使用技巧
发送消息
- 在底部输入框输入文字
- 按
Enter键或点击发送按钮 - 等待AI回复（会显示打字动画）
快捷回复
点击顶部的快捷回复按钮，自动填充常用问题：
- 💡 今日天气如何？
- 📅 明天的会议安排
- ✅ 帮我制定工作计划
切换主题
点击顶部导航栏的主题按钮：
- 深空黑 - 默认深色主题
- 极光蓝 - 蓝色科技风
- 霓虹紫 - 紫色梦幻风
- 科技绿 - 绿色矩阵风
管理待办
在左侧面板的待办事项区域：
- 输入新任务
- 按
Enter或点击+按钮添加 - 勾选复选框标记完成
🔧 常见问题
Q: 端口被占用怎么办？
A: 使用环境变量指定其他端口：
PORT=5001 python3 app.py
Q: 样式显示不正常？
A: 检查以下几点：
- 确保
static/css/style.css文件存在 - 清除浏览器缓存后刷新
- 检查浏览器控制台是否有错误
Q: 无法发送消息？
A: 检查：
- 浏览器控制台的Network标签查看请求
- 确认后端API服务是否启动
- 检查CORS配置
Q: 如何连接真实的AI助手API？
A: 编辑 app.py，确保以下导入正确：
from api_client import AIAssistantClient
from config import APPLICATIONS, AI_ASSISTANT_CONFIG
📊 技术栈
- 后端: Flask 2.3+
- 前端: Tailwind CSS + Vanilla JS
- 字体: Pacifico + Inter
- 图标: Font Awesome 6.4.0
🎯 下一步
- ✅ 启动应用
- ✅ 体验界面效果
- ✅ 测试对话功能
- 🔄 集成真实API
- 🚀 部署到生产环境
📝 开发模式
当前运行在开发模式，支持：
- ✅ 热重载（修改代码自动重启）
- ✅ 详细错误信息
- ✅ 调试工具
注意: 生产环境请使用 WSGI 服务器（如 Gunicorn）
🆘 获取帮助
如遇问题，请检查：
- 终端输出的错误信息
- 浏览器控制台的错误
- Flask日志输出
享受使用AI助手Web客户端！ 🎉