云裳 - 基于大模型的虚拟试衣系统产品系统Vibe Coding

1.作品目标
随着电子商务的蓬勃发展，在线服装购物已成为人们日常生活的重要组成部
分。然而，“买家秀”与”卖家秀”的巨大差异始终是困扰消费者和商家的核心痛
点。消费者难以直观判断衣物上身效果，导致退货率居高不下，造成了巨大的物流
成本浪费和环境负担。
传统的虚拟试衣技术往往需要昂贵的 3D 建模成本或复杂的硬件设备（如 3D 扫
描仪），难以大规模普及。随着生成式人工智能（AIGC）技术的爆发，特别是多模
态大模型（LMM）的出现，为低成本、高保真的虚拟试衣提供了新的解决方案。云
裳正是在此背景下诞生，旨在利用 Google Gemini 等先进大模型能力，为用户提
供”即拍即试”的便捷体验。
2. 基本功能
三步试衣法：仅需“上传人像 + 上传/生成衣物+点击立即生成试衣效果”三步即可完成试衣，支持下载保存换装效果图。
多模态深度交互：支持通过自然语言进行细节微调。
AI创作中心：支持输入内容，AI生成图像画面或视频。可选择图像尺寸大小，还可以将生成的图像与视频进行保存和分享。
3.应用价值
对于消费者: 提供了零成本的在线试衣体验，辅助购物决策，减少退货烦
恼；为行动不便等人群提供平等试衣权；支持AI 创作和微调，满足风格表达。
对于商家: 可快速生成服装上身效果图，降低模特拍摄成本；提升商品点击率、转化率上升，复购率上涨；零技术门槛适配中小商家，提升竞争力。
社会价值: 打破传统虚拟试衣高门槛，让普通人共享技术红利；促进数字化时尚产业发展，减少服装浪费，符合绿色低碳的可
持续发展理念。

【创新点一】零门槛多模态试衣体验：突破传统虚拟试衣对昂贵3D建模设备的依赖，用户仅需上传一张全身照和一张衣物图片，即可通过 Google Gemini 2.5 Flash Image 模型实现高保真的虚拟试衣效果，将试衣门槛降至零，真正实现“即拍即试”。
【创新点二】坐标引导精准定位技术：创新性地设计了“坐标引导”（Coordinate Guidance）策略，用户通过前端交互点击图像中的目标人物，系统自动计算并将百分比坐标信息嵌入 AI Prompt，有效解决了多人场景下 AI 目标混淆问题，大幅提升试衣精准性。
【创新点三】自然语言驱动的深度定制：集成多模态大模型的自然语言理解能力，用户可通过文字描述（Prompt）对试衣细节进行精细调整（如“戴上墨镜”、“把袖子卷起来”、“换成红色”），实现传统 GAN 模型无法完成的自然语言驱动的个性化定制。
【创新点四】前端直调AI的 Serverless 架构：采用前端直接调用 Google Gemini API 的 Serverless 架构设计，通过 geminiService.ts 在浏览器客户端侧完成 AI 推理请求，有效减少后端带宽压力，降低系统运维成本，同时保证了 AI 交互的低延迟响应体验。
【创新点五】云端资产管理与全流程闭环：系统提供完整的云端资产管理功能，用户的模特照片、AI生成的衣物图片及最终试衣结果均自动同步至个人云端画廊，支持多端访问与历史记录追溯，形成“上传—试衣—保存—复用”的完整闭环体验。

我负责整个项目的开发与维护。
1. AI 服务集成方案
AI 服务通过 GeminiService 类封装，直接在前端调用 Google API 以减少后端带宽压力。为保证生成效果，采用了“坐标引导”策略：用户在前端点击图片的某一点，程序计算出百分比坐标，并将其嵌入 Prompt 中，从而避免画面中有多人时 AI 混淆目标。
2. 虚拟试衣流程实现
前端 MagicTryOn.tsx 组件采用状态机模式管理三个步骤：
支持本地上传文件、从预设库选择以及交互式点击获取焦点坐标。文本生成衣物、上传衣物图片，以及输入配饰提示词。调用 AI 生成试衣效果、结果展示与下载、一键保存到云端相册。
3. 资产管理实现
后端 提供 RESTful 接口供前端调用。创建资产通过 POST接口，接收图片 URL 和类型，自动关联当前登录用户 ID。查询资产通过 GET 接口，支持分页查询，可按类型筛选。
4. 前端核心组件
MagicTryOn.tsx：应用的核心组件，管理虚拟试衣的三步流程。AIStudio.tsx：仪表盘组件，展示用户的 AI 资产和最近的操作记录。geminiService.ts：AI 集成逻辑，直接从浏览器客户端调用 Google Gemini API；tryOn 方法发送模特图片、衣物图片以及用户定义的配饰提示词到 gemini-2.5-flash-image 模型；generateImage 方法根据文本描述生成纯白背景的专业服装摄影图。
5. 后端核心逻辑
后端采用模块化设计，resource-module-college 模块负责学院相关的业务逻辑。
6. 界面设计
界面设计遵循“极简主义”风格，核心操作区域突出。整体 UI 基于 Tailwind CSS 实现响应式设计。