show error message for Midjourney task list page

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

@@ -420,9 +420,31 @@
               flex-flow column
               justify-content center
               align-items center
-              min-height 200px
+              min-height 220px
               color #ffffff
+              overflow hidden
 
+              .err-msg-container {
+                overflow hidden
+                word-break break-all
+                padding 0 10px 20px 10px
+                .title {
+                  font-size 16px
+                  text-align center
+                  font-weight bold
+                  color #f56c6c
+                  margin-bottom 20px
+                }
+
+                .text {
+                  font-size 14px
+                  color #E9F1F6
+                  line-height 1.5
+                  text-overflow ellipsis
+                  height 100px
+                  overflow hidden
+                }
+              }
               .iconfont {
                 font-size 50px
                 margin-bottom 10px

web/src/components/ChatMidJourney.vue

@@ -1,244 +0,0 @@
-<template>
-  <div class="chat-line chat-line-mj" v-loading="loading">
-    <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.html"></div>
-          <div class="images" v-if="data.image?.url !== ''">
-            <el-image :src="data.image?.url"
-                      :zoom-rate="1.2"
-                      :preview-src-list="[data.image?.url]"
-                      fit="cover"
-                      :initial-index="0" loading="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>
-                    <Picture/>
-                  </el-icon>
-                </div>
-              </template>
-            </el-image>
-          </div>
-        </div>
-
-        <div class="opt" v-if="data.showOpt &&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, Picture} 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,
-  icon: String,
-  chatId: String,
-  roleId: Number,
-  createdAt: String
-});
-
-const data = ref(props.content)
-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)
-}
-if (data.value["image"]?.width > 0) {
-  height.value = 350 * data.value["image"]?.height / data.value["image"]?.width
-  localStorage.setItem(cacheKey, height.value)
-}
-data.value["showOpt"] = data.value["content"]?.indexOf("- Image #") === -1;
-// console.log(data.value)
-
-watch(() => props.content, (newVal) => {
-  data.value = newVal;
-});
-const emits = defineEmits(['disable-input', 'disable-input']);
-const upscale = (index) => {
-  send('/api/mj/upscale', index)
-}
-
-const variation = (index) => {
-  send('/api/mj/variation', index)
-}
-
-const send = (url, index) => {
-  loading.value = true
-  emits('disable-input')
-  httpPost(url, {
-    index: index,
-    src: "chat",
-    message_id: data.value?.["message_id"],
-    message_hash: data.value?.["image"]?.hash,
-    session_id: getSessionId(),
-    prompt: data.value?.["prompt"],
-    chat_id: props.chatId,
-    role_id: props.roleId,
-    icon: props.icon,
-  }).then(() => {
-    ElMessage.success("任务推送成功，请耐心等待任务执行...")
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("任务推送失败：" + e.message)
-    emits('disable-input')
-  })
-}
-</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: 36px;
-        height: 36px;
-        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

@@ -144,15 +144,26 @@ onMounted(() => {
   if (links) {
     httpPost("/api/upload/list", {urls: links}).then(res => {
       files.value = res.data
+
+      for (let link of links) {
+        if (isExternalImg(link, files.value)) {
+          files.value.push({url:link, ext: ".png"})
+        }
+      }
     }).catch(() => {
     })
 
     for (let link of links) {
       content.value = content.value.replace(link,"")
     }
+
   }
   content.value = md.render(content.value.trim())
 })
+
+const isExternalImg = (link, files) => {
+  return isImage(link) && !files.find(file => file.url === link)
+}
 </script>
 
 <style lang="stylus">

web/src/views/ImageMj.vue

@@ -487,6 +487,17 @@
                           </div>
                         </template>
                       </el-image>
+                      <el-image v-else-if="slotProp.item['err_msg'] !== ''">
+                        <template #error>
+                          <div class="image-slot">
+                            <div class="err-msg-container">
+                              <div class="title">任务失败</div>
+                              <div class="text">{{ slotProp.item['err_msg'] }}</div>
+                            </div>
+                            <el-button type="danger"  @click="removeImage(slotProp.item)">删除</el-button>
+                          </div>
+                        </template>
+                      </el-image>
                       <el-image v-else>
                         <template #error>
                           <div class="image-slot">
@@ -536,16 +547,30 @@
                         </div>
                       </div>
 
-                      <div class="remove">
-                        <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
-                        <el-button type="warning" v-if="slotProp.item.publish"
-                                   @click="publishImage(slotProp.item, false)"
-                                   circle>
-                          <i class="iconfont icon-cancel-share"></i>
-                        </el-button>
-                        <el-button type="success" v-else @click="publishImage(slotProp.item, true)" circle>
-                          <i class="iconfont icon-share-bold"></i>
-                        </el-button>
+                      <div class="remove" v-if="slotProp.item.progress === 100">
+                        <el-tooltip effect="light" content="删除任务" placement="top">
+                          <el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
+                        </el-tooltip>
+                        <el-tooltip effect="light" content="取消发布" placement="top" v-if="slotProp.item.publish">
+                          <el-button type="warning"
+                                     @click="publishImage(slotProp.item, false)"
+                                     circle>
+                            <i class="iconfont icon-cancel-share"></i>
+                          </el-button>
+                        </el-tooltip>
+                        <el-tooltip effect="light" content="发布图片" placement="top" v-else>
+                          <el-button type="success" @click="publishImage(slotProp.item, true)" circle>
+                            <i class="iconfont icon-share-bold"></i>
+                          </el-button>
+                        </el-tooltip>
+
+                        <el-tooltip effect="light" content="复制提示词" placement="top">
+                          <el-button type="success" class="copy-prompt-mj"
+                                     :data-clipboard-text="slotProp.item.prompt" circle>
+                            <el-icon><DocumentCopy/></el-icon>
+                          </el-button>
+                        </el-tooltip>
+
                       </div>
                     </div>
                   </template>
@@ -714,7 +739,7 @@ const connect = () => {
       reader.readAsText(event.data, "UTF-8")
       reader.onload = () => {
         const message = String(reader.result)
-        if (message === "FINISH") {
+        if (message === "FINISH" || message === "FAIL") {
           page.value = 0
           isOver.value = false
           fetchFinishJobs(page.value)
@@ -786,7 +811,7 @@ const fetchRunningJobs = () => {
     const jobs = res.data
     const _jobs = []
     for (let i = 0; i < jobs.length; i++) {
-      if (jobs[i].progress === -1) {
+      if (jobs[i].progress === 101) {
         ElNotification({
           title: '任务执行失败',
           dangerouslyUseHTMLString: true,
@@ -799,7 +824,6 @@ const fetchRunningJobs = () => {
         } else {
           power.value += mjActionPower.value
         }
-        continue
       }
       _jobs.push(jobs[i])
     }
@@ -833,7 +857,7 @@ const fetchFinishJobs = () => {
         jobs[i]['thumb_url'] = '/images/img-placeholder.jpg'
       }
 
-      if (jobs[i].type === 'image' || jobs[i].type === 'variation') {
+      if ((jobs[i].type === 'image' || jobs[i].type === 'variation') && jobs[i].progress === 100) {
         jobs[i]['can_opt'] = true
       }
     }