utils/ui_components.py

"""
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>
        """