Spaces:

KurtDu
/

S2S-Bench

Running

App Files Files Community

S2S-Bench / index.html

KurtDu

Update index.html

0ff04a1 verified 3 months ago

raw

history blame contribute delete

26.6 kB

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Speech-to-Speech Model Comparison</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
	body {
	background-color: #f4f6f9;
	font-family: 'Arial', sans-serif;
	}

	.container {
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 30px;
	}

	h3 {
	font-size: 1.2rem;
	/* 调整标题字体大小 */
	font-weight: bold;
	color: #333;
	}

	.form-control {
	border-radius: 25px;
	padding: 15px;
	}

	.btn {
	border-radius: 25px;
	font-size: 0.9rem;
	padding: 8px 16px;
	transition: background-color 0.3s ease;
	}

	.btn-primary {
	background-color: #007bff;
	border: none;
	}

	.btn-primary:hover {
	background-color: #0056b3;
	}

	.btn-success {
	background-color: #28a745;
	border: none;
	}

	.btn-success:hover {
	background-color: #218838;
	}

	.btn-selected {
	background-color: #155724 !important;
	color: white !important;
	}

	.btn-option {
	font-size: 0.9rem;
	padding: 8px 20px;
	margin: 0 10px;
	}

	#test-content {
	display: none;
	}

	#category-select,
	#task-select-dropdown {
	width: 120% !important;
	/* 设置宽度为60% */
	margin: 0 auto;
	/* 居中对齐 */
	}

	#confirm-choice,
	#next-test {
	display: none;
	transition: opacity 0.3s ease;
	}

	#model-comparison {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	#model-comparison.show {
	opacity: 1;
	}

	#switch-task {
	font-size: 0.8rem;
	padding: 5px 10px;
	position: absolute;
	top: 10px;
	right: 20px;
	display: none;
	}
	#task-description {
	display: none;
	}
	</style>
	</head>

	<body>
	<div class="container py-5">
	<h3 class="text-center mb-4">Speech-to-Speech Model Comparison</h3>

	<div id="evaluation-info" class="mb-5">
	<p class="text-start">
	<strong>Welcome to the Speech-to-Speech (S2S) Model Evaluation!</strong>
	<br><br>
	In this evaluation, you will assess the performance of 4 S2S models:
	<strong>ChatGPT-4o</strong>, <strong>FunAudioLLM</strong>, <strong>SpeechGPT</strong>, and
	<strong>Mini-Omni</strong>.
	The goal is to evaluate how well these models handle various speech tasks across different domains.
	<br><br>
	Once you select a specific domain and task (e.g., <em>Educational Tutoring</em> and <em>Rhythm Control</em>),
	you will proceed to the evaluation stage. In each round, you will be presented with an audio input.
	For example:
	<br><br>

	<!-- Left-aligned Audio Sample and Audio Control -->
	<span style="vertical-align: middle; line-height: 1.2; display: inline-block;"><strong>Audio Sample:</strong></span>
	<audio controls style="vertical-align: middle;">
	<source src="/static/audio/sample/input_audio.wav" type="audio/wav">
	</audio>

	<br><br>
	The corresponding text is:
	<em>"Say the following sentence at my speed first, then say it again very slowly:
	'Artificial intelligence is changing the world in many ways.'" </em>
	<small>(Note: the audio plays at 1.5x the normal speed.)</small>
	<br><br>
	The responses of different S2S models will be provided, and your task is to choose which response best follows
	the instructions. For example<small>(Note: During the evaluation process, you will be provided with responses from only the two models that have the most comparative significance.)</small>:
	<br><br>

	<!-- ChatGPT-4o Output -->
	<span><strong>ChatGPT-4o:</strong></span>
	<audio controls style="vertical-align: middle;">
	<source src="/static/audio/sample/4o_audio.wav" type="audio/wav">
	</audio>
	<p class="text-start" style="margin-left: 20px;">
	<strong>Performance:</strong> Speech: Partially followed the instruction on speed. Semantics: Accurately followed the instruction, with no semantic deviation or missing information.
	</p>

	<!-- FunAudioLLM Output -->
	<span><strong>FunAudioLLM:</strong></span>
	<audio controls style="vertical-align: middle;">
	<source src="/static/audio/sample/FunAudio_audio.wav" type="audio/wav">
	</audio>
	<p class="text-start" style="margin-left: 20px;">
	<strong>Performance:</strong> Speech: Partially followed the instruction on speed. Semantics: Accurately followed the instruction, with no semantic deviation or missing information.
	</p>

	<!-- SpeechGPT Output -->
	<span><strong>SpeechGPT:</strong></span>
	<audio controls style="vertical-align: middle;">
	<source src="/static/audio/sample/SpeechGPT.wav" type="audio/wav">
	</audio>
	<p class="text-start" style="margin-left: 20px;">
	<strong>Performance:</strong> Speech: Did not follow the instruction on speed. Semantics: Partially followed the instruction, with minor semantic deviation and missing information.
	</p>

	<!-- Mini-Omni Output -->
	<span><strong>Mini-Omni:</strong></span>
	<audio controls style="vertical-align: middle;">
	<source src="/static/audio/sample/mini-omni.wav" type="audio/wav">
	</audio>
	<p class="text-start" style="margin-left: 20px;">
	<strong>Performance:</strong> Speech: Did not follow the instruction on speed. Semantics: Did not follow the instruction, with significant semantic deviation and missing information.
	</p>

	<p class="text-start">
	After making your choice, you'll proceed to the next round.
	</p>
	<strong>Please enter your username and start the evaluation!</strong>
	</p>
	</div>

	<div id="user-input" class="text-center">
	<div class="mb-3">
	<input type="text" id="username" class="form-control w-50 mx-auto" placeholder="Your username" />
	</div>
	<button class="btn btn-primary" onclick="startTest()">Start Test</button>
	</div>


	<div id="task-select" class="text-center" style="display: none;">
	<h3 class="my-4">Select Test Category:</h3>
	<div class="d-grid gap-2 col-6 mx-auto">
	<!-- Category dropdown -->
	<select id="category-select" class="form-select mx-auto" onchange="populateTasks()">
	<option value="" disabled selected>Select Category</option>
	<option value="educational">Educational Tutoring</option>
	<option value="social">Social Companionship</option>
	<option value="entertainment">Entertainment Dubbing</option>
	<option value="medical">Medical Consultation</option>
	</select>
	</div>

	<h3 class="my-4" id="specific-task-title" style="display: none;">Select Specific Task:</h3>
	<div class="d-grid gap-2 col-6 mx-auto">
	<!-- Task dropdown -->
	<select id="task-select-dropdown" class="form-select mx-auto" style="display: none;">
	<option value="" disabled selected>Select Specific Task</option>
	<!-- Options will be populated dynamically -->
	</select>
	</div>

	<button class="btn btn-primary mt-4" id="start-task-btn" onclick="selectTaskFromDropdown()"
	style="display: none;">Start Task</button>
	</div>

	<button id="switch-task" class="btn btn-warning" onclick="switchTask()">Switch Category and Tasks</button>

	<div id="test-content">
	<div class="text-center">

	<div class="row justify-content-center">
	<div class="col-md-6 text-start double-text" style="margin-bottom: 10px;">
	<strong>Task description:</strong> <span id="task-description"></span>
	</div>
	</div>

	<!-- 在音频控件前添加粗体的 Audio: -->
	<div class="row justify-content-center">
	<div class="col-md-6 d-flex justify-content-center align-items-center mb-4">
	<strong class="me-2">Audio:</strong> <!-- 加粗的 Audio 标签 -->
	<audio id="input-audio" controls></audio>
	</div>
	</div>

	<div class="row justify-content-center">
	<div class="col-md-6 text-start double-text" style="margin-bottom: 10px;">
	<strong>Audio text:</strong> <span id="test-text"></span>
	</div>
	</div>

	<!-- 调整后的左对齐样式 -->
	<div class="row justify-content-center">
	<div class="col-md-6 text-start">
	<p><strong>Question:</strong> Which of the following two models answers the result better?</p>
	</div>
	</div>

	<!-- 使用flex布局放置音频 -->
	<div class="mb-4 text-center">
	<div class="model-section d-flex align-items-center justify-content-center mb-3">
	<h6 class="me-2" style="margin-bottom: 0; margin-top: 5px; font-weight: bold;">Model A:</h6>
	<audio id="audio-a" controls></audio>
	</div>
	<div class="model-section d-flex align-items-center justify-content-center">
	<h6 class="me-2" style="margin-bottom: 0; margin-top: 5px; font-weight: bold;">Model B:</h6>
	<audio id="audio-b" controls></audio>
	</div>
	</div>


	<div class="d-flex justify-content-center mt-4">
	<button class="btn btn-success btn-option mx-2" onclick="selectModel('A')">Model A</button>
	<button class="btn btn-success btn-option mx-2" onclick="selectModel('B')">Model B</button>
	</div>

	<div id="model-comparison" class="text-center mt-4">
	<p>Model A: <span id="model-a"></span></p>
	<p>Model B: <span id="model-b"></span></p>
	<p>Your choice: <span id="chosen-model"></span></p>
	</div>

	<button id="confirm-choice" class="btn btn-primary mt-4" onclick="confirmChoice()">Confirm
	Selection</button>
	<button id="next-test" class="btn btn-primary mt-4" onclick="loadNextTest()">Next Test</button>
	</div>
	</div>

	<div id="test-completed" class="text-center" style="display: none;">
	<h3>Thank you for completing the <span id="completed-task"></span> test!</h3>
	<p>Would you like to test another category or task?</p>
	<button class="btn btn-primary" onclick="switchTask()">Yes</button>
	<button class="btn btn-secondary" onclick="endTest()">No</button>
	</div>

	<!-- 引入 Bootstrap 脚本 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	let username;
	let task;
	let chosenModel;
	let modelA, modelB; // 存储映射后的模型名称

	// 根据模型路径显示友好的模型名称
	const modelNames = {
	"output_path_speechgpt": "SpeechGPT",
	"output_path_miniomni": "Mini-Omni",
	"output_path_4o": "ChatGPT-4o",
	"output_path_funaudio": "FunAudioLLM",
	"output_path_4o_cascade": "Cascade",
	"output_path_4o_llama_omni": "LLaMA-Omni"
	};

	function startTest() {
	username = $("#username").val();
	if (!username) {
	alert("Please enter a username");
	return;
	}
	$("#evaluation-info").hide();
	$("#user-input").hide();
	$("#task-select").show();
	}

	function switchTask() {
	// 清理页面所有之前的测试内容
	$("#task-description").text('');
	$("#test-content").hide(); // 隐藏测试内容
	$("#test-text").text(''); // 清空音频文本
	$("#input-audio").attr("src", ''); // 清空音频路径
	$("#audio-a").attr("src", ''); // 清空模型 A 音频
	$("#audio-b").attr("src", ''); // 清空模型 B 音频
	$("#chosen-model").text(''); // 清空用户选择的模型显示
	$("#model-a").text(''); // 清空模型 A 名称显示
	$("#model-b").text(''); // 清空模型 B 名称显示
	$("#confirm-choice").hide(); // 隐藏确认选择按钮
	$("#next-test").hide(); // 隐藏下一个测试按钮
	$("#model-comparison").removeClass('show').hide(); // 隐藏模型对比部分

	// 显示选择任务的页面
	$("#test-completed").hide(); // 隐藏感谢页面
	$("#task-select").show(); // 显示选择方向页面
	$("#switch-task").hide(); // 隐藏切换按钮直到新测试开始
	}

	function selectTask(selectedTask) {
	task = selectedTask;

	// 切换任务时清理页面内容，防止旧数据残留
	$("#task-description").text('');
	$("#test-text").text(''); // 清空音频文本
	$("#input-audio").attr("src", ''); // 清空音频路径
	$("#audio-a").attr("src", ''); // 清空模型 A 音频
	$("#audio-b").attr("src", ''); // 清空模型 B 音频
	$("#chosen-model").text(''); // 清空用户选择的模型显示
	$("#model-a").text(''); // 清空模型 A 名称显示
	$("#model-b").text(''); // 清空模型 B 名称显示
	$("#confirm-choice").hide(); // 隐藏确认选择按钮
	$("#next-test").hide(); // 隐藏下一个测试按钮
	$("#model-comparison").removeClass('show').hide(); // 隐藏模型对比部分

	// 隐藏选择任务界面，显示切换方向按钮
	$("#task-select").hide();
	$("#switch-task").show();

	// 发起请求获取新的测试数据
	$.ajax({
	url: '/start_test',
	type: 'POST',
	contentType: 'application/json',
	data: JSON.stringify({ username: username, task: task }),
	success: function (data) {
	$("#test-content").show();
	loadNextTest();
	},
	error: function (xhr, status, error) {
	console.error("Error occurred: ", status, error);
	}
	});
	}

	function populateTasks() {
	const category = $("#category-select").val();
	const taskDropdown = $("#task-select-dropdown");

	// 清空任务下拉菜单
	taskDropdown.empty();
	// 添加禁用的默认选项
	taskDropdown.append('<option value="" disabled selected>Select Specific Task</option>');

	// 根据所选分类填充相应的任务选项
	if (category === 'educational') {
	taskDropdown.append('<option value="pronunciation">Correcting pronunciation ability</option>');
	taskDropdown.append('<option value="rhythm">Rhythm control capabilities</option>');
	taskDropdown.append('<option value="translation">Cross-language translation with emotion</option>');
	taskDropdown.append('<option value="language">Language consistency</option>');
	taskDropdown.append('<option value="pause">Pause and segmentation</option>');
	taskDropdown.append('<option value="polyphone">Polyphonic word comprehension</option>');
	taskDropdown.append('<option value="stress">Emphasis control</option>');
	} else if (category === 'social') {
	taskDropdown.append('<option value="emotion">Emotion recognition and expression</option>');
	taskDropdown.append('<option value="identity">Identity coping ability</option>');
	taskDropdown.append('<option value="humor">Implications ability</option>');
	taskDropdown.append('<option value="irony">Sarcasm detection</option>');
	} else if (category === 'entertainment') {
	taskDropdown.append('<option value="natural">Ability to simulate natural sound</option>');
	taskDropdown.append('<option value="singing">Singing ability</option>');
	taskDropdown.append('<option value="tongue">Tongue twisters capabilities</option>');
	taskDropdown.append('<option value="crosstalk">Crosstalk ability</option>');
	taskDropdown.append('<option value="poetry">Poetry recitation</option>');
	taskDropdown.append('<option value="role">Role-playing</option>');
	taskDropdown.append('<option value="story">Storytelling</option>');
	} else if (category === 'medical') {
	taskDropdown.append('<option value="healthcare">Health consultation</option>');
	taskDropdown.append('<option value="illness">Querying symptoms</option>');
	taskDropdown.append('<option value="psychological">Psychological comfort</option>');
	}

	// 显示任务下拉菜单和开始按钮
	if (category) {
	$("#specific-task-title").show();
	$("#task-select-dropdown").show();
	$("#start-task-btn").show();
	} else {
	$("#specific-task-title").hide();
	$("#task-select-dropdown").hide();
	$("#start-task-btn").hide();
	}
	}


	function selectTaskFromDropdown() {
	const selectedTask = $("#task-select-dropdown").val();
	if (selectedTask) {
	task = selectedTask;
	$.ajax({
	url: '/start_test',
	type: 'POST',
	contentType: 'application/json',
	data: JSON.stringify({ username: username, task: task }),
	success: function (data) {
	// 在页面显示任务描述
	$("#task-description").text(data.task_description);
	$("#task-description").show();
	$("#task-select").hide();
	$("#test-content").show();
	$("#switch-task").show(); // 显示右上角的切换任务按钮
	loadNextTest();
	},
	error: function (xhr, status, error) {
	console.error("Error occurred: ", status, error);
	}
	});
	} else {
	alert("Please select a specific task.");
	}
	}




	function loadNextTest() {
	$.get('/next_test', function (data) {
	if (data.message === 'Test completed') {
	$("#test-content").hide(); // 隐藏测试内容
	$("#test-completed").show(); // 显示测试完成的页面

	// 动态显示完成的任务名称
	$("#completed-task").text(task);

	// 清空 session 数据，防止继续原方向的测试
	sessionStorage.removeItem('current_index');
	} else {
	// 正常加载测试题目
	console.log(data); // 添加调试信息，检查 data 的内容
	$("#task-description").text(data.task_description);
	$("#test-text").text(data.text);
	$("#input-audio").attr("src", data.input_path);
	$("#audio-a").attr("src", data.audio_a);
	$("#audio-b").attr("src", data.audio_b);

	// 更新模型信息
	modelA = modelNames[data.model_a];
	modelB = modelNames[data.model_b];
	$("#model-a").text(modelA);
	$("#model-b").text(modelB);

	$("#next-test").hide();
	$("#model-comparison").hide();
	$("#confirm-choice").show();
	chosenModel = null;
	$(".btn-option").prop('disabled', false);
	$(".btn-option").removeClass("btn-selected").addClass("btn-success");
	}
	}, 'json').fail(function (xhr, status, error) {
	console.error("Failed to load test data:", status, error);
	});
	}

	function endTest() {
	// 用户选择结束测试，可以跳转到结束页面或者返回主页
	alert("Thank you for participating in the test!");
	// 或者可以通过 window.location.href 跳转到其他页面
	window.location.href = "/thank_you"; // 你可以设置一个感谢页面或者其他动作
	}

	function selectModel(model) {
	// 将用户选择的模型存储在变量 chosenModel 中
	chosenModel = model;

	// 禁用所有模型选择按钮，防止重复点击
	$(".btn-option").prop('disabled', false); // 允许用户重新选择

	// 重置所有按钮的样式
	$(".btn-option").removeClass("btn-selected").addClass("btn-success");

	// 根据用户选择的模型按钮，添加 btn-selected 类改变其样式
	if (model === 'A') {
	$("button:contains('Model A')").removeClass("btn-success").addClass("btn-selected");
	} else if (model === 'B') {
	$("button:contains('Model B')").removeClass("btn-success").addClass("btn-selected");
	}
	}

	function confirmChoice() {
	// 检查是否选择了模型，如果没有选择，则提示用户
	if (!chosenModel) {
	alert("Please select a model before confirming.");
	return;
	}

	// 禁用模型选择按钮，防止用户在确认选择后更改选择
	$(".btn-option").prop('disabled', true);

	// 一旦用户确认选择，立刻显示选择的详细信息
	if (chosenModel === 'A') {
	$("#chosen-model").text(modelA); // 使用 modelA 映射后的名称
	} else {
	$("#chosen-model").text(modelB); // 使用 modelB 映射后的名称
	}

	// 将模型 A 和 B 的名称显示在同一行中，包括中文和英文翻译
	$("#model-a").text(modelA); // 模型 A 名称
	$("#model-b").text(modelB); // 模型 B 名称

	// 确认选择后才显示模型详细信息
	$("#model-comparison").addClass('show');
	$("#model-comparison").show(); // 展示选择信息

	// 隐藏确认按钮，显示“Next Test”按钮
	$("#confirm-choice").hide();
	$("#next-test").show();

	// 提交用户选择的模型
	$.ajax({
	url: '/submit_result',
	type: 'POST',
	contentType: 'application/json',
	data: JSON.stringify({ chosen_model: chosenModel }),
	success: function (data) {
	// 成功提交后处理逻辑
	},
	error: function (xhr, status, error) {
	console.error("Error occurred: ", status, error);
	}
	});
	}
	</script>
	</body>

	</html>