feat: subtitles editor

2024-07-02 01:25:56 +08:00
parent 50cce8a0db
commit d637442fda
3 changed files with 329 additions and 7 deletions
--- a/components/aigc/course-generate/CGTaskCard.vue
+++ b/components/aigc/course-generate/CGTaskCard.vue
@@ -3,10 +3,13 @@ import type { PropType } from 'vue'
 import dayjs from 'dayjs'
 import { useDownload } from '~/composables/useDownload'
 import gsap from 'gsap'
+import SRTEditor from '~/components/aigc/course-generate/SRTEditor.vue'

 const toast = useToast()
 const { metaSymbol } = useShortcuts()

+const srtEditor = ref()
+
 const props = defineProps({
  course: {
    type: Object as PropType<resp.gen.CourseGenItem>,
@@ -25,6 +28,14 @@ defineShortcuts({
      }
    },
  },
+  'meta_d': {
+    handler: () => {
+      if (isDropdownOpen.value && isDownloadable.value) {
+        srtEditor.value.open()
+        isDropdownOpen.value = false
+      }
+    },
+  },
  'meta_s': {
    handler: () => {
      if (isDropdownOpen.value && isDownloadable.value) {
@@ -73,9 +84,6 @@ watch(generateProgress, (newValue) => {
 }, {
  immediate: true,
 })
-watch(tweenedGenerateProgress, val => {
-  console.log(val)
-})

 const downloadProgress = ref(0)

@@ -117,8 +125,8 @@ const startDownload = async (
  download()
 }

-const copyTaskId = () => {
-  navigator.clipboard.writeText(props.course.task_id)
+const copyTaskId = (extraMessage?: string) => {
+  navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${ extraMessage }` : ''))
  toast.add({
    title: '复制成功',
    description: '已复制任务 ID',
@@ -181,10 +189,11 @@ const copyTaskId = () => {
        <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"
+            @click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')"
          >
            复制ID
          </button>
@@ -215,6 +224,10 @@ const copyTaskId = () => {
                icon: 'i-solar-subtitles-linear',
                shortcuts: [metaSymbol, 'D'],
                disabled: !isDownloadable,
+                click: () => {
+                  srtEditor.open()
+                  isDropdownOpen = false
+                }
              }, {
                label: '下载字幕',
                icon: 'i-tabler-file-download',
@@ -272,6 +285,10 @@ const copyTaskId = () => {
        />
      </UCard>
    </UModal>
+    <SRTEditor
+      ref="srtEditor"
+      :course="course"
+    />
  </div>
 </template>

--- a/components/aigc/course-generate/SRTEditor.vue
+++ b/components/aigc/course-generate/SRTEditor.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+interface Subtitle {
+  start: string;
+  end: string;
+  text: string;
+  active?: boolean
+}
+
+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+
+const dayjs = useDayjs()
+const toast = useToast()
+
+const isDrawerActive = ref(false)
+const isLoading = ref(true)
+const rawSrt = ref<string | null>(null)
+const subtitles = ref<Subtitle[]>([])
+
+const videoElement = ref<HTMLVideoElement | null>(null)
+
+const loadSrt = async () => {
+  isLoading.value = true
+  try {
+    const response = await fetch(props.course.subtitle_url)
+    const text = await response.text()
+    rawSrt.value = text
+    parseSrt(text)
+  } catch (err) {
+    toast.add({
+      title: '加载字幕失败',
+      description: err as string || '未知错误',
+      color: 'red',
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const parseSrt = (srt: string) => {
+  const lines = srt.split(/\r?\n/)
+  const regex = /(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})/
+  let subtitle: Subtitle | null = null
+
+  lines.forEach(line => {
+    if (/^\d+$/.test(line.trim())) return
+
+    const match = line.match(regex)
+    if (match) {
+      if (subtitle) {
+        subtitles.value.push(subtitle)
+      }
+      subtitle = {
+        start: match[1],
+        end: match[2],
+        text: '',
+      }
+    } else if (subtitle) {
+      subtitle.text += (line.trim() ? line : '')
+    }
+  })
+
+  if (subtitle) {
+    subtitles.value.push(subtitle)
+  }
+}
+
+const generateSrt = () => {
+  return subtitles.value.map((subtitle, index) => {
+    return `${ index + 1 }\n${ subtitle.start } --> ${ subtitle.end }\n${ subtitle.text }\n`
+  }).join('\n')
+}
+
+const formatTime = (time: string) => {
+  const parts = time.split(',')
+  const timeParts = parts[0].split(':')
+  return {
+    hours: parseInt(timeParts[0]),
+    minutes: parseInt(timeParts[1]),
+    seconds: parseInt(timeParts[2]),
+    milliseconds: parseInt(parts[1]),
+  }
+}
+
+const formatTimeToDayjs = (time: string) => {
+  const parts = time.split(',')
+  const timeParts = parts[0].split(':')
+  return dayjs().hour(parseInt(timeParts[0])).minute(parseInt(timeParts[1])).second(parseInt(timeParts[2])).millisecond(parseInt(parts[1]))
+}
+
+const syncSubtitles = () => {
+  if (!videoElement.value) return
+
+  const currentTime = videoElement.value.currentTime * 1000 // convert to milliseconds
+
+  subtitles.value.forEach(subtitle => {
+    const start = formatTime(subtitle.start)
+    const end = formatTime(subtitle.end)
+
+    const startTime = (start.hours * 3600 + start.minutes * 60 + start.seconds) * 1000 + start.milliseconds
+    const endTime = (end.hours * 3600 + end.minutes * 60 + end.seconds) * 1000 + end.milliseconds
+
+    subtitle.active = currentTime >= startTime && currentTime <= endTime
+    // scroll active subtitle into view
+    if (subtitle.active) {
+      const element = document.getElementById(`subtitle-${ subtitles.value.indexOf(subtitle) }`)!
+      const parent = element?.parentElement
+      // scroll element to the center of parent
+      parent?.scrollTo({
+        top: element.offsetTop,
+      })
+    }
+  })
+}
+
+const onSubtitleInputClick = (subtitle: Subtitle) => {
+  if (!videoElement.value) return
+  if (!subtitle.active) {
+    videoElement.value.currentTime = formatTime(subtitle.start).hours * 3600 +
+      formatTime(subtitle.start).minutes * 60 +
+      formatTime(subtitle.start).seconds + 1
+  }
+  videoElement.value.pause()
+}
+
+onMounted(() => {
+  if (rawSrt.value) {
+    parseSrt(rawSrt.value)
+  }
+})
+
+defineExpose({
+  open() {
+    isDrawerActive.value = true
+    if (!rawSrt.value) loadSrt()
+  },
+  close() {
+    isDrawerActive.value = false
+  },
+})
+</script>
+
+<template>
+  <div>
+    <USlideover v-model="isDrawerActive" :ui="{ width: 'max-w-xl' }">
+      <UCard
+        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
+            color="gray"
+            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">
+              字幕编辑器
+            </h3>
+            <h3 class="text-xs font-semibold text-blue-500" v-if="course.title">
+              {{ course.title }}
+            </h3>
+          </div>
+        </template>
+
+        <div v-if="isLoading" class="flex justify-center items-center text-primary">
+          <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"/>
+                <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"/>
+              </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"/>
+              </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"/>
+              </circle>
+              <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+                                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 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
+              controls
+              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">
+            <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') }}
+                  -
+                  {{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
+                  <span class="opacity-50">
+                    [{{ formatTimeToDayjs(subtitle.end).diff(formatTimeToDayjs(subtitle.start), 'second') }}s]
+                  </span>
+                </span>
+                <UInput
+                  v-model="subtitle.text"
+                  class="w-full"
+                  placeholder="请输入字幕内容"
+                  :name="'subtitle-' + index"
+                  :autofocus="false"
+                  :color="subtitle.active ? 'primary' : undefined"
+                  @click="onSubtitleInputClick(subtitle)"
+                >
+                  <template #trailing>
+                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled"/>
+                  </template>
+                </UInput>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <template #footer>
+          <!-- TODO: 24/07/02 Modified subtitles upload -->
+          <UButton @click="() => {
+            console.log(generateSrt())
+          }">
+            Generate
+          </UButton>
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style scoped>
+.overshadow {
+  @apply relative;
+}
+
+.overshadow:after {
+  content: "";
+  inset: 80% 0 0;
+  position: absolute;
+  @apply bg-gradient-to-b from-transparent to-white dark:to-neutral-950;
+}
+</style>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -20,9 +20,37 @@ export default <Partial<Config>>{
        sidebar: 'inset -2px 0 2px 0 rgba(0, 0, 0, .05)',
        sidebar_dark: 'inset -2px 0 2px 0 rgba(255, 255, 255, .05)',
      },
+      textShadow: {
+        'default': '2px 2px 5px grey',
+        'md': '4px 4px 10px grey',
+        'lg': '6px 6px 15px grey',
      },
    },
-  plugins: [typography],
+  },
+  plugins: [
+    typography,
+    function ({ addUtilities }: { addUtilities: Function }) {
+      const newUtilities = {
+        '.text-shadow': {
+          textShadow: '2px 2px 5px grey',
+        },
+        '.text-shadow-md': {
+          textShadow: '4px 4px 10px grey',
+        },
+        '.text-shadow-lg': {
+          textShadow: '6px 6px 15px grey',
+        },
+        '.text-stroke': {
+          '-webkit-text-stroke': '1px black',
+        },
+        '.text-stroke-2': {
+          '-webkit-text-stroke': '2px black',
+        },
+      }
+
+      addUtilities(newUtilities, ['responsive', 'hover'])
+    },
+  ],
  safelist: [
    {
      pattern: /^bg-/,