Spaces:

QuadraV
/

funsound

Running

App Files Files Community

QuadraV commited on Sep 20, 2024

Commit

a3299b5

verified ·

1 Parent(s): c8ecb43

Update index.html

Browse files

Files changed (1) hide show

index.html +284 -61

index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="https://www.funsound.cn/static/logo_whisper.png" type="image/x-icon">
-    <title>Funsound音视频转写</title>
     <style>
         body {
             display: flex;
@@ -83,10 +83,10 @@
         video {
             width: 100%;
-            height: 40%; /* 自适应视频高度 */
             background-color: #000;
             border-radius: 8px;
-            margin-bottom: 15px;
         }
         label {
@@ -251,11 +251,26 @@
             justify-content: center;
             margin-bottom: 10px;
         }
         .progress-bar {
             width: 100%;
             background-color: #444;
-            margin-top: 10px;
             border-radius: 4px;
         }
@@ -326,14 +341,38 @@
                 width: auto; /* 使输入框在小屏幕上更灵活 */
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="title">
-            <img src="https://www.funsound.cn/static/logo_whisper.png" alt="Funsound Logo">
-            Funsound语音识别 (Whisper版)
         </div>
         <div class="content">
             <div class="video-container">
@@ -347,11 +386,26 @@
                     您的浏览器不支持 video 标签。
                 </video>
-                <!-- 相关任务栏 -->
                 <div style="margin: 10px 0;">
-                    <label>附加任务（勾选）：</label>
-                    <label><input type="checkbox" id="speakerRecognition"> 说话人识别</label>
-                    <label><input type="checkbox" id="englishTranslation"> 中英翻译</label>
                 </div>
                 <div class="buttons-container">
@@ -365,6 +419,10 @@
                 <div id="recognitionProgress" class="progress-bar">
                     <div>0%</div>
                 </div>
                 <div id="logContent" style="margin-top: 10px; color: #fff;"></div>
             </div>
             <div class="asr-container">
@@ -373,6 +431,8 @@
                 <div class="center-buttons">
                     <button id="exportJsonBtn" class="export-button" onclick="exportAsrData('json')">导出 JSON</button>
                     <button id="exportSrtBtn" class="export-button" onclick="exportAsrData('srt')">导出 SRT</button>
                 </div>
             </div>
         </div>
@@ -382,23 +442,27 @@
         联系邮箱: <a href="mailto:[email protected]">[email protected]</a> |
         CSDN: <a href="https://blog.csdn.net/Ephemeroptera" target="_blank">Pika在线</a> |
         Modelscope: <a href="https://modelscope.cn/studios/QuadraV/FunSound">Funsound</a> |
-        Funasr版本: <a href="https://www.funsound.cn">Funsound-Funasr</a>
     </footer>
     <script>
-        const serverUrl = "https://www.funsound.cn/whisper";
-        let currentTaskId = null;
-        let asrData = [];
         document.getElementById('videoInput').addEventListener('change', function (event) {
             const file = event.target.files[0];
             document.getElementById('uploadBtn').disabled = file.size > 300 * 1024 * 1024;
             const videoPlayer = document.getElementById('videoPlayer');
             const videoURL = URL.createObjectURL(file);
             videoPlayer.src = videoURL;
         });
         function uploadFile() {
             const fileInput = document.getElementById('videoInput');
             const file = fileInput.files[0];
@@ -408,23 +472,52 @@
                 return;
             }
             // 获取选择的任务类型
             const speakerRecognition = document.getElementById('speakerRecognition').checked;
             const englishTranslation = document.getElementById('englishTranslation').checked;
             document.getElementById('uploadBtn').disabled = true;
             document.getElementById('uploadBtn').innerText = '转写中...';
             resetProgress();
             const xhr = new XMLHttpRequest();
             xhr.open('POST', `${serverUrl}/submit`, true);
             xhr.upload.onprogress = updateUploadProgress;
             xhr.onload = function () {
                 if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
-                    currentTaskId = response.content;
-                    monitorTaskProgress(currentTaskId);
                 } else {
                     alert('上传失败，请重试');
                     resetUploadButton();
@@ -434,50 +527,67 @@
             const formData = new FormData();
             formData.append('file', file);
-            formData.append('speakerRecognition', speakerRecognition);  // 将说话人识别任务添加到请求中
-            formData.append('englishTranslation', englishTranslation);  // 将英文翻译任务添加到请求中
             xhr.send(formData);
         }
         function resetProgress() {
             document.getElementById('uploadProgress').firstElementChild.style.width = '0%';
             document.getElementById('uploadProgress').firstElementChild.innerText = '';
             document.getElementById('recognitionProgress').firstElementChild.style.width = '0%';
             document.getElementById('recognitionProgress').firstElementChild.innerText = '';
             document.getElementById('asrList').innerHTML = "";
             document.getElementById('logContent').innerText = "";
         }
         function updateUploadProgress(event) {
             if (event.lengthComputable) {
                 const percentComplete = (event.loaded / event.total) * 100;
                 document.getElementById('uploadProgress').firstElementChild.style.width = `${percentComplete}%`;
                 document.getElementById('uploadProgress').firstElementChild.innerText = `${percentComplete.toFixed(2)}%`;
             }
         }
         function handleUploadError() {
             alert('上传失败，请重试');
             resetUploadButton();
         }
         function resetUploadButton() {
             document.getElementById('uploadBtn').disabled = false;
             document.getElementById('uploadBtn').innerText = '上传并识别';
         }
         function monitorTaskProgress(taskId) {
-            let retries = 0;
-            const maxRetries = 3600;
             const intervalId = setInterval(function () {
                 const xhr = new XMLHttpRequest();
                 xhr.open('GET', `${serverUrl}/task_prgs/${taskId}`, true);
                 xhr.onload = function () {
                     if (xhr.status === 200) {
                         const response = JSON.parse(xhr.responseText);
                         const status = response.content.status;
                         const progress = response.content.prgs;
                         if (progress) {
                             updateRecognitionProgress(progress.cur / progress.total * 100, progress.msg);
@@ -486,6 +596,7 @@
                         if (status === "SUCCESS") {
                             clearInterval(intervalId);
                             asrData = response.content.result;
                             displayResults(asrData);
                             resetUploadButton();
                         } else if (status === "FAIL") {
@@ -494,40 +605,45 @@
                             resetUploadButton();
                         }
                     } else {
-                        alert('获取进度失败，请重试');
-                        clearInterval(intervalId);
-                        resetUploadButton();
                     }
                 };
                 xhr.onerror = function () {
-                    alert('获取进度失败，请重试');
-                    clearInterval(intervalId);
-                    resetUploadButton();
                 };
                 xhr.send();
-                retries += 1;
-                if (retries >= maxRetries) {
-                    clearInterval(intervalId);
-                    alert('超出最大重试次数，任务未完成');
-                    resetUploadButton();
-                }
-            }, 1000);
         }
         function updateRecognitionProgress(progress, msg) {
             document.getElementById('recognitionProgress').firstElementChild.style.width = `${progress}%`;
             document.getElementById('recognitionProgress').firstElementChild.innerText = `${progress.toFixed(2)}%`;
             document.getElementById('logContent').innerText = `进度: ${progress.toFixed(2)}%, 状态: ${msg}`;
         }
         function displayResults(results) {
             const asrList = document.getElementById('asrList');
             asrList.innerHTML = "";
             results.forEach((entry) => {
                 const div = document.createElement('div');
                 div.className = 'asr-item';
                 div.innerHTML = `
                     <div class="timestamp">
                         <button class="play-button">播放</button>
@@ -535,18 +651,14 @@
                         -
                         <input type="number" value="${entry.end.toFixed(1)}" step="0.1" min="0" class="end-time">
                     </div>
                     <input type="text" value="${entry.role}" placeholder="角色" class="role-field">
                     <input type="text" value="${entry.text}" placeholder="文本" class="text-field">
                     <input type="text" value="${entry.trans}" placeholder="翻译" class="trans-field">
                     <label>
                         <input type="checkbox" ${entry.drop ? 'checked' : ''}> 丢弃
                     </label>
                 `;
                 const startInput = div.querySelector('.start-time');
                 const endInput = div.querySelector('.end-time');
                 const roleInput = div.querySelector('input.role-field');
@@ -554,15 +666,15 @@
                 const transInput = div.querySelector('input.trans-field');
                 const dropCheckbox = div.querySelector('input[type="checkbox"]');
                 const playButton = div.querySelector('.play-button');
                 startInput.addEventListener('input', () => {
                     entry.start = parseFloat(startInput.value);
                 });
                 endInput.addEventListener('input', () => {
                     entry.end = parseFloat(endInput.value);
                 });
                 roleInput.addEventListener('input', () => {
                     entry.role = roleInput.value;
                 });
@@ -570,15 +682,15 @@
                 textInput.addEventListener('input', () => {
                     entry.text = textInput.value;
                 });
                 transInput.addEventListener('input', () => {
                     entry.trans = transInput.value;
                 });
                 dropCheckbox.addEventListener('change', () => {
                     entry.drop = dropCheckbox.checked;
                 });
                 playButton.addEventListener('click', () => {
                     const video = document.getElementById('videoPlayer');
                     video.currentTime = entry.start;
@@ -590,20 +702,21 @@
                         }
                     }, 100);
                 });
                 asrList.appendChild(div);
             });
         }
         function exportAsrData(format) {
             if (asrData.length === 0) {
                 alert('没有数据可以导出');
                 return;
             }
             // 过滤掉被标记为丢弃的条目
             const filteredData = asrData.filter(entry => !entry.drop);
             let content = '';
             if (format === 'json') {
                 content = JSON.stringify(filteredData, null, 2);
@@ -616,7 +729,7 @@
                     content += `${entry.text}\n${entry.trans}\n\n`;
                 });
             }
             const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
@@ -626,7 +739,116 @@
             a.click();
             document.body.removeChild(a);
         }
         function formatTime(seconds) {
             const hours = Math.floor(seconds / 3600);
             const minutes = Math.floor((seconds % 3600) / 60);
@@ -634,15 +856,16 @@
             const millis = Math.floor((seconds - Math.floor(seconds)) * 1000);
             return `${pad(hours)}:${pad(minutes)}:${pad(secs)},${padMillis(millis)}`;
         }
         function pad(value) {
             return value.toString().padStart(2, '0');
         }
         function padMillis(value) {
             return value.toString().padStart(3, '0');
         }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../static/logo_whisper.png" type="image/x-icon">
+    <title>Funsound语音识别</title>
     <style>
         body {
             display: flex;
         video {
             width: 100%;
+            height: 30%; /* 自适应视频高度 */
             background-color: #000;
             border-radius: 8px;
+            margin-bottom: 0px;
         }
         label {
             justify-content: center;
             margin-bottom: 10px;
         }
+                /* 新增合成按钮样式，使用橙色 */
+        .subtitle-button {
+            padding: 10px;
+            background-color: #ff8c00; /* 使用橙色 */
+            color: #000;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+            border-radius: 4px;
+            transition: background-color 0.3s;
+        }
+        .subtitle-button:hover {
+            background-color: #e67e00;
+        }
         .progress-bar {
             width: 100%;
             background-color: #444;
+            margin-top: 0px;
             border-radius: 4px;
         }
                 width: auto; /* 使输入框在小屏幕上更灵活 */
             }
         }
+        .server-url-input {
+            width: 70%;
+            padding: 10px;
+            font-size: 1rem;
+            color: #eaeaea;
+            background-color: #333;
+            border: 1px solid #555;
+            border-radius: 4px;
+            outline: none;
+            transition: all 0.3s ease;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+        }
+        .server-url-input:focus {
+            border-color: #00ff84; /* 聚焦时边框颜色 */
+            box-shadow: 0 0 8px rgba(0, 255, 132, 0.8); /* 添加绿色光晕效果 */
+        }
+        .options-container {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="title">
+            <img src="../static/logo_whisper.png" alt="Funsound Logo">
+            Funsound 语音识别
         </div>
         <div class="content">
             <div class="video-container">
                     您的浏览器不支持 video 标签。
                 </video>
+                <!-- Added serverUrl input field -->
                 <div style="margin: 10px 0;">
+                    <label for="serverUrlInput">服务器地址：</label>
+                    <input type="text" id="serverUrlInput" value="https://www.funsound.cn/" class="server-url-input">
+                </div>
+                <div class="options-container">
+                    <!-- Recognition Model -->
+                    <div style="margin: 10px;">
+                        <label>识别模型（单选）：</label>
+                        <label><input type="radio" name="pipeline" value="whisper" checked> Whisper</label>
+                        <label><input type="radio" name="pipeline" value="funasr"> FunASR</label>
+                    </div>
+                    <!-- Additional Tasks -->
+                    <div style="margin: 10px;">
+                        <label>附加任务（多选）：</label>
+                        <label><input type="checkbox" id="speakerRecognition"> 说话人识别</label>
+                        <label><input type="checkbox" id="englishTranslation"> 中英翻译</label>
+                    </div>
                 </div>
                 <div class="buttons-container">
                 <div id="recognitionProgress" class="progress-bar">
                     <div>0%</div>
                 </div>
+                <label>合成进度：</label>
+                <div id="subtitleProgress" class="progress-bar">
+                    <div>0%</div>
+                </div>
                 <div id="logContent" style="margin-top: 10px; color: #fff;"></div>
             </div>
             <div class="asr-container">
                 <div class="center-buttons">
                     <button id="exportJsonBtn" class="export-button" onclick="exportAsrData('json')">导出 JSON</button>
                     <button id="exportSrtBtn" class="export-button" onclick="exportAsrData('srt')">导出 SRT</button>
+                    <!-- 修改合成按钮颜色 -->
+                    <button id="generateSubtitleBtn" class="subtitle-button" onclick="generateSubtitle()">合成字幕</button>
                 </div>
             </div>
         </div>
         联系邮箱: <a href="mailto:[email protected]">[email protected]</a> |
         CSDN: <a href="https://blog.csdn.net/Ephemeroptera" target="_blank">Pika在线</a> |
         Modelscope: <a href="https://modelscope.cn/studios/QuadraV/FunSound">Funsound</a> |
+        私有化部署
     </footer>
     <script>
+        let currentTaskId = null; // 当前的任务ID
+        let asrData = []; // 存储识别结果数据
+        let serverUrl = null; // 服务器地址
+        // 监听文件输入更改，预览视频
         document.getElementById('videoInput').addEventListener('change', function (event) {
             const file = event.target.files[0];
+            console.log('Selected file:', file);
             document.getElementById('uploadBtn').disabled = file.size > 300 * 1024 * 1024;
             const videoPlayer = document.getElementById('videoPlayer');
             const videoURL = URL.createObjectURL(file);
+            console.log('Video URL:', videoURL);
             videoPlayer.src = videoURL;
         });
+        // 上传文件并提交任务
         function uploadFile() {
             const fileInput = document.getElementById('videoInput');
             const file = fileInput.files[0];
                 return;
             }
+            // 获取文件的 MIME 类型
+            const fileType = file.type;
+            console.log('File type:', fileType);
+            // 检查是否为视频文件
+            const validVideoTypes = ['video/mp4', 'video/x-m4v', 'video/*', 'audio/mp4'];
+            const isVideo = validVideoTypes.includes(fileType);
+            console.log('Is valid video:', isVideo);
+            // 保存文件类型到全局变量
+            window.currentFileType = fileType;
             // 获取选择的任务类型
             const speakerRecognition = document.getElementById('speakerRecognition').checked;
             const englishTranslation = document.getElementById('englishTranslation').checked;
+            console.log('Speaker Recognition:', speakerRecognition, 'English Translation:', englishTranslation);
+            // 获取用户选择的识别模型
+            const selectedPipeline = document.querySelector('input[name="pipeline"]:checked').value;
+            console.log('Selected pipeline:', selectedPipeline);
             document.getElementById('uploadBtn').disabled = true;
             document.getElementById('uploadBtn').innerText = '转写中...';
             resetProgress();
+            // 从输入框获取服务器地址
+            serverUrl = document.getElementById('serverUrlInput').value.trim();
+            console.log('Server URL:', serverUrl);
             const xhr = new XMLHttpRequest();
             xhr.open('POST', `${serverUrl}/submit`, true);
             xhr.upload.onprogress = updateUploadProgress;
             xhr.onload = function () {
+                console.log('Upload response status:', xhr.status);
                 if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
+                    console.log('Upload response:', response);
+                    if (response.code === 0) {
+                        currentTaskId = response.content; // 获取任务ID
+                        console.log('Task ID:', currentTaskId);
+                        monitorTaskProgress(currentTaskId);
+                    } else {
+                        alert('上传失败，请重试');
+                        resetUploadButton();
+                    }
                 } else {
                     alert('上传失败，请重试');
                     resetUploadButton();
             const formData = new FormData();
             formData.append('file', file);
+            formData.append('speakerRecognition', speakerRecognition);  // 传递说话人识别参数
+            formData.append('englishTranslation', englishTranslation);  // 传递英文翻译参数
+            formData.append('pipeline', selectedPipeline);  // 传递选择的识别模型
+            console.log('Form Data:', formData);
             xhr.send(formData);
         }
+        // 重置进度条和界面
         function resetProgress() {
+            console.log('Resetting progress bars and UI elements');
             document.getElementById('uploadProgress').firstElementChild.style.width = '0%';
             document.getElementById('uploadProgress').firstElementChild.innerText = '';
             document.getElementById('recognitionProgress').firstElementChild.style.width = '0%';
             document.getElementById('recognitionProgress').firstElementChild.innerText = '';
+            document.getElementById('subtitleProgress').firstElementChild.style.width = '0%';
+            document.getElementById('subtitleProgress').firstElementChild.innerText = '';
             document.getElementById('asrList').innerHTML = "";
             document.getElementById('logContent').innerText = "";
         }
+        // 更新上传进度
         function updateUploadProgress(event) {
             if (event.lengthComputable) {
                 const percentComplete = (event.loaded / event.total) * 100;
+                console.log('Upload progress:', percentComplete);
                 document.getElementById('uploadProgress').firstElementChild.style.width = `${percentComplete}%`;
                 document.getElementById('uploadProgress').firstElementChild.innerText = `${percentComplete.toFixed(2)}%`;
             }
         }
+        // 上传失败的处理
         function handleUploadError() {
+            console.log('Upload error occurred');
             alert('上传失败，请重试');
             resetUploadButton();
         }
+        // 重置上传按钮状态
         function resetUploadButton() {
+            console.log('Resetting upload button state');
             document.getElementById('uploadBtn').disabled = false;
             document.getElementById('uploadBtn').innerText = '上传并识别';
         }
+        // 监控任务进度
         function monitorTaskProgress(taskId) {
+            console.log('Monitoring task progress for Task ID:', taskId);
+            let failedRequests = 0; // 计数连续失败的请求
+            const maxFailedRequests = 10; // 连续失败的最大请求数
             const intervalId = setInterval(function () {
                 const xhr = new XMLHttpRequest();
                 xhr.open('GET', `${serverUrl}/task_prgs/${taskId}`, true);
                 xhr.onload = function () {
+                    console.log('Progress response status:', xhr.status);
                     if (xhr.status === 200) {
                         const response = JSON.parse(xhr.responseText);
+                        console.log('Progress response:', response);
                         const status = response.content.status;
                         const progress = response.content.prgs;
+                        failedRequests = 0;
                         if (progress) {
                             updateRecognitionProgress(progress.cur / progress.total * 100, progress.msg);
                         if (status === "SUCCESS") {
                             clearInterval(intervalId);
                             asrData = response.content.result;
+                            console.log('Recognition successful, ASR data:', asrData);
                             displayResults(asrData);
                             resetUploadButton();
                         } else if (status === "FAIL") {
                             resetUploadButton();
                         }
                     } else {
+                        failedRequests += 1; // 增加失败计数
+                        document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
+                        if (failedRequests >= maxFailedRequests) {
+                            clearInterval(intervalId);
+                            alert('连续请求失败，任务未完成');
+                            resetUploadButton();
+                        }
                     }
                 };
                 xhr.onerror = function () {
+                    failedRequests += 1; // 增加失败计数
+                    document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
+                    if (failedRequests >= maxFailedRequests) {
+                        clearInterval(intervalId);
+                        alert('连续请求失败，任务未完成');
+                        resetUploadButton();
+                    }
                 };
                 xhr.send();
+            }, 2000);
         }
+        // 更新识别进度
         function updateRecognitionProgress(progress, msg) {
+            console.log('Recognition progress:', progress, 'Message:', msg);
             document.getElementById('recognitionProgress').firstElementChild.style.width = `${progress}%`;
             document.getElementById('recognitionProgress').firstElementChild.innerText = `${progress.toFixed(2)}%`;
             document.getElementById('logContent').innerText = `进度: ${progress.toFixed(2)}%, 状态: ${msg}`;
         }
+        // 显示识别结果
         function displayResults(results) {
+            console.log('Displaying ASR results:', results);
             const asrList = document.getElementById('asrList');
             asrList.innerHTML = "";
             results.forEach((entry) => {
                 const div = document.createElement('div');
                 div.className = 'asr-item';
                 div.innerHTML = `
                     <div class="timestamp">
                         <button class="play-button">播放</button>
                         -
                         <input type="number" value="${entry.end.toFixed(1)}" step="0.1" min="0" class="end-time">
                     </div>
                     <input type="text" value="${entry.role}" placeholder="角色" class="role-field">
                     <input type="text" value="${entry.text}" placeholder="文本" class="text-field">
                     <input type="text" value="${entry.trans}" placeholder="翻译" class="trans-field">
                     <label>
                         <input type="checkbox" ${entry.drop ? 'checked' : ''}> 丢弃
                     </label>
                 `;
                 const startInput = div.querySelector('.start-time');
                 const endInput = div.querySelector('.end-time');
                 const roleInput = div.querySelector('input.role-field');
                 const transInput = div.querySelector('input.trans-field');
                 const dropCheckbox = div.querySelector('input[type="checkbox"]');
                 const playButton = div.querySelector('.play-button');
                 startInput.addEventListener('input', () => {
                     entry.start = parseFloat(startInput.value);
                 });
                 endInput.addEventListener('input', () => {
                     entry.end = parseFloat(endInput.value);
                 });
                 roleInput.addEventListener('input', () => {
                     entry.role = roleInput.value;
                 });
                 textInput.addEventListener('input', () => {
                     entry.text = textInput.value;
                 });
                 transInput.addEventListener('input', () => {
                     entry.trans = transInput.value;
                 });
                 dropCheckbox.addEventListener('change', () => {
                     entry.drop = dropCheckbox.checked;
                 });
                 playButton.addEventListener('click', () => {
                     const video = document.getElementById('videoPlayer');
                     video.currentTime = entry.start;
                         }
                     }, 100);
                 });
                 asrList.appendChild(div);
             });
         }
+        // 导出识别结果为 JSON 或 SRT 格式
         function exportAsrData(format) {
             if (asrData.length === 0) {
                 alert('没有数据可以导出');
                 return;
             }
             // 过滤掉被标记为丢弃的条目
             const filteredData = asrData.filter(entry => !entry.drop);
             let content = '';
             if (format === 'json') {
                 content = JSON.stringify(filteredData, null, 2);
                     content += `${entry.text}\n${entry.trans}\n\n`;
                 });
             }
             const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.click();
             document.body.removeChild(a);
         }
+        // 生成字幕并监控字幕合成进度
+        function generateSubtitle() {
+            // 检查当前文件是否为视频文件
+            const validVideoTypes = ['video/mp4', 'video/x-m4v', 'video/*', 'audio/mp4'];
+            if (!validVideoTypes.includes(window.currentFileType)) {
+                alert('当前文件不是视频文件，无法合成字幕。');
+                return;
+            }
+            document.getElementById('subtitleProgress').firstElementChild.style.width = '0%';
+            document.getElementById('subtitleProgress').firstElementChild.innerText = '0%';
+            if (!currentTaskId || asrData.length === 0) {
+                alert('请确保选择了视频文件并进行了识别');
+                return;
+            }
+            const postData = {
+                task_id: currentTaskId,
+                asr_results: asrData
+            };
+            document.getElementById('generateSubtitleBtn').disabled = true;
+            document.getElementById('generateSubtitleBtn').innerText = '合成中...';
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', `${serverUrl}/make_subtitle`, true);
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.onload = function () {
+                if (xhr.status === 202) {
+                    const response = JSON.parse(xhr.responseText);
+                    monitorSubtitleGeneration(response.task_id);
+                } else {
+                    alert('合成字幕失败，请重试');
+                    resetGenerateButton();
+                }
+            };
+            xhr.onerror = function () {
+                alert('合成字幕失败，请重试');
+                resetGenerateButton();
+            };
+            xhr.send(JSON.stringify(postData));
+        }
+        // 监控字幕合成进度
+        function monitorSubtitleGeneration(taskId) {
+            console.log('Monitoring subtitle generation for Task ID:', taskId);
+            let failedRequests = 0; // 计数连续失败的请求
+            const maxFailedRequests = 10; // 连续失败的最大请求数
+            const intervalId = setInterval(function () {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', `${serverUrl}/get_subtitle_progress/${taskId}`, true);
+                xhr.onload = function () {
+                    if (xhr.status === 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        const progress = response.progress;
+                        failedRequests = 0; // 请求成功时重置失败计数
+                        if (progress !== undefined) {
+                            updateSubtitleProgress(progress * 100, '正在生成字幕');
+                        }
+                        if (progress >= 1.0) {
+                            clearInterval(intervalId);
+                            document.getElementById('videoPlayer').src = `${serverUrl}/video/${response.video_url}`;
+                            resetGenerateButton();
+                        }
+                    } else {
+                        failedRequests += 1; // 增加失败计数
+                        document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
+                        if (failedRequests >= maxFailedRequests) {
+                            clearInterval(intervalId);
+                            alert('连续请求失败，字幕生成未完成');
+                            resetGenerateButton();
+                        }
+                    }
+                };
+                xhr.onerror = function () {
+                    failedRequests += 1; // 增加失败计数
+                    document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
+                    if (failedRequests >= maxFailedRequests) {
+                        clearInterval(intervalId);
+                        alert('连续请求失败，字幕生成未完成');
+                        resetGenerateButton();
+                    }
+                };
+                xhr.send();
+            }, 1000);
+        }
+        // 更新字幕合成进度
+        function updateSubtitleProgress(progress, msg) {
+            const progressBar = document.getElementById('subtitleProgress');
+            progressBar.firstElementChild.style.width = `${progress}%`;
+            progressBar.firstElementChild.innerText = `${progress.toFixed(2)}%`;
+            document.getElementById('logContent').innerText = `进度: ${progress.toFixed(2)}%, 状态: 正在合成含字幕视频，合成完毕将在上面播放器展示`;
+        }
+        // 重置生成字幕按钮状态
+        function resetGenerateButton() {
+            document.getElementById('generateSubtitleBtn').disabled = false;
+            document.getElementById('generateSubtitleBtn').innerText = '合成字幕';
+        }
+        // 格式化时间，用于字幕格式化
         function formatTime(seconds) {
             const hours = Math.floor(seconds / 3600);
             const minutes = Math.floor((seconds % 3600) / 60);
             const millis = Math.floor((seconds - Math.floor(seconds)) * 1000);
             return `${pad(hours)}:${pad(minutes)}:${pad(secs)},${padMillis(millis)}`;
         }
         function pad(value) {
             return value.toString().padStart(2, '0');
         }
         function padMillis(value) {
             return value.toString().padStart(3, '0');
         }
     </script>
 </body>
 </html>