import gradio as gr
import os

# Define available voices
voices = [
    {"name": "Jessica", "gender": "Female", "country": "US", "file": "jessica.mp3"},
    {"name": "Michael", "gender": "Male", "country": "UK", "file": "michael.mp3"},
    {"name": "Sophia", "gender": "Female", "country": "Canada", "file": "sophia.mp3"},
    {"name": "David", "gender": "Male", "country": "Australia", "file": "david.mp3"},
    {"name": "Emma", "gender": "Female", "country": "Germany", "file": "emma.mp3"},
    {"name": "Lucas", "gender": "Male", "country": "France", "file": "lucas.mp3"},
    {"name": "Liam", "gender": "Male", "country": "India", "file": "liam.mp3"},
    {"name": "Olivia", "gender": "Female", "country": "Brazil", "file": "olivia.mp3"},
    {"name": "Noah", "gender": "Male", "country": "Japan", "file": "noah.mp3"},
    {"name": "Ava", "gender": "Female", "country": "South Korea", "file": "ava.mp3"},
    {"name": "Isabella", "gender": "Female", "country": "Italy", "file": "isabella.mp3"},
    {"name": "Ethan", "gender": "Male", "country": "Spain", "file": "ethan.mp3"},
    {"name": "Mason", "gender": "Male", "country": "Netherlands", "file": "mason.mp3"},
    {"name": "Mia", "gender": "Female", "country": "Russia", "file": "mia.mp3"},
    {"name": "Charlotte", "gender": "Female", "country": "China", "file": "charlotte.mp3"},
]

# Function to return audio file path
def play_audio(file):
    return f"voices/{file}"

# Custom CSS for styling and animations
custom_css = """
h2 {
    text-align: center;
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 20px;
}
body {
    background-color: #121212;
    font-family: Arial, sans-serif;
}
.gr-box {
    background: #1e1e1e;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}
.play-btn {
    background-color: #FF5722 !important;
    color: white;
    border-radius: 50px;
    width: 100px;
    height: 40px;
    font-size: 14px;
}
.playing {
    animation: pulse 1s infinite alternate;
}
@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
"""

# Create layout
with gr.Blocks(css=custom_css) as demo:
    gr.Markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>")

    # Grid layout (3 columns, 5 rows)
    for i in range(0, len(voices), 3):
        with gr.Row():
            for j in range(3):
                if i + j < len(voices):
                    voice = voices[i + j]
                    with gr.Column():
                        audio = gr.Audio(play_audio(voice["file"]), autoplay=False, elem_id=voice["name"])
                        btn = gr.Button(f"▶ {voice['name']}", elem_classes="play-btn")
                        info = gr.Markdown(f"**{voice['name']}**<br>{voice['gender']} | {voice['country']}")
                        
                        def start_animation():
                            return gr.update(elem_classes="playing")
                        
                        def stop_animation():
                            return gr.update(elem_classes="")
                        
                        btn.click(fn=play_audio, inputs=[], outputs=[audio])
                        btn.click(fn=start_animation, inputs=[], outputs=[btn])
                        audio.change(fn=stop_animation, inputs=[], outputs=[btn])

# Launch the app
demo.launch()