482 lines
17 KiB
Vue
482 lines
17 KiB
Vue
<script lang="ts" setup>
|
|
import type { PropType } from 'vue'
|
|
|
|
const props = defineProps({
|
|
video: {
|
|
type: Object as PropType<GBVideoItem>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits({
|
|
delete: (video: GBVideoItem) => video,
|
|
})
|
|
|
|
const dayjs = useDayjs()
|
|
const toast = useToast()
|
|
|
|
const isFailed = computed(() => {
|
|
return props.video.progress === -1
|
|
})
|
|
const isPreviewModalOpen = ref(false)
|
|
const isVideoBackgroundPreviewOpen = ref(false)
|
|
const isFullContentOpen = ref(false)
|
|
const downloadingState = reactive({
|
|
subtitle: 0,
|
|
video: 0,
|
|
})
|
|
|
|
// 背景选择相关状态
|
|
const selectedBackgroundFile = ref<File | null>(null)
|
|
const selectedBackgroundPreview = ref<string>('')
|
|
const isCombinatorLoading = ref(false)
|
|
const compositingProgress = ref(0)
|
|
const compositingPhase = ref<'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'>('loading')
|
|
const combinatorError = ref<string>('')
|
|
const fileInputRef = ref<HTMLInputElement | null>(null)
|
|
const compositedVideoBlob = ref<Blob | null>(null)
|
|
|
|
// 阶段显示文本
|
|
const phaseText = computed(() => {
|
|
const phaseMap: Record<typeof compositingPhase.value, string> = {
|
|
'loading': '加载资源...',
|
|
'analyzing': '分析图片...',
|
|
'preparing': '准备合成...',
|
|
'executing': '合成中...',
|
|
'finalizing': '完成处理...',
|
|
}
|
|
return phaseMap[compositingPhase.value]
|
|
})
|
|
|
|
const handleBackgroundFileSelect = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
const file = target.files?.[0]
|
|
|
|
if (!file) return
|
|
|
|
// 验证文件类型
|
|
if (!file.type.startsWith('image/')) {
|
|
toast.add({
|
|
title: '文件类型错误',
|
|
description: '请选择一个图片文件',
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
return
|
|
}
|
|
|
|
selectedBackgroundFile.value = file
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
selectedBackgroundPreview.value = e.target?.result as string
|
|
}
|
|
reader.readAsDataURL(file)
|
|
combinatorError.value = ''
|
|
compositedVideoBlob.value = null
|
|
}
|
|
|
|
const composeBackgroundVideo = async () => {
|
|
if (!selectedBackgroundFile.value) {
|
|
toast.add({
|
|
title: '未选择图片',
|
|
description: '请先选择一个背景图片',
|
|
color: 'orange',
|
|
icon: 'i-tabler-alert-circle',
|
|
})
|
|
return
|
|
}
|
|
|
|
try {
|
|
isCombinatorLoading.value = true
|
|
compositingProgress.value = 0
|
|
combinatorError.value = ''
|
|
|
|
// 使用 FFmpeg WASM 进行视频背景合成
|
|
const resultBlob = await useVideoBackgroundCompositing(
|
|
props.video.video_alpha_url!,
|
|
selectedBackgroundFile.value,
|
|
{
|
|
onProgress: (info) => {
|
|
compositingProgress.value = info.progress
|
|
compositingPhase.value = info.phase
|
|
}
|
|
}
|
|
)
|
|
|
|
compositedVideoBlob.value = resultBlob
|
|
|
|
toast.add({
|
|
title: '合成成功',
|
|
description: '背景已成功合成，可预览或下载',
|
|
color: 'green',
|
|
icon: 'i-tabler-check',
|
|
})
|
|
} catch (err: any) {
|
|
combinatorError.value = err.message || '合成失败，请重试'
|
|
toast.add({
|
|
title: '合成失败',
|
|
description: combinatorError.value,
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
} finally {
|
|
isCombinatorLoading.value = false
|
|
}
|
|
}
|
|
|
|
const downloadCompositedVideo = () => {
|
|
if (!compositedVideoBlob.value) return
|
|
|
|
const url = URL.createObjectURL(compositedVideoBlob.value)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = `${props.video.title || props.video.task_id}_composited.mp4`
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const compositedVideoUrl = computed(() => {
|
|
return compositedVideoBlob.value ? URL.createObjectURL(compositedVideoBlob.value) : ''
|
|
})
|
|
|
|
const startDownload = (url: string, filename: string) => {
|
|
if (url.endsWith('.ass')) {
|
|
downloadingState.subtitle = 0
|
|
} else {
|
|
downloadingState.video = 0
|
|
}
|
|
|
|
const {
|
|
download,
|
|
progressEmitter,
|
|
} = useDownload(url, filename)
|
|
|
|
progressEmitter.on('progress', progress => {
|
|
if (url.endsWith('.ass')) {
|
|
downloadingState.subtitle = progress
|
|
} else {
|
|
downloadingState.video = progress
|
|
}
|
|
console.log(downloadingState)
|
|
})
|
|
|
|
progressEmitter.on('done', () => {
|
|
if (url.endsWith('.ass')) {
|
|
downloadingState.subtitle = 100
|
|
} else {
|
|
downloadingState.video = 100
|
|
}
|
|
toast.add({
|
|
title: '下载完成',
|
|
description: '资源下载已完成',
|
|
color: 'green',
|
|
icon: 'i-tabler-check',
|
|
})
|
|
})
|
|
|
|
progressEmitter.on('error', err => {
|
|
if (url.endsWith('.ass')) {
|
|
downloadingState.subtitle = 0
|
|
} else {
|
|
downloadingState.video = 0
|
|
}
|
|
toast.add({
|
|
title: '下载失败',
|
|
description: err.message || '下载失败，未知错误',
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
})
|
|
|
|
download()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
|
|
>
|
|
<div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group">
|
|
<div v-if="!video.video_cover" class="w-full h-full flex flex-col justify-center items-center gap-2" :class="!isFailed ? 'bg-primary' : 'bg-rose-400'">
|
|
<UIcon v-if="!isFailed" class="animate-spin text-4xl text-white" name="tabler:loader"/>
|
|
<UIcon v-else class="text-4xl text-white" name="tabler:alert-triangle"/>
|
|
<div class="flex flex-col items-center gap-0.5">
|
|
<span class="text-sm font-bold text-white/90">
|
|
{{ isFailed ? '生成失败' : '火速生成中...' }}
|
|
</span>
|
|
<span v-if="!isFailed" class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
|
|
</div>
|
|
</div>
|
|
<NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
|
|
<div class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300">
|
|
<div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
|
|
<Icon name="i-tabler-play" class="text-white text-3xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex flex-col justify-between gap-2">
|
|
<div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
|
|
<ul class="grid grid-cols-2 gap-1.5">
|
|
<li class="col-span-2">
|
|
<!-- <h2 class="text-2xs font-medium text-primary-500">标题</h2>-->
|
|
<p class="text-sm font-bold line-clamp-1">{{ video.title || '无标题' }}</p>
|
|
</li>
|
|
<li class="">
|
|
<h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
|
|
<p class="text-xs line-clamp-1">{{ video.complete_time ? dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '进行中' }}</p>
|
|
</li>
|
|
<li class="">
|
|
<h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
|
|
<p class="text-xs line-clamp-1">{{ video.duration ? dayjs.duration(video.duration || 0).format('HH:mm:ss') : '进行中' }}</p>
|
|
</li>
|
|
<li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
|
|
<h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
|
|
<p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap">
|
|
<!-- <div-->
|
|
<!-- class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
|
|
<!-- <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
|
|
<!-- <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
|
|
<!-- </div>-->
|
|
<div
|
|
class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
|
|
<p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
|
|
</div>
|
|
<div class="space-x-2">
|
|
<UButton
|
|
class="transition-all sm:opacity-0 sm:translate-x-4 sm:pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto"
|
|
color="red"
|
|
icon="i-tabler-trash"
|
|
size="xs"
|
|
variant="soft"
|
|
@click="emit('delete', video)"
|
|
/>
|
|
<UButtonGroup size="xs">
|
|
<UButton
|
|
:label="downloadingState.subtitle > 0 && downloadingState.subtitle < 100 ? `${downloadingState.subtitle.toFixed(0)}%` : '字幕'"
|
|
:loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
|
|
:disabled="!video.subtitle"
|
|
color="primary"
|
|
leading-icon="i-tabler-file-download"
|
|
variant="soft"
|
|
@click="startDownload(video.subtitle!, (video.title || video.task_id) + '.ass')"
|
|
/>
|
|
<UDropdown
|
|
:items="[
|
|
[
|
|
{
|
|
label: '绿幕视频下载',
|
|
icon: 'tabler:download',
|
|
click: () => {
|
|
startDownload(video.video_url!, (video.title || video.task_id) + '.mp4')
|
|
}
|
|
},
|
|
{
|
|
label: '合成背景图片',
|
|
icon: 'tabler:background',
|
|
click: () => {
|
|
isVideoBackgroundPreviewOpen = true
|
|
},
|
|
disabled: !video.video_alpha_url
|
|
},
|
|
],
|
|
]"
|
|
>
|
|
<UButton
|
|
:label="downloadingState.video > 0 && downloadingState.video < 100 ? `${downloadingState.video.toFixed(0)}%` : '视频'"
|
|
:loading="downloadingState.video > 0 && downloadingState.video < 100"
|
|
:disabled="!video.video_url"
|
|
color="primary"
|
|
leading-icon="i-tabler-download"
|
|
variant="soft"
|
|
/>
|
|
</UDropdown>
|
|
</UButtonGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Full video content -->
|
|
<UModal v-model="isFullContentOpen">
|
|
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
|
{{ video.title || '无标题' }}
|
|
<span class="block text-xs text-primary">驱动内容</span>
|
|
</h3>
|
|
<UButton
|
|
color="gray"
|
|
icon="i-tabler-x"
|
|
variant="ghost"
|
|
@click="isFullContentOpen = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div>
|
|
<article class="prose">
|
|
<p class="text-justify">{{ video.content }}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<UButton color="primary" @click="isFullContentOpen = false">关闭</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</UModal>
|
|
<UModal v-model="isPreviewModalOpen">
|
|
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
|
|
<p>绿幕视频预览</p>
|
|
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
|
|
{{ video.title }}
|
|
</p>
|
|
</div>
|
|
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
|
|
</UCard>
|
|
</UModal>
|
|
<UModal v-model="isVideoBackgroundPreviewOpen">
|
|
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
|
|
<p>视频背景合成</p>
|
|
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
|
|
{{ video.title }}
|
|
</p>
|
|
</div>
|
|
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isVideoBackgroundPreviewOpen = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<!-- 背景图片选择区域 -->
|
|
<div v-if="!compositedVideoBlob && !isCombinatorLoading" class="border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-lg p-4">
|
|
<div class="space-y-3">
|
|
<div class="text-sm font-medium text-gray-900 dark:text-white">选择背景图片</div>
|
|
|
|
<!-- 预览区域 -->
|
|
<!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
|
|
<img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
|
|
</div>
|
|
<div v-else class="w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800 flex flex-col items-center justify-center gap-2">
|
|
<UIcon class="text-3xl text-neutral-400" name="tabler:photo" />
|
|
<span class="text-xs text-neutral-400">点击选择图片</span>
|
|
</div> -->
|
|
|
|
<!-- 文件输入 -->
|
|
<input
|
|
ref="fileInputRef"
|
|
type="file"
|
|
accept="image/*"
|
|
class="hidden"
|
|
@change="handleBackgroundFileSelect"
|
|
/>
|
|
|
|
<!-- 选择按钮 -->
|
|
<UButton
|
|
block
|
|
color="primary"
|
|
icon="i-tabler-photo-plus"
|
|
label="选择图片"
|
|
variant="soft"
|
|
@click="fileInputRef?.click()"
|
|
/>
|
|
|
|
<!-- 选中的文件名 -->
|
|
<div v-if="selectedBackgroundFile" class="text-xs text-neutral-500 dark:text-neutral-400">
|
|
已选择: {{ selectedBackgroundFile.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 错误提示 -->
|
|
<UAlert
|
|
v-if="combinatorError"
|
|
color="red"
|
|
icon="i-tabler-alert-triangle"
|
|
title="合成失败"
|
|
:description="combinatorError"
|
|
/>
|
|
|
|
<!-- 合成进度 -->
|
|
<div v-if="isCombinatorLoading" class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">{{ phaseText }}</span>
|
|
<span class="text-xs text-neutral-500">{{ compositingProgress }}%</span>
|
|
</div>
|
|
<UProgress :value="compositingProgress" />
|
|
</div>
|
|
|
|
<!-- 合成预览 -->
|
|
<div v-if="compositedVideoBlob" class="space-y-2">
|
|
<div class="text-sm font-medium text-gray-900 dark:text-white">视频预览</div>
|
|
<video
|
|
class="w-full rounded-lg shadow bg-black"
|
|
controls
|
|
autoplay
|
|
muted
|
|
:src="compositedVideoUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<UButton
|
|
color="gray"
|
|
label="取消"
|
|
:disabled="isCombinatorLoading"
|
|
@click="isVideoBackgroundPreviewOpen = false"
|
|
/>
|
|
<UButton
|
|
v-if="compositedVideoBlob"
|
|
color="gray"
|
|
label="重新选择"
|
|
@click="() => {
|
|
selectedBackgroundFile = null
|
|
selectedBackgroundPreview = ''
|
|
compositedVideoBlob = null
|
|
combinatorError = ''
|
|
isCombinatorLoading = false
|
|
}"
|
|
/>
|
|
<UButton
|
|
v-if="compositedVideoBlob"
|
|
color="green"
|
|
icon="i-tabler-download"
|
|
label="下载合成视频"
|
|
@click="downloadCompositedVideo"
|
|
/>
|
|
<UButton
|
|
v-else
|
|
:disabled="!selectedBackgroundFile || isCombinatorLoading"
|
|
:loading="isCombinatorLoading"
|
|
color="primary"
|
|
icon="i-tabler-wand"
|
|
:label="isCombinatorLoading ? '合成中' : '开始合成'"
|
|
@click="composeBackgroundVideo"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</UModal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |