feat: midjourney drawing image function is ready

web/src/components/ChatMidJourney.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="chat-line chat-line-mj">
+    <div class="chat-line-inner">
+      <div class="chat-icon">
+        <img :src="icon" alt="User"/>
+      </div>
+
+      <div class="chat-item">
+        <div class="content">
+          <div class="text" v-html="data.content"></div>
+          <div class="images" v-if="data.image?.url !== ''">
+            <el-image :src="data.image?.url"
+                      :zoom-rate="1.0"
+                      :preview-src-list="[data.image?.url]"
+                      :initial-index="0" lazy>
+              <template #placeholder>
+                <div class="image-slot"
+                     :style="{height: height+'px', lineHeight:height+'px'}">
+                  正在加载图片<span class="dot">...</span></div>
+              </template>
+
+              <template #error>
+                <div class="image-slot">
+                  <el-icon>
+                    <icon-picture/>
+                  </el-icon>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+
+        <div class="opt" v-if="data.image?.hash !== ''">
+          <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 class="bar" v-if="createdAt !== ''">
+          <span class="bar-item"><el-icon><Clock/></el-icon> {{ createdAt }}</span>
+          <span class="bar-item">tokens: {{ tokens }}</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {Clock} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
+
+const props = defineProps({
+  content: Object,
+  icon: String,
+  createdAt: String
+});
+
+const data = ref(props.content)
+console.log(data.value)
+const tokens = ref(0)
+const cacheKey = "img_placeholder_height"
+const item = localStorage.getItem(cacheKey);
+const height = ref(0)
+if (item) {
+  height.value = parseInt(item)
+}
+if (data.value["image"]?.width > 0) {
+  height.value = 350 * data.value["image"]?.height / data.value["image"]?.width
+  localStorage.setItem(cacheKey, height.value)
+}
+
+watch(() => props.content, (newVal) => {
+  data.value = newVal;
+});
+
+const upscale = (index) => {
+  ElMessage.warning("当前版本暂未实现 Variation 功能！")
+}
+
+const variation = (index) => {
+  ElMessage.warning("当前版本暂未实现 Variation 功能！")
+}
+</script>
+
+<style lang="stylus">
+.chat-line-mj {
+  background-color #ffffff;
+  justify-content: center;
+  width 100%
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+  border-bottom: 1px solid #d9d9e3;
+
+  .chat-line-inner {
+    display flex;
+    width 100%;
+    max-width 900px;
+    padding-left 10px;
+
+    .chat-icon {
+      margin-right 20px;
+
+      img {
+        width: 30px;
+        height: 30px;
+        border-radius: 10px;
+        padding: 1px;
+      }
+    }
+
+    .chat-item {
+      position: relative;
+      padding: 0 5px 0 0;
+      overflow: hidden;
+
+      .content {
+        word-break break-word;
+        padding: 6px 10px;
+        color #374151;
+        font-size: var(--content-font-size);
+        border-radius: 5px;
+        overflow: auto;
+
+        .text {
+          p:first-child {
+            margin-top 0
+          }
+        }
+
+        .images {
+          max-width 350px;
+
+          .el-image {
+            border-radius 10px;
+
+            .image-slot {
+              color #c1c1c1
+              width 350px
+              text-align center
+              border-radius 10px;
+              border 1px solid #e1e1e1
+            }
+          }
+        }
+      }
+
+      .opt {
+        .opt-line {
+          margin 6px 0
+
+          ul {
+            display flex
+            flex-flow row
+            padding-left 10px
+
+            li {
+              margin-right 10px
+
+              a {
+                padding 6px 0
+                width 64px
+                text-align center
+                border-radius 5px
+                display block
+                cursor pointer
+                background-color #4E5058
+                color #ffffff
+
+                &:hover {
+                  background-color #6D6F78
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .bar {
+        padding 10px;
+
+        .bar-item {
+          background-color #f7f7f8;
+          color #888
+          padding 3px 5px;
+          margin-right 10px;
+          border-radius 5px;
+
+          .el-icon {
+            position relative
+            top 2px;
+          }
+        }
+      }
+    }
+  }
+
+
+}
+</style>

web/src/components/ChatPrompt.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 .chat-line-prompt {
   background-color #ffffff;
   justify-content: center;

web/src/views/ChatExport.vue

@@ -22,6 +22,10 @@
                     :created-at="dateFormat(item['created_at'])"
                     :tokens="item['tokens']"
                     :content="item.content"/>
+        <chat-mid-journey v-else-if="item.type==='mj'"
+                          :content="item.content"
+                          :icon="item.icon"
+                          :created-at="dateFormat(item['created_at'])"/>
       </div>
     </div><!-- end chat box -->
   </div>
@@ -38,6 +42,7 @@ import 'highlight.js/styles/a11y-dark.css'
 import hl from "highlight.js";
 import {ElMessage} from "element-plus";
 import {Promotion} from "@element-plus/icons-vue";
+import ChatMidJourney from "@/components/ChatMidJourney.vue";
 
 const chatData = ref([])
 const router = useRouter()
@@ -57,6 +62,11 @@ httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
     if (data[i].type === "prompt") {
       chatData.value.push(data[i]);
       continue;
+    } else if (data[i].type === "mj") {
+      data[i].content = JSON.parse(data[i].content)
+      data[i].content.content = md.render(data[i].content?.content)
+      chatData.value.push(data[i]);
+      continue;
     }
 
     data[i].orgContent = data[i].content;

web/src/views/ChatPlus.vue

@@ -166,6 +166,10 @@
                               :created-at="dateFormat(item['created_at'])"
                               :tokens="item['tokens']"
                               :content="item.content"/>
+                  <chat-mid-journey v-else-if="item.type==='mj'"
+                                    :content="item.content"
+                                    :icon="item.icon"
+                                    :created-at="dateFormat(item['created_at'])"/>
                 </div>
               </div><!-- end chat box -->
 
@@ -277,6 +281,7 @@ import {checkSession} from "@/action/session";
 import BindMobile from "@/components/BindMobile.vue";
 import RewardVerify from "@/components/RewardVerify.vue";
 import Welcome from "@/components/Welcome.vue";
+import ChatMidJourney from "@/components/ChatMidJourney.vue";
 
 const title = ref('ChatGPT-智能助手');
 const logo = 'images/logo.png';
@@ -542,12 +547,39 @@ const connect = function (chat_id, role_id) {
             icon: _role['icon'],
             content: ""
           });
-        } else if (data.type === 'end') { // 消息接收完毕
-          canSend.value = true;
-          showReGenerate.value = true;
-          showStopGenerate.value = false;
-          lineBuffer.value = ''; // 清空缓冲
+        } else if (data.type === "mj") {
+          canSend.value = false;
+          showReGenerate.value = false;
+          showStopGenerate.value = true;
+          const content = data.content;
+          const md = require('markdown-it')({breaks: true});
+          content.content = md.render(content.content)
+          // console.log(content)
+          // check if the message is in chatData
+          let flag = false
+          for (let i = 0; i < chatData.value.length; i++) {
+            if (chatData.value[i].id === content.key) {
+              console.log(chatData.value[i])
+              flag = true
+              chatData.value[i].content = content
+              break
+            }
+          }
+          if (flag === false) {
+            chatData.value.push({
+              type: "mj",
+              id: content.key,
+              icon: "/images/avatar/mid_journey.png",
+              content: content
+            });
+          }
 
+          if (content.status === "Finished") {
+            canSend.value = true;
+            showReGenerate.value = true;
+            showStopGenerate.value = false;
+          }
+        } else if (data.type === 'end') { // 消息接收完毕
           // 追加当前会话到会话列表
           if (isNewChat && newChatItem.value !== null) {
             newChatItem.value['title'] = previousText.value;
@@ -556,9 +588,18 @@ 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;
+          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;
@@ -723,6 +764,11 @@ const loadChatHistory = function (chatId) {
       if (data[i].type === "prompt") {
         chatData.value.push(data[i]);
         continue;
+      } else if (data[i].type === "mj") {
+        data[i].content = JSON.parse(data[i].content)
+        data[i].content.content = md.render(data[i].content?.content)
+        chatData.value.push(data[i]);
+        continue;
       }
 
       data[i].orgContent = data[i].content;

web/src/views/admin/Login.vue

@@ -65,7 +65,7 @@ const login = function () {
   if (username.value === '') {
     return ElMessage.error('请输入用户名');
   }
-  if (password.value.trim() === '') {
+  if (password.value === '') {
     return ElMessage.error('请输入密码');
   }