feat: 生成视频页面

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

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/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>