Update app.py

app.py

@@ -2,46 +2,77 @@ import gradio as gr
 import edge_tts
 import asyncio
 import tempfile
+import re
 
 EBURON_VERSION = "1.8"
 
+# ---------------------------------
+# Emotion presets (ElevenLabs-ish)
+# ---------------------------------
+EMOTION_PRESETS = {
+    "Neutral": {
+        "rate_offset": 0,
+        "pitch_offset": 0,
+    },
+    "Comedy / Playful (Taglish)": {
+        "rate_offset": 12,   # faster
+        "pitch_offset": 4,   # slightly brighter
+    },
+    "Storytelling / Warm": {
+        "rate_offset": -6,   # a bit slower
+        "pitch_offset": 2,   # slightly warmer
+    },
+    "Emotional / Heartfelt": {
+        "rate_offset": -10,  # slower
+        "pitch_offset": 5,   # a bit more open / emotional
+    },
+    "Angry / Rant": {
+        "rate_offset": 15,
+        "pitch_offset": 3,
+    },
+    "Sad / Dramatic": {
+        "rate_offset": -18,
+        "pitch_offset": -5,
+    },
+}
+
 # -----------------------------
-# Custom CSS – ElevenLabs-style, Eburon-branded
+# Custom CSS – injected via <style> for Gradio 4.36.1+
 # -----------------------------
-EBURON_CSS = f"""
-body {{
+EBURON_CSS = """
+body {
     background: radial-gradient(circle at top left, #020617 0, #020617 45%, #020617 100%);
     color: #e5e7eb;
     margin: 0;
     padding: 0;
-}}
+}
 
-* {{
+* {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
     -webkit-font-smoothing: antialiased;
-}}
+}
 
-#eburon-root {{
+#eburon-root {
     max-width: 1100px;
     margin: 0 auto;
     padding: 20px 18px 32px 18px;
-}}
+}
 
 /* Top nav bar (fake, for look) */
-#eburon-top-nav {{
+#eburon-top-nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 18px;
-}}
+}
 
-#eburon-nav-left {{
+#eburon-nav-left {
     display: flex;
     align-items: center;
     gap: 14px;
-}}
+}
 
-#eburon-logo-circle {{
+#eburon-logo-circle {
     width: 32px;
     height: 32px;
     border-radius: 999px;
@@ -53,27 +84,27 @@ body {{
     font-weight: 800;
     font-size: 17px;
     box-shadow: 0 0 22px rgba(59, 130, 246, 0.8);
-}}
+}
 
-#eburon-product-title {{
+#eburon-product-title {
     display: flex;
     flex-direction: column;
-}}
+}
 
-#eburon-product-title span:nth-child(1) {{
+#eburon-product-title span:nth-child(1) {
     font-size: 18px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: #e5e7eb;
-}}
+}
 
-#eburon-product-title span:nth-child(2) {{
+#eburon-product-title span:nth-child(2) {
     font-size: 11px;
     color: #9ca3af;
-}}
+}
 
-#eburon-nav-tabs {{
+#eburon-nav-tabs {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -82,96 +113,96 @@ body {{
     background: rgba(15, 23, 42, 0.9);
     border: 1px solid rgba(55, 65, 81, 0.9);
     font-size: 11px;
-}}
+}
 
-.eburon-tab {{
+.eburon-tab {
     padding: 5px 10px;
     border-radius: 999px;
     cursor: default;
     color: #9ca3af;
-}}
+}
 
-.eburon-tab-active {{
+.eburon-tab-active {
     background: linear-gradient(135deg, #38bdf8, #6366f1);
     color: #020617;
     font-weight: 600;
-}}
+}
 
-#eburon-nav-right {{
+#eburon-nav-right {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 11px;
     color: #9ca3af;
-}}
+}
 
-#eburon-pill-version {{
+#eburon-pill-version {
     padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid rgba(148, 163, 184, 0.4);
     background: radial-gradient(circle at top, rgba(31, 41, 55, 1), rgba(15, 23, 42, 1));
-}}
+}
 
-#eburon-pill-usage {{
+#eburon-pill-usage {
     padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid rgba(59, 130, 246, 0.7);
     background: radial-gradient(circle at top, rgba(30, 64, 175, 0.85), rgba(15, 23, 42, 1));
-}}
+}
 
 /* Main cards */
-.eburon-main-card {{
+.eburon-main-card {
     border-radius: 20px;
     background: radial-gradient(circle at top left, #020617, #020617 60%);
     border: 1px solid rgba(51, 65, 85, 0.9);
     box-shadow: 0 24px 48px rgba(15, 23, 42, 0.95);
     padding: 16px 18px 18px 18px;
-}}
+}
 
 /* Headings inside cards */
-.eburon-section-header {{
+.eburon-section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
-}}
+}
 
-.eburon-section-title {{
+.eburon-section-title {
     font-size: 14px;
     font-weight: 600;
     color: #e5e7eb;
-}}
+}
 
-.eburon-section-subtitle {{
+.eburon-section-subtitle {
     font-size: 11px;
     color: #9ca3af;
-}}
+}
 
 /* Script textarea */
-textarea {{
+textarea {
     background-color: #020617 !important;
     border-radius: 14px !important;
     border: 1px solid rgba(55, 65, 81, 0.9) !important;
     color: #e5e7eb !important;
     font-size: 13px !important;
-}}
+}
 
 /* Right panel controls */
-select, input[type="range"] {{
+select, input[type="range"] {
     background-color: #020617 !important;
     border-radius: 999px !important;
     border: 1px solid rgba(55, 65, 81, 0.9) !important;
     color: #e5e7eb !important;
-}}
+}
 
 /* Labels */
-label span, .gr-textbox label, .gr-slider label, .gr-dropdown label {{
+label span, .gr-textbox label, .gr-slider label, .gr-dropdown label {
     font-size: 11px !important;
     color: #9ca3af !important;
-}}
+}
 
 /* Generate button */
-#eburon-generate-btn button {{
+#eburon-generate-btn button {
     width: 100%;
     border-radius: 999px;
     font-weight: 600;
@@ -180,55 +211,80 @@ label span, .gr-textbox label, .gr-slider label, .gr-dropdown label {{
     background: linear-gradient(135deg, #22c55e, #38bdf8);
     box-shadow: 0 12px 32px rgba(56, 189, 248, 0.75);
     border: none;
-}}
+}
 
-#eburon-generate-btn button:hover {{
+#eburon-generate-btn button:hover {
     transform: translateY(-1px);
     box-shadow: 0 18px 42px rgba(56, 189, 248, 0.95);
-}}
+}
 
 /* Audio player container */
-#eburon-audio-card {{
+#eburon-audio-card {
     border-radius: 18px;
     background: radial-gradient(circle at top right, #020617, #020617 65%);
     border: 1px solid rgba(55, 65, 81, 0.9);
     box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
     padding: 12px 14px 14px 14px;
-}}
+}
 
-#eburon-audio-header {{
+#eburon-audio-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 4px;
-}}
+}
 
-#eburon-audio-title {{
+#eburon-audio-title {
     font-size: 12px;
     font-weight: 600;
     color: #e5e7eb;
-}}
+}
 
-#eburon-audio-subtitle {{
+#eburon-audio-subtitle {
     font-size: 11px;
     color: #9ca3af;
-}}
+}
 
 /* Warning styling (Gradio Alert) */
-.svelte-1g805jl {{
+.svelte-1g805jl {
     border-radius: 999px !important;
-}}
+}
 
 /* Small badges */
-.eburon-mini-pill {{
+.eburon-mini-pill {
     padding: 2px 7px;
     border-radius: 999px;
     border: 1px solid rgba(75, 85, 99, 0.9);
     font-size: 10px;
     color: #9ca3af;
-}}
+}
 """
 
+# -----------------------------
+# Helper: normalize expressive cues like [pause], [laugh]
+# -----------------------------
+def normalize_script_for_tts(text: str) -> str:
+    """
+    Convert expressive cues [pause], [laugh], [energetic intro] etc.
+    into punctuation so Edge TTS won't literally read the brackets.
+    """
+
+    def _repl(match: re.Match) -> str:
+        cue = match.group(1).strip().lower()
+        if "pause" in cue or "beat" in cue:
+            return " … "
+        if "laugh" in cue or "chuckle" in cue:
+            return " "
+        if "intro" in cue or "outro" in cue:
+            return " "
+        if "soft" in cue or "whisper" in cue:
+            return " "
+        # Default: remove bracket cue
+        return " "
+
+    return re.sub(r"\[(.*?)\]", _repl, text)
+
+
 # -----------------------------
 # Core TTS helpers
 # -----------------------------
@@ -242,20 +298,39 @@ async def get_voices():
     return voice_labels
 
 
-async def text_to_speech(text, voice, rate, pitch):
+async def text_to_speech(text, voice, rate, pitch, emotion, expressiveness):
     if not text.strip():
         return None, "Please enter some text to synthesize."
 
     if not voice:
         return None, "Please select a voice."
 
+    # Clean expressive brackets for TTS
+    clean_text = normalize_script_for_tts(text)
+
     voice_short_name = voice.split(" - ")[0].strip()
 
-    rate_str = f"{rate:+d}%"
-    pitch_str = f"{pitch:+d}Hz"
+    # -----------------------------
+    # Emotion → rate/pitch shaping
+    # -----------------------------
+    preset = EMOTION_PRESETS.get(emotion or "Neutral", EMOTION_PRESETS["Neutral"])
+    factor = max(0.0, float(expressiveness) / 100.0)  # 0 to 2.0
+
+    rate_offset = int(preset["rate_offset"] * factor)
+    pitch_offset = int(preset["pitch_offset"] * factor)
+
+    eff_rate = int(rate + rate_offset)
+    eff_pitch = int(pitch + pitch_offset)
+
+    # Clamp into slider ranges
+    eff_rate = max(-50, min(50, eff_rate))
+    eff_pitch = max(-20, min(20, eff_pitch))
+
+    rate_str = f"{eff_rate:+d}%"
+    pitch_str = f"{eff_pitch:+d}Hz"
 
     communicate = edge_tts.Communicate(
-        text=text,
+        text=clean_text,
         voice=voice_short_name,
         rate=rate_str,
         pitch=pitch_str,
@@ -268,11 +343,18 @@ async def text_to_speech(text, voice, rate, pitch):
     return tmp_path, None
 
 
-async def tts_interface(text, voice, rate, pitch):
-    audio, warning = await text_to_speech(text, voice, rate, pitch)
+async def tts_interface(text, voice, rate, pitch, emotion, expressiveness):
+    audio, warning = await text_to_speech(
+        text=text,
+        voice=voice,
+        rate=rate,
+        pitch=pitch,
+        emotion=emotion,
+        expressiveness=expressiveness,
+    )
     if warning:
-        return audio, gr.Warning(warning)
-    return audio, None
+        return audio, gr.update(value=f"⚠️ {warning}", visible=True)
+    return audio, gr.update(value="", visible=False)
 
 
 # -----------------------------
@@ -281,11 +363,37 @@ async def tts_interface(text, voice, rate, pitch):
 async def create_demo():
     voices = await get_voices()
 
-    with gr.Blocks(
-        analytics_enabled=False,
-        title="Eburon Speech Studio v1.8"
-    ) as demo:
-        # Root container for centralized layout
+    # Sample Taglish Alex Calleja–style comedy script as default
+    sample_script = (
+        "[energetic intro]\n"
+        "Magandang gabi sa inyong lahat! Ako nga pala si Alex… hindi Calleja, pero pwede na rin sa murang kopya. "
+        "[pause] Parang Shopee version ng Netflix special.\n\n"
+        "[conversational]\n"
+        "Alam n’yo, mahirap na maging adult ngayon. Nung bata tayo, gusto natin tumanda para “walang mag-uutos”. "
+        "Ngayon, tumanda tayo… at ang pinaka-maingay mag-utos: BILLS. [pause]\n"
+        "Kuryente, tubig, WiFi, GCash utang, BNPL… parang ex na hindi makamove on. Laging bumabalik buwan-buwan.\n\n"
+        "[teasing tone]\n"
+        "Tapos ‘yung kuryente, grabe. Kahit wala ka sa bahay, mataas pa rin bill. "
+        "Parang Meralco, nag-a-assume: “Alam naming may iyak ka sa dilim, may load ‘yan sa emosyon.” [laugh]\n\n"
+        "[family observation]\n"
+        "Sa pamilya, laging may tita na human notification. Wala kang alam? Siya meron. "
+        "Pagdating mo sa handaan: “O, tumaba ka ah… wala ka pa ring jowa? Ano na plano mo sa buhay?” "
+        "Parang performance appraisal na walang increase. [pause]\n\n"
+        "[jeepney bit]\n"
+        "Sa jeep, may tatlong klaseng pasahero: una, ‘yung DJ ng boundary — siya taga-abot ng bayad, "
+        "taga-sabi ng “Bayad daw po sa likod!”, parang COO ng jeep; pangalawa, ‘yung ninja na ayaw mag-abot ng bayad, "
+        "kahit tumama na sa siko niya yung pera; pangatlo, ‘yung tulog na may superpower — biglang gigising: "
+        "“Sa kanto lang po!” sakto pa rin ang timing.\n\n"
+        "[closer, warm]\n"
+        "Pero kahit ganoon, solid pa rin tayo mga Pinoy. Kahit pagod, late, traffic, may punchline pa rin sa dulo. "
+        "Yun ang talent natin: kahit hirap sa buhay, may follow-up joke pa rin.\n"
+        "Maraming salamat, good night! [pause]"
+    )
+
+    with gr.Blocks(title="Eburon Speech Studio v1.8") as demo:
+        # Inject CSS (works in Gradio 4.36.1 and 6+)
+        gr.HTML(f"<style>{EBURON_CSS}</style>", elem_id="eburon-style-inject")
+
         with gr.Column(elem_id="eburon-root"):
             # Top nav
             gr.HTML(
@@ -308,14 +416,14 @@ async def create_demo():
                             Studio {EBURON_VERSION}
                         </div>
                         <div id="eburon-pill-usage">
-                            Edge TTS · Local session
+                            edge_tts 7.2.0 · gradio 4.36.1
                         </div>
                     </div>
                 </div>
                 """
             )
 
-            # Main card with left/right layout
+            # Main: script + voice/emotion
             with gr.Row():
                 # Left: Script
                 with gr.Column(scale=2, min_width=460):
@@ -326,22 +434,23 @@ async def create_demo():
                                 <div>
                                     <div class="eburon-section-title">Script</div>
                                     <div class="eburon-section-subtitle">
-                                        Type or paste your text. Ideal for narrations, dialogues, or public talks.
+                                        Taglish Alex Calleja–style skit with expressive cues like [pause], [laugh], [energetic intro].
                                     </div>
                                 </div>
                                 <div class="eburon-mini-pill">
-                                    Character-safe · Long-form friendly
+                                    Bracket cues are auto-cleaned before TTS
                                 </div>
                             </div>
                             """
                         )
                         text_input = gr.Textbox(
                             label="",
-                            placeholder="Write your script as if you're inside Eburon Speech Studio...",
-                            lines=12,
+                            value=sample_script,
+                            placeholder="Write your expressive Taglish skit here...",
+                            lines=14,
                         )
 
-                # Right: Voice settings
+                # Right: Voice & expressive controls
                 with gr.Column(scale=1, min_width=340):
                     with gr.Group(elem_classes="eburon-main-card"):
                         gr.HTML(
@@ -350,11 +459,11 @@ async def create_demo():
                                 <div>
                                     <div class="eburon-section-title">Voice & Delivery</div>
                                     <div class="eburon-section-subtitle">
-                                        Select a voice and tune its speed and tone.
+                                        ElevenLabs v3 style: emotion preset + intensity + fine speed & pitch.
                                     </div>
                                 </div>
                                 <div class="eburon-mini-pill">
-                                    Edge voices
+                                    Emotion-shaped rate & pitch
                                 </div>
                             </div>
                             """
@@ -364,36 +473,52 @@ async def create_demo():
                             choices=[""] + voices,
                             label="Voice",
                             value="",
-                            info="Pick a neural voice from the Edge TTS catalog."
+                            info="Pick a neural voice from the Edge TTS catalog.",
                         )
 
                         rate_slider = gr.Slider(
                             minimum=-50,
                             maximum=50,
                             value=0,
-                            label="Speed",
+                            label="Base Speed",
                             step=1,
-                            info="Negative is slower · Positive is faster"
+                            info="Manual speed baseline. Emotion will adjust on top of this.",
                         )
 
                         pitch_slider = gr.Slider(
                             minimum=-20,
                             maximum=20,
                             value=0,
-                            label="Pitch",
+                            label="Base Pitch",
                             step=1,
-                            info="Negative is deeper · Positive is brighter"
+                            info="Manual pitch baseline. Emotion will adjust on top of this.",
                         )
 
-            # Bottom row: Generate + audio player
+                        emotion_dropdown = gr.Dropdown(
+                            label="Emotion preset",
+                            choices=list(EMOTION_PRESETS.keys()),
+                            value="Comedy / Playful (Taglish)",
+                            info="High-level emotional profile similar to ElevenLabs v3.",
+                        )
+
+                        expressiveness_slider = gr.Slider(
+                            minimum=0,
+                            maximum=200,
+                            value=100,
+                            step=5,
+                            label="Expressiveness (intensity)",
+                            info="0 = off, 100 = normal, 200 = max emotional shaping.",
+                        )
+
+            # Bottom: Generate + audio
             with gr.Row():
                 with gr.Column(scale=1, min_width=260):
                     generate_btn = gr.Button(
                         "Generate",
                         variant="primary",
-                        elem_id="eburon-generate-btn"
+                        elem_id="eburon-generate-btn",
                     )
-                    warning_md = gr.Markdown(visible=False)
+                    warning_md = gr.Markdown("", visible=False)
 
                 with gr.Column(scale=2, min_width=460):
                     with gr.Group(elem_id="eburon-audio-card"):
@@ -403,11 +528,11 @@ async def create_demo():
                                 <div>
                                     <div id="eburon-audio-title">Latest generation</div>
                                     <div id="eburon-audio-subtitle">
-                                        Audio will appear here and auto-play after each successful generation.
+                                        Auto-plays after each emotional render. Make sure your browser allows audio.
                                     </div>
                                 </div>
                                 <div class="eburon-mini-pill">
-                                    MP3 · 48 kHz
+                                    MP3 · edge_tts neural
                                 </div>
                             </div>
                             """
@@ -421,7 +546,14 @@ async def create_demo():
 
             generate_btn.click(
                 fn=tts_interface,
-                inputs=[text_input, voice_dropdown, rate_slider, pitch_slider],
+                inputs=[
+                    text_input,
+                    voice_dropdown,
+                    rate_slider,
+                    pitch_slider,
+                    emotion_dropdown,
+                    expressiveness_slider,
+                ],
                 outputs=[audio_output, warning_md],
             )
 
@@ -431,9 +563,7 @@ async def create_demo():
 async def main():
     demo = await create_demo()
     demo.queue(default_concurrency_limit=50)
-    demo.launch(
-        css=EBURON_CSS
-    )
+    demo.launch()  # Compatible with gradio==4.36.1
 
 
 if __name__ == "__main__":