Update app.py

app.py

@@ -4,26 +4,45 @@ import asyncio
 import tempfile
 import os
 
+# -----------------------------
+# Core TTS helpers
+# -----------------------------
 async def get_voices():
     voices = await edge_tts.list_voices()
-    return {f"{v['ShortName']} - {v['Locale']} ({v['Gender']})": v['ShortName'] for v in voices}
+    # Keep label style similar to ElevenLabs voice list (clean, informative)
+    voice_labels = [
+        f"{v['ShortName']} - {v['Locale']} ({v['Gender']})"
+        for v in voices
+    ]
+    # Sort alphabetically for nicer UI
+    voice_labels.sort()
+    return voice_labels
 
 async def text_to_speech(text, voice, rate, pitch):
     if not text.strip():
-        return None, "Please enter text to convert."
+        return None, "Please enter some text to synthesize."
+
     if not voice:
         return None, "Please select a voice."
-    
-    voice_short_name = voice.split(" - ")[0]
+
+    # Voice label is like: "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, voice_short_name, rate=rate_str, pitch=pitch_str)
-    
-    # Save directly to mp3 file (Edge TTS actually outputs mp3 format)
+
+    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
         await communicate.save(tmp_path)
-    
+
     return tmp_path, None
 
 async def tts_interface(text, voice, rate, pitch):
@@ -32,95 +51,314 @@ async def tts_interface(text, voice, rate, pitch):
         return audio, gr.Warning(warning)
     return audio, None
 
+# -----------------------------
+# Eburon Speech – ElevenLabs-like UI
+# -----------------------------
+EBURON_CSS = """
+body {
+    background: radial-gradient(circle at top left, #0f172a 0, #020617 40%, #020617 100%);
+    color: #e5e7eb;
+}
+
+/* Global font & smoothing */
+* {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* 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;
+}
+
+#eburon-brand-title {
+    display: flex;
+    flex-direction: column;
+}
+
+#eburon-brand-title span:nth-child(1) {
+    font-size: 19px;
+    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 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+#eburon-script-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #e5e7eb;
+}
+
+#eburon-script-subtitle {
+    font-size: 11px;
+    color: #9ca3af;
+}
+
+/* Voice header */
+#eburon-voice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+#eburon-voice-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #e5e7eb;
+}
+
+#eburon-voice-subtitle {
+    font-size: 11px;
+    color: #9ca3af;
+}
+
+/* Generate row */
+#eburon-generate-row {
+    margin-top: 12px;
+}
+
+/* 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);
+    border: none;
+}
+
+#eburon-generate-btn button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.95);
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+"""
+
 async def create_demo():
     voices = await get_voices()
-    
-    with gr.Blocks(analytics_enabled=False) as demo:
-        gr.Markdown("# 🎙️ Edge TTS Text-to-Speech")
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("## Text-to-Speech with Microsoft Edge TTS")
-                gr.Markdown("""
-                Convert text to speech using Microsoft Edge TTS. 
-                Adjust speech rate and pitch: 0 is default, positive values increase, negative values decrease.
-                """)
-                
-                gr.HTML("""
-                <div style="margin: 20px 0; padding: 15px; border: 1px solid #4CAF50; border-radius: 10px; background-color: #f1f8e9;">
-                    <p style="margin-top: 0;"><b>Looking for the new version with more features?</b></p>
-                    <p>The new version includes:</p>
-                    <ul>
-                        <li><b>SRT Subtitle Support</b>: Upload SRT files or input SRT format text</li>
-                        <li><b>File Upload</b>: Easily upload TXT or SRT files</li>
-                        <li><b>Smart Format Detection</b>: Detects plain text or SRT format</li>
-                        <li><b>MP3 Output</b>: Generate high-quality MP3 audio</li>
-                    </ul>
-                    <div style="text-align: center; margin-top: 15px;">
-                        <a href="https://text-to-speech.wingetgui.com/" target="_blank" 
-                           style="display: inline-block; 
-                                  background: linear-gradient(45deg, #4CAF50, #8BC34A); 
-                                  color: white; 
-                                  padding: 12px 30px; 
-                                  text-decoration: none; 
-                                  border-radius: 30px; 
-                                  font-weight: bold; 
-                                  font-size: 16px;
-                                  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
-                                  transition: all 0.3s ease;">Try New Version ➔</a>
+
+    with gr.Blocks(
+        analytics_enabled=False,
+        css=EBURON_CSS,
+        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>
-                """)
-            
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div style="height: 100%; background-color: #f0f8ff; padding: 15px; border-radius: 10px;">
-                    <h2 style="color: #1e90ff; margin-top: 0;">Turn Your Text Into Professional Videos!</h2>
-                    <ul style="list-style-type: none; padding-left: 0;">
-                        <li>✅ <b>40+ languages and 300+ voices supported</b></li>
-                        <li>✅ <b>Custom backgrounds, music, and visual effects</b></li>
-                        <li>✅ <b>Create engaging video content from simple text</b></li>
-                        <li>✅ <b>Perfect for educators, content creators, and marketers</b></li>
-                    </ul>
-                    <div style="text-align: center; margin-top: 20px;">
-                        <span style="font-size: 96px;">🎬</span>
-                        <div style="margin-top: 15px;">
-                            <a href="https://text2video.wingetgui.com/" target="_blank" 
-                               style="display: inline-block; 
-                                      background: linear-gradient(45deg, #2196F3, #21CBF3); 
-                                      color: white; 
-                                      padding: 12px 30px; 
-                                      text-decoration: none; 
-                                      border-radius: 30px; 
-                                      font-weight: bold; 
-                                      font-size: 16px;
-                                      box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
-                                      transition: all 0.3s ease;">Try Text-to-Video ➔</a>
-                        </div>
-                    </div>
+                <div id="eburon-header-right">
+                    <span>Realtime TTS</span>
+                    <span>•</span>
+                    <span>Studio Grade Voices</span>
                 </div>
-                """)
-                
+            </div>
+            """
+        )
+
         with gr.Row():
-            with gr.Column():
-                text_input = gr.Textbox(label="Input Text", lines=5)
-                voice_dropdown = gr.Dropdown(choices=[""] + list(voices.keys()), label="Select Voice", value="")
-                rate_slider = gr.Slider(minimum=-50, maximum=50, value=0, label="Speech Rate Adjustment (%)", step=1)
-                pitch_slider = gr.Slider(minimum=-20, maximum=20, value=0, label="Pitch Adjustment (Hz)", step=1)
-                
-                generate_btn = gr.Button("Generate Speech", variant="primary")
-                
-                audio_output = gr.Audio(label="Generated Audio", type="filepath")
-                warning_md = gr.Markdown(label="Warning", visible=False)
-                
-                generate_btn.click(
-                    fn=tts_interface,
-                    inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
-                    outputs=[audio_output, warning_md]
+            # 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>
+                    """
+                )
+
+                with gr.Group(elem_classes="eburon-card"):
+                    text_input = gr.Textbox(
+                        label="",
+                        placeholder="Write your narration, dialogue, or public talk script here...",
+                        lines=10
+                    )
+
+            # 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>
+                    """
                 )
-        
-        gr.Markdown("Experience the power of Edge TTS for text-to-speech conversion, and explore our advanced Text-to-Video Converter for even more creative possibilities!")
-    
+
+                with gr.Group(elem_classes="eburon-card"):
+                    voice_dropdown = gr.Dropdown(
+                        choices=[""] + voices,
+                        label="Voice",
+                        value="",
+                        info="Pick a voice from the Edge TTS catalog."
+                    )
+
+                    rate_slider = gr.Slider(
+                        minimum=-50,
+                        maximum=50,
+                        value=0,
+                        label="Speed",
+                        step=1,
+                        info="Negative is slower, positive is faster."
+                    )
+
+                    pitch_slider = gr.Slider(
+                        minimum=-20,
+                        maximum=20,
+                        value=0,
+                        label="Pitch",
+                        step=1,
+                        info="Negative is deeper, positive is brighter."
+                    )
+
+        # 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 = gr.Audio(
+                        label="",
+                        type="filepath",
+                    )
+
+        generate_btn.click(
+            fn=tts_interface,
+            inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
+            outputs=[audio_output, warning_md]
+        )
+
     return demo
 
 async def main():