Update app.py

app.py

@@ -29,12 +29,6 @@ from matplotlib.animation import FuncAnimation
 import base64
 from io import BytesIO
 
-
-
-
-
-
-
 # Load the emotion prediction model
 def load_emotion_model(model_path):
     try:
@@ -341,35 +335,7 @@ def get_predictions(audio_input, generate_audio=True, chunk_duration=10):
     
     return results
 
-
-    # Update the clear_all function to clear the fade animation
-    def clear_all():
-        # Create a list with None for all outputs
-        outputs = [None]  # For audio input
-        
-        # For group components (set to invisible)
-        outputs.extend([gr.Group(visible=False)] * len(group_components))
-        
-        # For all output containers (set to None)
-        outputs.extend([None] * (len(output_containers) * 5))
-        
-        # For loading indicator (empty HTML)
-        outputs.append(gr.HTML(""))
-        
-        # For chunk duration (reset to 10)
-        outputs.append(10)
-        
-        # For example selector (reset to None)
-        outputs.append(None)
-        
-        # For fade animation (set to None)
-        outputs.append(None)
-        
-        return outputs
-
-#
-
-# Add this function to create a fade transition between images
+# Function to create a fade transition between images
 def create_fade_transition(images, fade_duration=1.0, fps=24):
     """
     Create a smooth fade transition between a sequence of images.
@@ -380,7 +346,7 @@ def create_fade_transition(images, fade_duration=1.0, fps=24):
         fps: Frames per second for the animation
     
     Returns:
-        BytesIO object containing the animation as a video
+        BytesIO object containing the animation as a GIF
     """
     if not images or len(images) < 2:
         return None
@@ -428,169 +394,6 @@ def create_fade_transition(images, fade_duration=1.0, fps=24):
     buffer.seek(0)
     return buffer
 
-# Add this function to create a video with fade transitions
-def create_fade_video(images, fade_duration=1.0, fps=24):
-    """
-    Create a video with smooth fade transitions between images.
-    
-    Args:
-        images: List of PIL Images
-        fade_duration: Duration of fade in seconds
-        fps: Frames per second for the video
-    
-    Returns:
-        BytesIO object containing the video
-    """
-    if not images or len(images) < 2:
-        return None
-    
-    # Ensure all images are the same size
-    width, height = images[0].size
-    for img in images:
-        img.thumbnail((width, height), Image.Resampling.LANCZOS)
-    
-    # Calculate number of frames for fade
-    fade_frames = int(fade_duration * fps)
-    
-    # Create a temporary file for the video
-    with tempfile.NamedTemporaryFile(suffix='.mp4', delete=False) as temp_file:
-        temp_path = temp_file.name
-    
-    # Create writer
-    writer = imageio.get_writer(temp_path, fps=fps)
-    
-    try:
-        # Add first image with full display time
-        for _ in range(fade_frames):
-            writer.append_data(np.array(images[0]))
-        
-        # Create fade transitions between images
-        for i in range(len(images) - 1):
-            img1 = np.array(images[i])
-            img2 = np.array(images[i+1])
-            
-            # Create fade frames
-            for j in range(fade_frames):
-                alpha = j / fade_frames
-                blended = (img1 * (1 - alpha) + img2 * alpha).astype(np.uint8)
-                writer.append_data(blended)
-            
-            # Display the new image for a while
-            for _ in range(fade_frames):
-                writer.append_data(np.array(images[i+1]))
-        
-        writer.close()
-        
-        # Read the video back into memory
-        with open(temp_path, 'rb') as f:
-            video_data = BytesIO(f.read())
-        
-        # Clean up
-        os.unlink(temp_path)
-        
-        return video_data
-    except Exception as e:
-        print("Error creating fade video:", e)
-        # Clean up
-        if os.path.exists(temp_path):
-            os.unlink(temp_path)
-        return None
-
-#
-
-
-def process_and_display(audio_input, generate_audio, chunk_duration):
-    # Validate chunk duration
-    if chunk_duration is None or chunk_duration <= 0:
-        chunk_duration = 10
-    
-    # Show loading indicator
-    yield [gr.HTML(f"""
-        <div style="text-align: center; margin: 20px;">
-            <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>
-    """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5) + [None]
-    
-    results = get_predictions(audio_input, generate_audio, chunk_duration)
-    
-    # Initialize outputs list
-    outputs = []
-    group_visibility = []
-    all_images = []  # Collect all generated images for the fade animation
-    
-    # Process each result
-    for i, result in enumerate(results):
-        if i < len(output_containers):
-            group_visibility.append(gr.Group(visible=True))
-            outputs.extend([
-                result['emotion'],
-                result['transcription'],
-                result['sentiment'],
-                result['image'],
-                result['music']
-            ])
-            # Collect the image for the fade animation
-            all_images.append(result['image'])
-        else:
-            # If we have more results than containers, just extend with None
-            group_visibility.append(gr.Group(visible=False))
-            outputs.extend([None] * 5)
-    
-    # Hide remaining containers
-    for i in range(len(results), len(output_containers)):
-        group_visibility.append(gr.Group(visible=False))
-        outputs.extend([None] * 5)
-    
-    # Create fade animation if we have multiple images
-    fade_animation = None
-    if len(all_images) > 1:
-        # Create a fade animation (GIF or video)
-        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]
-
-# In your Gradio interface setup, add a new output component for the fade animation
-with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as interface:
-    # ... [your existing interface code] ...
-    
-    # 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
-    )
-    
-    # Update the process_btn.click call to include the new output
-    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_animation_output]
-    )
-    
-
-    
-    # Update the clear_btn.click call to include the new output
-    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_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
@@ -644,12 +447,12 @@ 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
     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>
+            <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
         </div>
     """)
     
@@ -679,7 +482,66 @@ 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
+    )
+    
+    # Function to process and display results
+    def process_and_display(audio_input, generate_audio, chunk_duration):
+        # Validate chunk duration
+        if chunk_duration is None or chunk_duration <= 0:
+            chunk_duration = 10
+        
+        # Show loading indicator
+        yield [gr.HTML(f"""
+            <div style="text-align: center; margin: 20px;">
+                <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>
+        """)] + [gr.Group(visible=False)] * len(group_components) + [None] * (len(output_containers) * 5) + [None]
+        
+        results = get_predictions(audio_input, generate_audio, chunk_duration)
+        
+        # Initialize outputs list
+        outputs = []
+        group_visibility = []
+        all_images = []  # Collect all generated images for the fade animation
+        
+        # Process each result
+        for i, result in enumerate(results):
+            if i < len(output_containers):
+                group_visibility.append(gr.Group(visible=True))
+                outputs.extend([
+                    result['emotion'],
+                    result['transcription'],
+                    result['sentiment'],
+                    result['image'],
+                    result['music']
+                ])
+                # Collect the image for the fade animation
+                all_images.append(result['image'])
+            else:
+                # If we have more results than containers, just extend with None
+                group_visibility.append(gr.Group(visible=False))
+                outputs.extend([None] * 5)
+        
+        # Hide remaining containers
+        for i in range(len(results), len(output_containers)):
+            group_visibility.append(gr.Group(visible=False))
+            outputs.extend([None] * 5)
+        
+        # Create fade animation if we have multiple images
+        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)
+        
+        # Hide loading indicator and show results
+        yield [gr.HTML("")] + group_visibility + outputs + [fade_animation]
     
     # Function to handle example selection
     def load_example(example_name):
@@ -693,6 +555,31 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
         # The waveform will be automatically displayed by Gradio's Audio component
         return example_path, example_name
     
+    # Function to clear audio input and all outputs
+    def clear_all():
+        # Create a list with None for all outputs
+        outputs = [None]  # For audio input
+        
+        # For group components (set to invisible)
+        outputs.extend([gr.Group(visible=False)] * len(group_components))
+        
+        # For all output containers (set to None)
+        outputs.extend([None] * (len(output_containers) * 5))
+        
+        # For loading indicator (empty HTML)
+        outputs.append(gr.HTML(""))
+        
+        # For chunk duration (reset to 10)
+        outputs.append(10)
+        
+        # For example selector (reset to None)
+        outputs.append(None)
+        
+        # For fade animation (set to None)
+        outputs.append(None)
+        
+        return outputs
+    
     # Set up the button click
     process_btn.click(
         fn=process_and_display,
@@ -703,10 +590,10 @@ with gr.Blocks(title="Affective Virtual Environments - Chunked Processing") as i
             container['sentiment'],
             container['image'],
             container['music']
-        ]]
+        ]] + [fade_animation_output]
     )
     
-    # Set up the clear button - Fixed output list
+    # Set up the clear button
     clear_btn.click(
         fn=clear_all,
         inputs=[],
@@ -716,7 +603,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]
+        ]] + [loading_indicator] + [chunk_duration_input] + [example_selector] + [fade_animation_output]
     )
     
     # Set up the example loading button