Update templates/index.html

templates/index.html

@@ -12,6 +12,7 @@
             background-color: #f0f8ff;
             font-family: 'Arial', sans-serif;
         }
+
         .container {
             background-color: #fff;
             border-radius: 15px;
@@ -20,6 +21,7 @@
             max-width: 800px;
             margin: 30px auto;
         }
+
         h3 {
             font-size: 2rem;
             font-weight: bold;
@@ -27,11 +29,13 @@
             text-align: center;
             margin-bottom: 20px;
         }
+
         p {
             color: #555;
             font-size: 1rem;
             line-height: 1.8;
         }
+
         .btn {
             border-radius: 25px;
             font-size: 1.1rem;
@@ -39,18 +43,22 @@
             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;
@@ -59,13 +67,24 @@
             align-items: center;
             margin-top: 20px;
         }
+
         .section-title .fa {
             margin-right: 10px;
         }
+
         audio {
             margin-top: 10px;
             margin-bottom: 15px;
         }
+
+        .audio-container {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .audio-container audio {
+            display: inline-block;
+        }
     </style>
 </head>
 
@@ -84,55 +103,65 @@
                 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:
+
                 <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>
+
                 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>
 
                 <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:
 
-                <!-- 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>
+                <div class="audio-container">
+                    <span><strong>ChatGPT-4o:</strong></span>
+                    <audio controls>
+                        <source src="/static/audio/sample/4o_audio.wav" type="audio/wav">
+                    </audio>
+                    <p>
+                        <strong>Performance:</strong> 🎙️ Speech: Partially followed the instruction on speed. 🧾
+                        Semantics: Accurately followed the instruction, with no semantic deviation or missing
+                        information.
+                    </p>
+                </div>
 
-                <!-- 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>
+                <div class="audio-container">
+                    <span><strong>FunAudioLLM:</strong></span>
+                    <audio controls>
+                        <source src="/static/audio/sample/FunAudio_audio.wav" type="audio/wav">
+                    </audio>
+                    <p>
+                        <strong>Performance:</strong> 🎙️ Speech: Partially followed the instruction on speed. 🧾
+                        Semantics: Accurately followed the instruction, with no semantic deviation or missing
+                        information.
+                    </p>
+                </div>
 
-                <!-- 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>
+                <div class="audio-container">
+                    <span><strong>SpeechGPT:</strong></span>
+                    <audio controls>
+                        <source src="/static/audio/sample/SpeechGPT.wav" type="audio/wav">
+                    </audio>
+                    <p>
+                        <strong>Performance:</strong> 🎙️ Speech: Did not follow the instruction on speed. 🧾 Semantics:
+                        Partially followed the instruction, with minor semantic deviation and missing information.
+                    </p>
+                </div>
 
-                <!-- 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>
+                <div class="audio-container">
+                    <span><strong>Mini-Omni:</strong></span>
+                    <audio controls>
+                        <source src="/static/audio/sample/mini-omni.wav" type="audio/wav">
+                    </audio>
+                    <p>
+                        <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>
+                </div>
 
                 <p class="text-start">
                     After making your choice, you'll proceed to the next round. 🔄