wip

feat: Add dynamic image backgrounds and spectrogram opacity

This commit introduces a major feature allowing users to add image backgrounds to the generated spectrogram video. It also enhances the visualizer by making it semi-transparent when a background is present.

app.py

@@ -9,7 +9,7 @@ import subprocess
 import matplotlib.font_manager as fm
 from typing import Tuple, List, Dict
 from mutagen.flac import FLAC
-from moviepy import CompositeVideoClip, TextClip, VideoClip, AudioFileClip
+from moviepy import CompositeVideoClip, TextClip, VideoClip, AudioFileClip, ImageClip
 
 # --- Font Scanning and Management ---
 def get_font_display_name(font_path: str) -> Tuple[str, str]:
@@ -128,7 +128,7 @@ SYSTEM_FONTS_MAP, FONT_DISPLAY_NAMES = get_font_data()
 print(f"Scan complete. Found {len(FONT_DISPLAY_NAMES)} available fonts.")
 
 
-# --- CUE Sheet Parsing Logic (Unchanged) ---
+# --- CUE Sheet Parsing Logic ---
 def cue_time_to_seconds(time_str: str) -> float:
     try:
         minutes, seconds, frames = map(int, time_str.split(':'))
@@ -160,7 +160,7 @@ def parse_cue_sheet_manually(cue_data: str) -> List[Dict[str, any]]:
     return tracks
 
 
-# --- Add a function to increase framerate using FFmpeg ---
+# --- FFmpeg Framerate Conversion ---
 def increase_video_framerate(input_path: str, output_path: str, target_fps: int = 24):
     """
     Uses FFmpeg to increase the video's framerate without re-encoding.
@@ -203,7 +203,8 @@ def increase_video_framerate(input_path: str, output_path: str, target_fps: int
 
 # --- Main Processing Function ---
 def process_audio_to_video(
-    audio_path: str, spec_fg_color: str, spec_bg_color: str, 
+    audio_path: str, image_paths: List[str],
+    spec_fg_color: str, spec_bg_color: str, 
     font_name: str, font_size: int, font_color: str,
     font_bg_color: str, font_bg_alpha: float,
     pos_h: str, pos_v: str
@@ -252,17 +253,74 @@ def process_audio_to_video(
         y, sr = librosa.load(audio_path, sr=None, mono=True)
         duration = librosa.get_duration(y=y, sr=sr)
         
+        # --- Image Processing Logic ---
+        image_clips = []
+        # Check if any images were uploaded.
+        if image_paths and len(image_paths) > 0:
+            print(f"Found {len(image_paths)} images to process.")
+            
+            # First, try to parse the CUE sheet from the audio file.
+            tracks = []
+            if audio_path.lower().endswith('.flac'):
+                try:
+                    audio_meta = FLAC(audio_path)
+                    if 'cuesheet' in audio_meta.tags:
+                        tracks = parse_cue_sheet_manually(audio_meta.tags['cuesheet'][0])
+                        print(f"Successfully parsed {len(tracks)} tracks from CUE sheet.")
+                except Exception as e:
+                    print(f"Warning: Could not read or parse CUE sheet: {e}")
+
+            # Mode 1: If CUE tracks match the number of images, align them.
+            if tracks and len(tracks) == len(image_paths):
+                print("Image count matches track count. Aligning images with tracks.")
+                for i, (track, img_path) in enumerate(zip(tracks, image_paths)):
+                    start_time = track.get('start_time', 0)
+                    # The end time of a track is the start time of the next, or the total duration for the last track.
+                    end_time = tracks[i+1].get('start_time', duration) if i + 1 < len(tracks) else duration
+                    img_duration = end_time - start_time
+                    if img_duration <= 0: continue
+                    
+                    # Create an ImageClip for the duration of the track.
+                    clip = (ImageClip(img_path)
+                            .set_duration(img_duration)
+                            .set_start(start_time)
+                            .resize(width=WIDTH, height=HEIGHT)) # Resize to fit video dimensions
+                    image_clips.append(clip)
+            
+            # Mode 2: If no CUE or mismatch, distribute images evenly across the audio duration.
+            else:
+                if tracks: print("Image count does not match track count. Distributing images evenly.")
+                else: print("No CUE sheet found. Distributing images evenly.")
+                
+                img_duration = duration / len(image_paths)
+                for i, img_path in enumerate(image_paths):
+                    start_time = i * img_duration
+                    # Create an ImageClip for a calculated segment of time.
+                    clip = (ImageClip(img_path)
+                            .set_duration(img_duration)
+                            .set_start(start_time)
+                            .resize(width=WIDTH, height=HEIGHT)) # Resize to fit video dimensions
+                    image_clips.append(clip)
+
         # Spectrogram calculation
         N_FFT, HOP_LENGTH, N_BANDS = 2048, 512, 32
         MIN_DB, MAX_DB = -80.0, 0.0
         S_mel = librosa.feature.melspectrogram(y=y, sr=sr, n_fft=N_FFT, hop_length=HOP_LENGTH, n_mels=N_BANDS, fmax=sr/2)
         S_mel_db = librosa.power_to_db(S_mel, ref=np.max)
         
-        # Frame generation logic
+        # Frame generation logic for the spectrogram
         def frame_generator(t):
-            frame = np.full((HEIGHT, WIDTH, 3), bg_rgb, dtype=np.uint8)
-            for i in range(1, 9):
-                y_pos = int(i * (HEIGHT / 9)); frame[y_pos-1:y_pos, :] = grid_rgb
+            # If images are used as background, the spectrogram's own background should be transparent.
+            # Otherwise, use the selected background color.
+            # Here, we will use a simple opacity setting on the final clip, so we always generate the frame.
+            frame_bg = bg_rgb if not image_clips else (0,0,0) # Use black if it will be made transparent later
+            frame = np.full((HEIGHT, WIDTH, 3), frame_bg, dtype=np.uint8)
+
+            # Draw the grid lines only if no images are being used.
+            if not image_clips:
+                for i in range(1, 9):
+                    y_pos = int(i * (HEIGHT / 9)); frame[y_pos-1:y_pos, :] = grid_rgb
+
             time_idx = int((t / duration) * (S_mel_db.shape[1] - 1))
             bar_width = WIDTH / N_BANDS
             for i in range(N_BANDS):
@@ -279,17 +337,24 @@ def process_audio_to_video(
             return frame
             
         video_clip = VideoClip(frame_function=frame_generator, duration=duration)
+
+        # --- NEW: Set Spectrogram Opacity ---
+        # If image clips were created, make the spectrogram layer 50% transparent.
+        if image_clips:
+            print("Applying 50% opacity to spectrogram layer.")
+            video_clip = video_clip.set_opacity(0.5)
+
         audio_clip = AudioFileClip(audio_path)
         
         # CUE Sheet title overlay logic
         text_clips = []
-        tracks = []
         if audio_path.lower().endswith('.flac'):
             try:
-                audio = FLAC(audio_path); tracks = parse_cue_sheet_manually(audio.tags['cuesheet'][0])
-                print(f"Successfully parsed {len(tracks)} tracks from CUE sheet...")
-            except Exception as e:
-                print(f"Warning: Could not read or parse CUE sheet: {e}")
+                audio_meta = FLAC(audio_path)
+                if 'cuesheet' in audio_meta.tags:
+                    tracks = parse_cue_sheet_manually(audio_meta.tags['cuesheet'][0])
+            except Exception:
+                pass # Already handled above
         
         if tracks:
             font_path = SYSTEM_FONTS_MAP.get(font_name)
@@ -310,13 +375,17 @@ def process_audio_to_video(
                 if text_duration <= 0: continue
                 
                 # Note: TextClip's `color` argument can handle color names like 'white' directly
-                txt_clip = (TextClip(text=f"{i+1}. {title}", font_size=font_size, color=font_color, font=font_path, bg_color=font_bg_rgba)
+                txt_clip = (TextClip(text=f"{i+1}. {title}", font_size=font_size, color=font_color, font=font_path, bg_color=f'rgba({font_bg_rgba[0]}, {font_bg_rgba[1]}, {font_bg_rgba[2]}, {font_bg_alpha})')
                             .with_position(position)
                             .with_duration(text_duration)
                             .with_start(start_time))
                 text_clips.append(txt_clip)
 
-        final_clip = CompositeVideoClip([video_clip] + text_clips).with_audio(audio_clip)
+        # --- Clip Composition ---
+        # The final composition order is important: images at the bottom, then spectrogram, then text.
+        # The base layer is now the list of image clips.
+        final_layers = image_clips + [video_clip] + text_clips
+        final_clip = CompositeVideoClip(final_layers).with_audio(audio_clip)
         
         # Step 1: Render the slow, 1 FPS intermediate file
         print(f"Step 1/2: Rendering base video at {RENDER_FPS} FPS...")
@@ -361,19 +430,37 @@ with gr.Blocks(title="Spectrogram Video Generator") as iface:
         with gr.Column(scale=1):
             audio_input = gr.Audio(type="filepath", label="Upload Audio File")
             
+            # --- Image Upload Component ---
+            gr.Markdown(
+                """
+                ### Background Image Options (Optional)
+
+                Upload one or more images to create a dynamic background for the video. The display behavior changes based on your audio file and the number of images provided.
+
+                *   **Mode 1: CUE Sheet Synchronization**
+                    If your audio file contains an embedded CUE sheet AND the number of images you upload **exactly matches** the number of tracks, the images will be synchronized with the tracks. The first image will appear during the first track, the second during the second, and so on.
+
+                *   **Mode 2: Even Time Distribution**
+                    In all other cases (e.g., the audio has no CUE sheet, or the number of images and tracks do not match), the images will be displayed sequentially. The total duration of the video will be divided equally among all uploaded images.
+
+                **Note:** When any image is used as a background, the spectrogram visualizer will automatically become **semi-transparent** to ensure the background is clearly visible.
+                """
+            )
+            image_uploads = gr.File(
+                label="Upload Background Images", 
+                file_count="multiple", # Allow multiple files
+                file_types=["image"]   # Accept only image formats
+            )
+            
             with gr.Accordion("Visualizer Options", open=True):
                 fg_color = gr.ColorPicker(value="#71808c", label="Spectrogram Bar Top Color")
-                bg_color = gr.ColorPicker(value="#2C3E50", label="Background Color")
+                bg_color = gr.ColorPicker(value="#2C3E50", label="Background Color (if no images)")
             
             with gr.Accordion("Text Overlay Options", open=True):
-                
-                # --- CORE CORRECTION: Add clarification text ---
                 gr.Markdown(
                     "**Note:** These options only take effect if the input audio file has an embedded CUE sheet."
                 )
-                gr.Markdown("---") # Add a separator line
-                # --- CORRECTION END ---
-
+                gr.Markdown("---")
                 gr.Markdown("If your CUE sheet contains non-English characters, please select a compatible font.")
                 default_font = "Microsoft JhengHei" if "Microsoft JhengHei" in FONT_DISPLAY_NAMES else ("Arial" if "Arial" in FONT_DISPLAY_NAMES else (FONT_DISPLAY_NAMES[0] if FONT_DISPLAY_NAMES else None))
                 font_name_dd = gr.Dropdown(choices=FONT_DISPLAY_NAMES, value=default_font, label="Font Family")
@@ -396,10 +483,12 @@ with gr.Blocks(title="Spectrogram Video Generator") as iface:
         with gr.Column(scale=2):
             video_output = gr.Video(label="Generated Video")
     
+    # --- Add image_uploads to the inputs list ---
     submit_btn.click(
         fn=process_audio_to_video,
         inputs=[
-            audio_input, fg_color, bg_color, 
+            audio_input, image_uploads,
+            fg_color, bg_color, 
             font_name_dd, font_size_slider, font_color_picker,
             font_bg_color_picker, font_bg_alpha_slider,
             pos_h_radio, pos_v_radio