项目简介
OutfitAI 是一个面向 AI 试衣场景的 SaaS 项目。项目目标是让用户可以通过上传模特照片和服装图片，快速生成 AI 试穿效果图，降低线上选衣、搭配和商品展示的成本。
传统电商服装展示通常依赖真人拍摄、模特棚拍和后期修图，成本高、周期长。AI 试衣可以让用户在不实际穿衣的情况下预览搭配效果，也可以帮助商家快速生成不同模特、不同服装组合的展示图。
因此，这个项目围绕一个核心问题展开：如何把 AI 生成能力真正做成一个可用的 Web 产品，而不仅仅是一次接口调用。
项目功能介绍
OutfitAI 目前包含以下核心功能：
- AI 试衣间：用户可以选择模特、上传服装，并生成试衣效果图。
- 内置模特库：系统提供默认模特，用户可以直接选择使用。
- 自定义模特：用户可以上传自己的模特图片，并填写名称、风格、身高、体重、身材等信息。
- 模特删除：用户可以删除自己创建的自定义模特。
- 服装上传：支持上下装模式和单件/连体模式。
- 内置穿搭页：用户可以浏览系统内置套装，点击 Try On 后自动跳转到试衣间并带入服装。
- AI 试衣结果保存：用户可以将生成结果保存到历史记录。
- 试衣历史页：Dashboard 页面展示用户保存过的 AI 试衣结果。
- 国际化：支持中英文文案。
- 支付系统：接入 Stripe，为后续订阅和积分消耗做基础。
- 云存储：接入阿里云 OSS，用于保存用户上传图片和 AI 生成结果
技术栈选择
项目采用 Next.js App Router 作为主框架，适合同时处理前端页面、服务端渲染和 API Route。
主要技术栈如下：
- Next.js：应用框架，负责页面、路由和后端 API。
- React：前端组件开发。
- Tailwind CSS：页面样式。
- Radix UI：基础交互组件。
- next-intl：国际化。
- Better Auth：用户认证。
- Drizzle ORM：数据库建模和查询。
- PostgreSQL：业务数据存储。
- 阿里云 OSS：图片云存储。
- DashScope / qwen-image-2.0：AI 试衣图片生成。
- Stripe：支付订阅。
- Vercel：项目部署。
项目架构设计
项目整体采用模块化架构。
前端页面主要分为三类：
- Marketing 页面：如首页、价格页、博客页、Outfit 穿搭页。
- Protected 页面：如 Dashboard、Fitting Room，需要用户登录后访问。
- API Routes：如图片上传、模特管理、AI 试衣、试衣历史保存、Stripe webhook。
核心目录结构大致如下：
src/app
api
fitting-room
models
history
try-on
storage
webhooks
[locale]
(marketing)
(protected)
src/components
dashboard
outfit
blocks
ui
src/db
app.schema.ts
auth.schema.ts
migrations
src/lib
ai
auth
server
src/storage
provider
client
这种结构的好处是业务边界比较清晰：页面负责交互，API Route 负责后端逻辑，数据库 schema 负责数据结构，storage 模块负责云存储。
核心功能实现
项目的核心功能是 AI 试衣间。
用户进入 /fitting-room 页面后，可以完成以下操作：
- 选择系统内置模特或自定义模特。
- 选择服装类型：上下装或单件/连体。
- 上传服装图片。
- 点击开始试衣。
- 等待 AI 生成。
- 查看结果图。
- 下载图片或保存到历史记录。
自定义模特会保存到数据库中，并在页面加载时自动读取。内置模特来自本地 JSON 数据，不会写入数据库。用户上传的新模特图片会先上传到 OSS，然后数据库只保存图片 URL 和模特信息。
服装图片的处理也做了区分：
- 内置服装不重复上传，直接使用已有 URL。
- 用户上传服装会上传到 OSS。
- 已上传过的图片会通过 hash 做去重。
- AI 生成结果会单独保存，避免临时 URL 过期。
AI 试衣生成流程
AI 试衣流程可以分为几个步骤：
- 前端校验用户是否选择模特、是否上传服装。
- 如果是用户上传的新图片，先上传到 OSS。
- 将模特图 URL、服装图 URL 发送到后端 API。
- 后端调用 DashScope 的 qwen-image-2.0 模型。
- 模型返回生成结果图。
- 后端将结果图返回给前端展示。
- 用户可以选择下载或保存。
为了提高生成质量，项目对 prompt 做了多次优化，例如：
- 要求生成完整全身图。
- 要求从头到脚完整展示。
- 要求白色或干净背景。
- 避免黑色背景、马赛克边缘、抠图感。
- 避免裁切头部、脚部、手臂等问题。
同时，negative prompt 中也加入了常见错误限制，例如：
cropped head, cropped feet, black background, mosaic edges, cutout artifacts, distorted body
这样可以让 AI 输出更接近真实电商试衣图。
用户登录与权限控制
项目使用 Better Auth 实现用户登录和会话管理。
受保护页面放在 (protected) 路由组中，例如：
- /dashboard
- /fitting-room
- /settings
- /payment
API 层也会校验用户登录状态。例如保存模特、删除模特、保存试衣历史等接口，都会先获取当前用户 session。只有登录用户才能操作自己的数据。
权限控制主要体现在：
- 用户只能读取自己的自定义模特。
- 用户只能删除自己的自定义模特。
- 用户只能保存自己的试衣历史。
- Dashboard 只展示当前用户保存的试衣结果。
这样可以保证不同用户的数据隔离。
数据库设计
项目使用 PostgreSQL + Drizzle ORM。
除了认证、支付和积分相关表之外，AI 试衣主要新增了两类业务表。
第一类是自定义模特表：
user_custom_model
主要字段包括：
- id
- userId
- name
- style
- height
- weight
- body
- image
- notes
- createdAt
- updatedAt
这张表用于保存用户自己上传的模特信息。
第二类是试衣历史表：
fitting_room_history
主要字段包括：
- id
- userId
- modelId
- modelName
- modelImage
- outfitId
- garmentMode
- topGarmentUrl
- bottomGarmentUrl
- singleGarmentUrl
- resultImageUrl
- sourceResultImageUrl
- createdAt
- updatedAt
其中 resultImageUrl 保存的是重新上传到 OSS 后的长期有效图片地址，而不是 AI 平台返回的临时图片地址。
这个设计解决了一个很实际的问题：AI 平台返回的图片 URL 通常有有效期，如果直接保存，过期后历史记录就会失效。
部署上线流程
项目使用 Vercel 部署。
部署流程大致如下：
- 将代码推送到 GitHub。
- 在 Vercel 中导入 GitHub 仓库。
- 配置 Framework Preset 为 Next.js。
- 配置 Build Command 为 pnpm build。
- Output Directory 保持默认，不要填 dist。
- 在 Vercel Environment Variables 中配置生产环境变量。
- 执行数据库迁移。
- 配置 Stripe webhook。
- 重新部署。
需要注意的是，本地 .env 不会自动同步到 Vercel，所有生产环境变量都需要手动配置到 Vercel。
生产环境中 NEXT_PUBLIC_BASE_URL 不能是 localhost，需要改为线上域名。
遇到的问题与解决方案
开发过程中遇到了不少真实问题。
第一个问题是图片 URL 无效。
Next.js 的 Image 组件不接受 Windows 反斜杠路径，例如：
\images\marketing\hero.png
需要改成：
/images/marketing/hero.png
第二个问题是远程图片证书失效。
部分静态资源域名证书过期，导致图片无法加载。解决方案是更换为可靠的 OSS 地址或本地资源。
第三个问题是 AI 生成图背景异常。
模型生成结果出现黑色背景、抠图边缘、马赛克等问题。通过优化 prompt、negative prompt 和输入图片预处理，改善了生成质量。
第四个问题是 AI 返回图片 URL 有效期短。
直接保存 AI URL 会导致历史记录失效。解决方案是在保存历史时重新 fetch 结果图，并上传到自己的 OSS bucket。
第五个问题是 Stripe webhook 签名失败。
原因是 .env 中 webhook secret 带了空格或换行。解决方案是在代码读取时增加 .trim()，同时规范 .env 配置。
第六个问题是 Vercel 部署配置错误。
Vercel 项目设置中 Output Directory 被配置成 dist，但 Next.js 输出目录不是 dist。解决方案是清空 Output Directory，让 Vercel 使用 Next.js 默认构建流程。
项目亮点
这个项目的亮点不只是调用了 AI 接口，而是把 AI 能力产品化了。
主要亮点包括：
- 完整的 AI 试衣闭环，从图片上传到结果保存。
- 支持内置模特和用户自定义模特。
- 支持内置穿搭一键进入试衣间。
- 支持上下装和单件/连体两种模式。
- 对 AI 结果做长期存储，避免临时链接失效。
- 支持中英文国际化。
- 接入 Stripe，为 SaaS 商业化做准备。
- 使用 Drizzle 维护数据库结构，方便持续迭代。
- 项目结构清晰，前端、后端、存储、AI、支付模块边界明确。
后续优化方向
后续可以从产品体验、AI 效果和商业化三个方向继续优化。
产品体验方面：
- 增加试衣历史详情页。
- 支持删除历史记录。
- 支持收藏常用模特和服装。
- 支持批量试衣。
- 增加移动端体验优化。
AI 效果方面：
- 增加多模型对比。
- 支持自动去背景。
- 支持姿态保持和脸部一致性优化。
- 支持高清放大。
- 支持失败重试和生成质量评分。
商业化方面：
- 接入积分消耗机制。
- 不同套餐限制生成次数。
- 支持团队空间。
- 支持商家批量上传商品。
- 增加商品购买转化追踪。
- 为电商卖家提供 API 服务。
整体来看，OutfitAI 已经具备一个 AI SaaS 产品的基础形态。它不只是一个 demo，而是包含用户系统、AI 生成、云存储、数据库、支付和部署的一套完整产品链路。
