Update index.html

index.html

@@ -364,6 +364,7 @@
             justify-content: space-around;
             align-items: center;
         }
+        
 
     </style>
 </head>
@@ -433,6 +434,7 @@
                     <button id="exportSrtBtn" class="export-button" onclick="exportAsrData('srt')">导出 SRT</button>
                     <!-- 修改合成按钮颜色 -->
                     <button id="generateSubtitleBtn" class="subtitle-button" onclick="generateSubtitle()">合成字幕</button>
+                    <button id="downloadVideoBtn" style="display: none;" onclick="downloadVideo()">下载字幕视频</button>
                 </div>
             </div>
         </div>
@@ -446,157 +448,192 @@
     </footer>
 
     <script>
-        let currentTaskId = null; // 当前的任务ID
+        let currentTaskId = null; // 当前任务ID
         let asrData = []; // 存储识别结果数据
         let serverUrl = null; // 服务器地址
+        const chunkSize = 5 * 1024 * 1024; // 分块大小，5MB
     
         // 监听文件输入更改，预览视频
         document.getElementById('videoInput').addEventListener('change', function (event) {
             const file = event.target.files[0];
-            console.log('Selected file:', file);
+            log('Selected file: ' + file.name);
             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;
+            videoPlayer.src = URL.createObjectURL(file);
+            log('Video URL: ' + videoPlayer.src);
         });
-
+    
         // 上传文件并提交任务
         function uploadFile() {
             const fileInput = document.getElementById('videoInput');
             const file = fileInput.files[0];
-
+    
             if (!file) {
                 alert('请先选择一个文件');
                 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);
-
+            
+            log('Speaker Recognition: ' + speakerRecognition + ', English Translation: ' + englishTranslation);
+            log('Selected pipeline: ' + selectedPipeline);
+    
             document.getElementById('uploadBtn').disabled = true;
-            document.getElementById('uploadBtn').innerText = '转写中...';
-
+            document.getElementById('uploadBtn').innerText = '正在转写...';
+    
             resetProgress();
-
-            // 从输入框获取服务器地址
             serverUrl = document.getElementById('serverUrlInput').value.trim();
-            console.log('Server URL:', serverUrl);
-
+            log('Server URL: ' + serverUrl);
+    
+            initializeTask(file, speakerRecognition, englishTranslation, selectedPipeline);
+        }
+    
+        // 初始化任务
+        function initializeTask(file, speakerRecognition, englishTranslation, pipeline) {
+            log("Initializing task with filename: " + file.name);
+            const formData = new FormData();
+            formData.append('status', 'init');
+            formData.append('filename', file.name);
+            formData.append('totalChunks', Math.ceil(file.size / chunkSize));
+            formData.append('speakerRecognition', speakerRecognition);
+            formData.append('englishTranslation', englishTranslation);
+            formData.append('pipeline', pipeline);
+    
             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);
+                    log('Initialization response: ' + JSON.stringify(response));
                     if (response.code === 0) {
-                        currentTaskId = response.content; // 获取任务ID
-                        console.log('Task ID:', currentTaskId);
-                        monitorTaskProgress(currentTaskId);
+                        currentTaskId = response.content;
+                        log('Task ID: ' + currentTaskId);
+                        uploadChunks(file); // 开始分块上传
                     } else {
-                        alert('上传失败，请重试');
+                        alert('初始化失败，请重试');
                         resetUploadButton();
                     }
                 } else {
-                    alert('上传失败，请重试');
+                    alert('初始化失败，请重试');
                     resetUploadButton();
                 }
             };
             xhr.onerror = handleUploadError;
-
-            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 uploadChunks(file) {
+            log("正在上传文件..");
+            const totalChunks = Math.ceil(file.size / chunkSize);
+            let chunkIndex = 0;
+    
+            function uploadNextChunk() {
+                if (chunkIndex >= totalChunks) {
+                    log("上传完毕，开始转写..");
+                    submitASRTask();
+                    return;
+                }
+    
+                const start = chunkIndex * chunkSize;
+                const end = Math.min(file.size, start + chunkSize);
+                const chunk = file.slice(start, end);
+    
+                const formData = new FormData();
+                formData.append('status', 'upload');
+                formData.append('task_id', currentTaskId);
+                formData.append('ChunkId', chunkIndex);
+                formData.append('file', chunk);
+    
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', `${serverUrl}/submit`, true);
+                xhr.onload = function () {
+                    if (xhr.status === 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        log(`Chunk ${chunkIndex} upload response: ` + JSON.stringify(response));
+                        if (response.code === 0) {
+                            updateUploadProgress(chunkIndex, totalChunks);
+                            chunkIndex++;
+                            uploadNextChunk(); // 上传下一个块
+                        } else {
+                            alert(`第 ${chunkIndex + 1} 块上传失败，请重试`);
+                            resetUploadButton();
+                        }
+                    } else {
+                        alert(`第 ${chunkIndex + 1} 块上传失败，请重试`);
+                        resetUploadButton();
+                    }
+                };
+                xhr.onerror = handleUploadError;
+                xhr.send(formData);
             }
+    
+            uploadNextChunk(); // 开始上传第一个块
         }
     
-        // 上传失败的处理
-        function handleUploadError() {
-            console.log('Upload error occurred');
-            alert('上传失败，请重试');
-            resetUploadButton();
+        // 更新上传进度
+        function updateUploadProgress(chunkIndex, totalChunks) {
+            const totalProgress = ((chunkIndex + 1) / totalChunks) * 100;
+            log('Upload progress: ' + totalProgress.toFixed(2) + '%');
+            document.getElementById('uploadProgress').firstElementChild.style.width = `${totalProgress}%`;
+            document.getElementById('uploadProgress').firstElementChild.innerText = `${totalProgress.toFixed(2)}%`;
         }
     
-        // 重置上传按钮状态
-        function resetUploadButton() {
-            console.log('Resetting upload button state');
-            document.getElementById('uploadBtn').disabled = false;
-            document.getElementById('uploadBtn').innerText = '上传并识别';
+        // 提交 ASR 任务
+        function submitASRTask() {
+            const formData = new FormData();
+            formData.append('status', 'asr');
+            formData.append('task_id', currentTaskId);
+    
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', `${serverUrl}/submit`, true);
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText);
+                    log('ASR submission response: ' + JSON.stringify(response));
+                    if (response.code === 0) {
+                        monitorTaskProgress(currentTaskId);
+                    } else {
+                        alert('ASR 提交失败，请重试');
+                        resetUploadButton();
+                    }
+                } else {
+                    alert('ASR 提交失败，请重试');
+                    resetUploadButton();
+                }
+            };
+            xhr.onerror = handleUploadError;
+            xhr.send(formData);
         }
     
         // 监控任务进度
         function monitorTaskProgress(taskId) {
-            console.log('Monitoring task progress for Task ID:', taskId);
-            let failedRequests = 0; // 计数连续失败的请求
-            const maxFailedRequests = 10; // 连续失败的最大请求数
-
+            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.open('GET', `${serverUrl}/task_asr_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);
+                        log('Progress response: ' + JSON.stringify(response));
                         const status = response.content.status;
                         const progress = response.content.prgs;
                         failedRequests = 0;
-
+    
                         if (progress) {
-                            updateRecognitionProgress(progress.cur / progress.total * 100, progress.msg);
+                            updateRecognitionProgress((progress.cur / progress.total) * 100, progress.msg);
                         }
-
+    
                         if (status === "SUCCESS") {
                             clearInterval(intervalId);
                             asrData = response.content.result;
-                            console.log('Recognition successful, ASR data:', asrData);
+                            log('Recognition successful, ASR data: ' + JSON.stringify(asrData));
                             displayResults(asrData);
                             resetUploadButton();
                         } else if (status === "FAIL") {
@@ -605,31 +642,28 @@
                             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();
+                        handleProgressError();
                     }
                 };
+                xhr.onerror = handleProgressError;
                 xhr.send();
             }, 2000);
         }
-
+    
+        // 处理进度请求错误
+        function handleProgressError() {
+            failedRequests++;
+            log('请求失败，当前重连次数: ' + failedRequests);
+            if (failedRequests >= maxFailedRequests) {
+                clearInterval(intervalId);
+                alert('连续请求失败，任务未完成');
+                resetUploadButton();
+            }
+        }
+    
         // 更新识别进度
         function updateRecognitionProgress(progress, msg) {
-            console.log('Recognition progress:', progress, 'Message:', msg);
+            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}`;
@@ -637,7 +671,7 @@
     
         // 显示识别结果
         function displayResults(results) {
-            console.log('Displaying ASR results:', results);
+            log('Displaying ASR results');
             const asrList = document.getElementById('asrList');
             asrList.innerHTML = "";
             results.forEach((entry) => {
@@ -659,210 +693,194 @@
                     </label>
                 `;
     
-                const startInput = div.querySelector('.start-time');
-                const endInput = div.querySelector('.end-time');
-                const roleInput = div.querySelector('input.role-field');
-                const textInput = div.querySelector('input.text-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;
-                    video.play();
-                    const interval = setInterval(() => {
-                        if (video.currentTime >= entry.end) {
-                            video.pause();
-                            clearInterval(interval);
-                        }
-                    }, 100);
-                });
-    
+                setupASREventHandlers(div, entry);
                 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);
-            } else if (format === 'srt') {
-                filteredData.forEach((entry, index) => {
-                    content += `${index + 1}\n`;
-                    const start = formatTime(entry.start);
-                    const end = formatTime(entry.end);
-                    content += `${start} --> ${end}\n`;
-                    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.href = url;
-            a.download = `result.${format}`;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
+        // 设置 ASR 事件处理
+        function setupASREventHandlers(div, entry) {
+            const startInput = div.querySelector('.start-time');
+            const endInput = div.querySelector('.end-time');
+            const roleInput = div.querySelector('input.role-field');
+            const textInput = div.querySelector('input.text-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;
+                video.play();
+                const interval = setInterval(() => {
+                    if (video.currentTime >= entry.end) {
+                        video.pause();
+                        clearInterval(interval);
+                    }
+                }, 100);
+            });
         }
     
-        // 生成字幕并监控字幕合成进度
+        // 生成字幕
         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('请确保选择了视频文件并进行了识别');
+                alert('请确保已选择视频文件并进行了识别');
                 return;
             }
     
-            const postData = {
-                task_id: currentTaskId,
-                asr_results: asrData
-            };
+            const formData = new FormData();
+            formData.append('status', "subtitle");
+            formData.append('task_id', currentTaskId);
+            formData.append('asr_results', JSON.stringify(asrData)); // 将 ASR 数据转为字符串
     
             document.getElementById('generateSubtitleBtn').disabled = true;
-            document.getElementById('generateSubtitleBtn').innerText = '合成中...';
+            document.getElementById('generateSubtitleBtn').innerText = '生成中...';
     
             const xhr = new XMLHttpRequest();
-            xhr.open('POST', `${serverUrl}/make_subtitle`, true);
-            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.open('POST', `${serverUrl}/submit`, true);
             xhr.onload = function () {
-                if (xhr.status === 202) {
+                if (xhr.status === 200) {
                     const response = JSON.parse(xhr.responseText);
-                    monitorSubtitleGeneration(response.task_id);
+                    log('Subtitle generation response: ' + JSON.stringify(response));
+                    if (response.code === 0) {
+                        monitorSubtitleGeneration(response.content);
+                    } else {
+                        alert('字幕生成失败，请重试');
+                        resetGenerateButton();
+                    }
                 } else {
-                    alert('合成字幕失败，请重试');
+                    alert('字幕生成失败，请重试');
                     resetGenerateButton();
                 }
             };
             xhr.onerror = function () {
-                alert('合成字幕失败，请重试');
+                alert('字幕生成失败，请重试');
                 resetGenerateButton();
             };
-            xhr.send(JSON.stringify(postData));
+            xhr.send(formData);
         }
     
-        // 监控字幕合成进度
+        // 监控字幕生成进度
         function monitorSubtitleGeneration(taskId) {
-            console.log('Monitoring subtitle generation for Task ID:', taskId);
-            let failedRequests = 0; // 计数连续失败的请求
-            const maxFailedRequests = 10; // 连续失败的最大请求数
-
+            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.open('GET', `${serverUrl}/task_subtitle_prgs/${taskId}`, true);
                 xhr.onload = function () {
-                    
                     if (xhr.status === 200) {
                         const response = JSON.parse(xhr.responseText);
-                        const progress = response.progress;
-                        failedRequests = 0; // 请求成功时重置失败计数
-                        
-
+                        const progress = response.content.progress;
+                        failedRequests = 0;
+    
                         if (progress !== undefined) {
                             updateSubtitleProgress(progress * 100, '正在生成字幕');
                         }
-
+    
                         if (progress >= 1.0) {
                             clearInterval(intervalId);
-                            document.getElementById('videoPlayer').src = `${serverUrl}/video/${response.video_url}`;
+                            document.getElementById('videoPlayer').src = `${serverUrl}/video/${taskId}`;
+                            document.getElementById('downloadVideoBtn').style.display = 'inline'; // Show the download button
                             resetGenerateButton();
                         }
                     } else {
-                        failedRequests += 1; // 增加失败计数
-                        document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
-                        if (failedRequests >= maxFailedRequests) {
-                            clearInterval(intervalId);
-                            alert('连续请求失败，字幕生成未完成');
-                            resetGenerateButton();
-                        }
+                        handleProgressError();
                     }
                 };
                 xhr.onerror = function () {
-                    failedRequests += 1; // 增加失败计数
-                    document.getElementById('logContent').innerText = `请求失败，当前重连次数: ${failedRequests}`;
-                    if (failedRequests >= maxFailedRequests) {
-                        clearInterval(intervalId);
-                        alert('连续请求失败，字幕生成未完成');
-                        resetGenerateButton();
-                    }
+                    handleProgressError();
                 };
                 xhr.send();
-
-            }, 1000);
+            }, 2000);
         }
-
-        // 更新字幕合成进度
+    
+        // 更新字幕生成进度
         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)}%, 状态: 正在合成含字幕视频，合成完毕将在上面播放器展示`;
+            log('Subtitle progress: ' + progress + '%, Message: ' + msg);
+            document.getElementById('subtitleProgress').firstElementChild.style.width = `${progress}%`;
+            document.getElementById('subtitleProgress').firstElementChild.innerText = `${progress.toFixed(2)}%`;
+            document.getElementById('logContent').innerText = `进度: ${progress.toFixed(2)}%, 状态: ${msg}`;
+        }
+    
+        // 重置上传按钮状态
+        function resetUploadButton() {
+            log('Resetting upload button state');
+            document.getElementById('uploadBtn').disabled = false;
+            document.getElementById('uploadBtn').innerText = '上传并识别';
         }
     
-        // 重置生成字幕按钮状态
+        // 重置字幕生成按钮状态
         function resetGenerateButton() {
             document.getElementById('generateSubtitleBtn').disabled = false;
-            document.getElementById('generateSubtitleBtn').innerText = '合成字幕';
+            document.getElementById('generateSubtitleBtn').innerText = '生成字幕';
         }
     
-        // 格式化时间，用于字幕格式化
-        function formatTime(seconds) {
-            const hours = Math.floor(seconds / 3600);
-            const minutes = Math.floor((seconds % 3600) / 60);
-            const secs = Math.floor(seconds % 60);
-            const millis = Math.floor((seconds - Math.floor(seconds)) * 1000);
-            return `${pad(hours)}:${pad(minutes)}:${pad(secs)},${padMillis(millis)}`;
+        // 重置进度条和界面
+        function resetProgress() {
+            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 = "";
+            document.getElementById('downloadVideoBtn').style.display = 'none';
         }
     
-        function pad(value) {
-            return value.toString().padStart(2, '0');
+        // 下载视频
+        function downloadVideo() {
+            if (!currentTaskId) {
+                alert('请确保已生成字幕视频');
+                return;
+            }
+    
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', `${serverUrl}/url/${currentTaskId}`, true);
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText);
+                    if (response.code === 0) {
+                        const videoUrl = response.content.url;
+                        const a = document.createElement('a');
+                        a.href = `${serverUrl}/${videoUrl}`;
+                        a.download = `subtitle_video_${currentTaskId}.mp4`; // Specify the filename
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    } else {
+                        alert('下载链接生成失败，请重试');
+                    }
+                } else {
+                    alert('下载失败，请重试');
+                }
+            };
+            xhr.onerror = function () {
+                alert('下载请求出错，请重试');
+            };
+            xhr.send();
+        }
+    
+        // 错误处理
+        function handleUploadError() {
+            log('Upload error occurred');
+            alert('上传失败，请重试');
+            resetUploadButton();
         }
     
-        function padMillis(value) {
-            return value.toString().padStart(3, '0');
+        function log(msg) {
+            document.getElementById('logContent').innerText = msg;
+            console.log(msg);
         }
     </script>