TPC Studio AI服装电商模特换装网站产品系统Vibe Coding

在服装电商与快时尚行业，商家上新 SKU 需要大量模特实拍图，传统拍摄涉及模特预约、场地、妆发、后期，成本高、周期长、风格难统一，难以满足“小单快反”和跨境电商多市场素材需求。本项目定位为 AI 服装电商模特换装网站，面向品牌方、电商运营与视觉设计团队，提供模特试穿、换发型、换脸、工作流自动化等一站式 AI 视觉生产能力，帮助用户在分钟级生成可商用模特展示图，显著降低拍摄与制作成本，加速商品上架与营销素材迭代。

项目包含以下核心功能模块：

AI 模特试穿：上传服装参考图或输入描述，AI 生成指定姿态、场景、风格的模特上身图，支持标准/精修两种生成模式。
换发型/换脸：独立工具页支持对已有模特图更换发型或替换人脸，可绑定人脸库实现统一品牌形象。
人脸库管理：用户上传人脸照片，经 AI 校验（方向、遮挡、光线、模糊、五官）通过后自动裁剪保存，生成时一键绑定并替换模特面部。
工作流画布：基于 tldraw 无限画布的电商视觉 Agent，通过自然语言指令驱动“服装生成 → 换发型 → 换脸”三步流水线，步骤结果自动串联。
作品历史：分页展示生成记录，支持换发型/换脸快捷操作；删除记录时同步清理本地图片，并做引用检查保护，避免误删共享素材。
积分系统：注册赠送积分，按功能与模式扣费，采用“预扣 → 确认/退款”两阶段事务，后台管理员可手动充值。
管理后台：引擎配置、提示词模板、用户/积分管理、生图记录、API 日志查询，支持多实例优先级与失败自动降级。
安全机制：JWT 双重密钥、bcrypt 密码加密、图形验证码+账户锁定、SQL 参数化与敏感数据脱敏。

我在本项目中独立负责从需求设计到上线部署的全流程开发。具体任务包括：

搭建前后端整体架构与工程化体系（React 19 + TypeScript + Vite + Express + MySQL）；
实现 AI 模特试穿、换发型、换脸三大核心功能，对接 gpt-image-2 / MiMo 生图引擎；
设计人脸库与 boundFaceId 人脸绑定机制，并开发换脸蒙版编辑器；
基于 tldraw 开发工作流画布 Agent，串联“服装生成 → 换发型 → 换脸”三步流水线；
实现积分“预扣 → 确认/退款”两阶段事务、会员中心与后台管理（引擎/提示词/用户/积分/日志）；
完成 JWT 双重密钥、图形验证码+账户锁定、SQL 参数化等安全机制，以及生成图本地持久化。
技术栈与架构：前端 React 19 + TS + Tailwind CSS 4 + Vite 6 + Motion + tldraw 5，后端 Node.js + Express + TypeScript，MySQL 8.0 持久化（mysql2 连接池）。实现亮点：AI 引擎配置从 engine_configs 表动态加载，支持同 model_key 多实例按优先级调用、失败自动降级；生成图落地本地 public/uploads 避免 OpenAI 临时 URL 过期；积分消费采用事务防并发超扣；工作流画布节点状态实时刷新、不重复创建。难点与解决：换脸蒙版融合易在脸颊/下巴产生白边与肤色断层，通过蒙版羽化 + 质检评估（清晰度/亮度差/DeltaE，只读不改图）规避；MySQL 预编译语句对 LIMIT/OFFSET 占位符存在兼容问题，改用字符串插值；AI 视觉接口易超时挂死，增加 30s 超时与 Promise.race 双保险防护。