略略略

src/api/depth-canvas.ts

@@ -39,3 +39,16 @@ export const deleteDepthCanvas = (id: string) => {
 		loading: true,
 	})
 }
+
+/**
+ * 获取分隔后图片
+ * @param data 分隔参数数据
+ * @returns 分隔后图片数据
+ */
+export const getSegAnythingImage = (data: object) => {
+	return request({
+		url: `/api/python/segAnything`,
+		method: 'post',
+		data,
+	})
+}

src/api/user.ts

@@ -133,3 +133,18 @@ export const getAvatarLimit = () => {
 	})
 }
 
+/**
+ * 获取用户风格图片列表
+ * @param params 获取用户风格图片列表的参数	
+ * @param params.pageNum 页码
+ * @param params.pageSize 每页数量
+ * @returns 用户风格图片列表
+*/
+export const GetUserStyleImages = (params) => {
+	return request({
+		url: '/api/user/style/images',
+		method: 'get',
+		params,
+		loading: true,
+	})
+}

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -105,6 +105,7 @@
 			const json = canvasManager.processCanvasDisUrlJSON(canvasData)
 			await canvasManager.loadJSON(json)
 		}
+		layerManager.setActiveFirstLayer()
 		globalStore.setLoading(false)
 
 		stateManager.onMounted()

src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts

@@ -1,6 +1,8 @@
 import { fabric } from 'fabric-with-all'
 import { OperationType } from '../tools/layerHelper'
 import { getObjectAlphaToCanvas, traceImageContour, cloneObjects } from '../tools/canvasMethod'
+import { getSegAnythingImage } from '@/api/depth-canvas'
+import { useGlobalStore, useUserInfoStore } from '@/stores'
 
 /** 智能框选工具管理器 */
 export class AISelectboxToolManager {
@@ -10,6 +12,7 @@ export class AISelectboxToolManager {
 	layerManager: any
 	toolManager: any
 
+	targetObject: any
 	isDragging: boolean = false
 	startX: number = 0
 	startY: number = 0
@@ -54,6 +57,19 @@ export class AISelectboxToolManager {
 		this.clear();
 		this.createDemoObject()
 		this.tcanvas = null;
+		this.targetObject = null;
+		this.canvasManager.getObjects().forEach((obj) => {
+			if (obj?.info?.isOriginal) {
+				this.targetObject = obj.toObject();
+			}
+		})
+		// const image = this.layerManager.getActiveLayer()
+		// if (image && image.info.isAiSelect) {
+		// 	this.targetObject = image;
+		// } else {
+		// 	this.targetObject = null;
+		// }
+
 	}
 	clear() {
 		console.log("清除智能框选工具")
@@ -121,6 +137,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理绘制图像
 	async handleDrawImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		tcanvas.add(object)
 		tcanvas.renderAll();
@@ -129,6 +146,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理图像删除
 	async handleRemoveImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		const rcanvas = await this.createStaticCanvas(object)
 		const tempCanvas = rcanvas.toCanvasElement();
@@ -147,6 +165,7 @@ export class AISelectboxToolManager {
 	}
 
 	mouseDownEvent(e) {
+		if (!this.targetObject) return;
 		const tool = this.toolManager.currentTool.value
 		const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE]
 		if (!tools.includes(tool)) return;
@@ -157,6 +176,7 @@ export class AISelectboxToolManager {
 		this.createIndicatorObject()
 	}
 	mouseMoveEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		var width = e.absolutePointer.x - this.startX
 		var height = e.absolutePointer.y - this.startY
@@ -173,7 +193,8 @@ export class AISelectboxToolManager {
 		this.indicatorObject.set({ width, height, left, top })
 		this.canvasManager.canvas.renderAll()
 	}
-	mouseUpEvent(e) {
+	async mouseUpEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		this.isDragging = false;
 		const object = this.indicatorObject.toJSON("evented")
@@ -182,20 +203,32 @@ export class AISelectboxToolManager {
 		this.clearIndicatorObject()
 		this.canvasManager.canvas.renderAll()
 
-		const rect = new fabric.Rect({
+		useGlobalStore().setLoading(true)
-			left: object.left,
+		const x1 = Math.round(object.left)
-			top: object.top,
+		const y1 = Math.round(object.top)
-			width: object.width,
+		const x2 = Math.round(object.left + object.width)
-			height: object.height,
+		const y2 = Math.round(object.top + object.height)
-			fill: '#f00',
+		const data = {
-			strokeWidth: 0,
+			type: "box",
-		})
+			box: [x1, y1, x2, y2],
+		}
+		const url = await this.getSegAnythingImage(data)
+		const image = await this.loadImageToObject(url)
+		// const rect = new fabric.Rect({
+		// 	left: object.left,
+		// 	top: object.top,
+		// 	width: object.width,
+		// 	height: object.height,
+		// 	fill: '#f00',
+		// 	strokeWidth: 0,
+		// })
 		const currentTool = this.toolManager.currentTool.value
 		if (currentTool === OperationType.AISELECT_ADD) {
-			this.handleDrawImage(rect)
+			await this.handleDrawImage(image)
 		} else if (currentTool === OperationType.AISELECT_REMOVE) {
-			this.handleRemoveImage(rect)
+			await this.handleRemoveImage(image)
 		}
+		useGlobalStore().setLoading(false)
 	}
 
 
@@ -218,6 +251,7 @@ export class AISelectboxToolManager {
 		absolutePositioned: true,
 	};
 	async createSelectbox() {
+		if (!this.targetObject) return;
 		if (!this.demoObject) return
 		const fobject = this.demoObject
 		this.clearDemoObject()
@@ -263,7 +297,26 @@ export class AISelectboxToolManager {
 		this.toolManager.setTool(OperationType.SELECT)
 	}
 
-
+	/** 获取分隔后图片 */
+	async getSegAnythingImage(obj) {
+		return new Promise((resolve, reject) => {
+			if (!this.targetObject) return;
+			const user_id = useUserInfoStore().state.userInfo.id;
+			const image_path = this.targetObject.src;
+			const data = {
+				image_path,
+				user_id,
+				...obj,
+			}
+			getSegAnythingImage(data).then((res) => {
+				console.log(res)
+				resolve(res)
+			}).catch((error) => {
+				console.error(error);
+				useGlobalStore().setLoading(false)
+			})
+		});
+	}
 
 	dispose() {
 		this.clear()

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -92,6 +92,7 @@ export class CanvasManager {
 							id: createId("image"),
 							name: "图片图层",
 							lock: true,
+							isOriginal: true,
 						}
 					})
 					image = img

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -31,6 +31,10 @@ export class LayerManager {
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
+	setActiveFirstLayer() {
+		this.setActiveID(this.layers.value[0]?.info?.id || "")
+	}
+
 	getActiveLayer() {
 		return this.getLayerById(this.activeID.value)
 	}

src/components/Canvas/DepthCanvas/manager/StateManager.ts

@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-import { ElMessageBox } from 'element-plus'
+import { OperationType } from '../tools/layerHelper'
 import i18n from '@/lang'
 const t = i18n.global.t
 
@@ -95,6 +95,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:undo', state)
 			this.running.value = false
 		})
@@ -108,6 +109,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:redo', state)
 			this.running.value = false
 		})

src/views/home/test.vue

@@ -11,12 +11,12 @@
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
 	const url =
-		'https://www.minio-api.aida.com.hk/fida-test/furniture/sketches/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260320%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260320T020948Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7dc192bac887bce7b02c99d7037c08d9d684310f00add9b0e63b74b36ee63d37'
+		'https://minio-api.aida.com.hk/fida-public-bucket/furniture/sketches/e3082a38-55d2-4313-ad53-55aad715cf67.png'
 	const openCanvas = () => {
 		myEvent.emit('openFlowCanvas', { url })
 	}
 	const openDepthCanvas = () => {
-		myEvent.emit('openDepthCanvas', { url, canvasId: '69c34539ce996b52f07e625f' })
+		myEvent.emit('openDepthCanvas', { url, canvasId: '' })
 	}
 	onMounted(() => {
 		if (route.query.depth) {

src/views/nuic/index.vue

@@ -62,6 +62,7 @@
 				}
 			})
 		} else {
+			data.vibe = JSON.parse(data.vibe)
 			onSubmit(data)
 		}
 	}

src/views/nuic/nuic-2.vue

@@ -3,9 +3,9 @@
 		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
 		<div class="list">
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
-				<img :src="v.url" draggable="false" />
+				<img :src="v.imageUrl" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>{{ v.title }}</span>
+					<span>{{ v.styleName }}</span>
 				</div>
 			</div>
 		</div>
@@ -22,28 +22,35 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { GetUserStyleImages } from '@/api/user'
 	const router = useRouter()
 	const emit = defineEmits(['next'])
-	const list = ref([
+	const list = ref([])
-		{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
+	const pageSize = ref(8)
-		{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
+	const pageNum = ref(1)
-		{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
+	const totalPages = ref(1)
-		{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
-		{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
-		{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
-		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
-		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
-	])
 	const onNext = () => {
 		const data = {
-			vibe: list.value
+			vibe: JSON.stringify(list.value.filter((v) => v.active).map((v) => v.id))
-				.filter((v) => v.active)
-				.map((v) => v.id)
-				.join(',')
 		}
 		emit('next', data)
 	}
-	const onLoadMore = () => {}
+	const onLoadMore = () => {
+		GetUserStyleImages({
+			pageNum: pageNum.value,
+			pageSize: pageSize.value
+		}).then((res) => {
+			if (!res) return
+			list.value = res.images.map((v) => ({
+				...v,
+				active: false
+			}))
+			totalPages.value = res.totalPages
+			pageNum.value++
+			if (pageNum.value > totalPages.value) pageNum.value = 1
+		})
+	}
+	onLoadMore()
 </script>
 
 <style lang="less" scoped>