feat: midjourney image upscale function is ready

web/src/components/ChatMidJourney.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-line chat-line-mj">
+  <div class="chat-line chat-line-mj" v-loading="loading">
     <div class="chat-line-inner">
       <div class="chat-icon">
         <img :src="icon" alt="User"/>
@@ -30,7 +30,7 @@
           </div>
         </div>
 
-        <div class="opt" v-if="data.image?.hash !== ''">
+        <div class="opt" v-if="!data['reference_id'] &&data.image?.hash !== ''">
           <div class="opt-line">
             <ul>
               <li><a @click="upscale(1)">U1</a></li>
@@ -64,6 +64,8 @@
 import {ref, watch} from "vue";
 import {Clock} from "@element-plus/icons-vue";
 import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {getSessionId} from "@/store/session";
 
 const props = defineProps({
   content: Object,
@@ -72,10 +74,10 @@ const props = defineProps({
 });
 
 const data = ref(props.content)
-console.log(data.value)
 const tokens = ref(0)
 const cacheKey = "img_placeholder_height"
 const item = localStorage.getItem(cacheKey);
+const loading = ref(false)
 const height = ref(0)
 if (item) {
   height.value = parseInt(item)
@@ -88,9 +90,23 @@ if (data.value["image"]?.width > 0) {
 watch(() => props.content, (newVal) => {
   data.value = newVal;
 });
-
+const emits = defineEmits(['disable-input', 'disable-input']);
 const upscale = (index) => {
-  ElMessage.warning("当前版本暂未实现 Variation 功能！")
+  loading.value = true
+  emits('disable-input')
+  httpPost("/api/mj/upscale", {
+    index: index,
+    message_id: data.value?.["message_id"],
+    message_hash: data.value?.["image"]?.hash,
+    session_id: getSessionId(),
+    key: data.value?.["key"]
+  }).then(() => {
+    ElMessage.success("任务推送成功，请耐心等待任务执行...")
+    loading.value = false
+  }).catch(e => {
+    ElMessage.error("任务推送失败：" + e.message)
+    emits('disable-input')
+  })
 }
 
 const variation = (index) => {

web/src/store/session.js

@@ -4,26 +4,16 @@
  * storage handler
  */
 
-const SessionUserKey = 'LOGIN_USER';
+const SessionUserKey = 'SESSION_ID';
 
 export function getSessionId() {
-    const user = getLoginUser();
-    return user ? user['session_id'] : '';
+    return sessionStorage.getItem(SessionUserKey)
 }
 
 export function removeLoginUser() {
     sessionStorage.removeItem(SessionUserKey)
 }
 
-export function getLoginUser() {
-    const value = sessionStorage.getItem(SessionUserKey);
-    if (value) {
-        return JSON.parse(value);
-    } else {
-        return null;
-    }
-}
-
-export function setLoginUser(user) {
-    sessionStorage.setItem(SessionUserKey, JSON.stringify(user))
+export function setSessionId(sessionId) {
+    sessionStorage.setItem(SessionUserKey, sessionId)
 }

web/src/utils/http.js

@@ -1,5 +1,4 @@
 import axios from 'axios'
-import {getSessionId} from "@/store/session";
 
 axios.defaults.timeout = 10000
 axios.defaults.baseURL = process.env.VUE_APP_API_HOST
@@ -10,7 +9,7 @@ axios.defaults.headers.post['Content-Type'] = 'application/json'
 axios.interceptors.request.use(
     config => {
         // set token
-        config.headers['ChatGPT-TOKEN'] = getSessionId();
+        // config.headers['ChatGPT-TOKEN'] = getSessionId();
         return config
     }, error => {
         return Promise.reject(error)

web/src/views/ChatPlus.vue

@@ -169,6 +169,8 @@
                   <chat-mid-journey v-else-if="item.type==='mj'"
                                     :content="item.content"
                                     :icon="item.icon"
+                                    @disable-input="disableInput(true)"
+                                    @enable-input="enableInput"
                                     :created-at="dateFormat(item['created_at'])"/>
                 </div>
               </div><!-- end chat box -->
@@ -517,7 +519,7 @@ const connect = function (chat_id, role_id) {
   _socket.addEventListener('open', () => {
     chatData.value = []; // 初始化聊天数据
     previousText.value = '';
-    canSend.value = true;
+    enableInput()
     activelyClose.value = false;
 
     if (isNewChat) { // 加载打招呼信息
@@ -548,9 +550,7 @@ const connect = function (chat_id, role_id) {
             content: ""
           });
         } else if (data.type === "mj") {
-          canSend.value = false;
-          showReGenerate.value = false;
-          showStopGenerate.value = true;
+          disableInput(true)
           const content = data.content;
           const md = require('markdown-it')({breaks: true});
           content.content = md.render(content.content)
@@ -568,16 +568,14 @@ const connect = function (chat_id, role_id) {
           if (flag === false) {
             chatData.value.push({
               type: "mj",
-              id: content.key,
+              id: content["message_id"],
               icon: "/images/avatar/mid_journey.png",
               content: content
             });
           }
 
           if (content.status === "Finished") {
-            canSend.value = true;
-            showReGenerate.value = true;
-            showStopGenerate.value = false;
+            enableInput()
           }
         } else if (data.type === 'end') { // 消息接收完毕
           // 追加当前会话到会话列表
@@ -588,18 +586,12 @@ const connect = function (chat_id, role_id) {
             activeChat.value = newChatItem.value;
             newChatItem.value = null; // 只追加一次
           }
-          const reply = chatData.value[chatData.value.length - 1]
-          if (reply.content.indexOf("绘画提示词：") === -1) {
-            return
-          }
 
-          canSend.value = true;
-          showReGenerate.value = true;
-          showStopGenerate.value = false;
+          enableInput()
           lineBuffer.value = ''; // 清空缓冲
-
-
+          
           // 获取 token
+          const reply = chatData.value[chatData.value.length - 1]
           httpGet(`/api/chat/tokens?text=${reply.orgContent}&model=${model.value}`).then(res => {
             reply['created_at'] = new Date().getTime();
             reply['tokens'] = res.data;
@@ -639,7 +631,7 @@ const connect = function (chat_id, role_id) {
       return;
     }
     // 停止发送消息
-    canSend.value = true;
+    disableInput(true)
     socket.value = null;
     loading.value = true;
     checkSession().then(() => {
@@ -657,6 +649,18 @@ const connect = function (chat_id, role_id) {
   socket.value = _socket;
 }
 
+const disableInput = (force) => {
+  canSend.value = false;
+  showReGenerate.value = false;
+  showStopGenerate.value = !force;
+}
+
+const enableInput = () => {
+  canSend.value = true;
+  showReGenerate.value = previousText.value !== "";
+  showStopGenerate.value = false;
+}
+
 // 登录输入框输入事件处理
 const inputKeyDown = function (e) {
   if (e.keyCode === 13) {
@@ -700,9 +704,7 @@ const sendMessage = function () {
   })
 
   showHello.value = false
-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
   socket.value.send(prompt.value);
   previousText.value = prompt.value;
   prompt.value = '';
@@ -794,18 +796,13 @@ const loadChatHistory = function (chatId) {
 const stopGenerate = function () {
   showStopGenerate.value = false;
   httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
-    canSend.value = true;
-    if (previousText.value !== '') {
-      showReGenerate.value = true;
-    }
+    enableInput()
   })
 }
 
 // 重新生成
 const reGenerate = function () {
-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
   const text = '重新生成上述问题的答案：' + previousText.value;
   // 追加消息
   chatData.value.push({

web/src/views/Login.vue

@@ -52,7 +52,7 @@ import {onMounted, ref} from "vue";
 import {Lock, UserFilled} from "@element-plus/icons-vue";
 import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {setLoginUser} from "@/store/session";
+import {setSessionId} from "@/store/session";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 import {isMobile} from "@/utils/libs";
@@ -79,7 +79,7 @@ const login = function () {
   }
 
   httpPost('/api/user/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
-    setLoginUser(res.data)
+    setSessionId(res.data)
     if (isMobile()) {
       router.push('/mobile')
     } else {

web/src/views/admin/Login.vue

@@ -44,7 +44,7 @@ import {onMounted, ref} from "vue";
 import {Lock, UserFilled} from "@element-plus/icons-vue";
 import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {setLoginUser} from "@/store/session";
+import {setSession} from "@/store/session";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 
@@ -70,7 +70,6 @@ const login = function () {
   }
 
   httpPost('/api/admin/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
-    setLoginUser(res.data)
     router.push("/admin")
   }).catch((e) => {
     ElMessage.error('登录失败，' + e.message)