Spaces:

QuadraV
/

Funsound_Multiligual_Speech_Translator

Running

App Files Files Community

Funsound_Multiligual_Speech_Translator / index.html

QuadraV

Update index.html

29cab7d verified 6 months ago

raw

history blame contribute delete

37 kB

	<!DOCTYPE html>
	<html lang="en">

	<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/images/logo_funsound.png" type="image/png">
	<title>Funsound Cross-Language Speech Translator</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #1c1c1c;
	color: #eaeaea;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.container {
	display: flex;
	flex-direction: column;
	width: 80%;
	max-width: 1800px; /* 添加最大宽度以避免过宽 */
	min-width: 300px; /* 确保最小宽度以保持可读性 */
	height: auto; /* 高度自适应内容 */
	border: 1px solid #444;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
	background-color: #282828;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	}

	.title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: #ffffff;
	border-bottom: 2px solid #444;
	padding-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.title img {
	width: 40px;
	height: 40px;
	margin-right: 15px;
	}

	.content {
	display: flex;
	flex-grow: 1;
	overflow: hidden;
	}

	.video-container, .asr-container {
	margin: 10px;
	border: 1px solid #444;
	border-radius: 8px;
	padding: 15px;
	box-sizing: border-box;
	background-color: #333;
	overflow: hidden;
	}

	.video-container {
	flex: 0 0 30%;
	}

	.asr-container {
	flex: 0 0 70%;
	overflow-y: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	}

	video {
	width: 100%;
	height: 30%; /* 自适应视频高度 */
	background-color: #000;
	border-radius: 8px;
	margin-bottom: 0px;
	}

	label {
	margin-bottom: 5px;
	font-size: 1rem;
	color: #aaa;
	display: block;
	}

	.asr-list {
	flex-grow: 1;
	overflow-y: auto;
	background-color: #1c1c1c;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #444;
	color: #eaeaea;
	margin-bottom: 10px;
	}

	.asr-item {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #444;
	box-sizing: border-box;
	color: #eaeaea;
	justify-content: space-between;
	}

	.asr-item label,
	.asr-item input,
	.asr-item select,
	.asr-item button {
	margin: 0 5px;
	}

	.asr-item .timestamp {
	display: flex;
	align-items: center;
	flex: 0 0 200px;
	text-align: center;
	}

	.asr-item .timestamp input {
	width: 60px;
	text-align: center;
	background-color: #444;
	color: #eaeaea;
	border: 1px solid #555;
	border-radius: 4px;
	}

	.asr-item input[type="text"],
	.asr-item select {
	padding: 5px;
	border: 1px solid #555;
	background-color: #444;
	color: #eaeaea;
	width: 100%;
	border-radius: 4px;
	flex: 1;
	}

	.asr-item input.role-field {
	width: 70px;
	padding: 5px;
	border: 1px solid #555;
	background-color: #444;
	color: #eaeaea;
	border-radius: 4px;
	flex: 0 0 70px; /* 保持宽度固定为 100px */
	text-align: center;
	}

	.asr-item input[type="checkbox"] {
	margin-right: 5px;
	transform: scale(0.8);
	}

	.play-button {
	margin: 0 5px;
	padding: 3px 8px;
	background-color: #ff8c00; /* 使用橙色 */
	color: #000;
	border: none;
	cursor: pointer;
	font-size: 0.8rem;
	border-radius: 4px;
	transition: background-color 0.3s;
	white-space: nowrap;
	}

	.play-button:hover {
	background-color: #e67e00;
	}

	.upload-button {
	padding: 10px;
	background-color: #007bff; /* 使用蓝色 */
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	margin-right: 10px;
	border-radius: 4px;
	transition: background-color 0.3s;
	}

	.upload-button:hover {
	background-color: #0056b3;
	}

	.file-input-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
	}

	.file-input {
	font-size: 1rem;
	font-weight: bold;
	color: white;
	background-color: #17a2b8; /* 使用青色 */
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
	}

	.file-input:hover {
	background-color: #138496;
	}

	.file-input-wrapper input[type="file"] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
	}

	.export-button {
	padding: 10px;
	background-color: #28a745; /* 使用绿色 */
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	border-radius: 4px;
	transition: background-color 0.3s;
	}

	.export-button:hover {
	background-color: #218838;
	}

	.buttons-container {
	display: flex;
	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;
	}

	.progress-bar div {
	width: 0%;
	background-color: #00ff84; /* 使用绿色 */
	color: #000;
	text-align: center;
	padding: 2px 0;
	border-radius: 4px;
	transition: width 0.3s ease;
	}

	.center-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	position: sticky;
	bottom: 0;
	background-color: #333;
	padding: 10px 0;
	border-top: 1px solid #444;
	}

	footer {
	text-align: center;
	padding: 10px;
	background-color: #1c1c1c;
	color: #888;
	font-size: 0.9rem;
	margin-top: 20px;
	border-top: 1px solid #444;
	width: 100%;
	}

	footer a {
	color: #00ff84;
	text-decoration: none;
	transition: color 0.3s;
	}

	footer a:hover {
	color: #00d473;
	}

	@media (max-width: 768px) {
	.container {
	width: 95%;
	padding: 10px; /* 减小内边距以增加可用空间 */
	}

	.content {
	flex-direction: column;
	}

	.video-container, .asr-container {
	flex: 0 0 100%;
	}

	.title {
	font-size: 1.5rem; /* 缩小标题字体以适应小屏幕 */
	}

	.asr-item input[type="text"],
	.asr-item select,
	.asr-item input.role-field {
	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="https://www.funsound.cn/static/images/logo_funsound.png" alt="Funsound Logo">
	Funsound Cross-Language Speech Translator
	</div>
	<div class="content">
	<!-- 左列 -->
	<div class="video-container">

	<div class="file-input-wrapper">
	<button class="file-input">Select File</button>
	<input type="file" id="videoInput" accept=".wav, .mp3, .m4a, .mp4, .aac, .webm">
	</div>

	<video id="videoPlayer" controls>
	您的浏览器不支持 video 标签。
	</video>

	<div class="options-container">
	<!-- Input Language Selection -->
	<div style="margin: 10px;">
	<label for="language_src">Select language (source):</label>
	<select id="language_src" name="language_src">
	<!-- Options will be populated by JavaScript -->
	</select>
	</div>

	<!-- Output Language Selection -->
	<div style="margin: 10px;">
	<label for="language_dst">Select language (target):</label>
	<select id="language_dst" name="language_dst">
	<!-- Options will be populated by JavaScript -->
	</select>
	</div>

	<!-- Speaker Recognition -->
	<div style="margin: 10px;">
	<label><input type="checkbox" id="speakerRecognition">Speaker Identification</label>
	</div>
	</div>

	<div class="buttons-container">
	<button id="uploadBtn" class="upload-button" onclick="uploadFile()">Recognize</button>
	</div>
	<label>Upload：</label>
	<div id="uploadProgress" class="progress-bar">
	<div>0%</div>
	</div>
	<label>Decoding：</label>
	<div id="recognitionProgress" class="progress-bar">
	<div>0%</div>
	</div>
	<label>Subtitles：</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">
	<label>Results：</label>
	<div id="asrList" class="asr-list"></div>
	<div class="center-buttons">
	<button id="exportJsonBtn" class="export-button" onclick="exportAsrData('json')">Export JSON</button>
	<button id="exportSrtBtn" class="export-button" onclick="exportAsrData('srt')">Export SRT</button>
	<button id="generateSubtitleBtn" class="subtitle-button" onclick="generateSubtitle()">Synthetic Subtitles</button>
	<button id="downloadVideoBtn" style="display: none;" onclick="downloadVideo()">Download Video</button>
	</div>
	</div>
	</div>
	</div>

	<footer>
	EMAIL: <a href="mailto:[email protected]">[email protected]</a> \|
	HuggingFace: <a href="https://huggingface.co/spaces/QuadraV/Funsound_Multiligual_Speech_Translator">Funsound</a> \|
	Modelscope: <a href="https://modelscope.cn/studios/QuadraV/Funsound_Multiligual_translator">Funsound</a>
	</footer>

	<script>
	let currentTaskId = null; // 当前任务ID
	let asrData = []; // 存储识别结果数据
	let serverUrl = "https://www.funsound.cn/st"; // 服务器地址
	const chunkSize = 1 * 1024 * 1024; // 分块大小，5MB

	// 监听文件输入更改，预览视频
	document.getElementById('videoInput').addEventListener('change', function (event) {
	const file = event.target.files[0];
	log('Selected file: ' + file.name);
	document.getElementById('uploadBtn').disabled = file.size > 300 * 1024 * 1024;

	const videoPlayer = document.getElementById('videoPlayer');
	videoPlayer.src = URL.createObjectURL(file);
	log('Video URL: ' + videoPlayer.src);
	});


	// 更新支持的语言
	document.addEventListener("DOMContentLoaded", function() {
	// Initialize language dropdowns
	fetch(`${serverUrl}/get_languages`)
	.then(response => response.json())
	.then(data => {
	if (data.code === 0) {
	const languageSrcSelect = document.getElementById('language_src');
	const languageDstSelect = document.getElementById('language_dst');

	// Populate source languages
	data.content.input_languages.forEach(lang => {
	const option = document.createElement('option');
	option.value = lang;
	option.textContent = lang;
	languageSrcSelect.appendChild(option);
	});

	// Populate destination languages
	data.content.dst_languages.forEach(lang => {
	const option = document.createElement('option');
	option.value = lang;
	option.textContent = lang;
	languageDstSelect.appendChild(option);
	});
	} else {
	console.error(data.message);
	}
	})
	.catch(error => console.error('Error fetching languages:', error));

	// Initialize other components if necessary
	initOtherComponents();
	});

	// 上传文件并提交任务
	function uploadFile() {
	const fileInput = document.getElementById('videoInput');
	const file = fileInput.files[0];

	if (!file) {
	alert('Select one file please');
	return;
	}

	// 附加参数
	const languageSrc = document.getElementById('language_src').value;
	const languageDst = document.getElementById('language_dst').value;
	const speakerRecognition = document.getElementById('speakerRecognition').checked;
	log('languageSrc: ' + languageSrc);
	log('languageDst: ' + languageSrc);
	log('Speaker Recognition: ' + speakerRecognition);


	document.getElementById('uploadBtn').disabled = true;
	document.getElementById('uploadBtn').innerText = 'Decoding ..';
	resetProgress();
	log('Server URL: ' + serverUrl);

	initializeTask(file, languageSrc, languageDst, speakerRecognition);
	}

	// 初始化任务
	function initializeTask(file, languageSrc, languageDst, speakerRecognition) {
	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('language_src', languageSrc);
	formData.append('language_dst', languageDst);
	formData.append('speakerRecognition', speakerRecognition);


	const xhr = new XMLHttpRequest();
	xhr.open('POST', `${serverUrl}/submit`, true);
	xhr.onload = function () {
	if (xhr.status === 200) {
	const response = JSON.parse(xhr.responseText);
	log('Initialization response: ' + JSON.stringify(response));
	if (response.code === 0) {
	currentTaskId = response.content;
	log('Task ID: ' + currentTaskId);
	uploadChunks(file); // 开始分块上传
	} else {
	alert('Initialization failed, please try again');
	resetUploadButton();
	}
	} else {
	alert('Initialization failed, please try again');
	resetUploadButton();
	}
	};
	xhr.onerror = handleUploadError;
	xhr.send(formData);
	}

	// 上传文件块
	function uploadChunks(file) {
	log("Uploading ..");
	const totalChunks = Math.ceil(file.size / chunkSize);
	let chunkIndex = 0;

	function uploadNextChunk() {
	if (chunkIndex >= totalChunks) {
	log("After uploading, start transcribing..");
	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(`Failed to upload chunk ${chunkIndex + 1}, please try again`);
	resetUploadButton();
	}
	} else {
	alert(`Failed to upload chunk ${chunkIndex + 1}, please try again`);
	resetUploadButton();
	}
	};
	xhr.onerror = handleUploadError;
	xhr.send(formData);
	}

	uploadNextChunk(); // 开始上传第一个块
	}

	// 更新上传进度
	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)}%`;
	}

	// 提交 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 submission failed, please try again');
	resetUploadButton();
	}
	} else {
	alert('ASR submission failed, please try again');
	resetUploadButton();
	}
	};
	xhr.onerror = handleUploadError;
	xhr.send(formData);
	}

	// 监控任务进度
	function monitorTaskProgress(taskId) {
	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_asr_prgs/${taskId}`, true);
	xhr.onload = function () {
	if (xhr.status === 200) {
	const response = JSON.parse(xhr.responseText);
	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);
	}

	if (status === "SUCCESS") {
	clearInterval(intervalId);
	asrData = response.content.result;
	log('Recognition successful, ASR data: ' + JSON.stringify(asrData));
	displayResults(asrData);
	resetUploadButton();
	} else if (status === "FAIL") {
	clearInterval(intervalId);
	alert('识别任务失败');
	resetUploadButton();
	}
	} else {
	handleProgressError();
	}
	};
	xhr.onerror = handleProgressError;
	xhr.send();
	}, 2000);
	}

	// 处理进度请求错误
	function handleProgressError() {
	failedRequests++;
	log('Request failed, current number of reconnections: ' + failedRequests);
	if (failedRequests >= maxFailedRequests) {
	clearInterval(intervalId);
	alert('Continuous requests failed and the task was not completed.');
	resetUploadButton();
	}
	}

	// 更新识别进度
	function updateRecognitionProgress(progress, 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: ${progress.toFixed(2)}%, status: ${msg}`;
	}

	// 显示识别结果
	function displayResults(results) {
	log('Displaying ASR 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">Play</button>
	<input type="number" value="${entry.start.toFixed(1)}" step="0.1" min="0" class="start-time">
	-
	<input type="number" value="${entry.end.toFixed(1)}" step="0.1" min="0" class="end-time">
	</div>
	<input type="text" value="${entry.role}" placeholder="Role" class="role-field">
	<input type="text" value="${entry.text}" placeholder="Text" class="text-field">
	<input type="text" value="${entry.trans}" placeholder="Translation" class="trans-field">
	<label>
	<input type="checkbox" ${entry.drop ? 'checked' : ''}> Drop
	</label>
	`;

	setupASREventHandlers(div, entry);
	asrList.appendChild(div);
	});
	}

	// 导出识别结果为 JSON 或 SRT 格式
	function exportAsrData(format) {
	if (asrData.length === 0) {
	alert('No ASR data');
	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() {
	if (!currentTaskId \|\| asrData.length === 0) {
	alert('Please make sure the video file is selected and recognized');
	return;
	}

	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 = 'generating ...';

	const xhr = new XMLHttpRequest();
	xhr.open('POST', `${serverUrl}/submit`, true);
	xhr.onload = function () {
	if (xhr.status === 200) {
	const response = JSON.parse(xhr.responseText);
	log('Subtitle generation response: ' + JSON.stringify(response));
	if (response.code === 0) {
	monitorSubtitleGeneration(response.content);
	} else {
	alert('Subtitle generation failed, please try again');
	resetGenerateButton();
	}
	} else {
	alert('Subtitle generation failed, please try again');
	resetGenerateButton();
	}
	};
	xhr.onerror = function () {
	alert('Subtitle generation failed, please try again');
	resetGenerateButton();
	};
	xhr.send(formData);
	}

	// 监控字幕生成进度
	function monitorSubtitleGeneration(taskId) {
	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}/task_subtitle_prgs/${taskId}`, true);
	xhr.onload = function () {
	if (xhr.status === 200) {
	const response = JSON.parse(xhr.responseText);
	const progress = response.content.progress;
	failedRequests = 0;

	if (progress !== undefined) {
	updateSubtitleProgress(progress * 100, 'Generating subtitles');
	}

	if (progress >= 1.0) {
	clearInterval(intervalId);
	document.getElementById('videoPlayer').src = `${serverUrl}/video/${taskId}`;
	document.getElementById('downloadVideoBtn').style.display = 'inline'; // Show the download button
	resetGenerateButton();
	log("After generation, click on the player above to preview");
	}
	} else {
	handleProgressError();
	}
	};
	xhr.onerror = function () {
	handleProgressError();
	};
	xhr.send();
	}, 2000);
	}

	// 更新字幕生成进度
	function updateSubtitleProgress(progress, msg) {
	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: ${progress.toFixed(2)}%, status: ${msg}`;
	}

	// 重置上传按钮状态
	function resetUploadButton() {
	log('Resetting upload button state');
	document.getElementById('uploadBtn').disabled = false;
	document.getElementById('uploadBtn').innerText = 'Recognize';
	}

	// 重置字幕生成按钮状态
	function resetGenerateButton() {
	document.getElementById('generateSubtitleBtn').disabled = false;
	document.getElementById('generateSubtitleBtn').innerText = 'Subtitles';
	}

	// 重置进度条和界面
	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 downloadVideo() {
	if (!currentTaskId) {
	alert('Please make sure the subtitled video has been generated');
	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('Download link generation failed, please try again');
	}
	} else {
	alert('Download failed, please try again');
	}
	};
	xhr.onerror = function () {
	alert('An error occurred with the download request, please try again');
	};
	xhr.send();
	}

	// 格式化时间，用于字幕格式化
	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 pad(value) {
	return value.toString().padStart(2, '0');
	}

	function padMillis(value) {
	return value.toString().padStart(3, '0');
	}
	// 错误处理
	function handleUploadError() {
	log('Upload error occurred');
	alert('Upload failed, please try again');
	resetUploadButton();
	}

	function log(msg) {
	document.getElementById('logContent').innerText = msg;
	console.log(msg);
	}
	</script>

	</body>

	</html>