Update app.py

app.py

@@ -2,28 +2,23 @@ import gradio as gr
 
 # Define available voices
 voices = [
-    {"name": "Jessica", "gender": "Female", "country": "US", "file": "voices/jessica.mp3"},
-    {"name": "Michael", "gender": "Male", "country": "UK", "file": "voices/michael.mp3"},
-    {"name": "Sophia", "gender": "Female", "country": "Canada", "file": "voices/sophia.mp3"},
-    {"name": "David", "gender": "Male", "country": "Australia", "file": "voices/david.mp3"},
+    {"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"},
 ]
 
-# Store playing state
-playing_states = {voice["file"]: False for voice in voices}
-
-# Function to toggle audio
-def toggle_audio(file):
-    global playing_states
-    playing_states[file] = not playing_states[file]  # Toggle state
-
-    # If playing, return file path; otherwise, return None to stop audio
-    return (
-        file if playing_states[file] else None,
-        "⏹️" if playing_states[file] else "▶️",  # Change button icon
-        "play-btn playing" if playing_states[file] else "play-btn",
-    )
+# Function to return audio file path
+def play_audio(file):
+    return f"voices/{file}"
 
-# Custom CSS for styling
+# Custom CSS for better design and responsiveness
 custom_css = """
 h2 {
     text-align: center;
@@ -111,6 +106,15 @@ body {
 }
 """
 
+# State to track playing voices
+playing_states = {voice["file"]: False for voice in voices}
+
+# Function to toggle play/pause
+def toggle_audio(file):
+    global playing_states
+    playing_states[file] = not playing_states[file]
+    return (f"voices/{file}" if playing_states[file] else None), gr.update(elem_classes="play-btn playing" if playing_states[file] else "play-btn")
+
 # Create Gradio UI
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>")
@@ -118,15 +122,14 @@ with gr.Blocks(css=custom_css) as demo:
     with gr.Column(elem_classes="voice-container"):
         for voice in voices:
             with gr.Column(elem_classes="voice-box"):
-                # Audio Component (Hidden, Dynamic Source)
-                audio = gr.Audio(visible=False)
-                # Play Button
-                btn = gr.Button("▶️", elem_classes="play-btn")
-                # Voice Details
+                # Hidden Audio Component
+                audio = gr.Audio(None, autoplay=False, elem_id=voice["name"], visible=False)
+                # Round Play Button
+                btn = gr.Button("▶", elem_classes="play-btn")
+                # Voice Details (Name in Bold, Other Info Below)
                 info = gr.Markdown(f"<div class='voice-info'><b>{voice['name']}</b><br><span>{voice['gender']} | {voice['country']}</span></div>")
                 
-                # Play/Pause Click Event
-                btn.click(fn=toggle_audio, inputs=[gr.State(voice["file"])], outputs=[audio, btn, btn])
+                btn.click(fn=toggle_audio, inputs=[], outputs=[audio, btn])
 
 # Launch App
-demo.launch()
+demo.launch()