Update app.py

app.py

@@ -2,380 +2,287 @@ import gradio as gr
 import edge_tts
 import asyncio
 import tempfile
-
-# -----------------------------
-# Custom CSS for Eburon Speech UI
-# -----------------------------
-EBURON_CSS = """
-body {
-    background: radial-gradient(circle at top left, #0f172a 0, #020617 40%, #020617 100%);
-    color: #e5e7eb;
+import os
+
+# ---------------------------------------------------------
+# 🎨 EBURON STUDIO BRANDING (CSS & THEME)
+# ---------------------------------------------------------
+# This CSS transforms standard Gradio into a "SaaS" look
+# inspired by premium dark-mode interfaces like ElevenLabs.
+# ---------------------------------------------------------
+
+EBURON_THEME_CSS = """
+/* RESET & FONTS */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+
+body, .gradio-container {
+    background-color: #0b0f19 !important; /* Deep dark background */
+    font-family: 'Inter', sans-serif !important;
+    color: #e2e8f0;
 }
 
-/* Global font & smoothing */
-* {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
-    -webkit-font-smoothing: antialiased;
-}
+/* HIDE GRADIO FOOTER */
+footer { display: none !important; }
 
-/* Header */
-#eburon-header {
+/* BRAND HEADER */
+.eburon-header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    padding: 18px 20px;
-    margin-bottom: 8px;
-    border-radius: 18px;
-    background: radial-gradient(circle at top left, #1e293b 0, #020617 55%);
-    border: 1px solid rgba(148, 163, 184, 0.28);
-    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
-}
-
-#eburon-logo-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-}
-
-#eburon-logo-circle {
-    width: 32px;
-    height: 32px;
-    border-radius: 999px;
-    background: conic-gradient(from 180deg, #38bdf8, #6366f1, #22c55e, #38bdf8);
-    display: flex;
     align-items: center;
-    justify-content: center;
-    box-shadow: 0 0 25px rgba(56, 189, 248, 0.5);
-    color: #020617;
-    font-weight: 800;
-    font-size: 18px;
+    padding: 1rem 0;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #1e293b;
 }
 
-#eburon-brand-title {
-    display: flex;
-    flex-direction: column;
-}
-
-#eburon-brand-title span:nth-child(1) {
-    font-size: 19px;
+.brand-logo {
+    font-size: 1.5rem;
     font-weight: 700;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: #e5e7eb;
-}
-
-#eburon-brand-title span:nth-child(2) {
-    font-size: 12px;
-    color: #9ca3af;
-}
-
-/* Header right badge */
-#eburon-header-right {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 11px;
-    color: #9ca3af;
-    padding: 6px 12px;
-    border-radius: 999px;
-    border: 1px solid rgba(148, 163, 184, 0.4);
-    background: radial-gradient(circle at top, rgba(55, 65, 81, 0.9), rgba(15, 23, 42, 0.9));
-}
-
-/* Cards */
-.eburon-card {
-    border-radius: 18px;
-    background: radial-gradient(circle at top left, #0b1120, #020617);
-    border: 1px solid rgba(30, 64, 175, 0.6);
-    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
-    padding: 16px 18px;
-}
-
-/* Script header */
-#eburon-script-header {
+    background: linear-gradient(90deg, #fff 0%, #94a3b8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 6px;
+    gap: 10px;
 }
 
-#eburon-script-title {
-    font-size: 14px;
+.brand-badge {
+    background: #1e293b;
+    color: #38bdf8;
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: 4px;
+    border: 1px solid #334155;
     font-weight: 600;
-    color: #e5e7eb;
 }
 
-#eburon-script-subtitle {
-    font-size: 11px;
-    color: #9ca3af;
+/* CARDS & CONTAINERS */
+.eburon-card {
+    background: #111827;
+    border: 1px solid #1f2937;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-/* Voice header */
-#eburon-voice-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
+/* INPUT TEXTAREA */
+textarea {
+    background-color: #0b0f19 !important;
+    border: 1px solid #374151 !important;
+    color: #f8fafc !important;
+    font-size: 1rem !important;
+    line-height: 1.6 !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease;
 }
 
-#eburon-voice-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #e5e7eb;
+textarea:focus {
+    border-color: #38bdf8 !important;
+    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
 }
 
-#eburon-voice-subtitle {
-    font-size: 11px;
-    color: #9ca3af;
-}
+/* DROPDOWNS & SLIDERS */
+.gr-form { background: transparent !important; border: none !important; }
 
-/* Generate row */
-#eburon-generate-row {
-    margin-top: 12px;
+label span {
+    color: #94a3b8 !important;
+    font-size: 0.85rem !important;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
 }
 
-/* Generate button */
-#eburon-generate-btn button {
-    width: 100%;
-    border-radius: 999px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    padding: 10px 16px;
-    background: linear-gradient(135deg, #38bdf8, #6366f1);
-    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.6);
+/* GENERATE BUTTON */
+#gen-btn {
+    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
     border: none;
+    color: white;
+    font-weight: 600;
+    padding: 12px 24px;
+    border-radius: 50px; /* Pill shape */
+    transition: transform 0.1s, box-shadow 0.2s;
+    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.5);
 }
 
-#eburon-generate-btn button:hover {
+#gen-btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.95);
+    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.6);
 }
 
-/* Audio player card */
-#eburon-audio-card {
-    border-radius: 18px;
-    background: radial-gradient(circle at top right, #0f172a, #020617);
-    border: 1px solid rgba(30, 64, 175, 0.6);
-    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85);
-    padding: 14px 16px;
+#gen-btn:active {
+    transform: translateY(1px);
 }
 
-/* Smaller labels */
-label span, .gr-textbox label, .gr-slider label, .gr-dropdown label {
-    font-size: 12px !important;
-    color: #9ca3af !important;
-}
-
-/* Textbox styling */
-textarea {
-    background-color: #020617 !important;
-    border-radius: 14px !important;
-    border: 1px solid rgba(55, 65, 81, 0.9) !important;
-    color: #e5e7eb !important;
+/* AUDIO PLAYER */
+.audio-player {
+    background: #111827 !important;
+    border: 1px solid #374151 !important;
+    border-radius: 12px !important;
 }
 
-/* Dropdown & sliders */
-select, input[type="range"] {
-    background-color: #020617 !important;
-    border-radius: 999px !important;
-    border: 1px solid rgba(55, 65, 81, 0.9) !important;
-}
-
-/* Warning styling (Gradio Alert) */
-.svelte-1g805jl {
-    border-radius: 999px !important;
-}
+/* SCROLLBAR */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: #0b0f19; }
+::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #475569; }
 """
 
-# -----------------------------
-# Core TTS helpers
-# -----------------------------
-async def get_voices():
-    voices = await edge_tts.list_voices()
-    voice_labels = [
-        f"{v['ShortName']} - {v['Locale']} ({v['Gender']})"
-        for v in voices
-    ]
-    voice_labels.sort()
-    return voice_labels
-
-
-async def text_to_speech(text, voice, rate, pitch):
-    if not text.strip():
-        return None, "Please enter some text to synthesize."
-
-    if not voice:
-        return None, "Please select a voice."
-
-    # Voice label: "en-US-AriaNeural - en-US (Female)"
-    voice_short_name = voice.split(" - ")[0].strip()
-
-    rate_str = f"{rate:+d}%"
-    pitch_str = f"{pitch:+d}Hz"
-
-    communicate = edge_tts.Communicate(
-        text=text,
-        voice=voice_short_name,
-        rate=rate_str,
-        pitch=pitch_str,
-    )
-
-    # Save to temporary MP3 file
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file:
-        tmp_path = tmp_file.name
+# ---------------------------------------------------------
+# ⚙️ BACKEND LOGIC (EDGE TTS)
+# ---------------------------------------------------------
+
+async def get_voice_list():
+    """Fetches available voices from Edge TTS and formats them for the dropdown."""
+    try:
+        voices = await edge_tts.list_voices()
+        # Sort by locale, then name
+        voices = sorted(voices, key=lambda x: (x['Locale'], x['ShortName']))
+        
+        # Create readable labels: "English (US) - Aria (Female)"
+        formatted_voices = []
+        for v in voices:
+            label = f"{v['Locale']} - {v['ShortName'].split('-')[-1]} ({v['Gender']})"
+            value = v['ShortName']
+            formatted_voices.append((label, value))
+            
+        return formatted_voices
+    except Exception as e:
+        return [("Error fetching voices", "en-US-AriaNeural")]
+
+async def generate_speech(text, voice, rate_val, pitch_val):
+    """
+    Generates audio from text using Edge TTS.
+    rate_val: int (-50 to +50)
+    pitch_val: int (-50 to +50)
+    """
+    if not text or not text.strip():
+        return None
+    
+    # Format rate and pitch string for edge-tts (e.g., "+10%", "-5Hz")
+    rate_str = f"{rate_val:+d}%"
+    pitch_str = f"{pitch_val:+d}Hz"
+    
+    try:
+        communicate = edge_tts.Communicate(text, voice, rate=rate_str, pitch=pitch_str)
+        
+        # Create a temp file
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file:
+            tmp_path = tmp_file.name
+            
         await communicate.save(tmp_path)
-
-    return tmp_path, None
-
-
-async def tts_interface(text, voice, rate, pitch):
-    audio, warning = await text_to_speech(text, voice, rate, pitch)
-    if warning:
-        # Gradio 6: Warning modal object
-        return audio, gr.Warning(warning)
-    return audio, None
-
-
-# -----------------------------
-# Eburon Speech – ElevenLabs-like UI
-# -----------------------------
-async def create_demo():
-    voices = await get_voices()
-
-    # Gradio 6: do NOT pass css to Blocks, move it to demo.launch()
-    with gr.Blocks(
-        analytics_enabled=False,
-        title="Eburon Speech Studio"
-    ) as demo:
-        # Header
-        gr.HTML(
-            """
-            <div id="eburon-header">
-                <div id="eburon-logo-badge">
-                    <div id="eburon-logo-circle">E</div>
-                    <div id="eburon-brand-title">
-                        <span>EBURON SPEECH</span>
-                        <span>AI voice studio powered by Edge TTS</span>
-                    </div>
-                </div>
-                <div id="eburon-header-right">
-                    <span>Realtime TTS</span>
-                    <span>•</span>
-                    <span>Studio Grade Voices</span>
-                </div>
+        return tmp_path
+    except Exception as e:
+        print(f"Error: {e}")
+        return None
+
+# ---------------------------------------------------------
+# 🖥️ UI CONSTRUCTION (GRADIO BLOCKS)
+# ---------------------------------------------------------
+
+async def build_interface():
+    # Pre-fetch voices
+    voice_choices = await get_voice_list()
+    # Default to a popular US voice if available, else the first one
+    default_voice = "en-US-ChristopherNeural"
+    if not any(v[1] == default_voice for v in voice_choices):
+        default_voice = voice_choices[0][1] if voice_choices else ""
+
+    with gr.Blocks(css=EBURON_THEME_CSS, title="Eburon Speech Studio") as demo:
+        
+        # --- HEADER ---
+        gr.HTML("""
+        <div class="eburon-header">
+            <div class="brand-logo">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;">
+                    <circle cx="12" cy="12" r="10" stroke="#38bdf8" stroke-width="2"/>
+                    <path d="M8 12L11 15L16 9" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Eburon Speech <span style="font-weight:300; color:#64748b; margin-left:4px;">Studio</span>
             </div>
-            """
-        )
-
-        with gr.Row():
-            # LEFT: Script panel
-            with gr.Column(scale=2, min_width=450):
-                gr.HTML(
-                    """
-                    <div id="eburon-script-header">
-                        <div>
-                            <div id="eburon-script-title">Script</div>
-                            <div id="eburon-script-subtitle">
-                                Paste or type your text. Long-form friendly.
-                            </div>
-                        </div>
-                        <div style="font-size: 11px; color: #6b7280;">
-                            ⏱️ Approx. 5k characters per generation
-                        </div>
-                    </div>
-                    """
-                )
-
+            <div class="brand-badge">v1.8 Pro</div>
+        </div>
+        """)
+
+        with gr.Row(equal_height=False):
+            
+            # --- LEFT COLUMN: INPUT ---
+            with gr.Column(scale=3):
                 with gr.Group(elem_classes="eburon-card"):
-                    text_input = gr.Textbox(
+                    gr.Markdown("### Script \nType or paste the text you want to generate.")
+                    txt_input = gr.Textbox(
                         label="",
-                        placeholder="Write your narration, dialogue, or public talk script here...",
-                        lines=10
+                        placeholder="Once upon a time in a digital realm far, far away...",
+                        lines=12,
+                        max_lines=20,
+                        show_label=False
                     )
+                    
+                    with gr.Row(style="margin-top: 20px; align-items: center;"):
+                        gen_button = gr.Button("Generate Speech", elem_id="gen-btn", scale=0)
+                        status_msg = gr.Markdown("", visible=True)
 
-            # RIGHT: Voice & settings panel
-            with gr.Column(scale=1, min_width=320):
-                gr.HTML(
-                    """
-                    <div id="eburon-voice-header">
-                        <div>
-                            <div id="eburon-voice-title">Voice & Settings</div>
-                            <div id="eburon-voice-subtitle">
-                                Choose a voice and fine-tune its delivery.
-                            </div>
-                        </div>
-                        <div style="font-size: 11px; color: #6b7280;">
-                            🎧 Best experienced with headphones
-                        </div>
-                    </div>
-                    """
-                )
-
+            # --- RIGHT COLUMN: SETTINGS ---
+            with gr.Column(scale=1):
                 with gr.Group(elem_classes="eburon-card"):
+                    gr.Markdown("### Voice Settings")
+                    
                     voice_dropdown = gr.Dropdown(
-                        choices=[""] + voices,
-                        label="Voice",
-                        value="",
-                        info="Pick a voice from the Edge TTS catalog."
+                        choices=voice_choices,
+                        value=default_voice,
+                        label="Voice Model",
+                        interactive=True,
+                        info="Select accent and character"
                     )
-
+                    
+                    gr.Markdown("---") # Visual separator
+                    
                     rate_slider = gr.Slider(
-                        minimum=-50,
-                        maximum=50,
-                        value=0,
-                        label="Speed",
-                        step=1,
-                        info="Negative is slower, positive is faster."
+                        minimum=-50, maximum=50, value=0, step=1,
+                        label="Stability (Speed)",
+                        info="Adjust speaking rate"
                     )
-
+                    
                     pitch_slider = gr.Slider(
-                        minimum=-20,
-                        maximum=20,
-                        value=0,
-                        label="Pitch",
-                        step=1,
-                        info="Negative is deeper, positive is brighter."
+                        minimum=-20, maximum=20, value=0, step=1,
+                        label="Clarity (Pitch)",
+                        info="Adjust vocal frequency"
                     )
 
-        # Bottom row: Generate + audio preview
-        with gr.Row(elem_id="eburon-generate-row"):
-            with gr.Column(scale=1, min_width=260):
-                generate_btn = gr.Button(
-                    "Generate speech",
-                    variant="primary",
-                    elem_id="eburon-generate-btn"
-                )
-                warning_md = gr.Markdown(visible=False)
-
-            with gr.Column(scale=2, min_width=420):
-                with gr.Group(elem_id="eburon-audio-card"):
-                    gr.Markdown(
-                        "##### Playback\nListen to your generated voice clip below."
-                    )
+        # --- AUDIO OUTPUT ROW ---
+        with gr.Row(elem_id="audio-row", visible=True):
+            with gr.Column():
+                with gr.Group(elem_classes="eburon-card"):
+                    gr.Markdown("### Generated Audio")
                     audio_output = gr.Audio(
-                        label="",
-                        type="filepath",
+                        label="Output", 
+                        type="filepath", 
+                        elem_classes="audio-player",
+                        autoplay=True
                     )
 
-        generate_btn.click(
-            fn=tts_interface,
-            inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
-            outputs=[audio_output, warning_md],
+        # --- EVENT LISTENERS ---
+        gen_button.click(
+            fn=generate_speech,
+            inputs=[txt_input, voice_dropdown, rate_slider, pitch_slider],
+            outputs=[audio_output]
         )
 
     return demo
 
-
-async def main():
-    demo = await create_demo()
-    demo.queue(default_concurrency_limit=50)
-
-    # Gradio 6: css + footer_links go in launch(), show_api is removed
-    demo.launch(
-        css=EBURON_CSS,
-        footer_links=["gradio", "settings"],  # hides API link (like show_api=False)
-    )
-
+# ---------------------------------------------------------
+# 🚀 EXECUTION
+# ---------------------------------------------------------
 
 if __name__ == "__main__":
-    asyncio.run(main())
+    # Asyncio loop handling for EdgeTTS
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
+    
+    demo_app = loop.run_until_complete(build_interface())
+    
+    # Launch with allowed paths for temp files
+    demo_app.queue().launch(
+        server_name="0.0.0.0", 
+        server_port=7860, 
+        show_api=False,
+        allowed_paths=[tempfile.gettempdir()]
+    )