xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 08:13:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 生成视频页面2

Browse Source
This commit is contained in:
胡双明
2024-09-05 11:56:02 +08:00
parent 151017ed47
commit 3f6890da27
4 changed files with 60 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/assets/css/luma.styl
View File

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

12
web/src/components/ui/BlackDialog.vue
View File

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

9
web/src/utils/libs.js
View File

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

80
web/src/views/Luma.vue
View File

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