为面料商提供一键生成高质量样衣图、营销海报和文案的 AI SaaS 平台
完整的全栈解决方案:后端 API + 后台管理 + Web 前端 + 微信小程序
OmniView AI 是一个完整的全栈 AI SaaS 平台,专为 B2B 面料商设计,提供从后端 API、后台管理到多端应用的完整解决方案。通过上传一张面料图片,系统能够自动生成:
- 🎨 4 张高清样衣效果图(商业街拍、影棚廓形、创意氛围、纹理特写)
- 🖼️ 1 张 9:16 营销海报(含标题、卖点、纹理背景)
- ✍️ 3 条营销文案(C端种草、B端搞钱、设计师高定)
- ⚡ 一键生成:上传面料图 → 30秒内完成全流程
- 🎯 精准定位:针对面料行业深度优化的 AI 提示词
- 💰 按次计费:透明定价,失败不扣费
- 🔌 多模型支持:Google Gemini / OpenRouter / Z-image 智能路由
- 🌐 多终端接入:支持 Web、微信小程序、移动端
- 🎨 全栈解决方案:后端 + 管理后台 + 前端 + 小程序完整开箱即用
本项目包含 4 个独立子项目,提供完整的业务闭环:
| 项目 | 技术栈 | 说明 | 目录 |
|---|---|---|---|
| 🔧 后端 API | FastAPI + PostgreSQL + Celery | 核心业务逻辑、AI 模型调用、任务编排 | / (根目录) |
| 📊 后台管理平台 | Vue 3 + Element Plus + Pinia | 用户管理、任务监控、财务管理、系统配置 | omniview-admin/ |
| 💻 Web 前端 MVP | Vue 3 + Element Plus + Vite | 简洁的测试前端,用于快速验证业务流程 | omniview-frontend/ |
| 📱 微信小程序 | uni-app + uView Plus | 支持微信小程序和 H5 双端部署 | omniview-miniapp/ |
omniview/
├── 📁 根目录 - 后端 API 服务
│ ├── app/ # FastAPI 应用主目录
│ │ ├── main.py # 应用入口 (工作流编排)
│ │ ├── workflow_config.yaml # 工作流配置
│ │ └── utils/ # 工具函数
│ ├── alembic/ # 数据库迁移
│ ├── scripts/ # 初始化脚本
│ ├── docker-compose.yml # 本地开发环境
│ ├── requirements.txt # Python 依赖
│ └── main05.py # 主应用文件
│
├── 📁 omniview-admin/ - 后台管理平台
│ ├── src/
│ │ ├── api/ # API 接口层
│ │ │ ├── admin-user.ts # 用户管理
│ │ │ ├── admin-task.ts # 任务管理
│ │ │ ├── admin-finance.ts # 财务管理
│ │ │ ├── admin-pricing.ts # 定价管理
│ │ │ └── admin-log.ts # 日志管理
│ │ ├── views/ # 页面组件
│ │ ├── router/ # 路由配置
│ │ ├── store/ # Pinia 状态管理
│ │ └── utils/ # 工具函数
│ ├── public/
│ │ └── platform-config.json # 平台配置
│ └── package.json # 依赖配置
│
├── 📁 omniview-frontend/ - Web 前端 MVP
│ ├── src/
│ │ ├── api/ # API 接口
│ │ ├── components/ # 全局组件
│ │ ├── utils/ # 工具函数
│ │ ├── App.vue # 根组件
│ │ └── main.js # 应用入口
│ └── package.json
│
└── 📁 omniview-miniapp/ - 微信小程序
├── src/
│ ├── pages/ # 页面目录
│ │ ├── index/ # 首页
│ │ ├── upload/ # 上传页面
│ │ ├── tasks/ # 任务中心
│ │ ├── detail/ # 任务详情
│ │ └── profile/ # 个人中心
│ ├── components/ # 组件
│ ├── api/ # API 接口
│ ├── utils/ # 工具函数
│ ├── pages.json # 页面配置
│ └── manifest.json # 应用配置
├── 微信小程序部署指南.md
├── H5编译说明.md
└── package.json
- ✅ 工作流编排:Module 1 (样衣生成) → Module 2 (海报合成) → Module 3 (文案生成)
- ✅ AI 模型路由:Google Gemini / OpenRouter / Z-image 智能切换
- ✅ 用户认证:JWT Token 认证 + 权限管理
- ✅ 钱包系统:余额管理、充值、按次扣费、消费流水
- ✅ 异步任务:Celery + Redis 任务队列
- ✅ 对象存储:MinIO (开发) / 阿里云 OSS (生产)
- ✅ 数据库:PostgreSQL + Alembic 迁移
- ✅ API 文档:FastAPI 自动生成 Swagger 文档
基于 vue-pure-admin 精简版开发,提供完整的后台管理能力
- ✅ 用户管理:用户列表、新增用户、编辑信息、重置密码、查看钱包
- ✅ 任务管理:任务列表、状态监控、任务详情、结果预览
- ✅ 财务管理:充值记录、消费流水、余额统计、财务报表
- ✅ 定价配置:工作流定价、模块定价、批量更新
- ✅ 日志审计:操作日志、登录日志、异常日志
- ✅ 权限控制:RBAC 角色权限、菜单权限、数据权限
- ✅ 系统配置:平台参数、模型配置、行业配置
技术特性:
- 🎨 现代 UI:基于 Element Plus 2.x + TailwindCSS
- 📱 响应式设计:支持桌面端和平板端
- 🔄 状态管理:Pinia 全局状态管理
- 🚀 构建优化:Vite 5.x 极速构建,打包大小 < 2.3MB
- 🌙 主题切换:支持亮色/暗色主题
轻量级测试前端,用于快速验证核心业务流程
- ✅ 任务提交:上传面料图、提交生成任务
- ✅ 任务列表:查看所有任务、实时状态更新
- ✅ 结果展示:预览生成的样衣图、海报和文案
- ✅ 图片下载:单张下载、批量下载
基于 uni-app 开发,支持微信小程序和 H5 双端部署
- ✅ 用户认证:自动获取测试用户 Token
- ✅ 图片上传:从相册选择、拍照上传、图片压缩
- ✅ 任务管理:新建任务、任务列表、进度展示
- ✅ 结果查看:样衣图预览、海报预览、文案查看
- ✅ 图片操作:图片预览、保存到相册、批量下载
- ✅ 消费记录:余额显示、消费明细
- ✅ 轮询更新:3秒间隔自动更新任务进度
平台支持:
- 📱 微信小程序
- 🌐 H5 (浏览器访问)
- 📲 支持编译为其他小程序平台(支付宝、QQ、百度等)
后端:
- Python 3.11+
- Docker 20.10+ & Docker Compose 2.0+
- PostgreSQL 16+
- Redis 7+
- MinIO(开发环境)/ 阿里云 OSS(生产环境)
前端项目:
- Node.js 20.x+ (后台管理平台要求)
- Node.js 16.x+ (前端 MVP 和小程序)
- pnpm 9+ (后台管理平台)
- npm / pnpm (前端 MVP 和小程序)
git clone https://github.com/tiger0425/AIView.git
cd AIViewcp .env.example .env编辑 .env 文件,配置必要的参数:
# 环境配置
OMNIVIEW_ENV=development
OMNIVIEW_JWT_SECRET=your-secret-key
# Google AI API Key(必填)
GOOGLE_API_KEY=your-google-api-key
# 可选:其他 AI 模型
OPENROUTER_API_KEY=your-openrouter-key
ZIMAGE_API_KEY=your-zimage-key
# 数据库配置
DATABASE_URL=postgresql://omniview:omniview@localhost:5432/omniview
# 对象存储配置
STORAGE_ENDPOINT=http://localhost:9000
STORAGE_ACCESS_KEY=omniview
STORAGE_SECRET_KEY=omniviewsecret使用 Docker Compose 一键启动:
docker-compose up -d服务启动后,访问:
- API 服务:http://localhost:8000
- API 文档:http://localhost:8000/docs
- MinIO 控制台:http://localhost:9000
# 运行数据库迁移
alembic upgrade head
# 创建管理员账号和测试数据
python create_admin.py
python scripts/init_pricing.pycd omniview-adminpnpm install编辑 .env.development 文件:
# 开发环境后端地址
VITE_API_BASE_URL=http://localhost:8000pnpm dev默认管理员账号:
- 用户名:
admin - 密码:
admin123
pnpm build构建产物位于 dist/ 目录。
cd omniview-frontendnpm installnpm run devnpm run buildcd omniview-miniappnpm install编辑 src/utils/config.ts,根据运行平台配置:
// H5 模式:自动使用当前浏览器 host
// 微信小程序:修改为实际后端地址
// #ifdef MP-WEIXIN
return 'http://192.168.1.100:8000'; // 修改为你的内网IP或公网域名
// #endif- 微信小程序真机无法访问 localhost
- 真机测试需手机与电脑同一局域网
- 生产环境必须使用 HTTPS
H5 开发模式(推荐):
npm run dev:h5微信小程序开发模式:
npm run dev:mp-weixin用微信开发者工具打开 dist/dev/mp-weixin 目录
- 下载并安装微信开发者工具
- 申请微信小程序 AppID(或使用测试号)
- 在
src/manifest.json中配置 AppID - 执行
npm run dev:mp-weixin构建 - 在微信开发者工具中导入项目
详细指南请查看:微信小程序部署指南
npm run build:h5 # H5 版本
npm run build:mp-weixin # 微信小程序版本# 获取 JWT Token
curl -X POST http://localhost:8000/api/v1/auth/login \
-H "Content-Type: application/json" \
-d '{"username":"admin","password":"admin123"}'
# 提交生成任务
curl -X POST http://localhost:8000/api/v1/generate \
-H "Authorization: Bearer YOUR_TOKEN" \
-F "fabric_image=@/path/to/fabric.jpg"- Web 框架:FastAPI 0.115.0(高性能异步 API)
- 数据库:PostgreSQL 16 + SQLAlchemy 2.0(ORM)
- 数据库迁移:Alembic 1.12
- 任务队列:Celery 5.3 + Redis 7
- 认证:PyJWT 2.8 + bcrypt
- AI 模型:
- Google Gemini 2.5 Flash(样衣生成)
- Google Gemini 3 Pro(海报合成 + 文案生成)
- OpenRouter(备用路由)
- 对象存储:MinIO 7.2(开发)/ 阿里云 OSS(生产)
- 配置管理:PyYAML
- 图片处理:Pillow
- 框架:Vue 3.5 + TypeScript 5.9
- 构建工具:Vite 7.1
- UI 框架:Element Plus 2.11
- 状态管理:Pinia 3.0
- 路由:Vue Router 4.6
- HTTP 客户端:Axios 1.12
- CSS 框架:TailwindCSS 4.1
- 图标:@iconify/vue
- 工具库:@pureadmin/utils, @vueuse/core
- 代码规范:ESLint 9 + Prettier 3 + Stylelint 16
- 框架:Vue 3.3
- 构建工具:Vite 4.4
- UI 框架:Element Plus 2.11
- HTTP 客户端:Axios 1.13
- 图标:@element-plus/icons-vue
- 框架:uni-app 3.0(Vue 3 + TypeScript)
- 构建工具:Vite 5.2
- UI 框架:uView Plus 3.6
- 国际化:vue-i18n 9.1
- 平台支持:微信小程序、H5、支付宝小程序、QQ小程序等
- 容器化:Docker + Docker Compose
- 编排:Kubernetes(生产环境)
- 网关:Nginx(API 网关 + 负载均衡)
- 监控:Prometheus + Grafana(可选)
┌────────────────────────────────────────────────────────────────────┐
│ 客户端层 │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 后台管理平台 │ │ Web 前端 MVP │ │ 微信小程序 │ │
│ │ Vue3+Element │ │ Vue3+Element │ │ uni-app │ │
│ │ :5173 │ │ :5174 │ │ 微信/H5 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬────────┘ │
│ │ │ │ │
└─────────┼─────────────────┼─────────────────┼───────────────────────┘
│ │ │ HTTPS/JWT
└─────────────────┴─────────────────┘
│
┌──────────────────▼──────────────────┐
│ API Gateway (Nginx) │
│ 路由 / 限流 / TLS 终止 / CORS │
└──────────────────┬──────────────────┘
│
┌──────────────────▼──────────────────┐
│ FastAPI Application │
│ 工作流编排 / JWT 认证 / API │
└──┬───────────┬───────────┬──────────┘
│ │ │
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Module1 │ │ Module2 │ │ Module3 │
│样衣生成 │─▶│海报合成 │─▶│文案生成 │
└────┬────┘ └────┬────┘ └────┬────┘
│ │ │
└────────────┴────────────┘
│
┌─────────────▼─────────────┐
│ AI Router │
│ Google Gemini 主用 │
│ OpenRouter / Z-image 备用│
└─────────────┬─────────────┘
│
┌─────────────▼─────────────┐
│ Payment & Quota Center │
│ 钱包 / 扣费 / 流水记录 │
└─────────────┬─────────────┘
│
┌─────────────▼─────────────┐
│ Celery Worker │
│ 异步任务处理队列 │
└─────────────┬─────────────┘
│
┌─────────────▼─────────────┐
│ Storage Layer │
│ PostgreSQL / Redis / MinIO │
└────────────────────────────┘
POST /api/v1/auth/login
Content-Type: application/json
{
"username": "your_username",
"password": "your_password"
}POST /api/v1/generate
Authorization: Bearer <token>
Content-Type: multipart/form-data
{
"fabric_image": <file>,
"preferred_model": "gemini" // 可选:gemini/z-image/auto
}响应示例:
{
"task_id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
"status": "processing",
"model_preference": "gemini"
}GET /api/v1/task/{task_id}
Authorization: Bearer <token>响应示例:
{
"task_id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
"status": "success",
"model_used": "gemini-2.5-flash",
"outputs": {
"garments": [
"https://oss.example.com/garment1.jpg",
"https://oss.example.com/garment2.jpg",
"https://oss.example.com/garment3.jpg",
"https://oss.example.com/garment4.jpg"
],
"poster": "https://oss.example.com/poster.jpg",
"copy": {
"option_1": "打破传统面料想象...",
"option_2": "为您的产品线注入...",
"option_3": "探索材质的无限可能..."
}
},
"cost": 5.00,
"balance_after": 95.00
}GET /api/v1/wallet/balance
Authorization: Bearer <token>POST /api/v1/wallet/recharge
Authorization: Bearer <token>
Content-Type: application/json
{
"amount": 100.00,
"payment_method": "wechat" // wechat/alipay
}完整 API 文档请访问:http://localhost:8000/docs
docker-compose up -d# 使用生产配置
docker-compose -f docker-compose.prod.yml up -dkubectl create namespace omniview
kubectl create secret generic omniview-secrets \
--from-literal=jwt-secret=YOUR_JWT_SECRET \
--from-literal=google-api-key=YOUR_GOOGLE_API_KEY \
-n omniviewkubectl apply -f k8s/ -n omniviewkubectl apply -f k8s/ingress.yaml -n omniview| 变量名 | 说明 | 必填 | 默认值 |
|---|---|---|---|
OMNIVIEW_ENV |
运行环境 | 否 | development |
OMNIVIEW_JWT_SECRET |
JWT 密钥 | 是 | - |
GOOGLE_API_KEY |
Google AI API Key | 是 | - |
DATABASE_URL |
数据库连接串 | 是 | - |
REDIS_URL |
Redis 连接串 | 是 | - |
STORAGE_ENDPOINT |
对象存储端点 | 是 | - |
STORAGE_ACCESS_KEY |
存储访问密钥 | 是 | - |
STORAGE_SECRET_KEY |
存储私密密钥 | 是 | - |
pytest tests/unit/pytest tests/integration/pytest --cov=app --cov-report=html# 运行单元测试
pytest tests/unit/
# 运行集成测试
pytest tests/integration/
# 测试覆盖率
pytest --cov=app --cov-report=html后台管理平台和前端 MVP 可以通过以下方式测试:
# 进入对应项目目录
cd omniview-admin # 或 omniview-frontend
# 运行类型检查
npm run typecheck # 或 pnpm typecheck
# 运行代码检查
npm run lint # 或 pnpm lintcd omniview-miniapp
# H5 模式测试(推荐)
npm run dev:h5
# 微信开发者工具测试
npm run dev:mp-weixin参考:功能测试检查清单
我们欢迎所有形式的贡献!请遵循以下步骤:
点击右上角 Fork 按钮,将项目 Fork 到你的账号下。
git checkout -b feature/your-feature-namegit add .
git commit -m "feat: add your feature description"提交信息规范:
feat:新功能fix:修复 Bugdocs:文档更新style:代码格式调整refactor:代码重构test:测试相关chore:构建/工具链相关
git push origin feature/your-feature-name在 GitHub 上创建 Pull Request,详细描述你的更改。
后端:
- 遵循 PEP 8 Python 代码规范
- 所有代码必须通过
flake8和black检查 - 新功能必须包含单元测试
- API 变更需要更新文档
前端:
- 遵循 ESLint + Prettier 规范
- TypeScript 严格模式
- 组件必须有清晰的注释
- 提交前运行
npm run lint
本项目采用 MIT License 开源协议。
MIT License
Copyright (c) 2024 OmniView AI
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
- 项目主页:https://github.com/tiger0425/AIView
- 问题反馈:https://github.com/tiger0425/AIView/issues
- 技术文档:https://github.com/tiger0425/AIView/wiki
感谢以下开源项目和服务:
后端:
- FastAPI - 现代化的 Python Web 框架
- Google Generative AI - 强大的 AI 模型服务
- PostgreSQL - 世界上最先进的开源数据库
- Redis - 高性能内存数据库
- MinIO - 高性能对象存储
- Celery - 分布式任务队列
前端:
- Vue.js - 渐进式 JavaScript 框架
- Element Plus - Vue 3 组件库
- vue-pure-admin - Vue3 后台管理模板
- uni-app - 跨平台应用开发框架
- uView Plus - uni-app UI 组件库
- Vite - 下一代前端构建工具
- TailwindCSS - 实用优先的 CSS 框架
如果觉得这个项目对你有帮助,请给个 ⭐ Star 支持一下!
Made with ❤️ by OmniView AI Team