Spaces:

FreedomIntelligence
/

S2S-Arena

Running

App Files Files Community

KurtDu commited on Nov 21, 2024

Commit

62ae11f

verified ·

1 Parent(s): 065f64f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +61 -42

templates/index.html CHANGED Viewed

@@ -6,132 +6,151 @@
     <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">
     <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.5rem;
             font-weight: bold;
             color: #333;
             text-align: center;
             margin-bottom: 20px;
         }
         p {
             color: #555;
             font-size: 1rem;
-            line-height: 1.6;
         }
         .btn {
             border-radius: 25px;
-            font-size: 1rem;
-            padding: 12px 20px;
             font-weight: bold;
             transition: background-color 0.3s ease, transform 0.2s ease;
         }
         .btn-primary {
             background-color: #007bff;
             border: none;
         }
         .btn-primary:hover {
             background-color: #0056b3;
             transform: scale(1.05);
         }
     </style>
 </head>
 <body>
     <div class="container py-5">
-        <h3>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>Click the button below to start the evaluation!</strong>
             </p>
         </div>
         <div class="text-center">
-            <a href="http://71.132.14.167:6002/" target="_blank" class="btn btn-primary">Start Evaluation</a>
         </div>
     </div>
 </body>

     <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
         body {
+            background-color: #f0f8ff;
             font-family: 'Arial', sans-serif;
         }
         .container {
+            background-color: #fff;
+            border-radius: 15px;
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+            padding: 40px;
+            max-width: 800px;
+            margin: 30px auto;
         }
         h3 {
+            font-size: 2rem;
             font-weight: bold;
             color: #333;
             text-align: center;
             margin-bottom: 20px;
         }
         p {
             color: #555;
             font-size: 1rem;
+            line-height: 1.8;
         }
         .btn {
             border-radius: 25px;
+            font-size: 1.1rem;
+            padding: 12px 25px;
             font-weight: bold;
             transition: background-color 0.3s ease, transform 0.2s ease;
         }
         .btn-primary {
             background-color: #007bff;
             border: none;
         }
         .btn-primary:hover {
             background-color: #0056b3;
             transform: scale(1.05);
         }
+        .icon {
+            color: #f39c12;
+            margin-right: 5px;
+        }
+        .section-title {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #007bff;
+            display: flex;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .section-title .fa {
+            margin-right: 10px;
+        }
+        audio {
+            margin-top: 10px;
+            margin-bottom: 15px;
+        }
     </style>
 </head>
 <body>
     <div class="container py-5">
+        <h3><i class="fas fa-microphone-alt icon"></i>Speech-to-Speech Model Comparison</h3>
         <div id="evaluation-info" class="mb-5">
             <p class="text-start">
+                <span class="section-title"><i class="fas fa-info-circle"></i>Welcome!</span>
+                <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>
+                <span class="section-title"><i class="fas fa-tasks"></i>How It Works</span>
                 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>
+                <strong>Audio Sample:</strong>
+                <audio controls>
                     <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>
+                <span class="section-title"><i class="fas fa-star"></i>Model Responses</span>
                 The responses of different S2S models will be provided, and your task is to choose which response best follows
+                the instructions. For example:
                 <br><br>
                 <!-- ChatGPT-4o Output -->
                 <span><strong>ChatGPT-4o:</strong></span>
+                <audio controls>
                     <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>
                     <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>
                     <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>
                     <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>Click the button below to start the evaluation! 🚀</strong>
             </p>
         </div>
         <div class="text-center">
+            <a href="http://71.132.14.167:6002/" target="_blank" class="btn btn-primary"><i class="fas fa-play"></i> Start Evaluation</a>
         </div>
     </div>
 </body>