From 49e9f41ef2e5be3dee4b8e84c13b8806943d4938 Mon Sep 17 00:00:00 2001 From: RockYang Date: Thu, 15 Feb 2024 18:11:22 +0800 Subject: [PATCH] feat: mobile mj list page is ready --- api/handler/mj_handler.go | 10 ++-- api/service/mj/plus/service.go | 2 +- api/service/mj/pool.go | 2 +- web/src/assets/css/mobile/image-mj.css | 49 +++++++++--------- web/src/assets/css/mobile/image-mj.styl | 68 +++++++++++-------------- web/src/views/ChatPlus.vue | 2 +- web/src/views/ImageMj.vue | 8 ++- web/src/views/mobile/ChatSession.vue | 3 +- web/src/views/mobile/ImageMj.vue | 58 ++++++--------------- 9 files changed, 88 insertions(+), 114 deletions(-) diff --git a/api/handler/mj_handler.go b/api/handler/mj_handler.go index 2764a9ea..7da787eb 100644 --- a/api/handler/mj_handler.go +++ b/api/handler/mj_handler.go @@ -340,20 +340,22 @@ func (h *MidJourneyHandler) JobList(c *gin.Context) { continue } + // 失败的任务直接删除 if job.Progress == -1 { h.db.Delete(&model.MidJourneyJob{Id: job.Id}) + jobs = append(jobs, job) continue } if item.Progress < 100 && item.ImgURL == "" && item.OrgURL != "" { - // 正在运行中任务使用代理访问图片 - if job.UseProxy { - job.ImgURL = job.OrgURL - } else { + // discord 服务器图片需要使用代理转发图片数据流 + if strings.HasPrefix(item.OrgURL, "https://cdn.discordapp.com") { image, err := utils.DownloadImage(item.OrgURL, h.App.Config.ProxyURL) if err == nil { job.ImgURL = "data:image/png;base64," + base64.StdEncoding.EncodeToString(image) } + } else { + job.ImgURL = job.OrgURL } } diff --git a/api/service/mj/plus/service.go b/api/service/mj/plus/service.go index 1f9acbd9..88e8a684 100644 --- a/api/service/mj/plus/service.go +++ b/api/service/mj/plus/service.go @@ -108,7 +108,7 @@ func (s *Service) Run() { s.taskStartTimes[int(task.Id)] = time.Now() atomic.AddInt32(&s.HandledTaskNum, 1) // 更新任务 ID/频道 - s.db.Debug().Model(&model.MidJourneyJob{Id: task.Id}).UpdateColumns(map[string]interface{}{ + s.db.Model(&model.MidJourneyJob{Id: task.Id}).UpdateColumns(map[string]interface{}{ "task_id": res.Result, "channel_id": s.Name, }) diff --git a/api/service/mj/pool.go b/api/service/mj/pool.go index c791ef9f..4c676589 100644 --- a/api/service/mj/pool.go +++ b/api/service/mj/pool.go @@ -201,7 +201,7 @@ func (p *ServicePool) SyncTaskProgress() { for _, v := range items { // 30 分钟还没完成的任务直接删除 if time.Now().Sub(v.CreatedAt) > time.Minute*30 { - //p.db.Delete(&v) + p.db.Delete(&v) // 非放大任务，退回绘图次数 if v.Type != types.TaskUpscale.String() { p.db.Model(&model.User{}).Where("id = ?", v.UserId).UpdateColumn("img_calls", gorm.Expr("img_calls + ?", 1)) diff --git a/web/src/assets/css/mobile/image-mj.css b/web/src/assets/css/mobile/image-mj.css index 18700837..a16bb696 100644 --- a/web/src/assets/css/mobile/image-mj.css +++ b/web/src/assets/css/mobile/image-mj.css @@ -55,7 +55,8 @@ padding: 0; position: relative; } -.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image { +.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image, +.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue { min-height: 100px; } .mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress { @@ -95,40 +96,38 @@ overflow: hidden; border-radius: 6px; position: relative; + height: 100%; + width: 100%; } -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line { - margin: 6px 0; -} -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line ul { - display: flex; - flex-flow: row; -} -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line ul li { - margin-right: 6px; -} -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line ul li a { - padding: 3px 0; - width: 40px; +.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-btn { + padding: 3px 10px; text-align: center; border-radius: 5px; + margin: 3px 0; display: block; cursor: pointer; background-color: #4e5058; color: #fff; } -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line ul li a:hover { - background-color: #6d6f78; +.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .el-image { + width: 100%; + height: 200px; } -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-line ul .show-prompt { - font-size: 20px; - cursor: pointer; +.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .el-image .image-slot { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .el-image .image-slot .iconfont { + margin-right: 5px; +} +.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .upscale { + height: 260px; + width: 100%; } .mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove { - display: none; position: absolute; - right: 10px; - top: 10px; -} -.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item:hover .remove { - display: block; + right: 5px; + top: 5px; } diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl index 8bb6003e..0370020e 100644 --- a/web/src/assets/css/mobile/image-mj.styl +++ b/web/src/assets/css/mobile/image-mj.styl @@ -76,7 +76,7 @@ padding 0 position relative - .van-image { + .van-image, .task-in-queue { min-height 100px } @@ -134,53 +134,47 @@ overflow hidden border-radius 6px position relative + height 100% + width 100% .opt { - .opt-line { - margin 6px 0 + .opt-btn { + padding 3px 10px + text-align center + border-radius 5px + margin 3px 0 + display block + cursor pointer + background-color #4E5058 + color #ffffff + } + } - ul { - display flex - flex-flow row + .el-image { + width 100% + height 200px - li { - margin-right 6px + .image-slot { + height 100% + display flex + justify-content center + align-items center - a { - padding 3px 0 - width 40px - text-align center - border-radius 5px - display block - cursor pointer - background-color #4E5058 - color #ffffff - - &:hover { - background-color #6D6F78 - } - } - } - - .show-prompt { - font-size 20px - cursor pointer - } + .iconfont { + margin-right 5px } } } - .remove { - display none - position absolute - right 10px - top 10px + .upscale { + height 260px + width 100% } - &:hover { - .remove { - display block - } + .remove { + position absolute + right 5px + top 5px } } diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue index fc7723da..38e5294d 100644 --- a/web/src/views/ChatPlus.vue +++ b/web/src/views/ChatPlus.vue @@ -824,7 +824,7 @@ const reGenerate = function () { icon: loginUser.value.avatar, content: md.render(text) }); - socket.value.send(previousText); + socket.value.send(previousText.value); } const chatName = ref('') diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index 2dcb485c..a50c0403 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -504,7 +504,7 @@ import Clipboard from "clipboard"; import {checkSession} from "@/action/session"; import {useRouter} from "vue-router"; import {getSessionId} from "@/store/session"; -import {removeArrayItem} from "@/utils/libs"; +import {isMobile, removeArrayItem} from "@/utils/libs"; const listBoxHeight = ref(window.innerHeight - 40) const mjBoxHeight = ref(window.innerHeight - 150) @@ -560,7 +560,7 @@ const params = ref({ rate: rates[0].value, model: models[0].value, chaos: 0, - stylize: 100, + stylize: 0, seed: 0, img_arr: [], raw: false, @@ -584,6 +584,10 @@ const imgCalls = ref(0) const loading = ref(false) const userId = ref(0) +if (isMobile()) { + router.replace("/mobile/mj") +} + const rewritePrompt = () => { loading.value = true httpPost("/api/prompt/rewrite", {"prompt": params.value.prompt}).then(res => { diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue index 6feca504..d84622f9 100644 --- a/web/src/views/mobile/ChatSession.vue +++ b/web/src/views/mobile/ChatSession.vue @@ -377,6 +377,7 @@ const sendMessage = () => { } if (prompt.value.trim().length === 0) { + showToast("请输入需要 AI 回答的问题") return false; } @@ -417,7 +418,7 @@ const reGenerate = () => { icon: loginUser.value.avatar, content: renderInputText(text) }); - socket.value.send(text); + socket.value.send(previousText.value); } const showShare = ref(false) diff --git a/web/src/views/mobile/ImageMj.vue b/web/src/views/mobile/ImageMj.vue index 5d040ce0..61c63f9b 100644 --- a/web/src/views/mobile/ImageMj.vue +++ b/web/src/views/mobile/ImageMj.vue @@ -140,7 +140,7 @@ image-size="80" description="暂无记录" /> - +
-
- -
- -
- -
+ + U1 + U2 + U3 + U4 + V1 + V2 + V3 + V4 +
@@ -236,7 +210,7 @@ import {getSessionId} from "@/store/session"; import {checkSession} from "@/action/session"; import Clipboard from "clipboard"; import {useRouter} from "vue-router"; -import {ChromeFilled, Delete, DocumentCopy, Picture} from "@element-plus/icons-vue"; +import {Delete, Picture} from "@element-plus/icons-vue"; const title = ref('MidJourney 绘画') const activeColspan = ref([""]) @@ -263,7 +237,7 @@ const params = ref({ rate: rates[0].value, model: models[0].value, chaos: 0, - stylize: 100, + stylize: 0, seed: 0, img_arr: [], raw: false, @@ -356,7 +330,7 @@ const fetchRunningJobs = (userId) => { if (jobs[i].progress === -1) { showNotify({ message: `任务执行失败：${jobs[i]['err_msg']}`, - type: 'error', + type: 'danger', }) imgCalls.value += 1 continue @@ -439,10 +413,10 @@ const generate = () => { params.value.session_id = getSessionId() params.value.img_arr = imgList.value.map(img => img.url) httpPost("/api/mj/image", params.value).then(() => { - ElMessage.success("绘画任务推送成功，请耐心等待任务执行...") + showToast("绘画任务推送成功，请耐心等待任务执行") imgCalls.value -= 1 }).catch(e => { - ElMessage.error("任务推送失败：" + e.message) + showFailToast("任务推送失败：" + e.message) }) }