feat: midjourney page parameter ui is ready

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

@@ -0,0 +1,178 @@
+.page-mj {
+  background-color: #282c34;
+}
+.page-mj .inner {
+  display: flex;
+}
+.page-mj .inner .mj-box {
+  margin: 10px;
+  background-color: #262626;
+  border: 1px solid #454545;
+  min-width: 300px;
+  max-width: 300px;
+  padding: 10px;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 14px;
+}
+.page-mj .inner .mj-box h2 {
+  font-weight: bold;
+  font-size: 20px;
+  text-align: center;
+  color: #47fff1;
+}
+.page-mj .inner .mj-box ::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+.page-mj .inner .mj-box .mj-params {
+  margin-top: 10px;
+  overflow: auto;
+}
+.page-mj .inner .mj-box .mj-params .param-line {
+  padding: 0 10px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .el-icon {
+  position: relative;
+  top: 3px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content {
+  background-color: #383838;
+  border-radius: 5px;
+  padding: 8px 14px;
+  display: flex;
+  cursor: pointer;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content:hover {
+  background-color: #585858;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  border: 1px solid #c4c4c4;
+  border-radius: 3px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.vertical {
+  width: 12px;
+  height: 20px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.horizontal {
+  height: 12px;
+  width: 20px;
+  position: relative;
+  top: 3px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content.active {
+  color: #47fff1;
+  background-color: #585858;
+}
+.page-mj .inner .mj-box .mj-params .param-line .grid-content.active .shape {
+  border: 1px solid #47fff1;
+}
+.page-mj .inner .mj-box .mj-params .param-line .model {
+  background-color: #383838;
+  border: 1px solid #454545;
+  border-radius: 5px;
+  padding: 10px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  cursor: pointer;
+}
+.page-mj .inner .mj-box .mj-params .param-line .model:hover {
+  background-color: #585858;
+}
+.page-mj .inner .mj-box .mj-params .param-line .model .el-image {
+  height: 60px;
+  width: 100%;
+}
+.page-mj .inner .mj-box .mj-params .param-line .model .text {
+  margin-top: 6px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .model.active {
+  color: #47fff1;
+  background-color: #585858;
+  border: 1px solid #47fff1;
+}
+.page-mj .inner .mj-box .mj-params .param-line .form-item-inner {
+  display: flex;
+}
+.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-icon {
+  margin-left: 10px;
+  margin-top: 2px;
+}
+.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  transition: var(--el-transition-duration-fast);
+}
+.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload .el-icon.uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  height: 120px;
+  text-align: center;
+}
+.page-mj .inner .mj-box .mj-params .param-line.pt {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.page-mj .inner .mj-box .submit-btn {
+  padding: 10px 15px 0 15px;
+  text-align: center;
+}
+.page-mj .inner .mj-box .submit-btn .el-button {
+  width: 100%;
+}
+.page-mj .inner .mj-box .submit-btn .el-button span {
+  color: #2d3a4b;
+}
+.page-mj .inner .el-form .el-form-item__label {
+  color: #fff;
+}
+.page-mj .inner .el-form .el-input,
+.page-mj .inner .el-form .el-slider {
+  width: 180px;
+}
+.page-mj .inner .task-list-box {
+  width: 100%;
+  padding: 10px;
+  color: #fff;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content {
+  margin-bottom: 20px;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line {
+  margin: 6px 0;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul {
+  display: flex;
+  flex-flow: row;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li {
+  margin-right: 10px;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a {
+  padding: 3px 0;
+  width: 50px;
+  text-align: center;
+  border-radius: 5px;
+  display: block;
+  cursor: pointer;
+  background-color: #4e5058;
+  color: #fff;
+}
+.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a:hover {
+  background-color: #6d6f78;
+}

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

@@ -0,0 +1,234 @@
+.page-mj {
+  background-color: #282c34;
+
+  .inner {
+    display: flex;
+
+    .mj-box {
+      margin 10px
+      background-color #262626
+      border 1px solid #454545
+      min-width 300px
+      max-width 300px
+      padding 10px
+      border-radius 10px
+      color #ffffff;
+      font-size 14px
+
+      h2 {
+        font-weight: bold;
+        font-size 20px
+        text-align center
+        color #47fff1
+      }
+
+      // 隐藏滚动条
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background-color: transparent;
+      }
+
+      .mj-params {
+        margin-top 10px
+        overflow auto
+
+
+        .param-line {
+          padding 0 10px
+
+          .el-icon {
+            position relative
+            top 3px
+          }
+
+          .grid-content {
+            background-color #383838
+            border-radius 5px
+            padding 8px 14px
+            display flex
+            cursor pointer
+
+            &:hover {
+              background-color #585858
+            }
+
+            .shape {
+              width 16px
+              height 16px
+              margin-right 5px
+              border 1px solid #C4C4C4
+              border-radius 3px
+            }
+
+            .shape.vertical {
+              width 12px
+              height 20px
+            }
+
+            .shape.horizontal {
+              height 12px
+              width 20px
+              position relative
+              top 3px
+            }
+          }
+
+
+          .grid-content.active {
+            color #47fff1
+            background-color #585858
+
+            .shape {
+              border 1px solid #47fff1
+            }
+          }
+
+          .model {
+            background-color #383838
+            border 1px solid #454545
+            border-radius 5px
+            padding 10px
+            display flex
+            flex-flow column
+            align-items center
+            cursor pointer
+
+            &:hover {
+              background-color #585858
+            }
+
+            .el-image {
+              height 60px
+              width 100%
+            }
+
+            .text {
+              margin-top 6px
+            }
+
+          }
+
+          .model.active {
+            color #47fff1
+            background-color #585858
+            border 1px solid #47fff1
+          }
+
+          .form-item-inner {
+            display flex
+
+            .el-icon {
+              margin-left 10px
+              margin-top 2px
+            }
+          }
+
+
+          .img-uploader {
+            .el-upload {
+              border: 1px dashed var(--el-border-color);
+              border-radius: 6px;
+              cursor: pointer;
+              position: relative;
+              overflow: hidden;
+              width 100%
+              transition: var(--el-transition-duration-fast);
+
+              &:hover {
+                border-color: var(--el-color-primary);
+              }
+
+              .el-icon.uploader-icon {
+                font-size: 28px
+                color: #8c939d
+                width 100%
+                height: 120px
+                text-align: center
+              }
+            }
+          }
+
+        }
+
+        .param-line.pt {
+          padding-top 5px
+          padding-bottom 5px
+        }
+      }
+
+      .submit-btn {
+        padding 10px 15px 0 15px
+        text-align center
+
+        .el-button {
+          width 100%
+
+          span {
+            color #2D3A4B
+          }
+        }
+      }
+    }
+
+    .el-form {
+      .el-form-item__label {
+        color #ffffff
+      }
+
+      .el-input, .el-slider {
+        width 180px
+      }
+    }
+
+
+    .task-list-box {
+      width 100%
+      padding 10px
+      color #ffffff
+      overflow-x hidden
+      overflow-y auto
+
+      .task-list-inner {
+
+        .grid-content {
+          margin-bottom 20px
+
+          .opt {
+            .opt-line {
+              margin 6px 0
+
+              ul {
+                display flex
+                flex-flow row
+
+                li {
+                  margin-right 10px
+
+                  a {
+                    padding 3px 0
+                    width 50px
+                    text-align center
+                    border-radius 5px
+                    display block
+                    cursor pointer
+                    background-color #4E5058
+                    color #ffffff
+
+                    &:hover {
+                      background-color #6D6F78
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+        }
+      }
+
+    }
+  }
+
+}

web/src/views/ImageMj.vue

@@ -4,8 +4,9 @@
       <div class="mj-box">
         <h2>MidJourney 创作中心</h2>
 
-        <div class="mj-params">
+        <div class="mj-params" :style="{ height: mjBoxHeight + 'px' }">
-          <div class="param-line">
+          <el-form :model="params" label-width="80px" label-position="left">
+            <div class="param-line pt">
               <span>图片比例：</span>
               <el-tooltip
                   effect="light"
@@ -18,7 +19,7 @@
               </el-tooltip>
             </div>
 
-          <div class="param-line">
+            <div class="param-line pt">
               <el-row :gutter="10">
                 <el-col :span="8" v-for="item in rates" :key="item.value">
                   <div :class="item.value === params.rate?'grid-content active':'grid-content'"
@@ -30,7 +31,7 @@
               </el-row>
             </div>
 
-          <div class="param-line">
+            <div class="param-line pt">
               <span>模型选择：</span>
               <el-tooltip
                   effect="light"
@@ -43,25 +44,213 @@
                 </el-icon>
               </el-tooltip>
             </div>
-          <div class="param-line">
+            <div class="param-line pt">
               <el-row :gutter="10">
                 <el-col :span="12" v-for="item in models" :key="item.value">
-                <div :class="item.value === params.model?'grid-content active':'grid-content'"
+                  <div :class="item.value === params.model?'model active':'model'"
                        @click="changeModel(item)">
-                  <div class="img">
+                    <el-image :src="item.img" fit="cover"></el-image>
-                    <el-image src="https://ai.2021it.com/assets/mj-8c02cbcc.png"></el-image>
-                  </div>
                     <div class="text">{{ item.text }}</div>
                   </div>
                 </el-col>
               </el-row>
             </div>
+
+            <div class="param-line" style="padding-top: 10px">
+              <el-form-item label="创意度">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model="params.chaos" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="风格化">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model="params.stylize" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="随机种子">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model="params.seed" size="small"/>
+                    <el-tooltip
+                        effect="light"
+                        content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="原始模式">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-switch v-model="params.raw"/>
+                    <el-tooltip
+                        effect="light"
+                        content="启用新的RAW模式，以“不带偏见”的方式生成图像。<br/> 同时也意味着您需要添加更长的提示。"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon style="margin-top: 6px">
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-form-item label="图生图">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-input v-model="params.img" size="small" placeholder="请输入图片地址或者上传图片"
+                              style="width: 160px"/>
+                    <el-icon @click="params.img = ''" title="清空图片">
+                      <DeleteFilled/>
+                    </el-icon>
+                    <el-tooltip
+                        effect="light"
+                        content="垫图：以某张图片为底稿参考来创作绘画 <br/> 支持 PNG 和 JPG 格式图片"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon>
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-upload
+                  class="img-uploader"
+                  :auto-upload="true"
+                  :show-file-list="false"
+                  :http-request="afterRead"
+              >
+                <el-image v-if="params.img !== ''" :src="params.img" fit="cover"/>
+                <el-icon v-else class="uploader-icon">
+                  <Plus/>
+                </el-icon>
+              </el-upload>
+            </div>
+
+            <div class="param-line" style="padding-top: 10px">
+              <el-form-item label="图像权重">
+                <template #default>
+                  <div class="form-item-inner">
+                    <el-slider v-model="params.weight" :max="1" :step="0.01" style="width: 180px"/>
+                    <el-tooltip
+                        effect="light"
+                        content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
+                        raw-content
+                        placement="right"
+                    >
+                      <el-icon style="margin-top: 6px">
+                        <InfoFilled/>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-form-item>
+            </div>
+
+            <div class="param-line">
+              <el-input
+                  v-model="params.prompt"
+                  :autosize="{ minRows: 4, maxRows: 6 }"
+                  type="textarea"
+                  placeholder="这里输入你的咒语，例如：A chinese girl walking in the middle of a cobblestone street"
+              />
+            </div>
+
+          </el-form>
+        </div>
+        <div class="submit-btn">
+          <el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
         </div>
       </div>
       <div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
+        <div class="task-list-inner">
           <h2>任务列表</h2>
-
+          <div class="running-job-list">
+            <el-row :gutter="20">
+              <el-col :span="4" v-for="n in 10">
+                <div class="grid-content">
+                  <el-image src="http://172.22.11.47:9010/chatgpt-plus/1694167591080692.png"/>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
           <h2>创作记录</h2>
+          <div class="finish-job-list">
+            <el-row :gutter="20">
+              <el-col :span="4" v-for="n in 100">
+                <div class="grid-content">
+                  <el-image src="http://172.22.11.47:9010/chatgpt-plus/1694568531910050.png" fit="cover"/>
+                  <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>
+                      </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>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -69,128 +258,71 @@
 
 <script setup>
 import {ref} from "vue"
-import {InfoFilled} from "@element-plus/icons-vue";
+import {DeleteFilled, InfoFilled, Plus} from "@element-plus/icons-vue";
+import Compressor from "compressorjs";
+import {httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
 
 const listBoxHeight = window.innerHeight - 20
+const mjBoxHeight = 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"},
+  {text: "标准模型", value: "--v 5.2", img: "/images/mj-normal.png"},
-  {text: "动漫模型", value: "--niji 5"},
+  {text: "动漫模型", value: "--niji 5", img: "/images/mj-niji.png"},
 ]
 const params = ref({
   rate: rates[0].value,
-  model: models[0].value
+  model: models[0].value,
+  chaos: 0,
+  stylize: 100,
+  seed: 0,
+  raw: false,
+  img: "",
+  weight: 0.25,
+  prompt: ""
 })
+
+// 切换图片比例
 const changeRate = (item) => {
   params.value.rate = item.value
 }
+// 切换模型
 const changeModel = (item) => {
   params.value.model = item.value
 }
+
+// 图片上传
+const afterRead = (file) => {
+  // 压缩图片并上传
+  new Compressor(file.file, {
+    quality: 0.6,
+    success(result) {
+      const formData = new FormData();
+      formData.append('file', result, result.name);
+      // 执行上传操作
+      httpPost('/api/upload', formData).then((res) => {
+        params.value.img = res.data
+        ElMessage.success('上传成功')
+      }).catch((e) => {
+        ElMessage.error('上传失败:' + e.message)
+      })
+    },
+    error(err) {
+      console.log(err.message);
+    },
+  });
+};
+
+// 创建绘图任务
+const generate = () => {
+
+}
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
-.page-mj {
+@import "@/assets/css/image-mj.styl"
-  background-color: #282c34;
-
-  .inner {
-    display: flex;
-
-    .mj-box {
-      margin 10px
-      background-color #262626
-      border 1px solid #454545
-      min-width 300px
-      max-width 300px
-      padding 10px
-      border-radius 10px
-      color #ffffff;
-      font-size 14px
-
-      h2 {
-        font-weight: bold;
-        font-size 20px
-        text-align center
-        color #47fff1
-      }
-
-      .mj-params {
-        margin-top 10px
-
-        .param-line {
-          padding 6px 10px 6px 10px
-
-          .el-icon {
-            position relative
-            top 3px
-          }
-
-          .grid-content {
-            background-color #383838
-            border-radius 5px
-            padding 8px 14px
-            display flex
-            cursor pointer
-
-            &:hover {
-              background-color #585858
-            }
-
-            .shape {
-              width 16px
-              height 16px
-              margin-right 5px
-              border 1px solid #C4C4C4
-              border-radius 3px
-            }
-
-            .shape.vertical {
-              width 12px
-              height 20px
-            }
-
-            .shape.horizontal {
-              height 12px
-              width 20px
-              position relative
-              top 3px
-            }
-
-            .img {
-              
-            }
-          }
-
-
-          .grid-content.active {
-            color #47fff1
-            background-color #585858
-
-            .shape {
-              border 1px solid #47fff1
-            }
-          }
-        }
-      }
-    }
-
-
-    .task-list-box {
-      width 100%
-      padding 10px
-      color #ffffff
-      overflow-x hidden
-      overflow-y auto
-
-      h2 {
-        font-size 20px
-      }
-    }
-  }
-
-}
 </style>