mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-02-15 10:54:24 +08:00
388 lines
12 KiB
Vue
388 lines
12 KiB
Vue
<template>
|
||
<div class="page-luma">
|
||
<div class="prompt-box">
|
||
<div class="images">
|
||
<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">
|
||
<i class="iconfont icon-exchange" @click="switchReverse"></i>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="prompt-container">
|
||
<div class="input-container">
|
||
<div class="upload-icon" v-if="images.length < 2">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
:auto-upload="true"
|
||
:show-file-list="false"
|
||
:http-request="upload"
|
||
accept=".jpg,.png,.jpeg"
|
||
>
|
||
<i class="iconfont icon-image"></i>
|
||
</el-upload>
|
||
</div>
|
||
<textarea
|
||
class="prompt-input"
|
||
:rows="row"
|
||
v-model="formData.prompt"
|
||
maxlength="2000"
|
||
placeholder="请输入提示词或者上传图片"
|
||
autofocus
|
||
>
|
||
</textarea>
|
||
<div class="send-icon" @click="create">
|
||
<i class="iconfont icon-send"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="params">
|
||
<div class="item-group">
|
||
<el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2">
|
||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||
<span>生成AI视频提示词</span>
|
||
</el-button>
|
||
</div>
|
||
<div class="item-group">
|
||
<span class="label">循环参考图</span>
|
||
<el-switch v-model="formData.loop" size="small" />
|
||
</div>
|
||
<div class="item-group">
|
||
<span class="label">提示词优化</span>
|
||
<el-switch v-model="formData.expand_prompt" size="small" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-container
|
||
class="video-container"
|
||
v-loading="loading"
|
||
element-loading-background="rgba(100,100,100,0.3)"
|
||
>
|
||
<h2 class="h-title text-2xl mb-5 mt-2">你的作品</h2>
|
||
|
||
<div class="list-box" v-if="!noData">
|
||
<div v-for="item in list" :key="item.id">
|
||
<div class="item">
|
||
<div class="left">
|
||
<div class="container">
|
||
<div v-if="item.progress === 100">
|
||
<video
|
||
class="video"
|
||
:src="replaceImg(item.video_url)"
|
||
preload="auto"
|
||
loop="loop"
|
||
muted="muted"
|
||
>
|
||
您的浏览器不支持视频播放
|
||
</video>
|
||
<button class="play flex justify-center items-center" @click="play(item)">
|
||
<img src="/images/play.svg" alt="" />
|
||
</button>
|
||
</div>
|
||
<el-image :src="item.cover_url" fit="cover" v-else-if="item.progress === 101" />
|
||
<generating message="正在生成视频" v-else />
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="failed" v-if="item.progress === 101">
|
||
任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}
|
||
</div>
|
||
<div class="prompt" v-else>{{ item.prompt }}</div>
|
||
</div>
|
||
<div class="right" v-if="item.progress === 100">
|
||
<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 content="复制提示词" placement="top">
|
||
<button class="btn btn-icon copy-prompt" :data-clipboard-text="item.prompt">
|
||
<i class="iconfont icon-copy"></i>
|
||
</button>
|
||
</el-tooltip>
|
||
|
||
<el-tooltip 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" class="downloading" fit="cover" v-else />
|
||
</button>
|
||
</el-tooltip>
|
||
<el-tooltip content="删除" placement="top">
|
||
<button class="btn btn-icon" @click="removeJob(item)">
|
||
<i class="iconfont icon-remove"></i>
|
||
</button>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="right-error" v-else>
|
||
<el-button type="danger" @click="removeJob(item)" circle>
|
||
<i class="iconfont icon-remove"></i>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-empty
|
||
:image-size="100"
|
||
:image="nodata"
|
||
description="没有任何作品，赶紧去创作吧！"
|
||
v-else
|
||
/>
|
||
|
||
<div class="pagination">
|
||
<el-pagination
|
||
v-if="total > pageSize"
|
||
background
|
||
style="--el-pagination-button-bg-color: rgba(86, 86, 95, 0.2)"
|
||
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="auto"
|
||
>
|
||
<video
|
||
style="max-width: 90vw; max-height: 90vh"
|
||
:src="currentVideoUrl"
|
||
preload="auto"
|
||
:autoplay="true"
|
||
loop="loop"
|
||
muted="muted"
|
||
v-show="showDialog"
|
||
>
|
||
您的浏览器不支持视频播放
|
||
</video>
|
||
</black-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import nodata from '@/assets/img/no-data.png'
|
||
|
||
import BlackDialog from '@/components/ui/BlackDialog.vue'
|
||
import Generating from '@/components/ui/Generating.vue'
|
||
import { checkSession } from '@/store/cache'
|
||
import { closeLoading, showLoading, showMessageError, showMessageOK } from '@/utils/dialog'
|
||
import { httpDownload, httpGet, httpPost } from '@/utils/http'
|
||
import { replaceImg } from '@/utils/libs'
|
||
import { CircleCloseFilled } from '@element-plus/icons-vue'
|
||
import Clipboard from 'clipboard'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||
const showDialog = ref(false)
|
||
const currentVideoUrl = ref('')
|
||
const row = ref(1)
|
||
const images = ref([])
|
||
|
||
const formData = reactive({
|
||
prompt: '',
|
||
expand_prompt: false,
|
||
loop: false,
|
||
first_frame_img: '',
|
||
end_frame_img: '',
|
||
})
|
||
|
||
const loading = ref(false)
|
||
const list = ref([])
|
||
const noData = ref(true)
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const total = ref(0)
|
||
const taskPulling = ref(true)
|
||
const clipboard = ref(null)
|
||
const pullHandler = ref(null)
|
||
|
||
onMounted(() => {
|
||
checkSession().then(() => {
|
||
fetchData(1)
|
||
// 设置轮询
|
||
pullHandler.value = setInterval(() => {
|
||
if (taskPulling.value) {
|
||
fetchData(1)
|
||
}
|
||
}, 5000)
|
||
})
|
||
|
||
clipboard.value = new Clipboard('.copy-prompt')
|
||
clipboard.value.on('success', () => {
|
||
ElMessage.success('复制成功！')
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clipboard.value.destroy()
|
||
if (pullHandler.value) {
|
||
clearInterval(pullHandler.value)
|
||
}
|
||
})
|
||
|
||
const download = (item) => {
|
||
const url = replaceImg(item.video_url)
|
||
const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`
|
||
const urlObj = new URL(url)
|
||
const fileName = urlObj.pathname.split('/').pop()
|
||
item.downloading = true
|
||
httpDownload(downloadURL)
|
||
.then((response) => {
|
||
const blob = new Blob([response.data])
|
||
const link = document.createElement('a')
|
||
link.href = URL.createObjectURL(blob)
|
||
link.download = fileName
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(link.href)
|
||
item.downloading = false
|
||
})
|
||
.catch(() => {
|
||
showMessageError('下载失败')
|
||
item.downloading = false
|
||
})
|
||
}
|
||
|
||
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)
|
||
showLoading('正在上传文件...')
|
||
httpPost('/api/upload', formData)
|
||
.then((res) => {
|
||
images.value.push(res.data.url)
|
||
ElMessage.success({ message: '上传成功', duration: 500 })
|
||
closeLoading()
|
||
})
|
||
.catch((e) => {
|
||
ElMessage.error('图片上传失败:' + e.message)
|
||
closeLoading()
|
||
})
|
||
}
|
||
|
||
const remove = (img) => {
|
||
images.value = images.value.filter((item) => item !== img)
|
||
}
|
||
|
||
const switchReverse = () => {
|
||
images.value = images.value.reverse()
|
||
}
|
||
|
||
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
|
||
let needPull = false
|
||
const items = []
|
||
for (let v of res.data.items) {
|
||
if (v.progress === 0 || v.progress === 102) {
|
||
needPull = true
|
||
}
|
||
items.push(v)
|
||
}
|
||
loading.value = false
|
||
taskPulling.value = needPull
|
||
if (JSON.stringify(list.value) !== JSON.stringify(items)) {
|
||
list.value = items
|
||
}
|
||
noData.value = list.value.length === 0
|
||
})
|
||
.catch(() => {
|
||
loading.value = false
|
||
noData.value = true
|
||
})
|
||
}
|
||
|
||
const create = () => {
|
||
const len = images.value.length
|
||
if (len) {
|
||
formData.first_frame_img = replaceImg(images.value[0])
|
||
if (len === 2) {
|
||
formData.end_frame_img = replaceImg(images.value[1])
|
||
}
|
||
}
|
||
|
||
httpPost('/api/video/luma/create', formData)
|
||
.then(() => {
|
||
fetchData(1)
|
||
taskPulling.value = true
|
||
showMessageOK('创建任务成功')
|
||
})
|
||
.catch((e) => {
|
||
showMessageError('创建任务失败：' + e.message)
|
||
})
|
||
}
|
||
|
||
const generatePrompt = () => {
|
||
if (formData.prompt === '') {
|
||
return showMessageError('请输入原始提示词')
|
||
}
|
||
showLoading('正在生成视频脚本...')
|
||
httpPost('/api/prompt/video', { prompt: formData.prompt })
|
||
.then((res) => {
|
||
formData.prompt = res.data
|
||
closeLoading()
|
||
})
|
||
.catch((e) => {
|
||
showMessageError('生成提示词失败：' + e.message)
|
||
closeLoading()
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import "../assets/css/luma.styl"
|
||
</style>
|