|
|
@@ -21,8 +21,9 @@
|
|
|
aiFlag:false,
|
|
|
aiImage: "",
|
|
|
inputBase64Url: "",
|
|
|
- taskId: "", // 图生图任务ID
|
|
|
- img2imgTimer: null,
|
|
|
+ aiPicId: "", // 图生图任务ID
|
|
|
+ randomTimer:null,
|
|
|
+ timer: null,
|
|
|
outTimer: null,
|
|
|
imageWidth: 750,
|
|
|
imageHeight: 448,
|
|
|
@@ -221,17 +222,18 @@
|
|
|
reqListReset:[
|
|
|
{
|
|
|
model:'deployments/elabgroup/elab-sdxl-controlnet-lora',
|
|
|
- level:'5',
|
|
|
+ level:'3',
|
|
|
aiPicId:'',
|
|
|
resultImg:'',
|
|
|
},{
|
|
|
model:'batouresearch/sdxl-controlnet-lora',
|
|
|
- level:'3',
|
|
|
+ level:'5',
|
|
|
aiPicId:'',
|
|
|
resultImg:'',
|
|
|
}
|
|
|
],
|
|
|
dialogVisible: false,
|
|
|
+ dialogAIVisible: false,
|
|
|
}
|
|
|
},
|
|
|
props:{
|
|
|
@@ -276,7 +278,7 @@
|
|
|
},
|
|
|
beforeDestroy:function(){
|
|
|
console.warn("***beforeDestroy***");//更新到页面上的数据
|
|
|
- this.clearInterval();
|
|
|
+ this.stopInterval();
|
|
|
},
|
|
|
computed: {
|
|
|
aiData() {
|
|
|
@@ -503,14 +505,6 @@
|
|
|
// this.disableAble = false;//可以点击
|
|
|
}
|
|
|
},
|
|
|
- clearInterval() {
|
|
|
- if (this.img2imgTimer) {
|
|
|
- clearInterval(this.img2imgTimer);
|
|
|
- this.img2imgTimer = null;
|
|
|
- }
|
|
|
- this.random = 1;
|
|
|
- this.myloading = false;
|
|
|
- },
|
|
|
//风格选择
|
|
|
selectStyle(idx){
|
|
|
if(this.curStyleIndex == idx){
|
|
|
@@ -539,17 +533,11 @@
|
|
|
return
|
|
|
}
|
|
|
this.aiFlag = true;
|
|
|
- if (this.aiImage == "" || !this.aiImage) {
|
|
|
- this.aiImage = ""; // https://dm.static.elab-plus.com/CE4/backImg.png
|
|
|
- }
|
|
|
- this.aiImage = "";
|
|
|
-
|
|
|
- this.clearInterval();
|
|
|
+ this.aiImage = "";//清空AI结果图
|
|
|
+ this.stopInterval();
|
|
|
if(!this.showAIImage){
|
|
|
this.myloading = true;
|
|
|
this.loadingMsg = "设计中...";
|
|
|
- // this.$store.state.loading = true;
|
|
|
- // this.$store.state.loadingMsg="设计中...";
|
|
|
}
|
|
|
|
|
|
// this.inputBase64Url = await this.shottingAction(2);//开始截图-返回的是base64的数据
|
|
|
@@ -630,25 +618,18 @@
|
|
|
},
|
|
|
//前置逻辑
|
|
|
async prevHandle(parmas){
|
|
|
- return '';//暂不需要开启
|
|
|
//不是首次请求，则无需前置判断 用户上传的也不需要前置处理
|
|
|
- if(this.subType!=0 || this.userInput){
|
|
|
+ if(this.subType!=0){
|
|
|
return '';
|
|
|
}
|
|
|
return new Promise(async (resolve, reject) => {
|
|
|
- let imgRes = await requestConfig("generateTaskImgToImgForAliyun", parmas);
|
|
|
- if (imgRes.success) {
|
|
|
- let aiPicId = imgRes.single || '';
|
|
|
- let res = await requestConfig('generateProcess', {
|
|
|
- id: aiPicId
|
|
|
- })
|
|
|
+ let _data = JSON.parse(JSON.stringify(parmas))
|
|
|
+ delete _data.webhook;
|
|
|
+ let res = await requestConfig("img2img_local", _data);
|
|
|
+ if (res.success) {
|
|
|
if (res.success && res.single) {
|
|
|
- if(res.single.category == 'scheduler'){//命中了
|
|
|
- let resultImg = res.single.urls[0];
|
|
|
- resolve(resultImg);
|
|
|
- }else{
|
|
|
- resolve('');
|
|
|
- }
|
|
|
+ let resultImg = res.single;
|
|
|
+ resolve(resultImg);
|
|
|
}else{
|
|
|
resolve('');
|
|
|
}
|
|
|
@@ -720,32 +701,51 @@
|
|
|
console.log("图生图结果：", res);
|
|
|
let that = this;
|
|
|
if (res.success && res.single) {
|
|
|
- this.taskId = res.single;
|
|
|
+ this.aiPicId = res.single;
|
|
|
if(this.modelType==2){//精准设计
|
|
|
if(subType == 0){//首次
|
|
|
- this.reqList[0].aiPicId = this.taskId;
|
|
|
+ this.reqList[0].aiPicId = this.aiPicId;
|
|
|
}else{//重试
|
|
|
- this.reqListReset[0].aiPicId = this.taskId;
|
|
|
+ this.reqListReset[0].aiPicId = this.aiPicId;
|
|
|
}
|
|
|
}
|
|
|
- if (!this.img2imgTimer) {
|
|
|
- this.count = 0;
|
|
|
- this.random = 1;
|
|
|
- this.currentImg = false;//当次生成图还没有结果
|
|
|
- this.img2imgTimer = setInterval(() => {
|
|
|
- this.count ++;
|
|
|
- this.getResultForImgToImg();
|
|
|
- }, 1000);
|
|
|
- this.setOutTimer();
|
|
|
+ if (this.aiPicId) {
|
|
|
+ this.startInterval();//开始轮询AI生成图的结果
|
|
|
+ }else{
|
|
|
+ this.stopInterval()
|
|
|
}
|
|
|
}else{
|
|
|
- this.clearInterval()
|
|
|
- this.aiFlag = false;
|
|
|
- this.aiImage = "";
|
|
|
+ this.stopInterval()
|
|
|
this.showToast("渲染失败，请重试")
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ stopInterval() {
|
|
|
+ if (this.randomTimer) {
|
|
|
+ clearInterval(this.randomTimer);
|
|
|
+ this.randomTimer = null;
|
|
|
+ }
|
|
|
+ if (this.timer) {
|
|
|
+ // clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ if (this.outTimer) {
|
|
|
+ clearTimeout(this.outTimer)
|
|
|
+ this.outTimer = null
|
|
|
+ }
|
|
|
+ this.subType = 0;
|
|
|
+ this.reqList.forEach(it=>{
|
|
|
+ it.aiPicId = '';
|
|
|
+ it.resultImg = '';
|
|
|
+ })
|
|
|
+ this.reqListReset.forEach(it=>{
|
|
|
+ it.aiPicId = '';
|
|
|
+ it.resultImg = '';
|
|
|
+ })
|
|
|
+ // this.random = 1;
|
|
|
+ this.myloading = false;
|
|
|
+ this.aiFlag = false;
|
|
|
+ },
|
|
|
//随机处理
|
|
|
randomHandle(resultImg){
|
|
|
if(this.timer || !resultImg){
|
|
|
@@ -755,14 +755,14 @@
|
|
|
var count = 1;
|
|
|
var process = 0;//进度
|
|
|
var randomNum = Math.floor(Math.random() * 4 + 5);//5-8随机数
|
|
|
- this.img2imgTimer = setInterval(function() {
|
|
|
+ this.randomTimer = setInterval(function() {
|
|
|
process = parseInt(count * 100/(randomNum));
|
|
|
if(process>=100){
|
|
|
process = 99;
|
|
|
}
|
|
|
if (count < randomNum) {//没有到上限
|
|
|
if(!self.showAIImage){
|
|
|
- // this.$store.state.loadingMsg='生成中…' + this.random + '%';
|
|
|
+ self.myloading = true;
|
|
|
self.loadingMsg = '生成中…' + process + '%';
|
|
|
}
|
|
|
}else{
|
|
|
@@ -792,6 +792,20 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ //开始生成AI图的轮询，每隔1s轮询一次
|
|
|
+ startInterval() {
|
|
|
+ if(this.timer){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ this.count = 0;//轮询次数
|
|
|
+ var random = 0;
|
|
|
+ this.currentImg = false;//当次生成图还没有结果
|
|
|
+ this.timer = 1;
|
|
|
+ this.getOutPicture();//不在轮询，而是等结果
|
|
|
+ this.count = this.count + 1;
|
|
|
+ this.setOutTimer();//设置超时逻辑
|
|
|
+ },
|
|
|
//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
|
|
|
setOutTimer() {
|
|
|
if (this.outTimer) {
|
|
|
@@ -800,7 +814,7 @@
|
|
|
}
|
|
|
var self = this;
|
|
|
this.outTimer = setTimeout(function() {
|
|
|
- if (self.img2imgTimer) {
|
|
|
+ if (self.timer) {
|
|
|
let hasResult = false;
|
|
|
if(self.modelType==2){//精准设计
|
|
|
let reqList = [];
|
|
|
@@ -818,31 +832,35 @@
|
|
|
}
|
|
|
console.warn("***hasResult***",hasResult)
|
|
|
if(!hasResult){//没有结果
|
|
|
- self.clearInterval();//停止轮询
|
|
|
+ self.stopInterval();//停止轮询
|
|
|
// self.$message.warning("AI开了个小差，请稍后再试");
|
|
|
self.dialogVisible = true;//弹出超时提示
|
|
|
- self.aiFlag = false;
|
|
|
- self.aiImage = "";
|
|
|
}
|
|
|
}
|
|
|
clearTimeout(self.outTimer);
|
|
|
self.outTimer = null
|
|
|
}, this.timeOut);
|
|
|
},
|
|
|
- confirmHandle(){
|
|
|
+ confirmHandle(type){
|
|
|
console.log('用户点击确定')
|
|
|
this.dialogVisible = false;
|
|
|
- this.subType = 1;
|
|
|
+ this.dialogAIVisible = false;
|
|
|
+ this.subType = type || 0;
|
|
|
this.startServer();
|
|
|
},
|
|
|
cancelHandle(){
|
|
|
console.log('用户点击取消')
|
|
|
this.dialogVisible = false;
|
|
|
+ this.dialogAIVisible = false;
|
|
|
this.subType = 0;
|
|
|
},
|
|
|
- // 轮询获取图片结果
|
|
|
- async getResultForImgToImg() {
|
|
|
- if(this.modelType==2){//精准设计且当次新开始
|
|
|
+ //获取生成图结果
|
|
|
+ getOutPicture() {
|
|
|
+ if(this.timer==null){
|
|
|
+ console.warn("***当前轮询已经结束了1***")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(this.modelType==2){//精准设计
|
|
|
let reqList = [];
|
|
|
if(this.subType == 0){//首次
|
|
|
reqList = this.reqList;
|
|
|
@@ -854,9 +872,10 @@
|
|
|
});
|
|
|
}
|
|
|
else{
|
|
|
- this.singleHandle({aiPicId:this.taskId})
|
|
|
+ this.singleHandle({aiPicId:this.aiPicId})
|
|
|
}
|
|
|
},
|
|
|
+ //发出获取结果请求获取AI生成结果
|
|
|
async singleHandle(model){
|
|
|
if(!model || !model.aiPicId){
|
|
|
return false;
|
|
|
@@ -864,54 +883,90 @@
|
|
|
var parmas = {
|
|
|
id: model.aiPicId,
|
|
|
};
|
|
|
- let res = await requestConfig("generateProcess", parmas);
|
|
|
+ let res = await requestConfig("getPredictions", parmas);
|
|
|
if (res.success && res.single) {
|
|
|
if(this.currentImg){//当前已经有生成图了
|
|
|
console.warn("***当前已经有最高级生成图了***")
|
|
|
return false;
|
|
|
}
|
|
|
- if (res.single.urls) {
|
|
|
- console.warn("图生图轮询结束: ", res);
|
|
|
+ if(this.timer==null){
|
|
|
+ console.warn("***当前轮询已经结束了***")
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (res.single.status == 'succeeded' && res.single.output) {
|
|
|
if(this.modelType==2){//精准设计
|
|
|
- model.resultImg = res.single.urls[0];
|
|
|
+ model.resultImg = res.single.output;
|
|
|
if(model.level=='5'){//最高级了
|
|
|
this.currentImg = true;
|
|
|
- this.resultHandle(res.single.urls[0])
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.resultHandle(res.single.output)
|
|
|
+ },2000)
|
|
|
}
|
|
|
}else{
|
|
|
- this.resultHandle(res.single.urls[0])
|
|
|
+ this.currentImg = true;
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.resultHandle(res.single.output)
|
|
|
+ },2000)
|
|
|
}
|
|
|
console.warn("***有生成图了***",model)
|
|
|
-
|
|
|
- } else {
|
|
|
- if (!res.success) {
|
|
|
- this.showToast("渲染失败，请重试")
|
|
|
- this.aiFlag = false;
|
|
|
- this.aiImage = "";
|
|
|
- this.clearInterval();
|
|
|
- }else {
|
|
|
- // this.random = parseInt(this.count * 2);
|
|
|
- this.random = parseInt(this.count * 100/(this.timeOut/1000));
|
|
|
- if(this.random>=100){
|
|
|
- this.random = 99;
|
|
|
- }
|
|
|
- if(!this.showAIImage){
|
|
|
- // this.$store.state.loadingMsg='生成中…' + this.random + '%';
|
|
|
- this.loadingMsg = '生成中…' + this.random + '%';
|
|
|
- }else{
|
|
|
- }
|
|
|
+ }
|
|
|
+ if(this.modelType==2){//最高优先级返回没有图片，则处理进度条事宜
|
|
|
+ if(model.level=='5'){
|
|
|
+ this.processHandle(res.single);
|
|
|
}
|
|
|
+ }else{//普通设计
|
|
|
+ this.processHandle(res.single);
|
|
|
+ }
|
|
|
+ } else if (!res.success) {
|
|
|
+ this.stopInterval();//停止轮询
|
|
|
+ this.showToast("渲染失败，请重试")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //进度处理
|
|
|
+ processHandle(single){
|
|
|
+ console.warn("***single***",single.status,single.progress,single);
|
|
|
+ let self = this;
|
|
|
+ if(single.status=='starting'){//启动中的逻辑
|
|
|
+ if(this.count>=20){
|
|
|
+ this.stopInterval();//停止轮询
|
|
|
+ this.dialogAIVisible = true;
|
|
|
+ }else{
|
|
|
+ this.showToast("启动中");
|
|
|
+ }
|
|
|
+ this.getOutPicture();
|
|
|
+ }else if(single.status=='processing'){
|
|
|
+ let random = single.progress || 0;
|
|
|
+ if(random >= 100){
|
|
|
+ random = 99;
|
|
|
+ }
|
|
|
+ // uni.showLoading({
|
|
|
+ // icon: 'loading',
|
|
|
+ // title: '生成中…' + parseInt(random) + '%'
|
|
|
+ // })
|
|
|
+ if(!this.showAIImage){
|
|
|
+ this.myloading = true;
|
|
|
+ this.loadingMsg = '生成中…' + parseInt(random) + '%';
|
|
|
+ }
|
|
|
+ this.getOutPicture();
|
|
|
+ }else if(single.status=='succeeded'){
|
|
|
+ // uni.showLoading({
|
|
|
+ // icon: 'loading',
|
|
|
+ // title: '生成中…100%',
|
|
|
+ // duration:2000,
|
|
|
+ // })
|
|
|
+ if(!this.showAIImage){
|
|
|
+ this.myloading = true;
|
|
|
+ this.loadingMsg = '生成中…100%';
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
//返回结果处理
|
|
|
resultHandle(resultImg){
|
|
|
this.currentImg = true;
|
|
|
- this.aiFlag = false;
|
|
|
- this.random = 100;
|
|
|
+ // this.random = 100;
|
|
|
this.aiImage = resultImg;
|
|
|
this.showAIFlag = true;
|
|
|
- let newImage = this.aiImage;
|
|
|
+ let newImage = resultImg;
|
|
|
let aiStyleName = this.styleList[this.curStyleIndex].styleName;
|
|
|
let _data = {
|
|
|
image:newImage,
|
|
|
@@ -951,7 +1006,7 @@
|
|
|
}
|
|
|
this.$store.dispatch('setAiData', cpAiData)
|
|
|
}
|
|
|
- this.clearInterval();
|
|
|
+ this.stopInterval();
|
|
|
if(this.aiImagesList.length>1){
|
|
|
setTimeout(()=>{
|
|
|
// this.$refs.carousel.next();
|
|
|
@@ -960,6 +1015,7 @@
|
|
|
}
|
|
|
},
|
|
|
showToast(title,time=3000){
|
|
|
+ this.myloading = false;
|
|
|
this.$store.state.loading = true;
|
|
|
this.$store.state.loadingMsg = title || "";
|
|
|
setTimeout(()=>{
|
zjs_project