
一、项目背景
在商场、自助设备、展会等场景中,AI 自助拍照亭已经成为一个典型的"软硬件 + AI + 前端交互"综合项目。
本项目以 AI Photo Booth(自助拍照亭) 为目标,从 0 到 1 实现了一套完整系统,覆盖:
-
相机控制
-
后端业务编排
-
AI 图像处理
-
前端大屏交互
-
稳定性与工程化加固
整个项目按照 Day1~Day9 逐步拆解与实现。
二、整体系统架构概览
项目采用清晰的服务拆分架构,避免单体系统过于复杂:
[ 拍照亭前端(Vue Kiosk) ]
↓ HTTP
[ 后端业务服务(Spring Boot) ]
↓
[ 相机服务 / Mock Camera ]
↓
[ AI Gateway(Spring Boot) ]
↓
[ Image Pipeline(Python / FastAPI) ]
每一层职责单一、边界清晰,便于维护和扩展。
三、各阶段核心内容速览
Day1~Day3:后端基础与拍照流程
-
搭建 AI Photo Booth 后端基础工程
-
设计 Session 会话模型,统一管理一次拍照流程
-
实现完整状态流转:
- IDLE → SELECTING → COUNTDOWN → CAPTURING → PROCESSING → PREVIEW
-
抽象相机服务接口,支持真实相机或 Mock 相机
👉 重点在于:用状态机管理复杂流程,而不是 if-else
Day4~Day5:完整业务闭环
-
支持预览后:
-
不满意 → 重拍(次数限制)
-
满意 → 确认生成下载链接
-
-
引入 下载 Token 机制:
-
防止任意访问照片
-
下载链接带有效期
-
-
实现扫码下载页面(HTML 动态生成)
👉 到 Day5 为止,系统已经可以真实跑完整用户流程
Day5(补充):Image Pipeline(AI 图像处理)
-
使用 Python + FastAPI 独立实现图像处理服务
-
Pipeline 只负责一件事:
- raw 原图 → preview 预览图 → final 成品图
-
支持:
-
抠图(rembg)
-
背景合成
-
FIT / FILL 裁剪模式
-
失败自动降级
-
👉 核心思想:AI 算法与业务系统彻底解耦
Day6:Vue Kiosk 前端联调
-
基于 Vue3 + Vite 实现拍照亭大屏前端
-
前端不写流程判断,只做一件事:
根据后端 session.state 自动切换页面
-
实现:
-
倒计时
-
模板选择
-
预览确认
-
二维码下载
-
👉 前端逻辑极简,流程由后端统一控制
Day7:稳定性与工程化加固
针对真实设备场景进行加固:
-
超时自动回收会话(30 秒无操作回首页)
-
全局异常兜底(避免裸 500)
-
幂等性设计(防止按钮连点)
-
刷新页面 / 断网后自动恢复
👉 目标:从"能跑"升级为"能抗造"
Day8~Day9:AI Gateway 独立服务
引入 AI Gateway 作为中间层:
-
设备鉴权(白名单)
-
幂等控制(防重复 AI 处理)
-
并发限流(保护 Pipeline)
-
统一错误返回
Gateway 只做"管控",真正的图像处理仍由 Pipeline 完成。
👉 这是工程级系统必不可少的一层
四、项目核心设计思想总结
-
状态机优于流程判断
-
服务拆分优于单体堆代码
-
AI 算法必须工程化、可替换
-
稳定性设计要早于性能优化
-
前端只负责展示,流程由后端统一调度
五、适用场景
这套架构不仅适用于 AI 拍照亭,还可扩展到:
-
自助终端设备
-
工业相机采集系统
-
AI 图像处理流水线
-
需要强稳定性的无人值守系统