Update app.py

app.py

@@ -1,5 +1,4 @@
 import gradio as gr
-import os
 
 # Define available voices
 voices = [
@@ -24,31 +23,42 @@ voices = [
 def play_audio(file):
     return f"voices/{file}"
 
-# Custom CSS for styling and animations
+# Custom CSS for better design and responsiveness
 custom_css = """
 h2 {
     text-align: center;
     color: #ffffff;
-    font-size: 24px;
+    font-size: 26px;
     margin-bottom: 20px;
 }
 body {
     background-color: #121212;
     font-family: Arial, sans-serif;
 }
-.gr-box {
+.voice-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    padding: 20px;
+}
+.voice-box {
     background: #1e1e1e;
-    border-radius: 10px;
+    border-radius: 12px;
     padding: 15px;
-    margin-bottom: 20px;
     text-align: center;
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
-}
-.gr-column {
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
     display: flex;
-    justify-content: flex-start;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    margin: 10px;
+    width: 100%;
+    max-width: 220px;
+    height: 220px;
+    margin: auto;
+    transition: transform 0.2s ease-in-out;
+}
+.voice-box:hover {
+    transform: scale(1.05);
 }
 .play-btn {
     background-color: #FF5722 !important;
@@ -56,10 +66,12 @@ body {
     border-radius: 50%;
     width: 60px;
     height: 60px;
-    font-size: 30px;
-    margin-right: 15px;
+    font-size: 26px;
+    border: none;
     cursor: pointer;
+    margin-bottom: 10px;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+    transition: background 0.3s ease-in-out;
 }
 .play-btn:hover {
     background-color: #ff8a50;
@@ -74,40 +86,41 @@ body {
 }
 .voice-info {
     color: #ffffff;
-    text-align: left;
+    text-align: center;
 }
 .voice-info b {
     font-weight: bold;
+    font-size: 16px;
+}
+.voice-info span {
+    font-size: 14px;
+    color: #bbbbbb;
 }
 """
 
-# Create layout
+# Create Gradio UI
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>")
+    
+    with gr.Column(elem_classes="voice-container"):
+        for voice in voices:
+            with gr.Column(elem_classes="voice-box"):
+                # Hidden Audio Component
+                audio = gr.Audio(play_audio(voice["file"]), 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>")
+                
+                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])
 
-    # 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():
-                        # Hidden Audio Component
-                        audio = gr.Audio(play_audio(voice["file"]), autoplay=False, elem_id=voice["name"], visible=False)
-                        # Play Button with FontAwesome Icon
-                        btn = gr.Button("▶", elem_classes="play-btn")
-                        # Voice Info (Name in Bold, Other Info Normal)
-                        info = gr.Markdown(f"<div class='voice-info'><b>{voice['name']}</b><br>{voice['gender']} | {voice['country']}</div>")
-                        
-                        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
+# Launch App
 demo.launch()