Update templates/index.html

templates/index.html

@@ -72,17 +72,24 @@
             margin-right: 10px;
         }
 
-        audio {
-            margin-top: 10px;
-            margin-bottom: 15px;
-        }
-
         .audio-container {
             text-align: center;
             margin-top: 20px;
         }
 
-        .audio-container audio {
+        .audio-container .audio-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .audio-container .audio-item span {
+            margin-right: 10px;
+            font-weight: bold;
+        }
+
+        audio {
             display: inline-block;
         }
     </style>
@@ -94,86 +101,110 @@
 
         <div id="evaluation-info" class="mb-5">
             <p class="text-start">
-                <span class="section-title"><i class="fas fa-info-circle"></i>Welcome to the Speech-to-Speech (S2S) Model Evaluation! 🎤</span>
+                <span class="section-title"><i class="fas fa-info-circle"></i>Welcome to the Speech-to-Speech (S2S)
+                    Model Evaluation! 🎤</span>
                 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.
                 <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>),
+                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>
+            <div class="audio-container">
+                <div class="audio-item">
+                    <span>Audio Sample:</span>
+                    <audio controls>
+                        <source src="/static/audio/sample/input_audio.wav" type="audio/wav">
+                    </audio>
+                </div>
+            </div>
+            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>
+            <span class="section-title"><i class="fas fa-star"></i>Model Performance</span>
 
-                <div class="audio-container">
-                    <span><strong>ChatGPT-4o:</strong></span>
+            <div class="audio-container">
+                <div class="audio-item">
+                    <span>ChatGPT-4o:</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>
+                <p style="margin: 0; text-align: left;">
+                    🎙️ <strong>Speech:</strong> Partially followed the instruction on speed.
+                </p>
+                <p style="margin: 0; text-align: left;">
+                    🧾 <strong>Semantics:</strong> Accurately followed the instruction, with no semantic deviation or
+                    missing
+                    information.
+                </p>
+                <br>
 
-                <div class="audio-container">
-                    <span><strong>FunAudioLLM:</strong></span>
+                <div class="audio-item">
+                    <span>FunAudioLLM:</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>
+                <p style="margin: 0; text-align: left;">
+                    🎙️ <strong>Speech:</strong> Partially followed the instruction on speed.
+                </p>
+                <p style="margin: 0; text-align: left;">
+                    🧾 <strong>Semantics:</strong> Accurately followed the instruction, with no semantic deviation or
+                    missing
+                    information.
+                </p>
+                <br>
 
-                <div class="audio-container">
-                    <span><strong>SpeechGPT:</strong></span>
+                <div class="audio-item">
+                    <span>SpeechGPT:</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>
+                <p style="margin: 0; text-align: left;">
+                    🎙️ <strong>Speech:</strong> Did not follow the instruction on speed.
+                </p>
+                <p style="margin: 0; text-align: left;">
+                    🧾 <strong>Semantics:</strong> Partially followed the instruction, with minor semantic deviation and
+                    missing information.
+                </p>
 
-                <div class="audio-container">
-                    <span><strong>Mini-Omni:</strong></span>
+                <br>
+                
+                <div class="audio-item">
+                    <span>Mini-Omni:</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. 🔄
+                <p style="margin: 0; text-align: left;">
+                    🎙️ <strong>Speech:</strong> Did not follow the instruction on speed.
                 </p>
-                <strong>Click the button below to start the evaluation! 🚀</strong>
+                <p style="margin: 0; text-align: left;">
+                    🧾 <strong>Semantics:</strong> 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. 🔄
+            </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>
+            <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>
 
-</html>
+</html>