项目整体架构理解

我们开发的“AI心理绘画游戏”采用前后端分离架构，核心数据流遵循“前端Canvas绘图→WebSocket实时传输→后端AI识别→数据库存储→心理分析报告生成”的闭环。具体来说，前端通过HTML5Canvas实现绘画板功能，用户绘制的笔迹数据通过WebSocket实时传输到后端Flask服务器；后端接收到图像数据后，调用多模态大模型API（如智谱GLM-4V）进行图像识别，将识别结果与题库匹配，同时记录用户绘画行为数据到SQLite数据库；最后，通过心理特征提取模块分析绘画数据（如笔触力度、颜色选择），生成可视化心理报告。

这种架构的优势在于实时性强、扩展性高、数据存储轻量。

开发环境搭建全记录

• Python环境：项目基于Python3.13开发，需确保系统已安装对应版本。
• 依赖安装：项目根目录下的requirements.txt包含Flask、Flask-SocketIO、sqlite3等核心库，执行pipinstall-r requirements.txt即可完成安装。
• 前端环境：虽然项目采用原生JS开发，但需Node.js环境支持LiveServer插件热更新。建议安装Node.js16+版本，并通过npminstall-glive-server全局安装。
• 数据库初始化：项目使用SQLite3，首次运行时会自动创建zhipu.db文件，无需手动配置。

Git仓库初始化与分支策略

我们在GitLab上创建了私有仓库，采用“主分支保护+功能分支开发”策略：

• main分支：仅允许通过MergeRequest合并代码，确保生产环境稳定性；
• dev分支：日常开发集成分支，所有功能分支需基于dev创建；
• feature/xxx分支：个人开发分支，命名规则为feature/姓名-功能（如feature/zhangsan-canvas）。

初始化步骤：

gitclone<仓库地址>
cdzhipu
gitcheckout-bdev

开发工具推荐

• VSCode插件：
  • Python：官方插件，支持代码补全、调试、虚拟环境管理；
  • LiveServer：前端页面实时预览，修改代码后自动刷新浏览器；
  • GitLens：可视化Git提交历史，方便追踪代码变更；
  • SQLiteViewer：直接查看zhipu.db数据库内容，调试更高效。
• 辅助工具：Postman用于测试后端API接口，Draw.io绘制架构图。

首次运行成功截图

完成上述配置后，执行pythonapp.py启动Flask服务器，浏览器访问http://localhost:5000即可看到项目首页。下图为第一次成功运行的界面

通过本周工作，我们完成了项目从0到1的环境搭建，为后续功能开发奠定了基础。下周将重点实现Canvas绘画板核心逻辑与WebSocket实时通信功能，敬请期待！

附：项目结构

zhipu/
├── app.py                  # Flask 主应用入口
├── config.py               # 配置文件（API Key、数据库路径等）
├── models.py               # SQLite 数据库模型与操作
├── requirements.txt        # Python 依赖
├── utils/
│   ├── __init__.py
│   ├── ai_recognizer.py    # 多模态大模型 AI 猜词模块
│   ├── psychology.py       # 心理特征提取与分析模块
│   └── word_bank.py        # 题库管理（词库 + 难度分级）
├── static/
│   ├── css/
│   │   └── style.css       # 全局样式
│   ├── js/
│   │   ├── canvas.js       # Canvas 画板核心逻辑
│   │   ├── socket.js       # WebSocket 客户端通信
│   │   ├── game.js         # 游戏流程控制
│   │   └── report.js       # 心理报告可视化
│   └── img/                # 静态图片资源
├── templates/
│   ├── base.html           # 基础模板
│   ├── index.html          # 首页 / 大厅
│   ├── room.html           # 游戏房间页面
│   ├── game.html           # 游戏进行中页面
│   └── report.html         # 心理报告页面
└── zhipu.db                # SQLite 数据库文件（运行时自动创建）