🚧 wip: add video subtitle embedding

components/aigc/generation/CGTaskCard.client.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDownload } from '~/composables/useDownload'
+import gsap from 'gsap'
+import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
+
+const toast = useToast()
+const { metaSymbol } = useShortcuts()
+
+const srtEditor = ref()
+
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+const emit = defineEmits(['delete'])
+
+defineShortcuts({
+  'p': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        isPreviewModalOpen.value = true
+      }
+    },
+  },
+  'meta_d': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        srtEditor.value.open()
+        isDropdownOpen.value = false
+      }
+    },
+  },
+  'meta_s': {
+    handler: async () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
+      }
+    },
+  },
+  'delete': {
+    handler: () => {
+      if (isDropdownOpen.value) {
+        emit('delete', props.course.task_id)
+      }
+    },
+  },
+})
+
+const isDropdownOpen = ref(false)
+const isPreviewModalOpen = ref(false)
+
+const stateDisplay = computed(() => {
+  if (props.course.progress === -1) return {
+    color: 'red',
+    text: '失败',
+  }
+  if (props.course.progress === 100) return {
+    color: 'green',
+    text: '完成',
+  }
+  return {
+    color: 'blue',
+    text: !!props.course.progress ? `${tweenedGenerateProgress.value.toFixed(0)}%` : '队列中',
+  }
+})
+const isFailed = computed(() => props.course.progress === -1)
+const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
+
+const generateProgress = computed(() => {
+  return props.course.progress || 0
+})
+const tweenedGenerateProgress = ref(0)
+watch(generateProgress, (newValue) => {
+  gsap.to(tweenedGenerateProgress, {
+    duration: 5,
+    value: newValue,
+  })
+}, {
+  immediate: true,
+})
+
+const downloadProgress = ref(0)
+
+const startDownload = async (
+  url: string,
+  filename: string,
+) => {
+  downloadProgress.value = 0
+
+  const {
+    download,
+    progressEmitter,
+  } = useDownload(url, filename)
+
+  progressEmitter.on('done', () => {
+    downloadProgress.value = 100
+    toast.add({
+      title: '下载完成',
+      description: '资源下载已完成',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  })
+
+  progressEmitter.on('progress', (progress) => {
+    downloadProgress.value = progress
+  })
+
+  progressEmitter.on('error', err => {
+    downloadProgress.value = 0
+    toast.add({
+      title: '下载失败',
+      description: err.message || '下载失败，未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  })
+
+  download()
+}
+
+const copyTaskId = (extraMessage?: string) => {
+  navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${extraMessage}` : ''))
+  toast.add({
+    title: '复制成功',
+    description: '已复制任务 ID',
+    color: 'green',
+    icon: 'i-tabler-check',
+  })
+}
+
+const isCombinationModalOpen = ref(false)
+const combinationState = ref<0 | 1 | undefined>(0)
+
+const onCombination = () => {
+  isCombinationModalOpen.value = true
+  combinationState.value = undefined
+  useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url).then(src => {
+    startDownload(src, `眩生花微课_${props.course.title}_${props.course.task_id}_combinated.mp4`)
+    combinationState.value = 1
+  }).catch(err => {
+    toast.add({
+      title: '嵌入字幕失败',
+      description: err.message || '未知错误',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    combinationState.value = 0
+  }).finally(() => {
+    setTimeout(() => {
+      combinationState.value = 0
+      isCombinationModalOpen.value = false
+    }, 3000)
+  })
+}
+</script>
+
+<template>
+  <div
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
+    <div class="relative w-full aspect-video">
+      <NuxtImg class="w-full aspect-video object-cover pointer-events-none absolute inset-0" v-if="!!course.video_cover"
+        :src="course.video_cover" alt="image" loading="lazy" />
+      <div v-else
+        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern">
+        <Icon v-if="isFailed" class="text-white text-[64px] opacity-50" name="i-tabler-alert-triangle" />
+        <Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video" />
+      </div>
+      <div class="absolute inset-2 flex justify-end items-start">
+        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
+          <UBadge :color="stateDisplay.color" :variant="isFailed ? 'solid' : 'subtle'" class="shadow" size="sm">
+            <Icon v-if="isFailed" class="text-base mr-0.5" name="i-tabler-alert-triangle" />
+            {{ stateDisplay.text }}
+          </UBadge>
+        </UTooltip>
+      </div>
+    </div>
+    <div class="px-2 pt-1 pb-2 flex justify-between">
+      <div class="flex-1 overflow-hidden pt-1">
+        <h1 :title="course.title"
+          class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap">
+          <Icon class="text-base" name="i-tabler-book-2" />
+          <span class="pl-0.5">{{ course.title }}</span>
+        </h1>
+        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
+          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+          <button v-if="course.task_id" class="hover:text-primary font-medium" tabindex="-1" :title="course.task_id"
+            @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')">
+            复制ID
+          </button>
+        </p>
+      </div>
+      <div class="flex items-center gap-1">
+        <UButtonGroup>
+          <UButton color="white" :disabled="!isDownloadable" label="下载" leading-icon="i-tabler-download" size="xs"
+            @click="onCombination" />
+          <UDropdown v-model:open="isDropdownOpen" :items="[
+            [{
+              label: '下载原视频',
+              icon: 'i-tabler-file-plus',
+              click: () => startDownload(course.video_url, `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`),
+            }, {
+              label: '预览课程',
+              icon: 'i-tabler-play',
+              shortcuts: ['P'],
+              disabled: !isDownloadable,
+              click: () => isPreviewModalOpen = true,
+            }, {
+              label: '编辑字幕',
+              icon: 'i-solar-subtitles-linear',
+              shortcuts: [metaSymbol, 'D'],
+              disabled: !isDownloadable,
+              click: () => {
+                srtEditor.open()
+                isDropdownOpen = false
+              }
+            }, {
+              label: '下载字幕',
+              icon: 'i-tabler-file-download',
+              shortcuts: [metaSymbol, 'S'],
+              disabled: !isDownloadable,
+              click: async () => {
+                await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
+              }
+            }], [{
+              label: '删除记录',
+              icon: 'i-tabler-trash-x',
+              shortcuts: ['Delete'],
+              click: () => emit('delete', course.task_id)
+            }],
+          ]" :popper="{ placement: 'bottom-end' }">
+            <UButton :disabled="course.progress > 1 && course.progress < 100" color="white" size="xs"
+              trailing-icon="i-tabler-dots" />
+          </UDropdown>
+        </UButtonGroup>
+      </div>
+    </div>
+    <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">
+                {{ course.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="course.video_url" />
+      </UCard>
+    </UModal>
+    <UModal v-model="isCombinationModalOpen">
+      <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">
+                {{ course.title }}
+              </p>
+            </div>
+            <UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost"
+              @click="isCombinationModalOpen = false" />
+          </div>
+        </template>
+        <UProgress animation="carousel" :value="combinationState" :max="[
+          '嵌入字幕中',
+          '合并完成，开始下载',
+        ]">
+          <template #step-0="{ step }">
+            <span class="inline-flex items-center gap-1 text-emerald-500">
+              <UIcon name="tabler:text-caption" /> {{ step }}
+            </span>
+          </template>
+
+          <template #step-1="{ step }">
+            <span class="inline-flex items-center gap-1 text-primary-500">
+              <UIcon name="tabler:paperclip" /> {{ step }}
+            </span>
+          </template>
+        </UProgress>
+      </UCard>
+    </UModal>
+    <SRTEditor ref="srtEditor" :course="course" />
+  </div>
+</template>
+
+<style scoped></style>

components/aigc/generation/CGTaskCard.vue

@@ -1,296 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import dayjs from 'dayjs'
-import { useDownload } from '~/composables/useDownload'
-import gsap from 'gsap'
-import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
-
-const toast = useToast()
-const { metaSymbol } = useShortcuts()
-
-const srtEditor = ref()
-
-const props = defineProps({
-  course: {
-    type: Object as PropType<resp.gen.CourseGenItem>,
-    required: true,
-  },
-})
-const emit = defineEmits([
-  'delete',
-])
-
-defineShortcuts({
-  'p': {
-    handler: () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        isPreviewModalOpen.value = true
-      }
-    },
-  },
-  'meta_d': {
-    handler: () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        srtEditor.value.open()
-        isDropdownOpen.value = false
-      }
-    },
-  },
-  'meta_s': {
-    handler: async () => {
-      if (isDropdownOpen.value && isDownloadable.value) {
-        await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
-      }
-    },
-  },
-  'delete': {
-    handler: () => {
-      if (isDropdownOpen.value) {
-        emit('delete', props.course.task_id)
-      }
-    },
-  },
-})
-
-const isDropdownOpen = ref(false)
-const isPreviewModalOpen = ref(false)
-
-const stateDisplay = computed(() => {
-  if (props.course.progress === -1) return {
-    color: 'red',
-    text: '失败',
-  }
-  if (props.course.progress === 100) return {
-    color: 'green',
-    text: '完成',
-  }
-  return {
-    color: 'blue',
-    text: !!props.course.progress ? `${ tweenedGenerateProgress.value.toFixed(0) }%` : '队列中',
-  }
-})
-const isFailed = computed(() => props.course.progress === -1)
-const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
-
-const generateProgress = computed(() => {
-  return props.course.progress || 0
-})
-const tweenedGenerateProgress = ref(0)
-watch(generateProgress, (newValue) => {
-  gsap.to(tweenedGenerateProgress, {
-    duration: 5,
-    value: newValue,
-  })
-}, {
-  immediate: true,
-})
-
-const downloadProgress = ref(0)
-
-const startDownload = async (
-  url: string,
-  filename: string,
-) => {
-  downloadProgress.value = 0
-
-  const {
-    download,
-    progressEmitter,
-  } = useDownload(url, filename)
-
-  progressEmitter.on('done', () => {
-    downloadProgress.value = 100
-    toast.add({
-      title: '下载完成',
-      description: '资源下载已完成',
-      color: 'green',
-      icon: 'i-tabler-check',
-    })
-  })
-
-  progressEmitter.on('progress', (progress) => {
-    downloadProgress.value = progress
-  })
-
-  progressEmitter.on('error', err => {
-    downloadProgress.value = 0
-    toast.add({
-      title: '下载失败',
-      description: err.message || '下载失败，未知错误',
-      color: 'red',
-      icon: 'i-tabler-alert-triangle',
-    })
-  })
-
-  download()
-}
-
-const copyTaskId = (extraMessage?: string) => {
-  navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${ extraMessage }` : ''))
-  toast.add({
-    title: '复制成功',
-    description: '已复制任务 ID',
-    color: 'green',
-    icon: 'i-tabler-check',
-  })
-}
-</script>
-
-<template>
-  <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
-  >
-    <div class="relative w-full aspect-video">
-      <NuxtImg
-        class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
-        v-if="!!course.video_cover"
-        :src="course.video_cover"
-        alt="image"
-        loading="lazy"
-      />
-      <div
-        v-else
-        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
-      >
-        <Icon
-          v-if="isFailed"
-          class="text-white text-[64px] opacity-50"
-          name="i-tabler-alert-triangle"
-        />
-        <Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video"/>
-      </div>
-      <div class="absolute inset-2 flex justify-end items-start">
-        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
-          <UBadge
-            :color="stateDisplay.color"
-            :variant="isFailed ? 'solid' : 'subtle'"
-            class="shadow"
-            size="sm"
-          >
-            <Icon
-              v-if="isFailed"
-              class="text-base mr-0.5"
-              name="i-tabler-alert-triangle"
-            />
-            {{ stateDisplay.text }}
-          </UBadge>
-        </UTooltip>
-      </div>
-    </div>
-    <div class="px-2 pt-1 pb-2 flex justify-between">
-      <div class="flex-1 overflow-hidden pt-1">
-        <h1
-          :title="course.title"
-          class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
-        >
-          <Icon class="text-base" name="i-tabler-book-2"/>
-          <span class="pl-0.5">{{ course.title }}</span>
-        </h1>
-        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
-          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
-          <button
-            v-if="course.task_id"
-            class="hover:text-primary font-medium"
-            tabindex="-1"
-            :title="course.task_id"
-            @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')"
-          >
-            复制ID
-          </button>
-        </p>
-      </div>
-      <div class="flex items-center gap-1">
-        <UButtonGroup>
-          <UButton
-            color="white"
-            :disabled="!isDownloadable"
-            :loading="downloadProgress > 0 && downloadProgress < 100"
-            :label="downloadProgress > 0 && downloadProgress < 100 ? `${downloadProgress.toFixed(0)}%` : '下载'"
-            leading-icon="i-tabler-download"
-            size="xs"
-            @click="startDownload(course.video_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.mp4`)"
-          />
-          <UDropdown
-            v-model:open="isDropdownOpen"
-            :items="[
-              [{
-                label: '预览课程',
-                icon: 'i-tabler-play',
-                shortcuts: ['P'],
-                disabled: !isDownloadable,
-                click: () => isPreviewModalOpen = true,
-              }, {
-                label: '编辑字幕',
-                icon: 'i-solar-subtitles-linear',
-                shortcuts: [metaSymbol, 'D'],
-                disabled: !isDownloadable,
-                click: () => {
-                  srtEditor.open()
-                  isDropdownOpen = false
-                }
-              }, {
-                label: '下载字幕',
-                icon: 'i-tabler-file-download',
-                shortcuts: [metaSymbol, 'S'],
-                disabled: !isDownloadable,
-                click: async () => {
-                  await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
-                }
-              }], [{
-                label: '删除记录',
-                icon: 'i-tabler-trash-x',
-                shortcuts: ['Delete'],
-                click: () => emit('delete', course.task_id)
-              }],
-            ]"
-            :popper="{ placement: 'bottom-end' }"
-          >
-            <UButton
-              :disabled="course.progress > 1 && course.progress < 100"
-              color="white"
-              size="xs"
-              trailing-icon="i-tabler-dots"
-            />
-          </UDropdown>
-        </UButtonGroup>
-      </div>
-    </div>
-    <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">
-                {{ course.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="course.video_url"
-        />
-      </UCard>
-    </UModal>
-    <SRTEditor
-      ref="srtEditor"
-      :course="course"
-    />
-  </div>
-</template>
-
-<style scoped>
-</style>

components/aigc/generation/GBTaskCard.vue

@@ -90,7 +90,7 @@ const onClick = () => {
           <span class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
         </div>
       </div>
-      <NuxtImg v-else :src="video.video_cover" class="brightness-90 object-cover"/>
+      <NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
     </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">
@@ -109,15 +109,19 @@ const onClick = () => {
           </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-3 text-justify">{{ video.content }}</p>
+            <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="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
+          class="w-fit 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-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
-          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>
         </div>
         <div class="space-x-2">
           <UButton

components/aigc/generation/SRTEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import { encode } from '@monosky/base64'
+import { object, string, number, type InferType } from 'yup';
 
 interface Subtitle {
   start: string;
@@ -9,6 +10,8 @@ interface Subtitle {
   active?: boolean
 }
 
+type SubtitleStyleEdit = Pick<SubtitleEmbeddingOptions, 'color' | 'fontSize' | 'bottomOffset' | 'strokeStyle' | 'textShadow'>
+
 const props = defineProps({
   course: {
     type: Object as PropType<resp.gen.CourseGenItem>,
@@ -29,6 +32,33 @@ const modified = ref(false)
 
 const videoElement = ref<HTMLVideoElement | null>(null)
 
+const subtitleStyleSchema = object({
+  color: string().required(),
+  fontSize: number().required(),
+  bottomOffset: number().required(),
+  strokeStyle: string().required(),
+  textShadow: object({
+    offsetX: number().required(),
+    offsetY: number().required(),
+    blur: number().required(),
+    color: string().required(),
+  }).required(),
+})
+type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
+
+const subtitleStyleState = reactive<SubtitleStyleEdit>({
+  color: '#000',
+  fontSize: 20,
+  bottomOffset: 0,
+  strokeStyle: 'none',
+  textShadow: {
+    offsetX: 0,
+    offsetY: 0,
+    blur: 0,
+    color: '#000',
+  },
+})
+
 const loadSrt = async () => {
   isLoading.value = true
   try {
@@ -40,7 +70,7 @@ const loadSrt = async () => {
   } catch (err) {
     toast.add({
       title: '加载字幕失败',
-      description: `${ err }` || '未知错误',
+      description: `${err}` || '未知错误',
       color: 'red',
     })
   } finally {
@@ -78,7 +108,7 @@ const parseSrt = (srt: string) => {
 
 const generateSrt = () => {
   return subtitles.value.map((subtitle, index) => {
-    return `${ index + 1 }\n${ subtitle.start } --> ${ subtitle.end }\n${ subtitle.text }\n`
+    return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
   }).join('\n')
 }
 
@@ -114,7 +144,7 @@ const syncSubtitles = () => {
     subtitle.active = currentTime >= startTime && currentTime <= endTime
     // scroll active subtitle into view
     if (subtitle.active) {
-      const element = document.getElementById(`subtitle-${ subtitles.value.indexOf(subtitle) }`)!
+      const element = document.getElementById(`subtitle-${subtitles.value.indexOf(subtitle)}`)!
       const parent = element?.parentElement
       // scroll element to the center of parent
       parent?.scrollTo({
@@ -178,25 +208,14 @@ defineExpose({
 <template>
   <div>
     <USlideover v-model="isDrawerActive" :ui="{ width: 'max-w-xl' }">
-      <UCard
+      <UCard class="flex flex-col flex-1 overflow-hidden" :ui="{
-        class="flex flex-col flex-1 overflow-hidden"
-        :ui="{
         body: { base: 'overflow-auto flex-1' },
         ring: '',
         divide: 'divide-y divide-gray-100 dark:divide-gray-800'
-        }"
+      }">
-      >
         <template #header>
-          <UButton
+          <UButton color="gray" variant="ghost" size="sm" icon="i-tabler-x"
-            color="gray"
+            class="flex sm:hidden absolute end-5 top-5 z-10" square padded @click="isDrawerActive = false" />
-            variant="ghost"
-            size="sm"
-            icon="i-tabler-x"
-            class="flex sm:hidden absolute end-5 top-5 z-10"
-            square
-            padded
-            @click="isDrawerActive = false"
-          />
           <div class="flex flex-col">
             <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
               字幕编辑器
@@ -211,48 +230,87 @@ defineExpose({
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
             <defs>
               <filter id="svgSpinnersGooeyBalls20">
-                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/>
+                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1" />
-                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/>
+                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" />
-                <feBlend in="SourceGraphic" in2="z"/>
+                <feBlend in="SourceGraphic" in2="z" />
               </filter>
             </defs>
             <g filter="url(#svgSpinnersGooeyBalls20)">
               <circle cx="5" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="5;8;5"/>
+                  repeatCount="indefinite" values="5;8;5" />
               </circle>
               <circle cx="19" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="19;16;19"/>
+                  repeatCount="indefinite" values="19;16;19" />
               </circle>
               <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-                                values="0 12 12;360 12 12"/>
+                values="0 12 12;360 12 12" />
             </g>
           </svg>
         </div>
-        <div v-else class="flex flex-col h-full overflow-hidden overscroll-y-none overshadow">
+        <div v-else class="flex flex-col h-full gap-2 overflow-hidden overscroll-y-none overshadow">
           <div class="relative">
             <div class="absolute w-fit mx-auto inset-x-0 bottom-3">
               <span class="text-white font-bold text-shadow-lg">
                 {{ subtitles.find(sub => sub.active)?.text }}
               </span>
             </div>
-            <video
+            <video controls ref="videoElement" class="rounded" style="-webkit-user-drag: none;" :src="course.video_url"
-              controls
+              @timeupdate="syncSubtitles" />
-              ref="videoElement"
-              class="rounded"
-              style="-webkit-user-drag: none;"
-              :src="course.video_url"
-              @timeupdate="syncSubtitles"
-            />
           </div>
-          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto mt-2 space-y-0.5 scroll-smooth relative">
+          <UAccordion :items="[{ label: '字幕选项' }]" color="gray" size="lg">
-            <li
+            <template #item>
-              v-for="(subtitle, index) in subtitles"
+              <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
-              :key="index"
+                <div class="w-full flex justify-center items-center">
-              :id="'subtitle-' + index"
+                  <div class="border-2 dark:border-neutral-700 rounded-md w-full aspect-video relative overflow-hidden">
-            >
+                    <img class="object-cover w-full h-full rounded-md"
-              <div :class="{'text-primary': subtitle.active}">
+                      src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png" />
+                    <span class="absolute font-sans font-bold bottom-0 left-1/2 transform -translate-x-1/2" :style="{
+                      color: '#fff',
+                      textShadow: '0 0 5px #000',
+                      fontSize: '20px',
+                      lineHeight: '1',
+                      bottom: '10px',
+                    }">
+                      字幕样式预览
+                    </span>
+                  </div>
+                </div>
+                <UForm :schema="subtitleStyleSchema" :state="subtitleStyleState" class="flex flex-col gap-4">
+                  <div class="flex gap-4">
+                    <UFormGroup label="字幕颜色" name="fontColor" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '黑色',
+                        value: '#000',
+                      }, {
+                        label: '白色',
+                        value: '#fff',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                    <UFormGroup label="字幕效果" name="effect" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '阴影',
+                        value: 'shadow',
+                      }, {
+                        label: '描边',
+                        value: 'stroke',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                  </div>
+                  <UFormGroup :label="`字幕大小`" name="fontSize">
+                    <URange :max="40" :min="20" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                  <UFormGroup label="字幕偏移量" name="offset">
+                    <URange :max="30" :min="0" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                </UForm>
+              </div>
+            </template>
+          </UAccordion>
+          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative">
+            <li v-for="(subtitle, index) in subtitles" :key="index" :id="'subtitle-' + index">
+              <div :class="{ 'text-primary': subtitle.active }">
                 <span class="text-xs font-medium opacity-60">
                   {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
                   -
@@ -261,18 +319,11 @@ defineExpose({
                     [{{ formatTimeToDayjs(subtitle.end).diff(formatTimeToDayjs(subtitle.start), 'second') }}s]
                   </span>
                 </span>
-                <UInput
+                <UInput v-model="subtitle.text" class="w-full" placeholder="请输入字幕内容" :name="'subtitle-' + index"
-                  v-model="subtitle.text"
+                  :autofocus="false" :color="subtitle.active ? 'primary' : undefined"
-                  class="w-full"
+                  @click="onSubtitleInputClick(subtitle)" @input="() => { if (!modified) modified = true }">
-                  placeholder="请输入字幕内容"
-                  :name="'subtitle-' + index"
-                  :autofocus="false"
-                  :color="subtitle.active ? 'primary' : undefined"
-                  @click="onSubtitleInputClick(subtitle)"
-                  @input="() => { if(!modified) modified = true }"
-                >
                   <template #trailing>
-                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled"/>
+                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
                   </template>
                 </UInput>
               </div>

composables/useVideoSubtitleEmbedding.ts

@@ -0,0 +1,76 @@
+import {
+  Combinator,
+  EmbedSubtitlesClip,
+  MP4Clip,
+  OffscreenSprite,
+} from "@webav/av-cliper";
+
+export interface SubtitleEmbeddingOptions {
+  color?: string;
+  textBgColor?: string | null;
+  type?: "srt";
+  fontFamily?: string;
+  fontSize?: number;
+  letterSpacing?: string | null;
+  bottomOffset?: number;
+  strokeStyle?: string;
+  lineWidth?: number | null;
+  lineCap?: CanvasLineCap | null;
+  lineJoin?: CanvasLineJoin | null;
+  textShadow?: {
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    color: string;
+  };
+  videoWidth: number;
+  videoHeight: number;
+}
+
+export const useVideoSubtitleEmbedding = async (
+  videoUrl: string,
+  srtUrl: string,
+  options?: SubtitleEmbeddingOptions
+) => {
+  if (!options) {
+    options = {
+      videoWidth: 1920,
+      videoHeight: 1080,
+    };
+  }
+
+  const videoSprite = new OffscreenSprite(
+    new MP4Clip((await fetch(videoUrl)).body!)
+  );
+  videoSprite.time = { duration: 10e6, offset: 0 };
+
+  const srtSprite = new OffscreenSprite(
+    new EmbedSubtitlesClip(await (await fetch(srtUrl)).text(), {
+      videoWidth: 1920,
+      videoHeight: 1080,
+      fontSize: 36,
+      fontFamily: "Noto Sans SC",
+      textShadow: {
+        offsetX: 2,
+        offsetY: 2,
+        blur: 4,
+        color: "rgba(0, 0, 0, 0.25)",
+      },
+    })
+  );
+  srtSprite.time = { duration: 10e6, offset: 0 };
+
+  const combinator = new Combinator({
+    width: 1920,
+    height: 1080,
+  });
+
+  await combinator.addSprite(videoSprite);
+  await combinator.addSprite(srtSprite);
+
+  const srcBlob = URL.createObjectURL(
+    await new Response(combinator.output()).blob()
+  );
+
+  return srcBlob;
+};

package.json

@@ -19,6 +19,7 @@
     "@nuxt/image": "^1.7.0",
     "@uniiem/object-trim": "^0.2.0",
     "@uniiem/uuid": "^0.2.1",
+    "@webav/av-cliper": "^1.0.10",
     "events": "^3.3.0",
     "gsap": "^3.12.5",
     "highlight.js": "^11.10.0",

pages/generation/course.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import CGTaskCard from '~/components/aigc/generation/CGTaskCard.vue'
 import ModalAuthentication from '~/components/ModalAuthentication.vue'
 import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
 import { useFetchWrapped } from '~/composables/useFetchWrapped'
@@ -130,11 +129,11 @@ onMounted(() => {
             @beforeLeave="beforeLeave"
             @leave="leave"
           >
-            <CGTaskCard
+            <AigcGenerationCGTaskCard
               v-for="(course, index) in courseList?.data.items"
               :key="course.task_id || 'unknown' + index"
               :course="course"
-              @delete="task_id => onCourseDelete(task_id)"
+              @delete="(task_id: string) => onCourseDelete(task_id)"
             />
           </TransitionGroup>
         </div>

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@uniiem/uuid':
         specifier: ^0.2.1
         version: 0.2.1
+      '@webav/av-cliper':
+        specifier: ^1.0.10
+        version: 1.0.10
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
@@ -1395,35 +1398,30 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-glibc@2.4.1':
     resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.4.1':
     resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.4.1':
     resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.4.1':
     resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.4.1':
     resolution: {integrity: sha512-/ZR0RxqxU/xxDGzbzosMjh4W6NdYFMqq2nvo2b8SLi7rsl/4jkL8S5stIikorNkdR50oVDvqb/3JT05WM+CRRA==}
@@ -1593,55 +1591,46 @@ packages:
     resolution: {integrity: sha512-MXg1xp+e5GhZ3Vit1gGEyoC+dyQUBy2JgVQ+3hUrD9wZMkUw/ywgkpK7oZgnB6kPpGrxJ41clkPPnsknuD6M2Q==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.19.1':
     resolution: {integrity: sha512-DZNLwIY4ftPSRVkJEaxYkq7u2zel7aah57HESuNkUnz+3bZHxwkCUkrfS2IWC1sxK6F2QNIR0Qr/YXw7nkF3Pw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.19.1':
     resolution: {integrity: sha512-C7evongnjyxdngSDRRSQv5GvyfISizgtk9RM+z2biV5kY6S/NF/wta7K+DanmktC5DkuaJQgoKGf7KUDmA7RUw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.19.1':
     resolution: {integrity: sha512-89tFWqxfxLLHkAthAcrTs9etAoBFRduNfWdl2xUs/yLV+7XDrJ5yuXMHptNqf1Zw0UCA3cAutkAiAokYCkaPtw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.19.1':
     resolution: {integrity: sha512-PromGeV50sq+YfaisG8W3fd+Cl6mnOOiNv2qKKqKCpiiEke2KiKVyDqG/Mb9GWKbYMHj5a01fq/qlUR28PFhCQ==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.19.1':
     resolution: {integrity: sha512-/1BmHYh+iz0cNCP0oHCuF8CSiNj0JOGf0jRlSo3L/FAyZyG2rGBuKpkZVH9YF+x58r1jgWxvm1aRg3DHrLDt6A==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.19.1':
     resolution: {integrity: sha512-0cYP5rGkQWRZKy9/HtsWVStLXzCF3cCBTRI+qRL8Z+wkYlqN7zrSYm6FuY5Kd5ysS5aH0q5lVgb/WbG4jqXN1Q==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.19.1':
     resolution: {integrity: sha512-XUXeI9eM8rMP8aGvii/aOOiMvTs7xlCosq9xCjcqI9+5hBxtjDpD+7Abm1ZhVIFE1J2h2VIg0t2DX/gjespC2Q==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.19.1':
     resolution: {integrity: sha512-V7cBw/cKXMfEVhpSvVZhC+iGifD6U1zJ4tbibjjN+Xi3blSXaj/rJynAkCFFQfoG6VZrAiP7uGVzL440Q6Me2Q==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.19.1':
     resolution: {integrity: sha512-88brja2vldW/76jWATlBqHEoGjJLRnP0WOEKAUbMcXaAZnemNhlAHSyj4jIwMoP2T750LE9lblvD4e2jXleZsA==}
@@ -1908,6 +1897,15 @@ packages:
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
+  '@webav/av-cliper@1.0.10':
+    resolution: {integrity: sha512-R8PVLlGAT0WNvOIW+MPCkEbEJOefwtjeCFGfaAud+PGzLn/OzFDHohW1hgK7ESsffURjqAz/xn6jD1tTUYvAGQ==}
+
+  '@webav/internal-utils@1.0.10':
+    resolution: {integrity: sha512-V3TNloVaXnm1zkk3oT2XXUJjUqtcXMaYs3UHYmG0QGpDCvPmupA1I2Sy/QM6cpYJ/TtoDaQ/zEhyKnybZHRh+Q==}
+
+  '@webav/mp4box.js@0.5.4-fenghen':
+    resolution: {integrity: sha512-1NDZyNcB4Eu52tWhrRPGRTXpXUzWzh1xJE6jA0owj/Tlh8d9Bhsu2nsl9Dyheg1IhiFm3FfFoz0aK5dkCadqow==}
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -3709,6 +3707,9 @@ packages:
     resolution: {integrity: sha512-c/hfooPx+RBIOPM09GSxABOZhYPblDoyaGhqBkD/59vtpN21jEuWKDlM0KYTvqJVlSYjKs0tBcIdeXKChlSPtw==}
     hasBin: true
 
+  opfs-tools@0.6.2:
+    resolution: {integrity: sha512-C2+ElLE6WL9jBqhNPM5vN8QW88adNrFo13lMqyqelUQGSdH1R5MSNa8n6CnqmYWoOyGUqkmCZ5jxNl0n+/xHLg==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -4934,6 +4935,10 @@ packages:
       typescript:
         optional: true
 
+  wave-resampler@1.0.0:
+    resolution: {integrity: sha512-bE3rbpZXuKAV52Cd8/BeJvy82ZqEHK8pPWHrZ9JioaVVTBlmWbDC+u4p9blhFcf0Skepb4hlOAHc25XfqLC48g==}
+    engines: {node: '>=8'}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -7257,6 +7262,19 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@webav/av-cliper@1.0.10':
+    dependencies:
+      '@webav/internal-utils': 1.0.10
+      '@webav/mp4box.js': 0.5.4-fenghen
+      opfs-tools: 0.6.2
+      wave-resampler: 1.0.0
+
+  '@webav/internal-utils@1.0.10':
+    dependencies:
+      '@webav/mp4box.js': 0.5.4-fenghen
+
+  '@webav/mp4box.js@0.5.4-fenghen': {}
+
   abbrev@1.1.1: {}
 
   abort-controller@3.0.0:
@@ -9383,6 +9401,8 @@ snapshots:
       undici: 5.28.4
       yargs-parser: 21.1.1
 
+  opfs-tools@0.6.2: {}
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -10720,6 +10740,8 @@ snapshots:
       '@vue/server-renderer': 3.4.34(vue@3.4.34)
       '@vue/shared': 3.4.34
 
+  wave-resampler@1.0.0: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@4.0.2: {}

tsconfig.json

@@ -1,4 +1,13 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "strict": true
+  }
+}

undefined/.config/browser-launcher/config.json

@@ -0,0 +1,14 @@
+{
+  "browsers": {
+    "local": [
+      {
+        "command": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
+        "version": "9.11.22621.0",
+        "windows": true,
+        "name": "ie",
+        "type": "ie",
+        "profile": false
+      }
+    ]
+  }
+}