aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并画布代码

Browse Source
This commit is contained in:
X1627315083
2025-06-18 11:05:23 +08:00
parent 903c0ebdf5
commit 9c7fae36eb
118 changed files with 23633 additions and 8201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/component/HomePage/Generate.vue
View File

@@ -39,16 +39,6 @@
</div>
</div>
</div>
<!-- <input
class="search_input"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
@paste="onPaste"
/> -->
<textarea
class="textarea"
@input="ifMaximumLength"
@@ -82,7 +72,7 @@
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
</div>
<div class="input_box_btnBox sketch" v-else>
<div class="input_box_btnBox sketch" v-else >
<div class="upload_item" v-show="sketchboardList.length > 0">
<div
class="upload_file_item"
@@ -125,9 +115,9 @@
>
</a-upload>
</i>
<div :title="$t('Generate.style')">
<!-- <div :title="$t('Generate.style')">
<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
</div> -->
</div>
<textarea
v-show="isTextarea"
@@ -141,18 +131,19 @@
<div class="generage_btn_box">
<div class="generage_btn started_btn" v-show="!isGenerate">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
<div class="icon iconfont icon-xiala" v-show="
type_.type2 == 'Moodboard' ||
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :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 class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState && scene?.value != 'extract'">
<div v-for="item in speedList" v-show="(type_.type2 == 'Moodboard' && item?.value != 'flux') || (type_.type2 == 'Sketchboard' && item?.value != 'flux') || type_.type2 == 'Printboard'" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
<div class="content" v-show="speedState && scene?.value == 'extract'">
<div v-for="item in extractList" :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="isGenerate && !remGenerate">
<i class="fi fi-br-loading" ></i>
</div>
<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
<div class="generage_btn started_btn" v-show="remGenerate" @click.stop="removeGenerate">
{{$t('Generate.Close')}}
</div>
@@ -182,19 +173,22 @@
@click="generageAdd(item)"
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
<img v-if="item?.imgUrl" v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div v-else class="loading">
<a-spin size="large" ></a-spin>
</div>
<sketchCategory v-show="item?.imgUrl" v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
<div
v-show="item?.imgUrl"
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'',]"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-if="!item.like" class="fi fi-rr-heart" @click="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div>
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<div v-show="item?.imgUrl" class="delete_like_file_block left">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<div v-show="item?.imgUrl" class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
@@ -294,6 +288,21 @@ export default defineComponent({
title:'Generate using Wanxiang',
label:'WX',
value:'wx',
},{
title:'',
label:'FLUX',
value:'flux',
},
],
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,
@@ -311,8 +320,16 @@ export default defineComponent({
document.removeEventListener('click',openSpeed)
}
}
watch(()=>props.scene,(newVal,oldVal)=>{
if(newVal.value == 'extract'){
speed.speedData = speed.extractList[0]
}else{
speed.speedData = speed.speedList[0]
}
})
const setSpeed = (item:any)=>{
speed.speedData = item
speed.speedState = false
}
return {
userDetail,
@@ -471,6 +488,7 @@ export default defineComponent({
},
methods: {
generageAdd(data: any) {
if(!data?.imgUrl)return
data.type_ = this.type_;
data.type_.type1 = data.designType?data.designType:this.type_.type1
data.resData = JSON.parse(JSON.stringify(data))
@@ -487,12 +505,6 @@ export default defineComponent({
data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
this.store.commit("addGenerateMaterialFils", data);
// console.log(this.fileList);
let moodboard = this.store.state.UploadFilesModule.moodboardGenerateFiles
let sketch = this.store.state.UploadFilesModule.sketchGenerateFiles
let print = this.store.state.UploadFilesModule.printGenerateFiles
if((moodboard.length >= 2 || print.length >= 2 || sketch.length >= 2) && this.driver__.driver){
driverObj__.moveNext()
}
},
beforeUpload(file: any) {
const isJpgOrPng =
@@ -543,94 +555,109 @@ export default defineComponent({
})
},
getgenerate(){
if(this.scene?.value == 'extract'){
this.imageToSketch()
return
}
// if(this.scene?.value == 'extract'){
// this.imageToSketch()
// return
// }
this.isTextarea = false
this.isInputFocus = false
if(this.isGenerate)return
clearInterval(this.remGenerateTime)
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 250){
message.info(
this.t('Generate.jsContent4')
);
return
let httpsUrl = Https.httpUrls.generatePrepare
let data
if(this.scene?.value == 'extract'){
httpsUrl = Https.httpUrls.imageToSketch
if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
data = {
"elementId": this.sketchboardList[0].id,
gender:this.workspace.sex,
"style": this.printModel.value,
"styleImageId": this.printModel?.id?this.printModel?.id:'',
modelName:this.speedData.value,//为1就是Print
}
}else{
if(this.sketchboardList?.[0]?.imgUrl){
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
if(arr > 250){
message.info(
this.t('Generate.jsContent4')
);
return
}
}else{
message.info(
this.t('Generate.jsContent5')
);
return
if(this.sketchboardList?.[0]?.imgUrl){
}else{
message.info(
this.t('Generate.jsContent5')
);
return
}
}
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.sketchboardList?.[0]){
collectionElementId = this.sketchboardList[0].id
if(this.sketchboardList[0].base64){
base64 = this.sketchboardList[0].imgUrl
}
}
let sloganText = ''
sloganText = this.searchPictureName
if(this.upload.level1Type == "Sketchboard"){
level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
if(this.workspace.styleName){
sloganText = `${this.workspace.styleName},${sloganText}`
}
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.searchPictureName == ''){
sloganText = this.isSloganHint
}else if(level2Type == 'Pattern'){
sloganText = `${this.printModel.value},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info(this.t('Generate.jsContent10'));
return
}
}
data = {
generateType:'text',
designType:'collection',
collectionElementId:collectionElementId,
level1Type:this.upload.level1Type,
level2Type:level2Type,
text:sloganText,
seed:this.searchPictureSeed,
userId:this?.userDetail?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
modelName:this.speedData.value,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
gender:this.workspace.sex,
sloganBase64:base64,
ageGroup:this.workspace.ageGroup
}
this.generateLevel2Type = data.level2Type
}
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.sketchboardList?.[0]){
collectionElementId = this.sketchboardList[0].id
if(this.sketchboardList[0].base64){
base64 = this.sketchboardList[0].imgUrl
}
}
let sloganText = ''
sloganText = this.searchPictureName
if(this.upload.level1Type == "Sketchboard"){
level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
if(this.workspace.styleName){
sloganText = `${this.workspace.styleName},${sloganText}`
}
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.searchPictureName == ''){
sloganText = this.isSloganHint
}else if(level2Type == 'Pattern'){
sloganText = `${this.printModel.value},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info(this.t('Generate.jsContent10'));
return
}
}
let data = {
generateType:'text',
designType:'collection',
collectionElementId:collectionElementId,
level1Type:this.upload.level1Type,
level2Type:level2Type,
text:sloganText,
seed:this.searchPictureSeed,
userId:this?.userDetail?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
modelName:this.speedData.value,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
gender:this.workspace.sex,
sloganBase64:base64,
}
this.generateLevel2Type = data.level2Type
this.isGenerate = true
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
// this.remGenerateTime = setTimeout(()=>{
// },10000)
Https.axiosPost(httpsUrl, data).then(
(rv) => {
// if(data.isTestUser){
// if(rv.leftUsageCount >= 1){
// message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
// }else if(rv.leftUsageCount == 0){
// message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
// this.isGenerate = false
// return
// }
// }
if(this.scene?.value == 'extract'){
rv = {
uniqueId:[rv]
}
}
let rvData = rv.uniqueId.map((item:any)=>{
return{taskId:item,status:''}
})
this.remGenerate = true//出现取消按钮
this.fileList.unshift(...rvData)
this.setGenerate(rv.uniqueId)
}
).catch(res=>{
this.generateLevel2Type = ''
@@ -676,7 +703,9 @@ export default defineComponent({
if(element.status == 'Success'){
element.imgUrl = element.url
element.id_ = GO.id++
this.fileList.unshift(element)
let index = this.fileList.findIndex((item:any)=>item.taskId == element.taskId)
this.fileList[index] = element
// this.fileList.unshift(element)
data = data.filter((item:any) => item !== element.taskId);
if(this.type_.type2 == 'Sketchboard'){
this.sketchCatecoryList.forEach((itemCategory:any) => {
@@ -689,6 +718,10 @@ export default defineComponent({
element.categoryValue = this.scene?.value
element.category = this.scene?.name
}
}else if(element.status == 'Fail' || element.status == 'Invalid'){
data = data.filter((item:any) => item !== element.taskId);
this.fileList = this.fileList.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)){
@@ -718,7 +751,7 @@ export default defineComponent({
this.remGenerate = false
this.generateLevel2Type = ''
});
},1000)
},5000)
},
removeGenerate(){
//取消操作
@@ -737,8 +770,12 @@ export default defineComponent({
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
type: type
}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
this.generateProceedList.forEach((generateProceedListItem:any)=>{
this.fileList = this.fileList.filter((item:any) => generateProceedListItem.taskId!== item.taskId);
})
this.generateProceedList = []
}
).catch(res=>{
@@ -1044,6 +1081,13 @@ export default defineComponent({
pointer-events:none;
}
}
.loading{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);

7
src/component/HomePage/productImg.vue
View File

@@ -534,9 +534,9 @@ export default defineComponent({
imageStrength:(100 - imageStrength)/100,
}
productImgData.isProductimg = true
remPrductimgTime = setTimeout(()=>{
productImgData.remProductimg = true
},10000)
// remPrductimgTime = setTimeout(()=>{
// productImgData.remProductimg = true
// },10000)
let url = Https.httpUrls.toProduct
if(productimgMenu.value.value == 'Relight'){
url = Https.httpUrls.relight
@@ -544,6 +544,7 @@ export default defineComponent({
productImgData.isShowMark = true
Https.axiosPost(url, data).then(
(rv) => {
productImgData.remProductimg = true
productImgData.isShowMark = false
let arr:any = []
rv.forEach((item:any)=>{

99
src/component/HomePage/scaleImage.vue
View File

@@ -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(){

2
src/component/HomePage/scaleVideo.vue
View File

@@ -81,11 +81,13 @@ export default defineComponent({
height: auto;
max-height: 80vh;
position: absolute;
width: max-content;
video{
width: 100%;
max-height: 80vh;
height: 100%;
object-fit: contain;
width: max-content;
}
.general_video_btn{
color: #fff;