mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-18 01:06:39 +08:00
Merge remote-tracking branch 'inet/husm_2024-09-02' into dev-4.1.3
This commit is contained in:
RockYang
commit
d4e00b960c
@ -21,6 +21,7 @@
|
|||||||
flex-flow row
|
flex-flow row
|
||||||
padding-bottom 10px
|
padding-bottom 10px
|
||||||
justify-content center
|
justify-content center
|
||||||
|
align-items center
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
position relative
|
position relative
|
||||||
@ -45,7 +46,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-swap {
|
||||||
|
margin-right 10px
|
||||||
|
.icon{
|
||||||
|
fill #fff
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.prompt-container {
|
.prompt-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -125,12 +134,205 @@
|
|||||||
text-align left
|
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 {
|
.videos {
|
||||||
.item {
|
.item {
|
||||||
margin-bottom 20px
|
margin-bottom 20px
|
||||||
|
|
||||||
.video-box {
|
.video-box {
|
||||||
width 100%
|
width 100%
|
||||||
|
aspect-ratio: 16/9;
|
||||||
border-radius 10px
|
border-radius 10px
|
||||||
video,img {
|
video,img {
|
||||||
width: 100%;
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -20,10 +20,10 @@
|
|||||||
<div class="dialog-body">
|
<div class="dialog-body">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer v-if="!hideFooter">
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="cancel">{{cancelText}}</el-button>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -43,6 +43,14 @@ const props = defineProps({
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 500,
|
default: 500,
|
||||||
},
|
},
|
||||||
|
hideFooter:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideConfirm:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
confirmText: {
|
confirmText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '确定',
|
default: '确定',
|
||||||
|
|||||||
@ -12,7 +12,9 @@
|
|||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">正在生成歌曲</div>
|
<div class="text">
|
||||||
|
<slot>正在生成歌曲</slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,15 +2,21 @@
|
|||||||
<div class="page-luma">
|
<div class="page-luma">
|
||||||
<div class="prompt-box">
|
<div class="prompt-box">
|
||||||
<div class="images">
|
<div class="images">
|
||||||
<div v-for="img in images" :key="img" class="item">
|
<template v-for="(img, index) in images" :key="img">
|
||||||
<el-image :src="img" fit="cover"/>
|
<div class="item">
|
||||||
|
<el-image :src="replaceImg(img)" fit="cover"/>
|
||||||
<el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
|
<el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
|
||||||
</div>
|
</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>
|
||||||
<div class="prompt-container">
|
<div class="prompt-container">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<div class="upload-icon">
|
<div class="upload-icon" v-if="images.length < 2">
|
||||||
|
|
||||||
<el-upload
|
<el-upload
|
||||||
class="avatar-uploader"
|
class="avatar-uploader"
|
||||||
:auto-upload="true"
|
:auto-upload="true"
|
||||||
@ -24,11 +30,11 @@
|
|||||||
<textarea
|
<textarea
|
||||||
class="prompt-input"
|
class="prompt-input"
|
||||||
:rows="row"
|
:rows="row"
|
||||||
v-model="prompt"
|
v-model="formData.prompt"
|
||||||
placeholder="请输入提示词或者上传图片"
|
placeholder="请输入提示词或者上传图片"
|
||||||
autofocus>
|
autofocus>
|
||||||
</textarea>
|
</textarea>
|
||||||
<div class="send-icon">
|
<div class="send-icon" @click="create">
|
||||||
<i class="iconfont icon-send"></i>
|
<i class="iconfont icon-send"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -36,20 +42,22 @@
|
|||||||
<div class="params">
|
<div class="params">
|
||||||
<div class="item-group">
|
<div class="item-group">
|
||||||
<span class="label">循环参考图</span>
|
<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>
|
||||||
<div class="item-group">
|
<div class="item-group">
|
||||||
<span class="label">提示词优化</span>
|
<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>
|
||||||
</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>
|
<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">
|
<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">
|
<div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">
|
||||||
<img :src="item.cover" :alt="item.name" v-show="!item.playing"/>
|
<img :src="item.cover" :alt="item.name" v-show="!item.playing"/>
|
||||||
@ -66,24 +74,123 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</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>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from "vue";
|
import {onMounted, reactive, ref} from "vue";
|
||||||
import {CircleCloseFilled} from "@element-plus/icons-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 {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 row = ref(1)
|
||||||
const prompt = ref('')
|
|
||||||
const loop = ref(false)
|
|
||||||
const promptExtend = ref(false)
|
|
||||||
const images = ref([])
|
const images = ref([])
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
prompt: '',
|
||||||
|
expand_prompt: true,
|
||||||
|
loop: true,
|
||||||
|
first_frame_img: '',
|
||||||
|
end_frame_img: ''
|
||||||
|
})
|
||||||
|
|
||||||
const videos = ref([
|
const videos = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
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 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
|
// parse filename
|
||||||
const urlObj = new URL(item.url);
|
const urlObj = new URL(url);
|
||||||
const fileName = urlObj.pathname.split('/').pop();
|
const fileName = urlObj.pathname.split('/').pop();
|
||||||
item.downloading = true
|
item.downloading = true
|
||||||
httpDownload(downloadURL).then(response => {
|
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 upload = (file) => {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', file.file, file.name);
|
formData.append('file', file.file, file.name);
|
||||||
@ -160,6 +346,57 @@ const remove = (img) => {
|
|||||||
images.value = images.value.filter(item => item !== 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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user