合并画布代码
This commit is contained in:
@@ -31,7 +31,12 @@
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||
</div>
|
||||
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>Selection Function</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
|
||||
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
</div>
|
||||
@@ -45,10 +50,10 @@
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="productimgSimilarity">
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
|
||||
<!-- <a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
@afterChange="setSimilarity"
|
||||
@@ -58,10 +63,10 @@
|
||||
</a-slider> -->
|
||||
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="productimgBrightenValue"
|
||||
:tooltipVisible="false"
|
||||
@@ -92,7 +97,22 @@
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_generate_btn input_border">
|
||||
<div class="generage_btn_box" style="margin-left: auto;">
|
||||
<div class="generage_btn started_btn" v-show="!productimgIsProductimg">
|
||||
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
|
||||
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" v-show="speedState">
|
||||
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
|
||||
<i class="fi fi-br-loading" ></i>
|
||||
</div>
|
||||
<div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="productImg_content_item_generate_btn input_border">
|
||||
<div class="input_box">
|
||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||
{{ $t('Generate.Generate') }}
|
||||
@@ -104,7 +124,7 @@
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
||||
@@ -189,6 +209,55 @@ export default defineComponent({
|
||||
productimgRelightDirection:props.productData.RelightDirection,
|
||||
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
||||
})
|
||||
let speed = reactive({
|
||||
speedList:[
|
||||
] as any,
|
||||
speedTypeList:{
|
||||
poseTransfer:[
|
||||
{
|
||||
title:'Generate high-quality images',
|
||||
label:'High',
|
||||
value:'',
|
||||
},{
|
||||
title:'Generate using Wanxiang',
|
||||
label:'WX',
|
||||
value:'wx',
|
||||
},
|
||||
],
|
||||
toPorductImg:[
|
||||
{
|
||||
title:'Generate with high quality',
|
||||
label:'High',
|
||||
relightLabel:'Relight',
|
||||
value:'',
|
||||
},{
|
||||
title:'',
|
||||
label:'FLUX',
|
||||
relightLabel:'Edit',
|
||||
value:'flux',
|
||||
},
|
||||
]
|
||||
},
|
||||
speedState:false,
|
||||
speedData:{
|
||||
title:'Generate high-quality images',
|
||||
relightLabel:'Relight',
|
||||
label:'High',
|
||||
value:'',
|
||||
},
|
||||
})
|
||||
const openSpeed = ()=>{
|
||||
speed.speedState = !speed.speedState
|
||||
if(speed.speedState){
|
||||
document.addEventListener('click',openSpeed)
|
||||
}else{
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
}
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
}
|
||||
let scaleImage: any = ref(false);
|
||||
let isShowMark = ref(false)
|
||||
let loadingShow = ref(false)
|
||||
@@ -224,9 +293,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
productimg.productimgIsProductimg = true
|
||||
remPrductimgTime = setTimeout(()=>{
|
||||
productimg.productimgRemProductimg = true
|
||||
},10000)
|
||||
// remPrductimgTime = setTimeout(()=>{
|
||||
// productimg.productimgRemProductimg = true
|
||||
// },10000)
|
||||
let url = Https.httpUrls.relight
|
||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||
url = Https.httpUrls.toProduct
|
||||
@@ -234,6 +303,7 @@ export default defineComponent({
|
||||
isShowMark.value = true
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
productimg.productimgRemProductimg = true
|
||||
isShowMark.value = false
|
||||
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||
let arr:any = []
|
||||
@@ -381,6 +451,9 @@ export default defineComponent({
|
||||
return {
|
||||
t,
|
||||
...toRefs(productimg),
|
||||
...toRefs(speed),
|
||||
openSpeed,
|
||||
setSpeed,
|
||||
scaleImage,
|
||||
isShowMark,
|
||||
loadingShow,
|
||||
@@ -427,6 +500,12 @@ export default defineComponent({
|
||||
this.scaleImageIndex = index
|
||||
if(dialogueIndex)this.robotAssits = dialogueIndex
|
||||
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
|
||||
if(this.scaleImageList[index].resultType == "PoseTransfer"){
|
||||
this.speedList = this.speedTypeList.poseTransfer
|
||||
}else{
|
||||
this.speedList = this.speedTypeList.toPorductImg
|
||||
}
|
||||
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
|
||||
document.addEventListener('keydown',this.setKeydown)
|
||||
},
|
||||
cancelDsign(){
|
||||
|
||||
Reference in New Issue
Block a user