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

feat: 生成视频页面

Browse Source
This commit is contained in:
胡双明
2024-09-05 08:50:49 +08:00
parent 8fc8fd6cba
commit 8b14eeadf4
3 changed files with 464 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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