From 7f8e28a4af1979180f84d81641cb346a7261c06d Mon Sep 17 00:00:00 2001 From: zhangxiaohua <827885272@qq.com> Date: Mon, 19 Jan 2026 14:10:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=94=9F3D,?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E5=9B=BE=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/src/ai-3d/ai-3d.service.ts | 39 +- backend/src/ai-3d/dto/create-task.dto.ts | 20 + .../providers/ai-3d-provider.interface.ts | 10 + .../src/ai-3d/providers/hunyuan.provider.ts | 20 +- frontend/src/views/workbench/ai-3d/Index.vue | 924 +++++++++++++++++- 5 files changed, 972 insertions(+), 41 deletions(-) diff --git a/backend/src/ai-3d/ai-3d.service.ts b/backend/src/ai-3d/ai-3d.service.ts index f130323..73071f2 100644 --- a/backend/src/ai-3d/ai-3d.service.ts +++ b/backend/src/ai-3d/ai-3d.service.ts @@ -62,13 +62,44 @@ export class AI3DService { // 3. 提交到 AI 服务 try { + // 构建生成选项 + const options: any = { + generateType: dto.generateType, + faceCount: dto.faceCount, + }; + + // 处理多视图图片（图生3D支持） + if (dto.inputType === 'image' && dto.multiViewImages) { + const viewKeyMap: Record = { + left: 'left', + right: 'right', + back: 'back', + top: 'top', + bottom: 'bottom', + left45: 'left_front', + right45: 'right_front', + }; + + const multiViewImages: { viewType: string; imageUrl: string }[] = []; + for (const [key, url] of Object.entries(dto.multiViewImages)) { + if (url && key !== 'front' && viewKeyMap[key]) { + multiViewImages.push({ + viewType: viewKeyMap[key], + imageUrl: url, + }); + } + } + + if (multiViewImages.length > 0) { + options.multiViewImages = multiViewImages; + this.logger.log(`多视图模式: ${multiViewImages.length} 张额外视图`); + } + } + const externalTaskId = await this.ai3dProvider.submitTask( dto.inputType, dto.inputContent, - { - generateType: dto.generateType, - faceCount: dto.faceCount, - }, + options, ); // 4. 更新状态为处理中 diff --git a/backend/src/ai-3d/dto/create-task.dto.ts b/backend/src/ai-3d/dto/create-task.dto.ts index 6b64628..b5fbc42 100644 --- a/backend/src/ai-3d/dto/create-task.dto.ts +++ b/backend/src/ai-3d/dto/create-task.dto.ts @@ -7,6 +7,7 @@ import { IsInt, Min, Max, + IsObject, } from 'class-validator'; /** @@ -18,6 +19,21 @@ import { */ export type GenerateType = 'Normal' | 'LowPoly' | 'Geometry' | 'Sketch'; +/** + * 多视图图片类型 + * 支持的视角：left, right, back, top, bottom, left_front (左前45°), right_front (右前45°) + */ +export type MultiViewImages = { + front?: string; // 正图（作为主图） + left?: string; // 左视图 + right?: string; // 右视图 + back?: string; // 后视图 + top?: string; // 顶视图 + bottom?: string; // 底视图 + left45?: string; // 左前45°视图 -> left_front + right45?: string; // 右前45°视图 -> right_front +}; + export class CreateTaskDto { @IsString() @IsIn(['text', 'image'], { message: '输入类型必须是 text 或 image' }) @@ -40,4 +56,8 @@ export class CreateTaskDto { @Min(10000, { message: '模型面数最小为10000' }) @Max(1500000, { message: '模型面数最大为1500000' }) faceCount?: number; + + @IsOptional() + @IsObject({ message: '多视图图片必须是对象' }) + multiViewImages?: MultiViewImages; } diff --git a/backend/src/ai-3d/providers/ai-3d-provider.interface.ts b/backend/src/ai-3d/providers/ai-3d-provider.interface.ts index 4eb80b9..5c4a97a 100644 --- a/backend/src/ai-3d/providers/ai-3d-provider.interface.ts +++ b/backend/src/ai-3d/providers/ai-3d-provider.interface.ts @@ -11,6 +11,14 @@ export interface AI3DGenerateResult { errorMessage?: string; // 错误信息 } +/** + * 多视图图片 + */ +export interface MultiViewImage { + viewType: string; // left, right, back, top, bottom, left_front, right_front + imageUrl: string; +} + /** * 模型生成配置选项 */ @@ -19,6 +27,8 @@ export interface AI3DGenerateOptions { generateType?: 'Normal' | 'LowPoly' | 'Geometry' | 'Sketch'; /** 模型面数：10000-1500000，默认500000 */ faceCount?: number; + /** 多视图图片（图生3D支持） */ + multiViewImages?: MultiViewImage[]; } /** diff --git a/backend/src/ai-3d/providers/hunyuan.provider.ts b/backend/src/ai-3d/providers/hunyuan.provider.ts index 193de72..145116d 100644 --- a/backend/src/ai-3d/providers/hunyuan.provider.ts +++ b/backend/src/ai-3d/providers/hunyuan.provider.ts @@ -85,10 +85,22 @@ export class HunyuanAI3DProvider implements AI3DProvider { payload.GenerateType = options.generateType; } - this.logger.log( - `提交图生3D任务: ${inputContent.substring(0, 50)}... ` + - `[类型: ${options?.generateType || 'Normal'}]`, - ); + // 多视图图片支持 + if (options?.multiViewImages && options.multiViewImages.length > 0) { + payload.MultiViewImages = options.multiViewImages.map((img) => ({ + ViewType: img.viewType, + ViewImageUrl: img.imageUrl, + })); + this.logger.log( + `提交图生3D任务（多视图）: ${options.multiViewImages.length} 张图片 ` + + `[类型: ${options?.generateType || 'Normal'}]`, + ); + } else { + this.logger.log( + `提交图生3D任务: ${inputContent.substring(0, 50)}... ` + + `[类型: ${options?.generateType || 'Normal'}]`, + ); + } } // 生成签名和请求头 diff --git a/frontend/src/views/workbench/ai-3d/Index.vue b/frontend/src/views/workbench/ai-3d/Index.vue index b5ad3cc..c6465bf 100644 --- a/frontend/src/views/workbench/ai-3d/Index.vue +++ b/frontend/src/views/workbench/ai-3d/Index.vue @@ -111,33 +111,124 @@
-
- - 参考图片 + +
+ 单张图片 + 多张图片 + + + + + + + + 图片上传建议 + +
-
- 上传参考图片，AI 将智能识别并生成 3D 模型 -
- - - - + + + + + +
@@ -154,6 +245,196 @@
+ + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ 预览 +
+ + 3D 预览 +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + +
@@ -375,6 +656,11 @@ import { FolderOutlined, SyncOutlined, EditOutlined, + PlusOutlined, + InfoCircleOutlined, + AppstoreOutlined, + QuestionCircleOutlined, + CheckCircleFilled, } from "@ant-design/icons-vue" import { createAI3DTask, @@ -428,6 +714,36 @@ const imageUrl = ref("") const generating = ref(false) const currentSampleIndex = ref(0) +// 图片模式：单张/多张 +const imageMode = ref<"single" | "multiple">("single") + +// 多图上传相关 +type MultiImageKey = + | "top" + | "left45" + | "front" + | "right45" + | "left" + | "right" + | "back" + | "bottom" +const multiImages = ref>>({}) +const multiViewModalVisible = ref(false) +const multiImageInput = ref(null) +const currentUploadKey = ref(null) + +// 视图名称映射 +const viewNameMap: Record = { + top: "顶图", + left45: "左45°图", + front: "正图", + right45: "右45°图", + left: "左图", + right: "右图", + back: "背图", + bottom: "底图", +} + // 模型设置 const generateType = ref<"Normal" | "LowPoly" | "Geometry" | "Sketch">("Normal") const faceCount = ref(500000) @@ -452,6 +768,11 @@ let resizeObserver: ResizeObserver | null = null // 计算属性 const currentSamples = computed(() => samplePrompts[currentSampleIndex.value]) +// 是否有多图上传 +const hasMultiImages = computed(() => { + return Object.keys(multiImages.value).length > 0 +}) + const canGenerate = computed(() => { // 首先检查用户是否有创建权限 if (!authStore.hasPermission("ai-3d:create")) { @@ -462,7 +783,13 @@ const canGenerate = computed(() => { if (inputType.value === "text") { return textContent.value.trim().length > 0 } else { - return imageUrl.value.length > 0 + // 图生3D模式 + if (imageMode.value === "single") { + return imageUrl.value.length > 0 + } else { + // 多图模式：至少需要正图 + return !!multiImages.value.front + } } }) @@ -537,14 +864,76 @@ const handleBeforeUpload = async (file: File) => { return false // 阻止默认上传行为 } +// 多图上传相关方法 +const openMultiViewModal = () => { + multiViewModalVisible.value = true +} + +const getViewName = (key: string) => { + return viewNameMap[key as MultiImageKey] || key +} + +const triggerUpload = (key: MultiImageKey) => { + currentUploadKey.value = key + multiImageInput.value?.click() +} + +const handleMultiImageUpload = async (event: Event) => { + const input = event.target as HTMLInputElement + const file = input.files?.[0] + if (!file || !currentUploadKey.value) return + + const isImage = file.type.startsWith("image/") + if (!isImage) { + message.error("只能上传图片文件") + input.value = "" + return + } + + const isLt10M = file.size / 1024 / 1024 < 10 + if (!isLt10M) { + message.error("图片大小不能超过 10MB") + input.value = "" + return + } + + try { + const result: any = await uploadFile(file) + const url = result.data?.url || result.url + if (url) { + multiImages.value[currentUploadKey.value] = url + message.success(`${getViewName(currentUploadKey.value)}上传成功`) + } else { + message.error("上传失败：无法获取图片地址") + } + } catch (error) { + console.error("上传失败:", error) + message.error("图片上传失败") + } + + input.value = "" + currentUploadKey.value = null +} + +const removeMultiImage = (key: string) => { + delete multiImages.value[key as MultiImageKey] +} + // 生成3D模型 const handleGenerate = async () => { if (!canGenerate.value) return generating.value = true try { - const content = - inputType.value === "text" ? textContent.value.trim() : imageUrl.value + let content: string + if (inputType.value === "text") { + content = textContent.value.trim() + } else if (imageMode.value === "single") { + content = imageUrl.value + } else { + // 多张图片模式：使用正图作为主要输入 + content = multiImages.value.front || "" + } // 构建请求参数 const params: any = { @@ -558,13 +947,28 @@ const handleGenerate = async () => { params.faceCount = faceCount.value } + // 多张图片模式：添加额外的视图图片 + if (inputType.value === "image" && imageMode.value === "multiple") { + const multiViewImages: Record = {} + Object.entries(multiImages.value).forEach(([key, url]) => { + if (url) { + multiViewImages[key] = url + } + }) + if (Object.keys(multiViewImages).length > 0) { + params.multiViewImages = multiViewImages + } + } + const task = await createAI3DTask(params) // 清空输入 if (inputType.value === "text") { textContent.value = "" - } else { + } else if (imageMode.value === "single") { imageUrl.value = "" + } else { + multiImages.value = {} } // 跳转到生成页面 @@ -604,7 +1008,7 @@ const startPolling = () => { pollingTimer = window.setInterval(async () => { const processingTasks = historyList.value.filter( - (t) => t.status === "pending" || t.status === "processing" + (t) => t.status === "pending" || t.status === "processing", ) if (processingTasks.length === 0) { @@ -774,7 +1178,7 @@ onMounted(async () => { // 检查是否有处理中的任务，有则开启轮询 const hasProcessing = historyList.value.some( - (t) => t.status === "pending" || t.status === "processing" + (t) => t.status === "pending" || t.status === "processing", ) if (hasProcessing) { startPolling() @@ -1249,6 +1653,392 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%); } } +// 单张/多张图片切换 +.image-mode-switch { + display: flex; + gap: 16px; + margin-bottom: 16px; + align-items: center; + + .mode-link { + font-size: 14px; + color: $text-muted; + cursor: pointer; + transition: all 0.3s; + position: relative; + + &:hover { + color: $primary-light; + } + + &.active { + color: $primary; + font-weight: 500; + + &::after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + right: 0; + height: 2px; + background: $primary; + border-radius: 1px; + } + } + } + + .image-tips-link { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: $text-muted; + cursor: pointer; + margin-left: auto; + transition: color 0.3s; + + &:hover { + color: $primary; + } + + .anticon { + font-size: 14px; + } + } +} + +// 图片上传建议弹框样式 +.image-tips-content { + .tips-desc { + font-size: 12px; + color: $text-secondary; + line-height: 1.6; + margin-bottom: 16px; + } + + .tips-example { + display: flex; + gap: 16px; + + img { + width: 100px; + height: 100px; + border-radius: 8px; + object-fit: cover; + flex-shrink: 0; + border: 1px solid rgba(0, 0, 0, 0.06); + } + + .tips-list { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + } + + .tip-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: $text; + + .tip-icon { + color: $success; + font-size: 14px; + } + } + } +} + +.tips-title { + font-weight: 600; + color: $text; +} + +// 多图容器 +.multi-image-container { + .thumbnail-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 12px; + background: rgba($surface-light, 0.6); + border: 2px dashed rgba($primary, 0.3); + border-radius: 12px; + min-height: 72px; + cursor: pointer; + transition: all 0.3s; + overflow-x: auto; + + &:hover { + border-color: $primary-light; + background: rgba($surface-light, 0.8); + } + + &::-webkit-scrollbar { + height: 4px; + } + + &::-webkit-scrollbar-track { + background: rgba($primary, 0.05); + border-radius: 2px; + } + + &::-webkit-scrollbar-thumb { + background: rgba($primary, 0.3); + border-radius: 2px; + } + } + + .thumbnail-list { + display: flex; + gap: 8px; + flex-shrink: 0; + } + + .thumbnail-item { + position: relative; + width: 48px; + height: 48px; + border-radius: 8px; + overflow: hidden; + flex-shrink: 0; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .thumbnail-delete { + position: absolute; + top: 2px; + right: 2px; + width: 18px; + height: 18px; + background: rgba(0, 0, 0, 0.6); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 10px; + cursor: pointer; + opacity: 0; + transition: opacity 0.2s; + } + + &:hover .thumbnail-delete { + opacity: 1; + } + } + + .thumbnail-add { + width: 48px; + height: 48px; + border: 2px dashed rgba($primary, 0.4); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: $primary; + font-size: 20px; + flex-shrink: 0; + transition: all 0.3s; + + &:hover { + border-color: $primary; + background: rgba($primary, 0.1); + } + } + + .upload-tip { + display: flex; + align-items: center; + gap: 6px; + margin-top: 12px; + font-size: 12px; + color: $text-muted; + + .anticon { + color: $primary-light; + } + } +} + +// 多视图弹框 +.multi-view-modal { + :deep(.ant-modal-content) { + background: $surface; + border-radius: 16px; + } + + :deep(.ant-modal-header) { + background: transparent; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + padding: 16px 24px; + + .ant-modal-title { + font-size: 16px; + font-weight: 600; + color: $text; + } + } + + :deep(.ant-modal-body) { + padding: 24px; + } + + :deep(.ant-modal-close) { + color: $text-muted; + } +} + +.multi-view-grid { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.view-row { + display: flex; + justify-content: center; + gap: 12px; + + &.middle-row, + &.center-row { + width: 100%; + } +} + +.view-item { + width: 100px; + height: 100px; + border: 2px dashed rgba($primary, 0.3); + border-radius: 12px; + cursor: pointer; + transition: all 0.3s; + position: relative; + overflow: hidden; + background: rgba($surface-light, 0.5); + + &:hover { + border-color: $primary; + background: rgba($primary, 0.05); + } + + &.required { + border-color: rgba($primary, 0.5); + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .view-placeholder { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + color: $text-muted; + + .anticon { + font-size: 24px; + color: $primary-light; + } + + span { + font-size: 11px; + text-align: center; + } + + .required-mark { + color: #ff4d4f; + } + } + + .view-delete { + position: absolute; + top: 4px; + right: 4px; + width: 22px; + height: 22px; + background: rgba(0, 0, 0, 0.6); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 12px; + cursor: pointer; + opacity: 0; + transition: opacity 0.2s; + + &:hover { + background: rgba(255, 77, 79, 0.8); + } + } + + &:hover .view-delete { + opacity: 1; + } +} + +.view-center { + width: 120px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + + .center-preview { + width: 100%; + height: 100%; + border: 2px solid rgba($primary, 0.2); + border-radius: 12px; + overflow: hidden; + background: linear-gradient( + 135deg, + rgba($primary, 0.05) 0%, + rgba($primary, 0.1) 100% + ); + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + + .center-placeholder { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + color: $text-muted; + + .anticon { + font-size: 28px; + color: $primary-light; + } + + span { + font-size: 12px; + } + } + } +} + .image-upload { :deep(.ant-upload-drag) { background: rgba($surface-light, 0.6) !important; @@ -1470,7 +2260,11 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%); background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); } &.gradient-2 { - background: linear-gradient(135deg, $primary-dark 0%, darken($primary-dark, 10%) 100%); + background: linear-gradient( + 135deg, + $primary-dark 0%, + darken($primary-dark, 10%) 100% + ); } &.gradient-3 { background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); @@ -1960,3 +2754,67 @@ $gradient-secondary: linear-gradient(135deg, $primary-light 0%, $primary 100%); } } + + +