Update app.py

app.py

@@ -319,6 +319,8 @@ def get_predictions(audio_input):
     
     return results
 
+# ... (your existing imports remain the same)
+
 # Create the Gradio interface with proper output handling
 with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as interface:
     gr.Markdown("# Affective Virtual Environments")
@@ -328,8 +330,18 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
         audio_input = gr.Audio(label="Input Audio", type="filepath", sources=["microphone", "upload"])
         process_btn = gr.Button("Process Audio", variant="primary")
     
+    # Add a loading indicator
+    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>
+    """)
+    
     # Create output components for each chunk type
     output_containers = []
+    group_components = []  # Store group components separately
     
     # We'll create up to 10 chunk slots (adjust as needed)
     for i in range(10):
@@ -344,8 +356,8 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
                 audio_output = gr.Audio(label="Generated Music")
             gr.HTML("<hr style='margin: 20px 0; border: 1px solid #ccc;'>")
         
+        group_components.append(chunk_group)  # Store the group component
         output_containers.append({
-            'group': chunk_group,
             'emotion': emotion_output,
             'transcription': transcription_output,
             'sentiment': sentiment_output,
@@ -354,16 +366,26 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
         })
     
     def process_and_display(audio_input):
+        # Show loading indicator
+        yield [gr.HTML("""
+            <div style="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>
+        """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5)
+        
         results = get_predictions(audio_input)
         
         # Initialize outputs list
         outputs = []
+        group_visibility = []
         
         # Process each result
         for i, result in enumerate(results):
             if i < len(output_containers):
+                group_visibility.append(gr.Group(visible=True))
                 outputs.extend([
-                    gr.Group(visible=True),  # Show the group
                     result['emotion'],
                     result['transcription'],
                     result['sentiment'],
@@ -372,23 +394,22 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
                 ])
             else:
                 # If we have more results than containers, just extend with None
-                outputs.extend([None] * 6)
+                group_visibility.append(gr.Group(visible=False))
+                outputs.extend([None] * 5)
         
         # Hide remaining containers
         for i in range(len(results), len(output_containers)):
-            outputs.extend([
-                gr.Group(visible=False),
-                None, None, None, None, None
-            ])
+            group_visibility.append(gr.Group(visible=False))
+            outputs.extend([None] * 5)
         
-        return outputs
+        # Hide loading indicator and show results
+        yield [gr.HTML("")] + group_visibility + outputs
     
     # Set up the button click
     process_btn.click(
         fn=process_and_display,
         inputs=audio_input,
-        outputs=[comp for container in output_containers for comp in [
-            container['group'],
+        outputs=[loading_indicator] + group_components + [comp for container in output_containers for comp in [
             container['emotion'],
             container['transcription'],
             container['sentiment'],