|
|
import gradio as gr |
|
|
import os |
|
|
|
|
|
|
|
|
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"}, |
|
|
] |
|
|
|
|
|
|
|
|
def play_audio(file): |
|
|
return f"voices/{file}" |
|
|
|
|
|
|
|
|
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); } |
|
|
} |
|
|
""" |
|
|
|
|
|
|
|
|
with gr.Blocks(css=custom_css) as demo: |
|
|
gr.Markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>") |
|
|
|
|
|
|
|
|
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]) |
|
|
|
|
|
|
|
|
demo.launch() |
