Update app.py

app.py

@@ -81,157 +81,280 @@ def synthesize_speech(text, voice_type="male", speed=1.0):
 # Gradio imports need to be added
 import gradio as gr
 
-CUSTOM_CSS = """
-* { box-sizing: border-box; }
-:root {
---brand-red: #c8102e; /* Morocco red vibe */
---brand-blue: #1f60c4;
---bg-1: #f5f7fa;
---bg-2: #c3cfe2;
---card-bg: #ffffff;
---text-1: #1f2937;
---muted: #6b7280;
+
+custom_css = """
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
 }
-body, html { margin:0; padding:0; height:100%; width:100%; overflow-x:hidden; }
-.gradio-container { font-family:'Montserrat','Arial',sans-serif !important; height:100vh; width:100vw;
-background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%); display:flex; flex-direction:column; padding:0; margin:0; }
 
+.gradio-container {
+    font-family: 'Montserrat', 'Arial', sans-serif !important;
+    height: 100vh;
+    width: 100vw;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+}
 
-.main-header { background: linear-gradient(90deg, var(--brand-red), var(--brand-blue)); color:#fff; padding:2rem 1rem; text-align:center;
-box-shadow: 0 6px 12px rgba(0,0,0,0.15); border-bottom: 4px solid #ffffff33; }
-.main-header h1 { font-size:2.4rem; margin:0; font-weight:800; letter-spacing:.5px; text-shadow: 1px 1px 3px rgba(0,0,0,.25); }
-.main-header p { font-size:1.05rem; margin:.5rem 0 0; opacity:.95; font-weight:400; }
-.flag { display:inline-block; width:38px; height:28px; background-image:url('https://flagcdn.com/w40/ma.png'); background-size:cover; border-radius:4px; margin-right:10px; vertical-align:middle; }
+.main-header {
+    background: linear-gradient(90deg, #d32f2f, #1976d2);
+    color: white;
+    padding: 2em;
+    text-align: center;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    border-bottom: 4px solid #ffffff33;
+}
 
+.main-header h1 {
+    font-size: 2.8em;
+    margin: 0;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
 
-.container { max-width:1150px; margin: 2rem auto; padding: 0 1rem; width:100%; flex:1; }
-.card { display:flex; gap:1.5rem; background:var(--card-bg); border-radius:16px; padding:1.5rem; box-shadow:0 8px 16px rgba(0,0,0,.08); margin-bottom:1.5rem; }
-.col { flex:1; min-width:0; }
+.main-header p {
+    font-size: 1.2em;
+    margin: 0.5em 0 0;
+    opacity: 0.9;
+    font-weight: 300;
+}
 
+.container {
+    max-width: 1200px;
+    margin: 2em auto;
+    padding: 0 1em;
+    flex: 1;
+}
 
-.info { background:#fff6f6; border-left:5px solid var(--brand-red); padding:1rem 1.25rem; border-radius:10px; margin-bottom:1rem; color:var(--text-1); line-height:1.6; box-shadow:0 2px 4px rgba(0,0,0,.04); }
-.label-tip { font-size:.9rem; color:var(--muted); }
+.row {
+    display: flex;
+    gap: 2em;
+    background: white;
+    border-radius: 15px;
+    padding: 2em;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2em;
+}
 
+.column {
+    flex: 1;
+    padding: 1em;
+}
 
-/* Inputs */
-.textbox textarea { border:2px solid #e5e7eb !important; border-radius:12px !important; padding:1rem !important; font-size:1.05rem !important; transition:border-color .25s ease !important; }
-.textbox textarea:focus { border-color: var(--brand-red) !important; box-shadow:0 0 0 4px rgba(200,16,46,.12) !important; }
+.info-box {
+    background: #fef6f6;
+    border-left: 5px solid #d32f2f;
+    padding: 1.5em;
+    border-radius: 8px;
+    margin-bottom: 1.5em;
+    font-size: 1em;
+    line-height: 1.6;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
 
+.textbox textarea {
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 10px !important;
+    padding: 1em !important;
+    font-size: 1.1em !important;
+    transition: border-color 0.3s ease !important;
+}
 
-.radio-row { display:flex; flex-wrap:wrap; gap:.75rem; }
-.radio-row label { background:#f7f7f7; padding:.65rem 1.1rem; border-radius:999px; border:2px solid #e5e7eb; cursor:pointer; transition:all .25s ease; font-weight:600; }
-.radio-row input:checked + label { background: var(--brand-red); color:#fff; border-color:var(--brand-red); box-shadow:0 4px 10px rgba(200,16,46,.18); }
+.textbox textarea:focus {
+    border-color: #d32f2f !important;
+    box-shadow: 0 0 8px rgba(211, 47, 47, 0.2) !important;
+}
 
+.radio {
+    display: flex;
+    justify-content: center;
+    gap: 1.5em;
+    margin: 1em 0;
+}
 
-.slider input { accent-color: var(--brand-red) !important; }
+.radio label {
+    background: #f5f5f5;
+    padding: 0.8em 1.5em;
+    border-radius: 25px;
+    border: 2px solid #e0e0e0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
 
+.radio input:checked + label {
+    background: #d32f2f;
+    color: white;
+    border-color: #d32f2f;
+    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
+}
 
-.btn-primary { background: linear-gradient(90deg, var(--brand-red), var(--brand-blue)) !important; color:#fff !important; padding:.9rem 1.6rem !important; border-radius:999px !important; border:none !important; font-size:1.05rem !important; font-weight:700 !important;
-transition: transform .15s ease, box-shadow .25s ease !important; box-shadow:0 6px 14px rgba(0,0,0,.12) !important; }
-.btn-primary:hover { transform: translateY(-1px) !important; box-shadow:0 10px 18px rgba(0,0,0,.18) !important; }
+.slider {
+    margin: 1.5em 0;
+}
 
+.slider input {
+    accent-color: #d32f2f !important;
+}
 
-.audio audio { width:100%; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.08); }
+.button {
+    background: linear-gradient(90deg, #d32f2f, #1976d2) !important;
+    color: white !important;
+    padding: 1em 2em !important;
+    border-radius: 25px !important;
+    border: none !important;
+    font-size: 1.1em !important;
+    font-weight: 600 !important;
+    transition: transform 0.2s ease, box-shadow 0.3s ease !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}
 
+.button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
+}
 
-.examples { margin-top:1rem; padding:1rem; background:#fafafa; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.05); }
-.examples h4 { margin:.25rem 0 .75rem; color: var(--brand-red); }
+.audio {
+    margin-top: 1em;
+}
 
+.audio audio {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
 
-footer { text-align:center; padding:1.2rem; background:#ffffff; color:#4b5563; font-size:.95rem; border-top:1px solid #e5e7eb; margin-top:auto; }
-"""
+.example-header {
+    font-weight: 600;
+    color: #d32f2f;
+    margin: 1.5em 0 0.5em;
+    font-size: 1.2em;
+}
 
+ul {
+    padding-left: 1.5em;
+    color: #333;
+}
+
+li {
+    margin: 0.5em 0;
+    font-size: 1em;
+}
 
-# === UI Composition ===
-with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft()) as demo:
-    # Header
+.examples {
+    margin-top: 1.5em;
+    padding: 1em;
+    background: #f9f9f9;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+footer {
+    text-align: center;
+    padding: 1.5em;
+    background: #ffffff;
+    color: #666;
+    font-size: 0.95em;
+    border-top: 1px solid #e0e0e0;
+    margin-top: auto;
+}
+
+.flag-icon {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+"""
+
+# Create Gradio interface with enhanced design
+with gr.Blocks(css=custom_css) as demo:
     gr.HTML(
         """
-        <div class="main-header" role="banner">
-            <h1><span class="flag" aria-hidden="true">🇲🇦</span> Darija Text‑to‑Speech (TTS) — المغرب 🎙️</h1>
-            <p>7awwel l-kteb b-darija l-sout b-wahd l-mas-hla — Transformez votre texte en parole facilement.</p>
+        <style>
+            .flag {
+                display: inline-block;
+                width: 40px;
+                height: 30px;
+                background-image: url('https://flagcdn.com/w40/ma.png');
+                background-size: cover;
+                border-radius: 4px;
+                margin-right: 8px;
+                vertical-align: middle;
+            }
+        </style>
+        <div class="main-header">
+            <h1><span class="flag"></span>Moroccan Darija Text-to-Speech 🎙️</h1>
+            <p>Transform your Darija text into lifelike speech with ease</p>
         </div>
         """
     )
     
-    with gr.Group(elem_classes="container"):
-        with gr.Row(elem_classes="card"):
-            # Left column — inputs
-            with gr.Column(elem_classes="col"):
-                gr.Markdown(
-                    "Kteb b-darija b lli bghiti. <span class='label-tip'>(Accents FR/AR kaynine OK)</span>",
-                    elem_classes=["info"]
-                )
-                
-                text_input = gr.Textbox(
-                    label="✍️Texte en darija",
-                    placeholder="Ex: Salam 3likom, kif dayr?",
-                    lines=4,
-                    elem_classes=["textbox"]
-                )
-                
+    with gr.Row(elem_classes="row"):
+        with gr.Column(elem_classes="column"):
+            text_input = gr.Textbox(
+                label="Enter Darija Text",
+                placeholder="Kteb chi jomla b darija hna, bhal 'Salam, kifach nta?'...",
+                lines=3,
+                elem_classes="textbox"
+            )
+            
+            with gr.Row(elem_classes="radio"):
                 voice_type = gr.Radio(
-                    ["rajil (male)", "mra (female)"],
-                    value="rajil (male)",
-                    label="🎤 No3 dyal sawt (Type de voix)",
-                    elem_classes=["radio-row"]
-                )
-                
-                speed = gr.Slider(
-                    minimum=0.5,
-                    maximum=2.0,
-                    value=1.0,
-                    step=0.1,
-                    label="⏩ Sor3a dyal lhadra (Vitesse)"
-                )
-                
-                generate_btn = gr.Button(
-                    "Générer l'audio", 
-                    variant="primary", 
-                    elem_classes=["btn-primary"]
+                    ["male", "female"],
+                    label="Voice Type",
+                    value="male"
                 )
             
-            # Right column — outputs
-            with gr.Column(elem_classes="col"):
-                audio_output = gr.Audio(
-                    label="🔊 Audio généré", 
-                    elem_classes=["audio"]
-                )
-                error_output = gr.Textbox(
-                    label="⚠️ Khta2 / Erreur", 
-                    visible=False
-                )
+            speed = gr.Slider(
+                minimum=0.5,
+                maximum=2.0,
+                value=1.0,
+                step=0.1,
+                label="Speech Speed",
+                elem_classes="slider"
+            )
+            
+            generate_btn = gr.Button("Generate Speech", variant="primary", elem_classes="button")
+        
+        with gr.Column(elem_classes="column"):
+            audio_output = gr.Audio(label="Generated Speech", elem_classes="audio")
+            error_output = gr.Textbox(label="Error (if any)", visible=False)
     
-    with gr.Group(elem_classes="examples"):
-        gr.HTML("<h4>Exemples b‑darija</h4>")
-        gr.Examples(
-            examples=[
-                ["Lyouma ljaw zwiiin bzzaf.", "mra (female)", 1.0],
-                ["Lmaghrib a7san blad f l3alam ila hayd AKHANOUCH O LFASAD", "rajil (male)", 1.0],
-                ["Filistin 77orra mIna ALBARII ILA LbahrII", "mra (female)", 0.9],
-            ],
-            inputs=[text_input, voice_type, speed],
-            outputs=[audio_output, error_output],
-            fn=synthesize_speech,
-            cache_examples=False
-        )
+    gr.Examples(
+        examples=[
+            ["Ana Nadi Bezzaaf hhh", "male", 1.0],
+            ["Lyoum ajwaa zwina bezzaaf.", "female", 1.0],
+            ["Lmaghrib ahssan blad fi l3alam", "male", 1.0],
+            ["Filistine horaa mina lbari ila lbarri", "female", 0.8],
+        ],
+        inputs=[text_input, voice_type, speed],
+        outputs=[audio_output, error_output],
+        fn=synthesize_speech
+    )
     
-    # Footer
     gr.HTML(
         """
         <footer>
-            <p>Développé par <strong>HAMMALE</strong> · Données: <em>DODa Audio Dataset</em> · <strong>AtlasAI</strong></p>
+            <p>Developed by HAMMALE | Data: DODa Audio Dataset | AtlasAI</p>
         </footer>
         """
     )
     
-    # Events
+    # Set button click action
     generate_btn.click(
-        fn=synthesize_speech, 
-        inputs=[text_input, voice_type, speed], 
+        fn=synthesize_speech,
+        inputs=[text_input, voice_type, speed],
         outputs=[audio_output, error_output]
     )
 
-# === Launch ===
+# Launch the demo
 if __name__ == "__main__":
     demo.launch()