字幕查看

du

2025-04-09 98f7c9924a4724d7149c7facdf4082cb2caee0df

字幕查看

 easegen-front/src/api/pptTemplate/index.ts

@@ -98,3 +98,7 @@
export const saveSubtitles = async(data) => {
  return await request.put({ url: '/digitalcourse/course-media/updateSubtitles', data })
}
// 视频合成
export const videoMeger = async(data) => {
  return await request.post({ url: '/digitalcourse/course-media/createSubtitlesVideo', data })
}

 easegen-front/src/views/myCourse/index.vue

@@ -145,7 +145,7 @@
  <!-- 字幕生成弹框 -->
  <el-dialog
    v-model="subtitleDialogVisible"
    title="字幕生成"
    title="字幕查看修改"
    width="60%"
    @closed="resetSubtitleForm"
  >
@@ -176,7 +176,7 @@
              @click="generateSubtitles"
              :loading="generating || polling"
            >
              生成字幕
              查看字幕
            </el-button>
            <el-button
              type="primary"
@@ -190,6 +190,12 @@
                style="display: none"
                @change="handleFileUpload"
              />
            </el-button>
            <el-button
              type="primary"
              @click="downloadSubtitles"
            >
              字幕视频合成
            </el-button>
          </el-form-item>
        </el-col>
@@ -205,7 +211,11 @@
          resize="none"
        />
      </el-form-item>
      <el-form-item label="预览视频" v-if="subtitleForm.subtitlesAddStatus==2">
        <video width="100%" :src="subtitleForm.videoUrl" controls></video>
      </el-form-item>
    </el-form>


    <template #footer>
      <div class="dialog-footer">
@@ -232,6 +242,7 @@
import { getAccessToken, getTenantId } from "@/utils/auth"
import axios from 'axios'
import { config } from '@/config/axios/config'
import {videoMeger} from "@/api/pptTemplate";
const router = useRouter()
const message = useMessage()
const { t } = useI18n()
@@ -377,9 +388,48 @@
}

// 打开字幕弹框
const openSubtitleDialog = (videoId: number) => {
  subtitleForm.videoId = videoId
const openSubtitleDialog = async (videoId: number) => {
  try {

  subtitleDialogVisible.value = true
    subtitleForm.videoId = videoId
    const videoDetail = await pptTemplateApi.myCourseDetail(videoId)
    console.log('视频详情:', videoDetail)
    // 立即获取视频详情检查字幕状态
    subtitleForm.subtitlesAddStatus=videoDetail.subtitlesAddStatus
    if (videoDetail.subtitlesAddStatus === 2) {
      subtitleForm.videoUrl = videoDetail.videoUrl || ''

    }
    if (videoDetail.subtitlesStatus === 2) { // 2 表示字幕已生成
      if (videoDetail.subtitlesUrl) {
        try {
          // 尝试从URL获取字幕内容
          const response = await fetch(videoDetail.subtitlesUrl)
          if (response.ok) {
            const srtContent = await response.text()
            subtitleForm.content = srtContent
          } else {
            // 如果URL不可用，检查是否有直接的字幕内容
            subtitleForm.content = videoDetail.subtitlesContent || ''
          }
        } catch (error) {
          console.error('获取字幕内容失败:', error)
          subtitleForm.content = videoDetail.subtitlesContent || ''
        }
      } else if (videoDetail.subtitlesContent) {
        // 直接使用字幕内容
        subtitleForm.content = videoDetail.subtitlesContent
      }
    } else {
      // 字幕未生成或生成失败，清空内容
      subtitleForm.content = ''
    }
  } catch (error) {
    console.error('获取视频详情失败:', error)
    message.error('获取视频详情失败，请重试')
    subtitleDialogVisible.value = false
  }
}

// 重置字幕表单
@@ -440,9 +490,9 @@
    generating.value = true

    const params = {
      videoId: subtitleForm.videoId,
      timeThreshold: parseFloat(subtitleForm.timeThreshold),
      language: subtitleForm.language
      id: subtitleForm.videoId,
      sentenceGap: parseFloat(subtitleForm.timeThreshold),
      lang: subtitleForm.language
    }
    await pptTemplateApi.generateSubtitles(params)
    message.success('字幕生成任务已开始')
@@ -576,7 +626,71 @@
  }
  polling.value = false
}
//字幕视频合成
const downloadSubtitles = async () => {
  try {
    // 判断字幕内容是否为空
    if (!subtitleForm.content.trim()) {
      message.warning('请先生成或上传字幕内容')
      return
    }

    generating.value = true
    const obj = {
      id: subtitleForm.videoId
    }
    await pptTemplateApi.videoMeger(obj)
    message.success('字幕视频合成任务已开始')

    const maxAttempts = 20
    const interval = 3000
    let attempts = 0

    const poll = async () => {
      polling.value = true
      attempts++

      try {
        const videoDetail = await pptTemplateApi.myCourseDetail(subtitleForm.videoId!)
        console.log('轮询字幕视频合成结果:', videoDetail)

        if (videoDetail.subtitlesAddStatus === 2) {
          message.success('字幕视频合成成功')
          if (videoDetail.previewUrl) {
            subtitleForm.content = '' // 清空当前字幕内容
            stopPolling()
            subtitleDialogVisible.value = false
            getList() // 刷新列表
          }
        } else if (videoDetail.subtitlesAddStatus === 3) {
          message.error(`字幕视频合成失败: ${videoDetail.errorReason || '未知原因'}`)
          stopPolling()
        } else if (attempts >= maxAttempts) {
          message.warning('字幕视频合成超时，请稍后手动检查')
          stopPolling()
        } else {
          pollingTimer = window.setTimeout(poll, interval)
        }
      } catch (error) {
        console.error('轮询字幕视频合成状态出错:', error)
        if (attempts >= maxAttempts) {
          message.error('字幕视频合成状态检查超时')
          stopPolling()
        } else {
          pollingTimer = window.setTimeout(poll, interval)
        }
      }
    }

    poll()
  } catch (error) {
    console.error('字幕视频合成失败:', error)
    message.error(`字幕视频合成失败: ${error.message || '未知错误'}`)
    stopPolling()
  } finally {
    generating.value = false
  }
}
// 清理定时器
onBeforeUnmount(() => {
  stopPolling()