ai-swap/frontend/README_AI_GENERATION_DESIGN.md

AI生成功能页面设计说明

设计概述

基于提供的UI界面参考，我们重新设计了AI生成功能页面，采用现代化的四栏布局设计，提供专业的AI内容生成体验。

页面布局

1. 顶部标题栏

• 标题: "AI生成"
• 副标题: "选择素材和模板，使用ComfyUI一键生成营销内容"
• 生成按钮: 位于右上角，显示已选择项目数量，采用渐变紫色设计

2. 四栏布局设计

第一栏：选择原图

• 图标: 相机图标
• 功能: 选择原始图片作为AI处理的基础
• 显示: 已选择数量徽章
• 空状态: 显示"暂无原图，请先到素材库上传"

第二栏：选择IP形象

• 图标: 用户图标
• 功能: 选择IP角色形象用于AI换脸
• 显示: 已选择数量徽章
• 示例数据:
  • sample_image (女性肖像)
  • 眼睛男 (戴眼镜男性)

第三栏：选择服装

• 图标: 衬衫图标
• 功能: 选择服装素材用于AI换衣
• 显示: 已选择数量徽章
• 示例数据: 白色天丝裙

第四栏：生成配置

• 图标: 设置图标
• 功能: 配置AI生成参数和模板

3. 生成配置详细功能

任务命名

• 输入框带文件图标
• 占位符文本："输入任务名称..."

任务类型

• 复选框形式
• 选项：换脸、换衣、换背景
• 显示已选择处理类型数量

每组生成数量

• 数字输入框
• 默认值：1
• 范围：1-10

场景模板

• 滚动区域设计
• 标签显示
• 示例：
  • 铃兰花场景 (fashion)
  • 海边风景 (fashion)
  • 城市街拍 (fashion)

文案模板

• 滚动区域设计
• 标签显示
• 示例：
  • 户外穿搭基础模... (outdoor_out...)
  • 产品对比测... (product_comp...)
  • 生活方式分享模板 (lifestyle)

交互特性

1. 素材选择

• 悬停效果: 卡片轻微放大
• 选中状态: 蓝色边框和阴影
• 选中指示: 右上角蓝色圆形勾选图标

2. 模板选择

• 悬停效果: 轻微放大
• 选中状态: 蓝色边框和背景
• 选中指示: 右侧勾选图标

3. 生成控制

• 按钮状态: 根据选择状态启用/禁用
• 进度显示: 实时显示生成进度
• 任务状态: 显示当前处理任务

技术实现

1. 组件架构

• MaterialCard: 素材选择卡片组件
• TemplateItem: 模板选择组件
• 响应式设计: 支持桌面和移动端

2. 状态管理

• 使用React Hooks管理组件状态
• 分离不同类型的选择状态
• 实时计算选择数量

3. 样式系统

• 基于Tailwind CSS
• 使用shadcn/ui组件库
• 渐变色彩设计
• 现代化图标系统

用户体验优化

1. 视觉反馈

• 悬停和选中状态的视觉反馈
• 加载状态的动画效果
• 进度条实时更新

2. 信息层次

• 清晰的信息架构
• 合理的视觉层次
• 直观的操作流程

3. 响应式设计

• 桌面端四栏布局
• 移动端单栏堆叠
• 自适应组件尺寸

数据流

1. 素材数据

{
  id: 'unique_id',
  name: '素材名称',
  file_url: '图片URL',
  created_date: '创建时间'
}

2. 模板数据

{
  id: 'template_id',
  name: '模板名称',
  tag: '标签',
  created_date: '创建时间'
}

3. 生成配置

{
  taskName: '任务名称',
  selectedTaskTypes: ['换脸', '换衣', '换背景'],
  quantityPerGroup: 1,
  selectedSceneTemplates: [],
  selectedCopyTemplates: []
}

扩展性

1. 组件复用

• MaterialCard可在其他页面复用
• TemplateItem支持不同类型的模板
• 配置组件可独立使用

2. 数据接口

• 支持API数据加载
• 支持本地存储
• 支持实时更新

3. 功能扩展

• 支持更多素材类型
• 支持更多模板类型
• 支持自定义配置

性能优化

1. 组件优化

• 使用React.memo优化渲染
• 合理使用useMemo和useCallback
• 虚拟滚动支持大量数据

2. 图片优化

• 懒加载图片
• 压缩图片尺寸
• 缓存机制

3. 状态优化

• 避免不必要的重渲染
• 合理的状态分离
• 高效的更新机制

开发指南

1. 添加新素材类型

1. 在loadMaterials函数中添加新数据
2. 创建对应的状态管理
3. 添加选择逻辑
4. 更新UI显示

2. 添加新模板类型

1. 在loadTemplates函数中添加新数据
2. 创建对应的状态管理
3. 添加选择逻辑
4. 更新UI显示

3. 自定义样式

1. 修改Tailwind CSS类名
2. 调整组件样式
3. 更新主题色彩
4. 优化响应式布局

测试建议

1. 功能测试

• 素材选择功能
• 模板选择功能
• 生成配置功能
• 生成流程测试

2. 界面测试

• 响应式布局测试
• 交互效果测试
• 视觉一致性测试
• 可访问性测试

3. 性能测试

• 大量数据加载测试
• 内存使用测试
• 渲染性能测试
• 网络请求测试