Update app.py

app.py

@@ -1,136 +1,135 @@
-import streamlit as st
-import os
+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"},
 ]
 
-# Streamlit UI Setup
-st.set_page_config(page_title="Human-Like Voice Player", layout="wide")
+# Function to return audio file path
+def play_audio(file):
+    return f"voices/{file}"
 
-# Custom CSS for better styling
-st.markdown("""
-    <style>
-    body {
-        background-color: #121212;
-        font-family: Arial, sans-serif;
+# Custom CSS for better design and responsiveness
+custom_css = """
+h2 {
+    text-align: center;
+    color: #ffffff;
+    font-size: 26px;
+    margin-bottom: 20px;
+}
+body {
+    background-color: #121212;
+    font-family: Arial, sans-serif;
+}
+.voice-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* Default: 2 per row */
+    gap: 15px;
+    padding: 20px;
+}
+@media (min-width: 1024px) {
+    .voice-container {
+        grid-template-columns: repeat(3, 1fr); /* 3 per row on PC */
     }
-    h2 {
-        text-align: center;
-        color: #ffffff;
-        font-size: 28px;
-        margin-bottom: 20px;
-    }
-    .container {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 20px;
-        padding: 20px;
-    }
-    .voice-box {
-        background: #1e1e1e;
-        border-radius: 12px;
-        padding: 20px;
-        text-align: center;
-        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
-        width: 220px;
-        height: 220px;
-        transition: transform 0.2s ease-in-out;
-        position: relative;
-    }
-    .voice-box:hover {
-        transform: scale(1.05);
-    }
-    .play-btn {
-        background-color: #FF5722;
-        color: white;
-        border-radius: 50%;
-        width: 60px;
-        height: 60px;
-        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;
-    }
-    .playing {
-        background-color: #4CAF50 !important;
-    }
-    .playing::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 70px;
-        height: 70px;
-        border-radius: 50%;
-        border: 4px solid #2196F3;
-        animation: pulse 1s infinite alternate;
-        transform: translate(-50%, -50%);
-    }
-    @keyframes pulse {
-        0% { transform: scale(1); opacity: 0.7; }
-        100% { transform: scale(1.2); opacity: 1; }
-    }
-    .voice-info {
-        color: #ffffff;
-        text-align: center;
-    }
-    .voice-info b {
-        font-weight: bold;
-        font-size: 16px;
-    }
-    .voice-info span {
-        font-size: 14px;
-        color: #bbbbbb;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
-# Display heading
-st.markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>", unsafe_allow_html=True)
-
-# Layout container
-st.markdown('<div class="container">', unsafe_allow_html=True)
-
-# State for currently playing audio
-if "playing" not in st.session_state:
-    st.session_state.playing = None  # No file is playing initially
+}
+.voice-box {
+    background: #1e1e1e;
+    border-radius: 12px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    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;
+    color: white;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    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;
+    position: relative;
+}
+.play-btn.playing {
+    background-color: #4CAF50 !important; /* Green when playing */
+}
+.play-btn.playing::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    border: 4px solid #2196F3; /* Blue ring */
+    animation: pulse 1s infinite alternate;
+}
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 0.7; }
+    100% { transform: scale(1.2); opacity: 1; }
+}
+.voice-info {
+    color: #ffffff;
+    text-align: center;
+}
+.voice-info b {
+    font-weight: bold;
+    font-size: 16px;
+}
+.voice-info span {
+    font-size: 14px;
+    color: #bbbbbb;
+}
+"""
 
-# Display voice sections
-for voice in voices:
-    with st.container():
-        st.markdown(f'<div class="voice-box">', unsafe_allow_html=True)
-        
-        # Button for Play/Pause
-        is_playing = st.session_state.playing == voice["file"]
-        btn_label = "⏹️" if is_playing else "▶️"
-        btn_class = "play-btn playing" if is_playing else "play-btn"
+# State to track playing voices
+playing_states = {voice["file"]: False for voice in voices}
 
-        if st.button(btn_label, key=voice["file"]):
-            # Toggle Play/Pause
-            if st.session_state.playing == voice["file"]:
-                st.session_state.playing = None  # Stop audio
-            else:
-                st.session_state.playing = voice["file"]  # Play new audio
-        
-        # Show audio player if playing
-        if is_playing:
-            audio_path = os.path.abspath(voice["file"])
-            st.audio(audio_path, format="audio/mp3", start_time=0)
+# 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")
 
-        # Voice info
-        st.markdown(
-            f"<div class='voice-info'><b>{voice['name']}</b><br><span>{voice['gender']} | {voice['country']}</span></div>",
-            unsafe_allow_html=True
-        )
-        
-        st.markdown("</div>", unsafe_allow_html=True)
+# 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(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>")
+                
+                btn.click(fn=toggle_audio, inputs=[], outputs=[audio, btn])
 
-st.markdown("</div>", unsafe_allow_html=True)
+# Launch App
+demo.launch()