From ed286c8894361049915fb08181fc2eb4f6c8baf2 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Tue, 2 Apr 2024 19:01:28 +0800
Subject: [PATCH] feat: midjourney role and style consistency is ready

---
 web/src/assets/css/mobile/image-mj.css  |   5 +
 web/src/assets/css/mobile/image-mj.styl |   7 ++
 web/src/views/ImageMj.vue               |   2 +-
 web/src/views/ImageSd.vue               |   2 +-
 web/src/views/mobile/ImageMj.vue        | 152 +++++++++++++++++++-----
 5 files changed, 139 insertions(+), 29 deletions(-)

diff --git a/web/src/assets/css/mobile/image-mj.css b/web/src/assets/css/mobile/image-mj.css
index a28c1753..839ba770 100644
--- a/web/src/assets/css/mobile/image-mj.css
+++ b/web/src/assets/css/mobile/image-mj.css
@@ -55,6 +55,11 @@
   display: flex;
   justify-content: right;
 }
+.mobile-mj .content .tip-text {
+  padding: 10px;
+  line-height: 1.5;
+  color: #c1c1c1;
+}
 .mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content {
   padding: 0;
   position: relative;
diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl
index 948854bd..acdbd38f 100644
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/web/src/assets/css/mobile/image-mj.styl
@@ -74,6 +74,13 @@
       }
     }
 
+
+    .tip-text {
+      padding 10px
+      line-height 1.5
+      color #c1c1c1
+    }
+
     .running-job-list {
       .van-grid {
         .van-grid-item {
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 62b70833..868268bb 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -290,7 +290,7 @@
                 </el-tab-pane>
 
                 <el-tab-pane label="融图" name="blend">
-                  <div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用文生图功能</div>
+                  <div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能</div>
                   <div class="img-inline">
                     <div class="img-list-box">
                       <div class="img-item" v-for="imgURL in imgList">
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 7443a50f..7c3a23a9 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -309,7 +309,7 @@
                 <el-empty :image-size="100" v-else/>
               </div>
               <h2>创作记录</h2>
-              <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)">
+              <div class="finish-job-list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                 <div v-if="finishedJobs.length > 0">
                   <ItemList :items="finishedJobs" :width="240" :gap="16">
                     <template #default="scope">
diff --git a/web/src/views/mobile/ImageMj.vue b/web/src/views/mobile/ImageMj.vue
index 030dcaf9..33a02f8b 100644
--- a/web/src/views/mobile/ImageMj.vue
+++ b/web/src/views/mobile/ImageMj.vue
@@ -62,36 +62,113 @@
         </div>
 
         <div class="text-line">
-          <van-field v-model="params.prompt"
-                     rows="3"
-                     label="提示词"
-                     autosize
-                     type="textarea"
-                     placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+          <van-tabs v-model:active="activeName" @change="tabChange">
+            <van-tab title="文生图" name="txt2img">
+              <div class="text-line">
+                <van-field v-model="params.prompt"
+                           rows="3"
+                           autosize
+                           type="textarea"
+                           placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+              </div>
+            </van-tab>
+            <van-tab title="图生图" name="img2img">
+              <div class="text-line">
+                <van-field v-model="params.prompt"
+                           rows="3"
+                           autosize
+                           type="textarea"
+                           placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+              </div>
+
+              <div class="text-line">
+                <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              </div>
+              <div class="text-line">
+                <van-field label="垫图权重">
+                  <template #input>
+                    <van-slider v-model.number="params.iw" :max="1" :step="0.01"
+                                @update:model-value="showToast('当前值：' + params.iw)"/>
+                  </template>
+                </van-field>
+              </div>
+
+              <van-cell-group>
+                <van-field
+                    v-model="params.cref"
+                    center
+                    clearable
+                    label="角色一致性"
+                    placeholder="请输入图片URL或者上传图片"
+                >
+                  <template #button>
+                    <van-uploader @click="beforeUpload('cref')" :after-read="uploadImg">
+                      <van-button size="mini" type="primary" icon="plus"/>
+                    </van-uploader>
+                  </template>
+                </van-field>
+              </van-cell-group>
+
+              <van-cell-group>
+                <van-field
+                    v-model="params.sref"
+                    center
+                    clearable
+                    label="风格一致性"
+                    placeholder="请输入图片URL或者上传图片"
+                >
+                  <template #button>
+                    <van-uploader @click="beforeUpload('sref')" :after-read="uploadImg">
+                      <van-button size="mini" type="primary" icon="plus"/>
+                    </van-uploader>
+                  </template>
+                </van-field>
+              </van-cell-group>
+
+              <div class="text-line">
+                <van-field label="一致性权重">
+                  <template #input>
+                    <van-slider v-model.number="params.cw" :max="100" :step="1"
+                                @update:model-value="showToast('当前值：' + params.cw)"/>
+                  </template>
+                </van-field>
+              </div>
+            </van-tab>
+            <van-tab title="融图" name="blend">
+              <div class="tip-text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。</div>
+              <div class="text-line">
+                <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              </div>
+            </van-tab>
+            <van-tab title="换脸" name="swapFace">
+              <div class="tip-text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸。</div>
+              <div class="text-line">
+                <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              </div>
+            </van-tab>
+          </van-tabs>
         </div>
 
-        <van-collapse v-model="activeColspan">
-          <van-collapse-item title="垫图" name="img">
-            <van-field>
-              <template #input>
-                <van-uploader v-model="imgList" :after-read="uploadImg"/>
-              </template>
-            </van-field>
-          </van-collapse-item>
-          <van-collapse-item title="反向提示词" name="neg_prompt">
-            <van-field
-                v-model="params.prompt"
-                rows="3"
-                autosize
-                type="textarea"
-                placeholder="不想出现在图片上的元素(例如：树，建筑)"
-            />
-          </van-collapse-item>
-        </van-collapse>
+        <div class="text-line">
+          <van-collapse v-model="activeColspan">
+            <van-collapse-item title="反向提示词" name="neg_prompt">
+              <van-field
+                  v-model="params.prompt"
+                  rows="3"
+                  autosize
+                  type="textarea"
+                  placeholder="不想出现在图片上的元素(例如：树，建筑)"
+              />
+            </van-collapse-item>
+          </van-collapse>
+        </div>
+
+        <div class="text-line">
+          <el-tag>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{ power }}</el-tag>
+        </div>
 
         <div class="text-line">
           <van-button round block type="primary" native-type="submit">
-            <van-tag type="success">可用算力额度:{{ power }}</van-tag>
             立即生成
           </van-button>
         </div>
@@ -247,11 +324,14 @@ const params = ref({
   seed: 0,
   img_arr: [],
   raw: false,
-  weight: 0.25,
+  iw: 0,
   prompt: "",
   neg_prompt: "",
   tile: false,
-  quality: 0
+  quality: 0,
+  cref: "",
+  sref: "",
+  cw: 0,
 })
 const userId = ref(0)
 const router = useRouter()
@@ -259,6 +339,7 @@ const runningJobs = ref([])
 const finishedJobs = ref([])
 const socket = ref(null)
 const power = ref(0)
+const activeName = ref("txt2img")
 
 onMounted(() => {
   checkSession().then(user => {
@@ -414,6 +495,10 @@ const changeModel = (item) => {
   params.value.model = item.value
 }
 
+const imgKey = ref("")
+const beforeUpload = (key) => {
+  imgKey.value = key
+}
 
 // 图片上传
 const uploadImg = (file) => {
@@ -427,6 +512,10 @@ const uploadImg = (file) => {
       // 执行上传操作
       httpPost('/api/upload', formData).then(res => {
         file.url = res.data.url
+        if (imgKey.value !== "") { // 单张图片上传
+          params.value[imgKey.value] = res.data.url
+          imgKey.value = ''
+        }
         file.status = "done"
       }).catch(e => {
         file.status = 'failed'
@@ -524,6 +613,15 @@ const showPrompt = (item) => {
 const imageView = (item) => {
   showImagePreview([item['img_url']]);
 }
+
+// 切换菜单
+const tabChange = (tab) => {
+  if (tab === "txt2img" || tab === "img2img") {
+    params.value.task_type = "image"
+  } else {
+    params.value.task_type = tab
+  }
+}
 </script>
 
 <style lang="stylus">