Create utils/ui_components.py

utils/ui_components.py

@@ -0,0 +1,125 @@
+"""
+Reusable UI components
+"""
+import gradio as gr
+from typing import List, Dict, Any
+import plotly.graph_objects as go
+import numpy as np
+
+class UIComponents:
+    @staticmethod
+    def create_audio_player(label: str = "Audio Player") -> gr.Audio:
+        """Create styled audio player"""
+        return gr.Audio(
+            label=label,
+            type="filepath",
+            show_download_button=True,
+            show_share_button=True
+        )
+    
+    @staticmethod
+    def create_model_dropdown() -> gr.Dropdown:
+        """Create model selection dropdown"""
+        from config import MODELS
+        choices = [(config.name, key) for key, config in MODELS.items()]
+        return gr.Dropdown(
+            choices=choices,
+            value="musicgen_small",
+            label="Model",
+            info="Select AI model for generation"
+        )
+    
+    @staticmethod
+    def create_duration_slider(min_val: int = 5, max_val: int = 30) -> gr.Slider:
+        """Create duration slider"""
+        return gr.Slider(
+            minimum=min_val,
+            maximum=max_val,
+            value=10,
+            step=1,
+            label="Duration (seconds)",
+            info="Length of generated music"
+        )
+    
+    @staticmethod
+    def create_guidance_slider() -> gr.Slider:
+        """Create guidance scale slider"""
+        return gr.Slider(
+            minimum=1,
+            maximum=10,
+            value=3,
+            step=0.5,
+            label="Guidance Scale",
+            info="How closely to follow the prompt"
+        )
+    
+    @staticmethod
+    def create_preset_dropdown() -> gr.Dropdown:
+        """Create preset selection dropdown"""
+        from config import PRESETS
+        choices = [(name, name) for name in PRESETS.keys()]
+        return gr.Dropdown(
+            choices=choices,
+            label="Presets",
+            info="Quick style selection"
+        )
+    
+    @staticmethod
+    def create_audio_visualization(audio_array: np.ndarray) -> go.Figure:
+        """Create audio waveform visualization"""
+        fig = go.Figure()
+        
+        # Waveform
+        fig.add_trace(go.Scatter(
+            y=audio_array,
+            mode='lines',
+            name='Waveform',
+            line=dict(color='blue', width=1)
+        ))
+        
+        fig.update_layout(
+            title="Audio Waveform",
+            xaxis_title="Sample",
+            yaxis_title="Amplitude",
+            height=200,
+            showlegend=False
+        )
+        
+        return fig
+    
+    @staticmethod
+    def create_spectrogram_visualization(audio_array: np.ndarray, sample_rate: int = 16000) -> go.Figure:
+        """Create spectrogram visualization"""
+        import librosa
+        
+        # Compute spectrogram
+        D = librosa.stft(audio_array)
+        S_db = librosa.amplitude_to_db(np.abs(D), ref=np.max)
+        
+        fig = go.Figure(data=go.Heatmap(
+            z=S_db,
+            colorscale='Viridis'
+        ))
+        
+        fig.update_layout(
+            title="Spectrogram",
+            xaxis_title="Time",
+            yaxis_title="Frequency",
+            height=300
+        )
+        
+        return fig
+    
+    @staticmethod
+    def create_progress_info(current: int, total: int, status: str = "Processing") -> str:
+        """Create progress information text"""
+        percentage = (current / total) * 100
+        return f"""
+        <div style='text-align: center; padding: 10px; background-color: #f0f0f0; border-radius: 5px;'>
+            <h4>{status}</h4>
+            <p>Progress: {current}/{total} ({percentage:.1f}%)</p>
+            <div style='width: 100%; background-color: #ddd; border-radius: 10px;'>
+                <div style='width: {percentage}%; height: 20px; background-color: #4CAF50; border-radius: 10px;'></div>
+            </div>
+        </div>
+        """