Spaces:

KurtDu
/

S2S-Bench

Running

App Files Files Community

KurtDu commited on Nov 11, 2024

Commit

0ff04a1

verified ·

1 Parent(s): 22d1d7d

Update index.html

Browse files

Files changed (1) hide show

index.html +567 -18

index.html CHANGED Viewed

@@ -1,19 +1,568 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>