合并画布代码

src/views/HomeView/library.vue

@@ -398,9 +398,9 @@
 													>
 													</a-upload>
 												</i>
-												<div :title="$t('Generate.style')">
+												<!-- <div :title="$t('Generate.style')">
 													<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
-												</div>
+												</div> -->
 											</div>
 
 											<textarea 
@@ -412,30 +412,35 @@
 												@click.stop=""
 												v-model="captionGeneration"
 											></textarea>
-											<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
-												<div class="generage_btn started_btn" style="padding: 1.5rem 2rem;">
-													
-													<div @click.stop="getgenerate">
-														<span v-if="
-														selectCode == 'Moodboard' || 
-														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
-														(selectCode == 'Sketchboard' && scene?.value == 'generate')">{{ speedData.label }}</span>
-														<span v-else>{{ $t('LibraryPage.Generate') }}</span>
+											
+											<div class="generage_btn_box">
+												<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
+													<div class="generage_btn started_btn">
+														<div @click.stop="getgenerate" style="display: flex;">
+															<i v-if="
+															selectCode == 'Moodboard' || 
+															(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
+															(selectCode == 'Sketchboard')" class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;"></i>
+															<span v-else>{{ $t('LibraryPage.Generate') }}</span>
+														</div>
+														<div class="icon iconfont icon-xiala" v-show="
+															selectCode == 'Moodboard' || 
+															(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
+															(selectCode == 'Sketchboard')" :class="{active:speedState}" @click.stop="openSpeed"></div>
+													</div>
+													<div class="content" v-if="scene?.value != 'extract'" v-show="speedState">
+														<div v-for="item in speedList" :class="{active:item.value == speedData.value}" v-show="(selectCode == 'Moodboard' && item?.value != 'flux') || (selectCode == 'Sketchboard' && item?.value != 'flux') || selectCode == 'Printboard'" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+													</div>
+													<div class="content" v-else v-show="speedState">
+														<div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 													</div>
-													<div class="icon iconfont icon-xiala" v-show="
-														selectCode == 'Moodboard' || 
-														(selectCode == 'Printboard' && scene?.value == 'Pattern') || 
-														(selectCode == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
 												</div>
-												<div class="content" v-show="speedState">
-													<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+												<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
+													<i class="fi fi-br-loading"></i>
+												</div>
+												<div v-show="remGenerate[selectCode]" @click.stop="removeGenerate" class="generage_btn started_btn">
+													{{$t('Generate.Close')}}
 												</div>
-											</div>
-											<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
-												<i class="fi fi-br-loading"></i>
-											</div>
-											<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
-												{{$t('Generate.Close')}}
 											</div>
 											<span class="inputShowText" ref="inputShowText"></span>
 										</div>
@@ -450,13 +455,15 @@
                                 </div>
 
                                 <div class="content_body_table scroll_style">
-                                    <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id"  :class="[img.status != 'Success'?'hideEvents':'']"  v-show="img.status == 'Success'"
+                                    <div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id"  :class="[img.status != 'Success'?'hideEvents':'']"
 									:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)"  @dragover.prevent  @drop="drop($event,index)">
                                         <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
 											<!-- <img v-show="img.status != 'Success'"  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
-											<img  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
-											
-											<div class="img_item_hover">
+											<img v-if="img?.imgUrl" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
+											<div v-else class="loading">
+												<a-spin size="large" ></a-spin>
+											</div>
+											<div class="img_item_hover" v-show="img?.imgUrl">
                                                 <div class="img_operate_content left">
 													<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
                                                         <span class="icon iconfont icon-shanchu operate_icon"></span>
@@ -472,7 +479,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
+											<sketchCategory  v-show="selectCode == 'Sketchboard' && img?.imgUrl" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
                                         </div>
                                         <div class="content_img_name"></div>
                                     </div>
@@ -711,6 +718,17 @@ export default defineComponent({
 					value:'wx',
 				},
 			],
+			extractList:[
+				{
+					title:'This method may produce slight discrepancies between the extracted line art and the original image.',
+					label:'High',
+					value:'',
+				},{
+					title:'Note: The extracted line art might have minor variations from the original.',
+					label:'FLUX',
+					value:'flux',
+				},
+			],
 			speedState:false,
 			speedData:{
 				title:'Picture quality is average, speed is fast',
@@ -728,7 +746,12 @@ export default defineComponent({
 		}
 		const setSpeed = (item:any)=>{
 			speed.speedData = item
+			speed.speedState = false
 		}
+		watch(()=>scene,(newVal,oldVal)=>{
+			console.log(newVal)
+			
+		})
 		let getSex = () =>{
 			sex.value = store.state.UserHabit.sex.value[0].value
 			getPosition()
@@ -908,6 +931,11 @@ export default defineComponent({
 				}else{
 					this.isSloganHint = ''
 				}
+				if(newVal.value == 'extract'){
+					this.speedData = this.extractList[0]
+				}else{
+					this.speedData = this.speedList[0]
+				}
 			}
 		},
 		'$route.query':{
@@ -1112,7 +1140,6 @@ export default defineComponent({
 			this.isShowMark = true
 			Https.axiosPost(Https.httpUrls.brandDNAPage,data).then(
                 (rv: any) => {
-					console.log(rv);
 					this.brandDNAList = rv.content
 					this.total = rv.total
 					this.isShowMark = false
@@ -1564,10 +1591,7 @@ export default defineComponent({
 			})
 		},
 		getgenerate(){
-			if(this.scene?.value == 'extract'){
-				this.imageToSketch()
-				return
-			}
+			
 			this.isInputFocus = false
 			this.isTextarea = false
 			let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
@@ -1576,60 +1600,77 @@ export default defineComponent({
 			}
 			clearInterval(this.remGenerateTime[selectCodeStr])
 			this.remGenerate[selectCodeStr] = false
-			
-			let level2Type = ''
-			let collectionElementId = ''
-			let base64 = ''
-			if(this.selectGenerateList?.[0]){
-				collectionElementId = this.selectGenerateList[0].id
-				if(this.selectGenerateList[0].base64){
-					base64 = this.selectGenerateList[0].imgUrl
+			let httpsUrl = Https.httpUrls.generatePrepare
+			let data:any
+			if(this.scene?.value == 'extract'){
+				httpsUrl = Https.httpUrls.imageToSketch
+				if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+				data = {
+					"elementId": this.selectGenerateList[0].id,
+					gender:this.sex,
+					"style": this.printModel.value,
+					"styleImageId": this.printModel.id?this.printModel.id:''
 				}
+			}else{
+				let level2Type = ''
+				let collectionElementId = ''
+				let base64 = ''
+				if(this.selectGenerateList?.[0]){
+					collectionElementId = this.selectGenerateList[0].id
+					if(this.selectGenerateList[0].base64){
+						base64 = this.selectGenerateList[0].imgUrl
+					}
+				}
+				
+				let sloganText = ''
+				let arr = ["Painting Style","Illustration Style","Real Style"]
+				sloganText = this.captionGeneration
+				if(this.selectCode == "Sketchboard"){
+					level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
+					if(this.workspace.styleName){
+						sloganText = `${this.workspace.styleName},${sloganText}`
+					}
+				}else if(this.selectCode == "Printboard"){
+					level2Type = this.scene?.value
+					if(level2Type == 'Slogan' && this.captionGeneration == ''){
+						sloganText = this.isSloganHint
+					}else if(level2Type == 'Pattern'){
+						sloganText = `${arr[this.printModel.num-1]},${sloganText}`
+					}
+					if(!base64 && level2Type == 'Slogan'){
+						message.info(this.t('Generate.jsContent10'));
+						return
+					}
+				}
+				data = {
+					generateType:'text',
+					designType:'collection',
+					collectionElementId:collectionElementId,
+					level1Type:selectCodeStr,
+					level2Type:level2Type,
+					userId:(this?.userDetail as any).userId,
+					isTestUser:this.driver__.driver?false:this.isTest,
+					text:sloganText,
+					seed:this.searchPictureSeed,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					modelName:this.speedData.value,//为1就是Print
+					gender:selectCodeStr == 'Sketchboard'?this.sex:'',
+					sloganBase64:base64,
+				}
+				this.generateLevel2[selectCodeStr] = data.level2Type
 			}
 			
-			let sloganText = ''
-			let arr = ["Painting Style","Illustration Style","Real Style"]
-			sloganText = this.captionGeneration
-			if(this.selectCode == "Sketchboard"){
-				level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
-				if(this.workspace.styleName){
-					sloganText = `${this.workspace.styleName},${sloganText}`
-				}
-			}else if(this.selectCode == "Printboard"){
-				level2Type = this.scene?.value
-				if(level2Type == 'Slogan' && this.captionGeneration == ''){
-					sloganText = this.isSloganHint
-				}else if(level2Type == 'Pattern'){
-					sloganText = `${arr[this.printModel.num-1]},${sloganText}`
-				}
-				if(!base64 && level2Type == 'Slogan'){
-					message.info(this.t('Generate.jsContent10'));
-					return
-				}
-			}
-			let data = {
-				generateType:'text',
-				designType:'collection',
-				collectionElementId:collectionElementId,
-				level1Type:selectCodeStr,
-				level2Type:level2Type,
-				userId:(this?.userDetail as any).userId,
-				isTestUser:this.driver__.driver?false:this.isTest,
-				text:sloganText,
-				seed:this.searchPictureSeed,
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				modelName:this.speedData.value,//为1就是Print
-				gender:selectCodeStr == 'Sketchboard'?this.sex:'',
-				sloganBase64:base64,
-			}
-			this.generateLevel2[selectCodeStr] = data.level2Type
 			this.isGenerate[selectCodeStr] = true
 			this.isTextarea = false
-			this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
-				this.remGenerate[selectCodeStr] = true
-			},10000)
-			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
+			// this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
+			// },10000)
+			Https.axiosPost(httpsUrl, data).then(
                 (rv) => {
+					if(this.scene?.value == 'extract'){
+						rv = {
+							uniqueId:[rv]
+						}
+					}
 					if(data.isTestUser){
 						let str:any
 						if(selectCodeStr == 'Moodboard'){
@@ -1648,8 +1689,12 @@ export default defineComponent({
 						// 	return
 						// }
 					}
+					let rvData = rv.uniqueId.map((item:any)=>{
+						return{taskId:item,status:''}
+					})
+					this.remGenerate[selectCodeStr] = true//出现取消按钮
+					this.generateList[selectCodeStr].unshift(...rvData)
 					this.setGenerate(selectCodeStr,rv.uniqueId)
-					
                 }
             ).catch(res=>{
 				// this.isShowMark = false
@@ -1701,11 +1746,15 @@ export default defineComponent({
 											element.category = itemCategory?.name
 										}
 									});
-									// element.categoryValue = this.scene?.name
-									// element.category = this.scene?.value
-									this.generateList[str].unshift(element)
+									// this.generateList[str].unshift(element)
+									let index = this.generateList[str].findIndex((item:any)=>item.taskId == element.taskId)
+									this.generateList[str][index] = element
 									data = data.filter((item:any) => item !== element.taskId);
 
+								}else if(element.status == 'Fail' || element.status == 'Invalid'){
+									data = data.filter((item:any) => item !== element.taskId);
+									this.generateList = this.generateList.filter((item:any) => item.taskId !== element.taskId);
+									message.info(this.t('Generate.everyTimeEffectPoor'));
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
@@ -1750,6 +1799,9 @@ export default defineComponent({
 				}
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
+						this.generateProceedList.forEach((generateProceedListItem:any)=>{
+							this.generateList[this.selectCode] = this.generateList[this.selectCode].filter((item:any) => generateProceedListItem.taskId!== item.taskId);
+						})
 						this.generateProceedList = []
 					}
 				).catch(res=>{
@@ -2257,7 +2309,13 @@ export default defineComponent({
                                             // width: 100%;
                                             // height: 100%;
                                         }
-
+										.loading{
+											width: 100%;
+											height: 100%;
+											display: flex;
+											align-items: center;
+											justify-content: center;
+										}
                                         &:hover .img_item_hover{
                                             // display: block;
 											opacity: 1;