From f6826fcefcd040c7b5ee46d57d3871a4bb8dde64 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Wed, 31 Jan 2024 07:24:35 +0800
Subject: [PATCH] feat: add functions mj page for mobile

---
 web/src/assets/css/mobile/image-mj.styl |  14 ++-
 web/src/main.js                         |   6 ++
 web/src/views/mobile/ImageMj.vue        | 125 +++++++++++++++++++-----
 3 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl
index 3f542816..2a1c7f04 100644
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/web/src/assets/css/mobile/image-mj.styl
@@ -1,9 +1,6 @@
 .mobile-mj {
   .content {
-    .van-field__label {
-      width 100px
-      text-align right
-    }
+    padding-bottom 60px
 
     .text-line {
       padding 6px
@@ -63,6 +60,15 @@
           }
         }
       }
+
+      .van-button {
+        position relative
+
+        .van-tag {
+          position absolute
+          right 20px
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/web/src/main.js b/web/src/main.js
index cd42a909..b63fb295 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -5,10 +5,13 @@ import 'vant/lib/index.css';
 import App from './App.vue'
 import {createPinia} from "pinia";
 import {
+    Badge,
     Button,
     Cell,
     CellGroup,
     Col,
+    Collapse,
+    CollapseItem,
     ConfigProvider,
     Dialog,
     DropdownItem,
@@ -73,6 +76,9 @@ app.use(Overlay)
 app.use(Col)
 app.use(Row)
 app.use(Slider)
+app.use(Badge)
+app.use(Collapse);
+app.use(CollapseItem);
 app.use(router).use(ElementPlus).mount('#app')
 
 
diff --git a/web/src/views/mobile/ImageMj.vue b/web/src/views/mobile/ImageMj.vue
index ec9386e2..73fd7bd5 100644
--- a/web/src/views/mobile/ImageMj.vue
+++ b/web/src/views/mobile/ImageMj.vue
@@ -28,7 +28,9 @@
                 <div class="icon">
                   <van-image :src="item.img" fit="cover"></van-image>
                 </div>
-                <div class="text">{{ item.text }}</div>
+                <div class="text">
+                  <van-text-ellipsis :content="item.text"/>
+                </div>
               </div>
             </van-col>
           </van-row>
@@ -59,14 +61,6 @@
           </van-field>
         </div>
 
-        <div class="text-line">
-          <van-field label="垫图">
-            <template #input>
-              <van-uploader v-model="imgList" :after-read="afterRead"/>
-            </template>
-          </van-field>
-        </div>
-
         <div class="text-line">
           <van-field
               v-model="params.prompt"
@@ -78,23 +72,52 @@
           />
         </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-button round block type="primary" native-type="submit">
+            <van-tag type="success">可用额度:{{ imgCalls }}</van-tag>
             立即生成
           </van-button>
         </div>
       </van-form>
+
+      <h2>任务列表</h2>
+
     </div>
   </div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {showFailToast, showNotify, showSuccessToast, showToast} from "vant";
-import {httpGet, httpPost} from "@/utils/http";
-import Compressor from 'compressorjs';
+import {showFailToast, showToast} from "vant";
+import {httpPost} from "@/utils/http";
+import Compressor from "compressorjs";
+import {ElMessage} from "element-plus";
+import {getSessionId} from "@/store/session";
+import {checkSession} from "@/action/session";
+import Clipboard from "clipboard";
+import {useRouter} from "vue-router";
 
 const title = ref('MidJourney 绘画')
+const activeColspan = ref([""])
 
 const rates = [
   {css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},
@@ -105,12 +128,12 @@ const rates = [
   {css: "size9-16", value: "9:16", text: "9:16", img: "/images/mj/rate_9_16.png"},
 ]
 const models = [
-  {text: "写实模式MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png"},
-  {text: "优质模式MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png"},
-  {text: "动漫风niji5 原始", value: " --niji 5", img: "/images/mj/mj-niji.png"},
-  {text: "动漫风niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg"},
-  {text: "动漫风niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg"},
-  {text: "动漫风niji5 表现力", value: " --niji 5 --style expressive", img: "/images/mj/nj3.jpg"},
+  {text: "MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png"},
+  {text: "MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png"},
+  {text: "Niji5 原始", value: " --niji 5", img: "/images/mj/mj-niji.png"},
+  {text: "Niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg"},
+  {text: "Niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg"},
+  {text: "Niji5 表现力", value: " --niji 5 --style expressive", img: "/images/mj/nj3.jpg"},
 ]
 const imgList = ref([])
 const params = ref({
@@ -128,7 +151,31 @@ const params = ref({
   tile: false,
   quality: 0
 })
+const imgCalls = ref(0)
+const userId = ref(0)
+const router = useRouter()
+onMounted(() => {
+  checkSession().then(user => {
+    imgCalls.value = user['img_calls']
+    userId.value = user.id
 
+    // fetchRunningJobs(userId.value)
+    // fetchFinishJobs(userId.value)
+    // connect()
+
+  }).catch(() => {
+    router.push('/login')
+  });
+
+  const clipboard = new Clipboard('.copy-prompt');
+  clipboard.on('success', () => {
+    ElMessage.success("复制成功！");
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
 // 切换图片比例
 const changeRate = (item) => {
   params.value.rate = item.value
@@ -139,11 +186,45 @@ const changeModel = (item) => {
 }
 
 
+// 图片上传
+const uploadImg = (file) => {
+  file.status = "uploading"
+  // 压缩图片并上传
+  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 => {
+        file.url = res.data.url
+        file.status = "done"
+      }).catch(e => {
+        file.status = 'failed'
+        file.message = '上传失败'
+        showFailToast("图片上传失败：" + e.message)
+      })
+    },
+    error(err) {
+      console.log(err.message);
+    },
+  });
+};
+
 const generate = () => {
-  httpPost('/api/user/profile/update', form.value).then(() => {
-    showSuccessToast('保存成功')
-  }).catch(() => {
-    showFailToast('保存失败')
+  if (params.value.prompt === '' && params.value.task_type === "image") {
+    return showFailToast("请输入绘画提示词！")
+  }
+  if (params.value.model.indexOf("niji") !== -1 && params.value.raw) {
+    return showFailToast("动漫模型不允许启用原始模式")
+  }
+  params.value.session_id = getSessionId()
+  params.value.img_arr = imgList.value.map(img => img.url)
+  httpPost("/api/mj/image", params.value).then(() => {
+    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
+    imgCalls.value -= 1
+  }).catch(e => {
+    ElMessage.error("任务推送失败：" + e.message)
   })
 }
 </script>