Update app.py

app.py

@@ -22,6 +22,7 @@ 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):
@@ -404,13 +405,18 @@ 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 - Fixed CSS syntax error by escaping % signs
+    # Add a loading indicator with proper CSS animation
     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
@@ -444,14 +450,19 @@ 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 - Fixed CSS syntax error by escaping % signs
-        yield [gr.HTML(f"""
+        # Show loading indicator with proper animation
+        yield [gr.HTML("""
             <div style="text-align: center; margin: 20px;">
-                <p style="font-size: 18px; color: #4a4a4a;">Processing audio in {chunk_duration}-second chunks...</p>
+                <p style="font-size: 18px; color: #4a4a4a;">Processing audio in {}-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>
-        """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5)
+            <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)
         
         results = get_predictions(audio_input, generate_audio, chunk_duration)