feat: mj advance drawing page function is ready, use better task scheduling argorithm

web/src/assets/css/image-mj.styl

@@ -234,7 +234,6 @@
               display flex
               justify-content center
               align-items center
-              background-color: rgba(0, 0, 0, 0.5)
 
               span {
                 font-size 20px
@@ -249,6 +248,8 @@
       .finish-job-list {
         .job-item {
           margin-bottom 20px
+          width 100%
+          height 100%
 
           .opt {
             .opt-line {
@@ -289,12 +290,24 @@
         height 100%
         max-height 240px
 
+        img {
+          height 240px
+        }
+
+        .el-image-viewer__wrapper {
+          img {
+            width auto
+            height auto
+          }
+        }
+
         .image-slot {
           display flex
           flex-flow column
           justify-content center
           align-items center
           height 100%
+          min-height 200px
           color #ffffff
 
           .iconfont {

web/src/views/ImageMj.vue

@@ -60,7 +60,7 @@
               <el-form-item label="创意度">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-input v-model="params.chaos" size="small"/>
+                    <el-input v-model.number="params.chaos" size="small"/>
                     <el-tooltip
                         effect="light"
                         content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
@@ -80,7 +80,7 @@
               <el-form-item label="风格化">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-input v-model="params.stylize" size="small"/>
+                    <el-input v-model.number="params.stylize" size="small"/>
                     <el-tooltip
                         effect="light"
                         content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
@@ -100,7 +100,7 @@
               <el-form-item label="随机种子">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-input v-model="params.seed" size="small"/>
+                    <el-input v-model.number="params.seed" size="small"/>
                     <el-tooltip
                         effect="light"
                         content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
@@ -179,7 +179,7 @@
               <el-form-item label="图像权重">
                 <template #default>
                   <div class="form-item-inner">
-                    <el-slider v-model="params.weight" :max="1" :step="0.01"
+                    <el-slider v-model.number="params.weight" :max="1" :step="0.01"
                                style="width: 180px;--el-slider-main-bg-color:#47fff1"/>
                     <el-tooltip
                         effect="light"
@@ -201,6 +201,7 @@
                   v-model="params.prompt"
                   :autosize="{ minRows: 4, maxRows: 6 }"
                   type="textarea"
+                  ref="promptRef"
                   placeholder="这里输入你的咒语，例如：A chinese girl walking in the middle of a cobblestone street"
               />
             </div>
@@ -222,7 +223,7 @@
                       placement="top-start"
                       :title="getTaskType(scope.item.type)"
                       :width="240"
-                      trigger="hover"
+                      trigger="click"
                   >
                     <template #reference>
                       <div v-if="scope.item.progress > 0" class="job-item-inner">
@@ -321,19 +322,19 @@
                   <div class="opt">
                     <div class="opt-line">
                       <ul>
-                        <li><a @click="upscale(1)">U1</a></li>
-                        <li><a @click="upscale(2)">U2</a></li>
-                        <li><a @click="upscale(3)">U3</a></li>
-                        <li><a @click="upscale(4)">U4</a></li>
+                        <li><a @click="upscale(1,scope.item)">U1</a></li>
+                        <li><a @click="upscale(2,scope.item)">U2</a></li>
+                        <li><a @click="upscale(3,scope.item)">U3</a></li>
+                        <li><a @click="upscale(4,scope.item)">U4</a></li>
                       </ul>
                     </div>
 
                     <div class="opt-line">
                       <ul>
-                        <li><a @click="variation(1)">V1</a></li>
-                        <li><a @click="variation(2)">V2</a></li>
-                        <li><a @click="variation(3)">V3</a></li>
-                        <li><a @click="variation(4)">V4</a></li>
+                        <li><a @click="variation(1,scope.item)">V1</a></li>
+                        <li><a @click="variation(2,scope.item)">V2</a></li>
+                        <li><a @click="variation(3,scope.item)">V3</a></li>
+                        <li><a @click="variation(4,scope.item)">V4</a></li>
                       </ul>
                     </div>
                   </div>
@@ -358,20 +359,28 @@ import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import ItemList from "@/components/ItemList.vue";
 import Clipboard from "clipboard";
+import {checkSession} from "@/action/session";
+import {useRouter} from "vue-router";
+import {getSessionId} from "@/store/session";
 
-const listBoxHeight = window.innerHeight - 40
-const mjBoxHeight = window.innerHeight - 150
+const listBoxHeight = ref(window.innerHeight - 40)
+const mjBoxHeight = ref(window.innerHeight - 150)
+
+window.onresize = () => {
+  listBoxHeight.value = window.innerHeight - 40
+  mjBoxHeight.value = window.innerHeight - 150
+}
 const rates = [
   {css: "horizontal", value: "16:9", text: "横图"},
   {css: "square", value: "1:1", text: "方图"},
   {css: "vertical", value: "9:16", text: "竖图"},
 ]
 const models = [
-  {text: "标准模型", value: "--v 5.2", img: "/images/mj-normal.png"},
-  {text: "动漫模型", value: "--niji 5", img: "/images/mj-niji.png"},
+  {text: "标准模型", value: " --v 5.2", img: "/images/mj-normal.png"},
+  {text: "动漫模型", value: " --niji 5", img: "/images/mj-niji.png"},
 ]
 const params = ref({
-  rate: rates[0].value,
+  rate: rates[1].value,
   model: models[0].value,
   chaos: 0,
   stylize: 100,
@@ -385,14 +394,18 @@ const params = ref({
 const runningJobs = ref([])
 const finishedJobs = ref([])
 const previewImgList = ref([])
-
+const router = useRouter()
 onMounted(() => {
-  fetchFinishedJobs()
-  fetchRunningJobs()
+  checkSession().then(() => {
+    fetchFinishedJobs()
+    fetchRunningJobs()
+  }).catch(() => {
+    router.push('/login')
+  });
 
   const clipboard = new Clipboard('.copy-prompt');
   clipboard.on('success', () => {
-    ElMessage.success('复制成功！');
+    ElMessage.success({message: "复制成功！", duration: 500});
   })
 
   clipboard.on('error', () => {
@@ -403,9 +416,13 @@ onMounted(() => {
 const fetchFinishedJobs = () => {
   httpGet("/api/mj/jobs?status=1").then(res => {
     finishedJobs.value = res.data
+    previewImgList.value = []
     for (let index in finishedJobs.value) {
       previewImgList.value.push(finishedJobs.value[index]["img_url"])
     }
+    setTimeout(() => {
+      fetchFinishedJobs()
+    }, 2000)
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
   })
@@ -414,6 +431,9 @@ const fetchFinishedJobs = () => {
 const fetchRunningJobs = () => {
   httpGet("/api/mj/jobs?status=0").then(res => {
     runningJobs.value = res.data
+    setTimeout(() => {
+      fetchRunningJobs()
+    }, 1000)
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
   })
@@ -463,9 +483,44 @@ const getTaskType = (type) => {
 }
 
 // 创建绘图任务
+const promptRef = ref(null)
 const generate = () => {
-
+  if (params.value.prompt === '') {
+    promptRef.value.focus()
+    return ElMessage.error("请输入绘画提示词！")
+  }
+  httpPost("/api/mj/image", params.value).then(() => {
+    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
+  }).catch(e => {
+    ElMessage.error("任务推送失败：" + e.message)
+  })
 }
+
+// 图片放大任务
+const upscale = (index, item) => {
+  send('/api/mj/upscale', index, item)
+}
+
+// 图片变换任务
+const variation = (index, item) => {
+  send('/api/mj/variation', index, item)
+}
+
+const send = (url, index, item) => {
+  httpPost(url, {
+    index: index,
+    src: "img",
+    message_id: item.message_id,
+    message_hash: item.hash,
+    session_id: getSessionId(),
+    prompt: item.prompt,
+  }).then(() => {
+    ElMessage.success("任务推送成功，请耐心等待任务执行...")
+  }).catch(e => {
+    ElMessage.error("任务推送失败：" + e.message)
+  })
+}
+
 </script>
 
 <style lang="stylus">