Merge remote-tracking branch 'inet/husm_2024-09-02' into dev-4.1.3

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 {
@@ -125,12 +134,205 @@
       text-align left
     }
 
+    .list-box {
+      padding 0 0 0 20px
+      .item {
+        display flex
+        flex-flow row
+        align-items center
+        padding 5px 0
+        cursor pointer
+        margin-bottom 10px
+
+        &:hover {
+          background-color #2A2525
+        }
+
+        .left {
+          .container {
+            width 160px
+            position relative
+
+            .video{
+              width 160px
+              border-radius 5px
+            }
+
+            .el-image {
+              width 160px
+              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: 100%
+              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
+          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 {
+                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 200px;
+          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
+        align-items center
+        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
 
         .video-box {
           width 100%
+          aspect-ratio: 16/9;
           border-radius 10px
           video,img {
             width: 100%;
@@ -187,4 +389,17 @@
     }
   }
 
+  .btn {
+    margin-right 10px
+    background-color #363030
+    border none
+    border-radius 5px
+    padding 5px 10px
+    cursor pointer
+
+    &:hover {
+      background-color #5F5958
+    }
+  }
+
 }

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: '确定',

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>
 

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
+}
+

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="replaceImg(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"
@@ -24,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>
@@ -36,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"/>
@@ -66,24 +74,123 @@
             </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">
+                <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=""/>
+                </button>
+              </div>
+            </div>
+            <div class="center">
+              <div class="title">{{item.prompt}}</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">
+                  <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="removeJob(item)">
+                    <i class="iconfont icon-remove"></i>
+                  </button>
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
+          <div class="task" v-else>
+            <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">
+                <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>
+    <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>
 
 <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 { 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 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,
@@ -122,10 +229,56 @@ 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}`
+  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  => {
@@ -144,6 +297,39 @@ const download = (item) => {
   })
 }
 
+const play = (item) => {
+  currentVideoUrl.value = replaceImg(item.video_url)
+  showDialog.value = true
+}
+
+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 upload = (file) => {
   const formData = new FormData();
   formData.append('file', file.file, file.name);
@@ -160,6 +346,57 @@ const remove = (img) => {
   images.value = images.value.filter(item => item !== 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.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>