From 4a09da3a253c6d4168e2a93b5293289ed1e02c80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=8F=8C=E6=98=8E?= <husm@pvc123.com>
Date: Mon, 2 Sep 2024 17:33:03 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(Luma):=20=E5=8A=A0=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E5=89=8D=E5=90=8E=E5=B8=A7=E8=B0=83=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/luma.styl | 10 ++++++++++
 web/src/views/Luma.vue       | 22 ++++++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 7d773b3f..62f82065 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -21,6 +21,7 @@
       flex-flow row
       padding-bottom 10px
       justify-content center
+      align-items center
 
       .item {
         position relative
@@ -45,8 +46,16 @@
           }
         }
       }
+
+      .btn-swap {
+        margin-right 10px
+        .icon{
+          fill #fff
+        }
+      }
     }
 
+
     .prompt-container {
       width: 100%;
       .input-container {
@@ -131,6 +140,7 @@
 
         .video-box {
           width 100%
+          aspect-ratio: 16/9;
           border-radius 10px
           video,img {
             width: 100%;
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 6fa1df0d..b3760018 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -2,15 +2,21 @@
   <div class="page-luma">
     <div class="prompt-box">
       <div class="images">
-        <div v-for="img in images" :key="img" class="item">
-          <el-image :src="img" fit="cover"/>
-          <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
-        </div>
+        <template v-for="(img, index) in images" :key="img">
+          <div class="item">
+            <el-image :src="img" fit="cover"/>
+            <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
+          </div>
+          <div class="btn-swap" v-if="images.length == 2 && index == 0">
+            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" @click="switchReverse">
+              <path d="M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z"></path>
+            </svg>
+          </div>
+        </template>
       </div>
       <div class="prompt-container">
         <div class="input-container">
-          <div class="upload-icon">
-
+          <div class="upload-icon" v-if="images.length < 2">
             <el-upload
                 class="avatar-uploader"
                 :auto-upload="true"
@@ -160,6 +166,10 @@ const remove = (img) => {
   images.value = images.value.filter(item => item !== img)
 }
 
+const switchReverse = () => {
+  images.value = images.value.reverse()
+}
+
 
 </script>
 

From 151017ed47c9f63957963d98084ee135db3520b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=8F=8C=E6=98=8E?= <husm@pvc123.com>
Date: Thu, 5 Sep 2024 08:50:49 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/luma.styl         | 199 +++++++++++++++++++
 web/src/components/ui/Generating.vue |   4 +-
 web/src/views/Luma.vue               | 275 +++++++++++++++++++++++++--
 3 files changed, 464 insertions(+), 14 deletions(-)

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 62f82065..9d529a3a 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -134,6 +134,192 @@
       text-align left
     }
 
+    .list-box {
+      padding 0 0 0 20px
+      .item {
+        display flex
+        flex-flow row
+        padding 5px 0
+        cursor pointer
+        margin-bottom 10px
+
+        &:hover {
+          background-color #2A2525
+        }
+
+        .left {
+          .container {
+            width 60px
+            height 90px
+            position relative
+
+            .el-image {
+              height 90px
+              border-radius 5px
+            }
+
+            .duration {
+              position absolute
+              bottom 0
+              right 0
+              background-color rgba(14,8,8,.7)
+              padding 0 3px
+              font-family 'Input Sans'
+              font-size 14px
+              font-weight 700
+              border-radius .125rem
+            }
+
+            .play {
+              position absolute
+              width: 56px;
+              height 100%
+              top: 0;
+              left: 50%;
+              border none
+              border-radius 5px
+              background rgba(100, 100, 100, 0.3)
+              cursor pointer
+              color #ffffff
+              opacity 0
+              transform: translate(-50%, 0px);
+              transition opacity 0.3s ease 0s
+            }
+
+            &:hover {
+              .play {
+                opacity 1
+                //display block
+              }
+            }
+          }
+        }
+
+        .center {
+          width 100%
+          //border 1px solid saddlebrown
+          display flex
+          justify-content center
+          align-items flex-start
+          flex-flow column
+          height 90px
+          padding 0 20px
+
+          .title {
+            padding 6px 0
+            font-size 16px
+            font-weight 700
+
+            a {
+              color rgb(250 247 245)
+              &:hover {
+                text-decoration underline
+              }
+            }
+
+            .model {
+              color #E2E8F0
+              background-color #1C1616
+              border 1px solid #8f8f8f
+              font-weight normal
+              font-size 14px
+              padding 1px 3px
+              border-radius 5px
+              margin-left 10px
+
+              .iconfont {
+                font-size 12px
+              }
+            }
+          }
+
+          .tags {
+            font-size 14px
+            color #d1d1d1
+            padding 3px 0
+          }
+        }
+
+        .right {
+          min-width 350px;
+          font-size 14px
+          padding 0 15px
+
+          .tools {
+            display flex
+            justify-content left
+            align-items center
+            flex-flow row
+            height 90px
+
+            .btn-publish {
+              padding 2px 10px
+
+              .text {
+                margin-right 10px
+              }
+            }
+
+            .btn-icon {
+              background none
+              padding 6px
+              transition background 0.6s ease 0s
+              color #726E6C
+
+              &:hover {
+                background #3C3737
+              }
+            }
+          }
+        }
+      }
+
+
+      .task {
+        height 100px
+        background-color #2A2525
+        display flex
+        margin-bottom 10px
+        .left {
+          display flex
+          justify-content left
+          align-items center
+          padding 20px
+          width 320px
+          .title {
+            font-size 14px
+            color #e1e1e1
+            white-space: nowrap; /* 防止文字换行 */
+            overflow: hidden; /* 隐藏溢出的内容 */
+            text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
+          }
+        }
+        .center {
+          display flex
+          width 100%
+          justify-content center
+          .failed {
+            display flex
+            align-items center
+            color #E4696B
+            font-size 14px
+          }
+        }
+        .right {
+          display flex
+          width 100px
+          justify-content center
+          align-items center
+        }
+      }
+    }
+
+    .pagination {
+      padding 10px 20px
+      display flex
+      justify-content center
+    }
+
     .videos {
       .item {
         margin-bottom 20px
@@ -197,4 +383,17 @@
     }
   }
 
+  .btn {
+    margin-right 10px
+    background-color #363030
+    border none
+    border-radius 5px
+    padding 5px 10px
+    cursor pointer
+
+    &:hover {
+      background-color #5F5958
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/web/src/components/ui/Generating.vue b/web/src/components/ui/Generating.vue
index de3d4ddd..b1dbeb0c 100644
--- a/web/src/components/ui/Generating.vue
+++ b/web/src/components/ui/Generating.vue
@@ -12,7 +12,9 @@
       <div class="bar"></div>
       <div class="bar"></div>
     </div>
-    <div class="text">正在生成歌曲</div>
+    <div class="text">
+      <slot>正在生成歌曲</slot>
+    </div>
   </div>
 </template>
 
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index b3760018..43600a85 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -30,11 +30,11 @@
           <textarea
               class="prompt-input"
               :rows="row"
-              v-model="prompt"
+              v-model="formData.prompt"
               placeholder="请输入提示词或者上传图片"
               autofocus>
                       </textarea>
-          <div class="send-icon">
+          <div class="send-icon" @click="create">
             <i class="iconfont icon-send"></i>
           </div>
         </div>
@@ -42,20 +42,22 @@
         <div class="params">
           <div class="item-group">
             <span class="label">循环参考图</span>
-            <el-switch  v-model="loop" size="small" style="--el-switch-on-color:#BF78BF;" />
+            <el-switch  v-model="formData.loop" size="small" style="--el-switch-on-color:#BF78BF;" />
           </div>
           <div class="item-group">
             <span class="label">提示词优化</span>
-            <el-switch  v-model="promptExtend" size="small" style="--el-switch-on-color:#BF78BF;" />
+            <el-switch  v-model="formData.expand_prompt" size="small" style="--el-switch-on-color:#BF78BF;" />
           </div>
         </div>
       </div>
     </div>
 
-    <el-container class="video-container">
+
+
+    <el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
       <h2 class="h-title">你的作品</h2>
 
-      <el-row :gutter="20" class="videos">
+      <!-- <el-row :gutter="20" class="videos">
         <el-col :span="8" class="item" :key="item.id" v-for="item in videos">
           <div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">
             <img :src="item.cover"  :alt="item.name" v-show="!item.playing"/>
@@ -72,24 +74,138 @@
             </button>
           </div>
         </el-col>
-      </el-row>
+      </el-row> -->
+
+      <div class="list-box" v-if="!noData">
+        <div v-for="item in list" :key="item.id">
+          <div class="item" v-if="item.progress === 100">
+            <div class="left">
+              <div class="container">
+                <el-image :src="item.cover_url" fit="cover" />
+                <!-- <div class="duration">{{formatTime(item.duration)}}</div> -->
+                <button class="play" @click="play(item)">
+                  <img src="/images/play.svg" alt=""/>
+                </button>
+              </div>
+            </div>
+            <div class="center">
+              <div class="title">
+                <a>{{item.prompt}}</a>
+                <!-- <span class="model" v-if="item.major_model_version">{{item.major_model_version}}</span>
+                <span class="model" v-if="item.type === 4">用户上传</span>
+                <span class="model" v-if="item.type === 3">
+                  <i class="iconfont icon-mp3"></i>
+                  完整歌曲
+                </span>
+                <span class="model" v-if="item.ref_song">
+                    <i class="iconfont icon-link"></i>
+                    {{item.ref_song.title}}
+                  </span> -->
+              </div>
+              <div class="tags" v-if="item.prompt_ext">{{item.prompt_ext}}</div>
+            </div>
+            <div class="right">
+              <div class="tools">
+                <button class="btn btn-publish">
+                  <span class="text">发布</span>
+                  <black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
+                </button>
+
+                <el-tooltip effect="light" content="下载歌曲" placement="top">
+                  <a :href="item.audio_url" :download="item.title+'.mp3'" target="_blank">
+                    <button class="btn btn-icon">
+                      <i class="iconfont icon-download"></i>
+                    </button>
+                  </a>
+                </el-tooltip>
+
+                <el-tooltip effect="light" content="复制歌曲链接" placement="top">
+                  <button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(item)" >
+                    <i class="iconfont icon-share1"></i>
+                  </button>
+                </el-tooltip>
+
+                <el-tooltip effect="light" content="编辑" placement="top">
+                  <button class="btn btn-icon" @click="update(item)">
+                    <i class="iconfont icon-edit"></i>
+                  </button>
+                </el-tooltip>
+
+                <el-tooltip effect="light" content="删除" placement="top">
+                  <button class="btn btn-icon" @click="removeJob(item)">
+                    <i class="iconfont icon-remove"></i>
+                  </button>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+          <div class="task" v-else>
+            <div style="width: 60px; flex-shrink: 0; display: flex; align-items: center;" v-if="item.params.start_img_url">
+              <el-image :src="item.params.start_img_url" fit="cover" />
+            </div>            
+            <div class="left">
+              <div class="title">
+                <span v-if="item.title">{{item.title}}</span>
+                <span v-else>{{item.prompt}}</span>
+              </div>
+            </div>
+            <div class="center">
+              <div class="failed" v-if="item.progress === 101">
+                {{item.err_msg}}
+              </div>
+              <generating v-else>正在生成视频</generating>
+            </div>
+            <div class="right">
+              <el-button type="info" @click="removeJob(item)" circle>
+                <i class="iconfont icon-remove"></i>
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
+
+      <div class="pagination">
+        <el-pagination v-if="total > pageSize" background
+          style="--el-pagination-button-bg-color:#414141;
+          --el-pagination-button-color:#d1d1d1;
+          --el-disabled-bg-color:#414141;
+          --el-color-primary:#666666;
+          --el-pagination-hover-color:#e1e1e1"
+          layout="total,prev, pager, next"
+          :hide-on-single-page="true"
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          @current-change="fetchData(page)"
+          :total="total"/>
+      </div>
     </el-container>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {CircleCloseFilled} from "@element-plus/icons-vue";
-import {httpDownload, httpPost} from "@/utils/http";
+import {httpDownload, httpPost, httpGet} from "@/utils/http";
+import {checkSession} from "@/store/cache";
 import {showMessageError} from "@/utils/dialog";
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
+import Clipboard from "clipboard";
+import BlackSwitch from "@/components/ui/BlackSwitch.vue";
+import Generating from "@/components/ui/Generating.vue";
+
 
 const row = ref(1)
-const prompt = ref('')
-const loop = ref(false)
-const promptExtend = ref(false)
 const images = ref([])
 
+const formData = reactive({
+  prompt: '',
+  expand_prompt: true,
+  loop: true,
+  first_frame_img: '',
+  end_frame_img: ''
+})
+
 const videos = ref([
   {
     id: 1,
@@ -128,6 +244,51 @@ const videos = ref([
   },
 ])
 
+const socket = ref(null)
+const userId = ref(0)
+const connect = () => {
+  let host = process.env.VUE_APP_WS_HOST
+  if (host === '') {
+    if (location.protocol === 'https:') {
+      host = 'wss://' + location.host;
+    } else {
+      host = 'ws://' + location.host;
+    }
+  }
+
+  const _socket = new WebSocket(host + `/api/video/client?user_id=${userId.value}`);
+  _socket.addEventListener('open', () => {
+    socket.value = _socket;
+  });
+
+  _socket.addEventListener('message', event => {
+    if (event.data instanceof Blob) {
+      const reader = new FileReader();
+      reader.readAsText(event.data, "UTF-8")
+      reader.onload = () => {
+        const message = String(reader.result)
+        if (message === "FINISH" || message === "FAIL") {
+          fetchData()
+        }
+      }
+    }
+  });
+
+  _socket.addEventListener('close', () => {
+    if (socket.value !== null) {
+      connect()
+    }
+  });
+}
+
+onMounted(()=>{
+  checkSession().then(user => {
+    userId.value = user.id
+    connect()
+  })
+  fetchData(1)
+})
+
 const download = (item) => {
   const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${item.url}`
   // parse filename
@@ -150,6 +311,38 @@ const download = (item) => {
   })
 }
 
+const removeJob = (item) => {
+  ElMessageBox.confirm(
+      '此操作将会删除任务相关文件，继续操作码?',
+      '删除提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(() => {
+    httpGet("/api/video/remove", {id: item.id}).then(() => {
+      ElMessage.success("任务删除成功")
+      fetchData()
+    }).catch(e => {
+      ElMessage.error("任务删除失败：" + e.message)
+    })
+  }).catch(() => {
+  })
+}
+
+const publishJob = (item) => {
+  httpGet("/api/video/publish", {id: item.id, publish:item.publish}).then(() => {
+    ElMessage.success("操作成功")
+  }).catch(e => {
+    ElMessage.error("操作失败：" + e.message)
+  })
+}
+
+const getShareURL = (item) => {
+  return `${location.protocol}//${location.host}/song/${item.id}`
+}
+
 const upload = (file) => {
   const formData = new FormData();
   formData.append('file', file.file, file.name);
@@ -169,6 +362,62 @@ const remove = (img) => {
 const switchReverse = () => {
   images.value = images.value.reverse()
 }
+const loading = ref(false)
+const list = ref([])
+const noData = ref(true)
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const fetchData = (_page) => {
+  if (_page) {
+    page.value = _page
+  }
+  httpGet("/api/video/list",{page:page.value, page_size:pageSize.value, type: 'luma'}).then(res => {
+    total.value = res.data.total
+    const items = []
+    for (let v of res.data.items) {
+      if(v.prompt == '风雨交加的夜晚'){
+        v.progress = 100
+        v.video_url = 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4'
+        v.cover_url = 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg'
+      }
+
+      if (v.progress === 100) {
+        //v.major_model_version = v['raw_data']['major_model_version']
+      }
+
+
+      
+      items.push(v)
+    }
+    loading.value = false
+    list.value = items
+    noData.value = list.value.length === 0
+  }).catch(e => {
+    loading.value = false
+    noData.value = true
+    showMessageError("获取作品列表失败："+e.message)
+  })
+}
+
+// 创建视频
+const create = () => {
+
+  const len =  images.value.length;
+  if(len){
+    formData.first_frame_img = images.value[0]
+    if(len == 2){
+      formData.end_frame_img = images.value[1]
+    }
+  }
+
+  httpPost("/api/video/luma/create", formData).then(() => {
+    fetchData(1)
+    showMessageOK("创建任务成功")
+  }).catch(e => {
+    showMessageError("创建任务失败："+e.message)
+  })
+}
 
 
 </script>

From 3f6890da272ee86d4e7d195d0a3d5d258f4157ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=8F=8C=E6=98=8E?= <husm@pvc123.com>
Date: Thu, 5 Sep 2024 11:56:02 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=A1=B5=E9=9D=A22?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/luma.styl          | 18 ++++--
 web/src/components/ui/BlackDialog.vue | 12 +++-
 web/src/utils/libs.js                 |  9 +++
 web/src/views/Luma.vue                | 80 ++++++++++-----------------
 4 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 9d529a3a..b50fb16a 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -139,6 +139,7 @@
       .item {
         display flex
         flex-flow row
+        align-items center
         padding 5px 0
         cursor pointer
         margin-bottom 10px
@@ -149,11 +150,16 @@
 
         .left {
           .container {
-            width 60px
-            height 90px
+            width 160px
             position relative
 
+            .video{
+              width 160px
+              border-radius 5px
+            }
+
             .el-image {
+              width 160px
               height 90px
               border-radius 5px
             }
@@ -172,7 +178,7 @@
 
             .play {
               position absolute
-              width: 56px;
+              width: 100%
               height 100%
               top: 0;
               left: 50%;
@@ -202,14 +208,13 @@
           justify-content center
           align-items flex-start
           flex-flow column
-          height 90px
           padding 0 20px
 
           .title {
             padding 6px 0
             font-size 16px
             font-weight 700
-
+            color rgb(250 247 245)
             a {
               color rgb(250 247 245)
               &:hover {
@@ -241,7 +246,7 @@
         }
 
         .right {
-          min-width 350px;
+          min-width 200px;
           font-size 14px
           padding 0 15px
 
@@ -279,6 +284,7 @@
         height 100px
         background-color #2A2525
         display flex
+        align-items center
         margin-bottom 10px
         .left {
           display flex
diff --git a/web/src/components/ui/BlackDialog.vue b/web/src/components/ui/BlackDialog.vue
index 7794afb0..4e659ad2 100644
--- a/web/src/components/ui/BlackDialog.vue
+++ b/web/src/components/ui/BlackDialog.vue
@@ -20,10 +20,10 @@
       <div class="dialog-body">
         <slot></slot>
       </div>
-      <template #footer>
+      <template #footer v-if="!hideFooter">
         <div class="dialog-footer">
           <el-button @click="cancel">{{cancelText}}</el-button>
-          <el-button type="primary" @click="$emit('confirm')">{{confirmText}}</el-button>
+          <el-button type="primary" @click="$emit('confirm')" v-if="!hideConfirm">{{confirmText}}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -43,6 +43,14 @@ const props = defineProps({
     type: Number,
     default: 500,
   },
+  hideFooter:{
+    type: Boolean,
+    default: false
+  },
+  hideConfirm:{
+    type: Boolean,
+    default: false
+  },
   confirmText: {
     type: String,
     default: '确定',
diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js
index 11b342d7..425b06dd 100644
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -220,3 +220,12 @@ export function showLoginDialog(router) {
     });
 }
 
+export const replaceImg =(img) => {
+    const devhost = "172.22.11.69"
+    const localhost = "localhost"
+    if (img.includes(localhost)) {
+        return img?.replace(localhost, devhost)
+    }
+    return img
+}
+
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 43600a85..af74cd29 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -4,7 +4,7 @@
       <div class="images">
         <template v-for="(img, index) in images" :key="img">
           <div class="item">
-            <el-image :src="img" fit="cover"/>
+            <el-image :src="replaceImg(img)" fit="cover"/>
             <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
           </div>
           <div class="btn-swap" v-if="images.length == 2 && index == 0">
@@ -81,7 +81,10 @@
           <div class="item" v-if="item.progress === 100">
             <div class="left">
               <div class="container">
-                <el-image :src="item.cover_url" fit="cover" />
+                <video class="video" :src="replaceImg(item.video_url)"  preload="auto" loop="loop" muted="muted">
+                  您的浏览器不支持视频播放
+                </video>
+                <!-- <el-image :src="item.cover_url" fit="cover" /> -->
                 <!-- <div class="duration">{{formatTime(item.duration)}}</div> -->
                 <button class="play" @click="play(item)">
                   <img src="/images/play.svg" alt=""/>
@@ -89,19 +92,7 @@
               </div>
             </div>
             <div class="center">
-              <div class="title">
-                <a>{{item.prompt}}</a>
-                <!-- <span class="model" v-if="item.major_model_version">{{item.major_model_version}}</span>
-                <span class="model" v-if="item.type === 4">用户上传</span>
-                <span class="model" v-if="item.type === 3">
-                  <i class="iconfont icon-mp3"></i>
-                  完整歌曲
-                </span>
-                <span class="model" v-if="item.ref_song">
-                    <i class="iconfont icon-link"></i>
-                    {{item.ref_song.title}}
-                  </span> -->
-              </div>
+              <div class="title">{{item.prompt}}</div>
               <div class="tags" v-if="item.prompt_ext">{{item.prompt_ext}}</div>
             </div>
             <div class="right">
@@ -111,26 +102,12 @@
                   <black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
                 </button>
 
-                <el-tooltip effect="light" content="下载歌曲" placement="top">
-                  <a :href="item.audio_url" :download="item.title+'.mp3'" target="_blank">
-                    <button class="btn btn-icon">
-                      <i class="iconfont icon-download"></i>
-                    </button>
-                  </a>
-                </el-tooltip>
-
-                <el-tooltip effect="light" content="复制歌曲链接" placement="top">
-                  <button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(item)" >
-                    <i class="iconfont icon-share1"></i>
+                <el-tooltip effect="light" content="下载视频" placement="top">
+                  <button class="btn btn-icon" @click="download(item)" :disabled="item.downloading">
+                    <i class="iconfont icon-download" v-if="!item.downloading"></i>
+                    <el-image src="/images/loading.gif" fit="cover" v-else />
                   </button>
                 </el-tooltip>
-
-                <el-tooltip effect="light" content="编辑" placement="top">
-                  <button class="btn btn-icon" @click="update(item)">
-                    <i class="iconfont icon-edit"></i>
-                  </button>
-                </el-tooltip>
-
                 <el-tooltip effect="light" content="删除" placement="top">
                   <button class="btn btn-icon" @click="removeJob(item)">
                     <i class="iconfont icon-remove"></i>
@@ -140,8 +117,8 @@
             </div>
           </div>
           <div class="task" v-else>
-            <div style="width: 60px; flex-shrink: 0; display: flex; align-items: center;" v-if="item.params.start_img_url">
-              <el-image :src="item.params.start_img_url" fit="cover" />
+            <div style="width: 160px; height: 90px; flex-shrink: 0; display: flex; align-items: center;" v-if="item.params.start_img_url">
+              <el-image style="width: 100%; height: 100%; border-radius: 5px;" :src="replaceImg(item.params.start_img_url)" fit="cover" />
             </div>            
             <div class="left">
               <div class="title">
@@ -180,6 +157,11 @@
           :total="total"/>
       </div>
     </el-container>
+    <black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" :width="1000">
+      <video style="width: 100%;" :src="currentVideoUrl"  preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
+        您的浏览器不支持视频播放
+      </video>
+    </black-dialog>    
   </div>
 </template>
 
@@ -189,12 +171,15 @@ import {CircleCloseFilled} from "@element-plus/icons-vue";
 import {httpDownload, httpPost, httpGet} from "@/utils/http";
 import {checkSession} from "@/store/cache";
 import {showMessageError} from "@/utils/dialog";
+import { replaceImg } from "@/utils/libs"
 import {ElMessage, ElMessageBox} from "element-plus";
 import Clipboard from "clipboard";
 import BlackSwitch from "@/components/ui/BlackSwitch.vue";
 import Generating from "@/components/ui/Generating.vue";
+import BlackDialog from "@/components/ui/BlackDialog.vue";
 
-
+const showDialog = ref(false)
+const currentVideoUrl = ref('')
 const row = ref(1)
 const images = ref([])
 
@@ -290,9 +275,10 @@ onMounted(()=>{
 })
 
 const download = (item) => {
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${item.url}`
+  const url = replaceImg(item.video_url)
+  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
   // parse filename
-  const urlObj = new URL(item.url);
+  const urlObj = new URL(url);
   const fileName = urlObj.pathname.split('/').pop();
   item.downloading = true
   httpDownload(downloadURL).then(response  => {
@@ -311,6 +297,11 @@ const download = (item) => {
   })
 }
 
+const play = (item) => {
+  currentVideoUrl.value = replaceImg(item.video_url)
+  showDialog.value = true
+}
+
 const removeJob = (item) => {
   ElMessageBox.confirm(
       '此操作将会删除任务相关文件，继续操作码?',
@@ -339,10 +330,6 @@ const publishJob = (item) => {
   })
 }
 
-const getShareURL = (item) => {
-  return `${location.protocol}//${location.host}/song/${item.id}`
-}
-
 const upload = (file) => {
   const formData = new FormData();
   formData.append('file', file.file, file.name);
@@ -376,18 +363,9 @@ const fetchData = (_page) => {
     total.value = res.data.total
     const items = []
     for (let v of res.data.items) {
-      if(v.prompt == '风雨交加的夜晚'){
-        v.progress = 100
-        v.video_url = 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4'
-        v.cover_url = 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg'
-      }
-
       if (v.progress === 100) {
         //v.major_model_version = v['raw_data']['major_model_version']
       }
-
-
-      
       items.push(v)
     }
     loading.value = false