Update app.py

app.py

@@ -22,7 +22,6 @@ import soundfile as sf
 from pydub import AudioSegment
 import math
 import json
-import time
 
 # Load the emotion prediction model
 def load_emotion_model(model_path):
@@ -405,18 +404,13 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
                 process_btn = gr.Button("Process Audio", variant="primary")
                 clear_btn = gr.Button("Clear All", variant="secondary")
     
-    # Add a loading indicator with proper CSS animation
+    # Add a loading indicator - Fixed CSS syntax error by escaping % signs
     loading_indicator = gr.HTML("""
         <div id="loading" style="display: none; text-align: center; margin: 20px;">
             <p style="font-size: 18px; color: #4a4a4a;">Processing audio chunks...</p>
             <div style="border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; margin: 0 auto;"></div>
+            <style>@keyframes spin { 0%% { transform: rotate(0deg); } 100%% { transform: rotate(360deg); } }</style>
         </div>
-        <style>
-            @keyframes spin {
-                0% { transform: rotate(0deg); }
-                100% { transform: rotate(360deg); }
-            }
-        </style>
     """)
     
     # Create output components for each chunk type
@@ -450,19 +444,14 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
         if chunk_duration is None or chunk_duration <= 0:
             chunk_duration = 10
         
-        # Show loading indicator with proper animation
-        yield [gr.HTML("""
+        # Show loading indicator - Fixed CSS syntax error by escaping % signs
+        yield [gr.HTML(f"""
             <div style="text-align: center; margin: 20px;">
-                <p style="font-size: 18px; color: #4a4a4a;">Processing audio in {}-second chunks...</p>
+                <p style="font-size: 18px; color: #4a4a4a;">Processing audio in {chunk_duration}-second chunks...</p>
                 <div style="border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; margin: 0 auto;"></div>
+                <style>@keyframes spin {{ 0%% {{ transform: rotate(0deg); }} 100%% {{ transform: rotate(360deg); }} }}</style>
             </div>
-            <style>
-                @keyframes spin {
-                    0% { transform: rotate(0deg); }
-                    100% { transform: rotate(360deg); }
-                }
-            </style>
-        """.format(chunk_duration))] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5)
+        """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5)
         
         results = get_predictions(audio_input, generate_audio, chunk_duration)