208 lines
13 KiB
Markdown
208 lines
13 KiB
Markdown
需求确认
|
||
|
||
- AI服务：先用 Mock 数据开发，后期接入真实API（腾讯混元3D/Meshy）
|
||
- 功能入口：独立页面
|
||
- 生成历史：需要保存
|
||
|
||
---
|
||
技术架构
|
||
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 前端 Vue 3 │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ AI 3D生成页面 (/ai-3d) │ │
|
||
│ │ - 文字输入 / 图片上传 │ │
|
||
│ │ - 生成进度展示 │ │
|
||
│ │ - 历史记录列表 │ │
|
||
│ │ - 3D预览（复用 ModelViewer） │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
└───────────────────────────┬─────────────────────────────┘
|
||
│
|
||
┌───────────────────────────▼─────────────────────────────┐
|
||
│ 后端 NestJS │
|
||
│ ┌─────────────────────────────────────────────────┐ │
|
||
│ │ AI 3D生成模块 │ │
|
||
│ │ - 提交生成任务 │ │
|
||
│ │ - 查询任务状态 │ │
|
||
│ │ - 获取历史记录 │ │
|
||
│ └──────────────────────┬──────────────────────────┘ │
|
||
│ │ │
|
||
│ ┌──────────────────────▼──────────────────────────┐ │
|
||
│ │ Mock Provider（开发阶段） │ │
|
||
│ │ - 模拟生成延迟（5-10秒） │ │
|
||
│ │ - 返回示例3D模型URL │ │
|
||
│ └─────────────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
|
||
---
|
||
实现步骤
|
||
|
||
第一步：后端 - 创建数据模型
|
||
|
||
文件: backend/prisma/schema.prisma
|
||
|
||
新增 AI3DTask 表：
|
||
model AI3DTask {
|
||
id Int @id @default(autoincrement())
|
||
tenantId Int @map("tenant_id")
|
||
userId Int @map("user_id")
|
||
inputType String @map("input_type") // text | image
|
||
inputContent String @db.Text // 文字描述或图片URL
|
||
status String @default("pending") // pending|processing|completed|failed
|
||
resultUrl String? @map("result_url") // 生成的3D模型URL
|
||
errorMessage String? @map("error_message")
|
||
createTime DateTime @default(now()) @map("create_time")
|
||
completeTime DateTime? @map("complete_time")
|
||
|
||
tenant Tenant @relation(fields: [tenantId], references: [id])
|
||
user User @relation(fields: [userId], references: [id])
|
||
|
||
@@map("t_ai_3d_task")
|
||
}
|
||
|
||
第二步：后端 - 创建 AI 3D 模块
|
||
|
||
新建文件结构:
|
||
backend/src/ai-3d/
|
||
├── ai-3d.module.ts
|
||
├── ai-3d.controller.ts
|
||
├── ai-3d.service.ts
|
||
├── dto/
|
||
│ ├── create-task.dto.ts
|
||
│ └── query-task.dto.ts
|
||
└── providers/
|
||
└── mock.provider.ts # Mock实现
|
||
|
||
API 端点:
|
||
POST /api/ai-3d/generate # 提交生成任务
|
||
GET /api/ai-3d/tasks # 获取历史记录列表
|
||
GET /api/ai-3d/tasks/:id # 获取任务详情/状态
|
||
DELETE /api/ai-3d/tasks/:id # 删除任务
|
||
|
||
第三步：后端 - Mock Provider 实现
|
||
|
||
文件: backend/src/ai-3d/providers/mock.provider.ts
|
||
|
||
// Mock实现：模拟5-10秒生成延迟，返回示例模型
|
||
async generate(input: { type: 'text' | 'image', content: string }) {
|
||
// 模拟处理时间
|
||
await sleep(random(5000, 10000));
|
||
|
||
// 返回示例模型URL（使用公开的GLB示例）
|
||
return {
|
||
status: 'completed',
|
||
resultUrl: 'https://example.com/sample-model.glb'
|
||
};
|
||
}
|
||
|
||
第四步：前端 - 创建页面和API
|
||
|
||
新建文件结构:
|
||
frontend/src/
|
||
├── api/
|
||
│ └── ai-3d.ts # API接口
|
||
├── views/
|
||
│ └── ai-3d/
|
||
│ ├── index.vue # 主页面
|
||
│ └── components/
|
||
│ ├── GenerateForm.vue # 生成表单
|
||
│ ├── TaskList.vue # 历史列表
|
||
│ └── TaskCard.vue # 任务卡片
|
||
|
||
页面布局:
|
||
┌────────────────────────────────────────────────┐
|
||
│ AI 3D模型生成 │
|
||
├────────────────────────────────────────────────┤
|
||
│ ┌──────────────────┐ ┌────────────────────┐ │
|
||
│ │ 生成方式 │ │ 历史记录 │ │
|
||
│ │ ○ 文字描述 │ │ ┌────────────────┐ │ │
|
||
│ │ ○ 上传图片 │ │ │ 任务1 完成 ✓ │ │ │
|
||
│ │ │ │ └────────────────┘ │ │
|
||
│ │ [输入区域] │ │ ┌────────────────┐ │ │
|
||
│ │ │ │ │ 任务2 生成中...│ │ │
|
||
│ │ [生成] 按钮 │ │ └────────────────┘ │ │
|
||
│ └──────────────────┘ └────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 3D预览区域（选中任务后显示） │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
└────────────────────────────────────────────────┘
|
||
|
||
第五步：前端 - 添加路由和菜单
|
||
|
||
修改文件: frontend/src/router/index.ts
|
||
|
||
{
|
||
path: "ai-3d",
|
||
name: "AI3DGenerate",
|
||
component: () => import("@/views/ai-3d/index.vue"),
|
||
meta: {
|
||
title: "AI 3D生成",
|
||
requiresAuth: true,
|
||
},
|
||
}
|
||
|
||
---
|
||
关键文件清单
|
||
┌──────┬──────────────────────────────────────────────────────┐
|
||
│ 操作 │ 文件路径 │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 修改 │ backend/prisma/schema.prisma - 添加 AI3DTask 表 │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/ai-3d.module.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/ai-3d.controller.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/ai-3d.service.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/dto/create-task.dto.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/dto/query-task.dto.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ backend/src/ai-3d/providers/mock.provider.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 修改 │ backend/src/app.module.ts - 注册 AI3D 模块 │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ frontend/src/api/ai-3d.ts │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ frontend/src/views/ai-3d/index.vue │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ frontend/src/views/ai-3d/components/GenerateForm.vue │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ frontend/src/views/ai-3d/components/TaskList.vue │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 新建 │ frontend/src/views/ai-3d/components/TaskCard.vue │
|
||
├──────┼──────────────────────────────────────────────────────┤
|
||
│ 修改 │ frontend/src/router/index.ts - 添加路由 │
|
||
└──────┴──────────────────────────────────────────────────────┘
|
||
---
|
||
验证方式
|
||
|
||
1. 数据库迁移
|
||
cd backend
|
||
npx prisma migrate dev --name add-ai-3d-task
|
||
2. 后端测试
|
||
cd backend && npm run start:dev
|
||
# 测试API
|
||
curl -X POST http://localhost:3001/api/ai-3d/generate \
|
||
-H "Authorization: Bearer <token>" \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"type":"text","content":"一个红色的椅子"}'
|
||
3. 前端测试
|
||
cd frontend && npm run dev
|
||
# 访问 http://localhost:3000/<tenantCode>/ai-3d
|
||
# 测试文字生成、图片上传、历史记录功能
|
||
4. 完整流程测试
|
||
- 输入文字描述 → 点击生成 → 等待完成 → 预览3D模型
|
||
- 上传图片 → 点击生成 → 等待完成 → 预览3D模型
|
||
- 查看历史记录 → 点击历史任务 → 预览3D模型
|
||
|
||
---
|
||
后期扩展
|
||
|
||
Mock 开发完成后，接入真实 API 只需：
|
||
1. 新建 hunyuan-3d.provider.ts 或 meshy.provider.ts
|
||
2. 配置环境变量
|
||
3. 在 Service 中切换 Provider
|