Update app.py

app.py

@@ -480,60 +480,6 @@ def clear_all():
     return outputs
 
 # In the Gradio interface, replace the fade_animation_output with these two components
-with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as interface:
-    # ... [rest of your interface code] ...
-    
-    # Replace the single fade animation output with these two components
-    with gr.Row():
-        fade_preview_output = gr.Image(
-            label="Fade Animation Preview", 
-            interactive=False
-        )
-        fade_animation_output = gr.File(
-            label="Download Fade Animation", 
-            type="binary",
-            interactive=False
-        )
-    
-    # Update the process_btn.click call to include both outputs
-    process_btn.click(
-        fn=process_and_display,
-        inputs=[audio_input, generate_audio_checkbox, chunk_duration_input],
-        outputs=[loading_indicator] + group_components + [comp for container in output_containers for comp in [
-            container['emotion'],
-            container['transcription'],
-            container['sentiment'],
-            container['image'],
-            container['music']
-        ]] + [fade_preview_output, fade_animation_output]
-    )
-    
-    # Update the clear_btn.click call to include both outputs
-    clear_btn.click(
-        fn=clear_all,
-        inputs=[],
-        outputs=[audio_input] + group_components + [comp for container in output_containers for comp in [
-            container['emotion'],
-            container['transcription'],
-            container['sentiment'],
-            container['image'],
-            container['music']
-        ]] + [loading_indicator] + [chunk_duration_input] + [example_selector] + [fade_preview_output, fade_animation_output]
-    )
-
-# Function to load example audio
-def load_example_audio(example_name):
-    # This function would load the example audio based on the selected example
-    # For now, we'll return a placeholder path - you should replace these with actual paths to your example audio files
-    example_paths = {
-        "Happy Speech": "examples/happy_speech.wav",
-        "Sad Story": "examples/sad_story.wav",
-        "Neutral News": "examples/neutral_news.wav"
-    }
-    
-    # Return the path to the selected example
-    return example_paths.get(example_name, "examples/happy_speech.wav")
-
 # Create the Gradio interface with proper output handling
 with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as interface:
     gr.Markdown("# Affective Virtual Environments")
@@ -609,12 +555,17 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             'music': audio_output
         })
     
-    # Add a component to display the fade animation at the end
-    fade_animation_output = gr.Image(
-        label="Image Sequence with Fade Transitions", 
-        format="gif",
-        interactive=False
-    )
+    # Add components to display the fade animation
+    with gr.Row():
+        fade_preview_output = gr.Image(
+            label="Fade Animation Preview", 
+            interactive=False
+        )
+        fade_animation_output = gr.File(
+            label="Download Fade Animation", 
+            type="binary",
+            interactive=False
+        )
     
     # Function to process and display results
     def process_and_display(audio_input, generate_audio, chunk_duration):
@@ -629,7 +580,7 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
                 <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) + [None]
+        """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5) + [None, None]
         
         results = get_predictions(audio_input, generate_audio, chunk_duration)
         
@@ -662,13 +613,14 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             outputs.extend([None] * 5)
         
         # Create fade animation if we have multiple images
+        fade_preview = None
         fade_animation = None
         if len(all_images) > 1:
             # Create a fade animation (GIF)
-            fade_animation = create_fade_transition(all_images, fade_duration=1.5, fps=15)
+            fade_preview, fade_animation = create_fade_transition(all_images, fade_duration=1.5, fps=15)
         
         # Hide loading indicator and show results
-        yield [gr.HTML("")] + group_visibility + outputs + [fade_animation]
+        yield [gr.HTML("")] + group_visibility + outputs + [fade_preview, fade_animation]
     
     # Function to handle example selection
     def load_example(example_name):
@@ -702,7 +654,8 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
         # For example selector (reset to None)
         outputs.append(None)
         
-        # For fade animation (set to None)
+        # For fade preview and animation (set to None)
+        outputs.append(None)
         outputs.append(None)
         
         return outputs
@@ -717,7 +670,7 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             container['sentiment'],
             container['image'],
             container['music']
-        ]] + [fade_animation_output]
+        ]] + [fade_preview_output, fade_animation_output]
     )
     
     # Set up the clear button
@@ -730,7 +683,7 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             container['sentiment'],
             container['image'],
             container['music']
-        ]] + [loading_indicator] + [chunk_duration_input] + [example_selector] + [fade_animation_output]
+        ]] + [loading_indicator] + [chunk_duration_input] + [example_selector] + [fade_preview_output, fade_animation_output]
     )
     
     # Set up the example loading button