Domů Procházet Nápověda
Přihlásit se
AI
/
ai-swap
5
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Strom: ab29023f8d
Větve Značky
ai-swap
/
frontend
/
README_MATERIAL_LIBRARY.md

README_MATERIAL_LIBRARY.md 4.7 KB
Historie Surový

素材库功能说明

概述

素材库是一个专业的图片素材管理页面，完全按照设计图实现，支持上传、浏览、编辑和删除素材。

功能特性

1. 页面布局

  • 页面标题: "素材库" - 上传、浏览和管理所有基础图片素材
  • 导航标签: 三个主要分类
    • IP素材 (人脸) - 管理人脸图片素材
    • 产品素材 (服装) - 管理服装产品素材
    • 上传原图 - 通用上传功能

2. 上传功能

  • 拖拽上传: 支持拖拽文件到上传区域
  • 点击上传: 点击上传区域或"浏览文件"按钮选择文件
  • 文件限制:
    • 支持格式: PNG, JPG, JPEG
    • 文件大小: 不超过200MB
  • 批量上传: 支持同时选择多个文件上传

3. 素材管理

  • 素材展示: 网格布局展示所有上传的素材
  • 素材信息: 显示素材名称、类型、上传时间
  • 编辑功能: 点击编辑按钮可以修改素材名称
  • 删除功能: 悬停显示删除按钮，支持删除素材
  • AI标签: 人脸素材显示"AI生成"标签

4. 后端集成

  • API接口: 完全集成后端user_material_api.py
  • 认证支持: 支持用户认证和权限验证
  • 实时同步: 上传、编辑、删除操作实时同步到后端

技术实现

前端技术栈

  • React 18: 使用函数式组件和Hooks
  • Tailwind CSS: 响应式设计和现代UI
  • Radix UI: 高质量UI组件库
  • Lucide React: 图标库
  • Sonner: 现代化Toast通知

后端API

  • FastAPI: 高性能Python Web框架
  • SQLAlchemy: ORM数据库操作
  • 文件存储: 本地文件系统存储
  • 权限验证: 用户认证和授权

核心组件

MaterialLibrary.jsx

主页面组件，包含：

  • 页面布局和导航
  • 文件上传处理
  • 素材数据管理
  • 与后端API交互

MaterialCard.jsx

素材卡片组件，包含：

  • 图片展示
  • 编辑名称功能
  • 删除功能
  • AI生成标签

materials.js

API接口封装，包含：

  • 上传素材接口
  • 获取素材列表
  • 删除素材
  • 更新素材信息

使用流程

1. 访问素材库

  • 登录系统后，点击侧边栏"素材库"菜单
  • 页面将显示当前用户的素材列表

2. 上传素材

  • 选择对应的素材类型标签（人脸/产品）
  • 拖拽文件到上传区域或点击"浏览文件"
  • 选择支持格式的图片文件
  • 等待上传完成，素材将显示在列表中

3. 管理素材

  • 查看素材: 素材以网格形式展示
  • 编辑名称: 点击素材下方的编辑按钮修改名称
  • 删除素材: 悬停在素材上显示删除按钮
  • 切换类型: 点击不同标签查看对应类型的素材

4. 素材分类

  • IP素材 (人脸): 管理人脸图片，用于AI换脸
  • 产品素材 (服装): 管理服装图片，用于AI换装
  • 上传原图: 通用上传功能

API接口说明

上传素材

POST /api/v1/users/{user_id}/materials
Content-Type: multipart/form-data

参数:
- file: 图片文件
- image_type: 素材类型 (face/cloth)
- original_filename: 原始文件名

获取素材列表

GET /api/v1/users/{user_id}/materials?material_type={type}&page={page}&page_size={size}

删除素材

DELETE /api/v1/users/{user_id}/materials/{material_id}

更新素材

PUT /api/v1/users/{user_id}/materials/{material_id}
Content-Type: application/json

参数:
- original_filename: 新的文件名

开发说明

环境要求

  • Node.js 18+
  • Python 3.8+
  • FastAPI
  • SQLAlchemy

启动开发环境

# 启动后端服务
cd backend
python -m uvicorn backend.api.ai_swap_api:app --reload --host 0.0.0.0 --port 8000

# 启动前端服务
cd frontend
npm run dev

访问地址

注意事项

  1. 文件大小限制: 单个文件不能超过200MB
  2. 文件格式: 仅支持PNG、JPG、JPEG格式
  3. 用户权限: 只能管理自己的素材
  4. 网络连接: 上传大文件需要稳定的网络连接
  5. 存储空间: 注意服务器存储空间的使用

故障排除

常见问题

  1. 上传失败

    • 检查文件格式是否正确
    • 检查文件大小是否超限
    • 检查网络连接是否正常

  2. 图片无法显示

    • 检查图片文件是否完整
    • 检查服务器存储路径是否正确

  3. 编辑失败

    • 检查用户权限是否正确
    • 检查素材ID是否存在

  4. 删除失败

    • 检查素材是否被其他功能使用
    • 检查用户权限是否正确

日志查看

  • 前端控制台: 浏览器开发者工具
  • 后端日志: backend/logs/ 目录
  • API日志: 查看FastAPI启动时的日志输出