AI 校园写真自助机
把摄像头拍照、AI 生成、Canvas 相框合成、扫码下载和打印串成适合校园展演的完整流程。
- 职责
- 需求拆解、前后端联调、部署测试与故障处理
- 重点
- 外部 AI 或网络不稳定时，不能让现场流程整体失效。
- React
- TypeScript
- Express
- Canvas
- Cloudflare Tunnel
仅展示无人物、无二维码的流程界面，用于说明异步生成状态。
背景 / 问题
校园展演需要一台操作简单、结果可下载的自助终端。真正难点不只是调用图像接口，还包括摄像头、图片合成、网络波动和最终展示。
关键实现
前端控制拍照和页面状态，后端接收图片并处理输出；Canvas 固定 2:3 比例合成相框。
为远程图片准备代理路径，避免 Canvas 因跨域资源污染而无法导出；同时处理预览镜像与最终成图方向一致性。
故障与定位
现场演示不能假设外部 AI 总是可用。因此把超时、失败重试和 Mock 降级纳入流程，而不是等接口报错后才临时处理。
排障按前端请求、后端服务、外部接口、文件输出和终端展示逐段验证。
结果与反思
项目保留公开源码与可演示流程。它让我更重视：用户看到的一个按钮，背后要有可观测的状态、失败路径和可交付的结果。