Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import torch
 import soundfile as sf
 import os
@@ -82,116 +81,228 @@ def synthesize_speech(text, voice_type="male", speed=1.0):
 # Gradio imports need to be added
 import gradio as gr
 
-# Custom CSS for better design
+# Custom CSS for a full-screen, modern design
 custom_css = """
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+}
+
 .gradio-container {
-    font-family: 'Poppins', 'Arial', sans-serif;
-    max-width: 750px;
-    margin: auto;
+    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, #c31432, #240b36);
+    background: linear-gradient(90deg, #d32f2f, #1976d2);
     color: white;
-    padding: 1.5em;
-    border-radius: 10px;
+    padding: 2em;
     text-align: center;
-    margin-bottom: 1em;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    border-bottom: 4px solid #ffffff33;
 }
 
 .main-header h1 {
-    font-size: 2.2em;
-    margin-bottom: 0.3em;
+    font-size: 2.8em;
+    margin: 0;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .main-header p {
-    font-size: 1.1em;
+    font-size: 1.2em;
+    margin: 0.5em 0 0;
     opacity: 0.9;
+    font-weight: 300;
 }
 
-footer {
-    text-align: center;
-    margin-top: 2em;
-    color: #555;
-    font-size: 0.9em;
+.container {
+    max-width: 1200px;
+    margin: 2em auto;
+    padding: 0 1em;
+    flex: 1;
 }
 
-.flag-icon {
-    width: 24px;
-    height: 24px;
-    vertical-align: middle;
-    margin-right: 8px;
+.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;
 }
 
-.example-header {
-    font-weight: bold;
-    color: #c31432;
-    margin-top: 1em;
+.column {
+    flex: 1;
+    padding: 1em;
 }
 
 .info-box {
-    background-color: #f9f9f9;
-    border-left: 4px solid #c31432;
-    padding: 1em;
-    margin: 1em 0;
-    border-radius: 5px;
+    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;
 }
 
-.voice-selector {
+.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: 20px;
-    margin: 10px 0;
+    gap: 1.5em;
+    margin: 1em 0;
 }
 
-.voice-option {
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    padding: 10px 15px;
-    transition: all 0.3s ease;
+.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);
+}
+
+.slider {
+    margin: 1.5em 0;
+}
+
+.slider input {
+    accent-color: #d32f2f !important;
+}
+
+.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;
 }
 
-.voice-option.selected {
-    border-color: #c31432;
-    background-color: #fff5f5;
+.audio {
+    margin-top: 1em;
 }
 
-.slider-container {
-    margin: 20px 0;
+.audio audio {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.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;
+}
+
+.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 improved design
+# Create Gradio interface with enhanced design
 with gr.Blocks(css=custom_css) as demo:
     gr.HTML(
         """
         <div class="main-header">
-            <h1>🇲🇦 Moroccan Darija Text-to-Speech 🎧</h1>
-            <p>Convert Moroccan Arabic (Darija) text into natural-sounding speech</p>
+            <h1>🇲🇦 Moroccan Darija Text-to-Speech 🎙️</h1>
+            <p>Transform your Darija text into lifelike speech with ease</p>
         </div>
         """
     )
     
-    with gr.Row():
-        with gr.Column():
+    with gr.Row(elem_classes="row"):
+        with gr.Column(elem_classes="column"):
             gr.HTML(
                 """
                 <div class="info-box">
-                    <p>This model was fine-tuned on the DODa audio dataset to produce high-quality
-                    Darija speech from text input. You can adjust the voice and speed below.</p>
+                    <p>Experience high-quality Darija speech synthesis powered by the SpeechT5 model, fine-tuned on the DODa audio dataset. Customize the voice and speed to suit your needs.</p>
                 </div>
                 """
             )
             
             text_input = gr.Textbox(
                 label="Enter Darija Text",
-                placeholder="Kteb chi jomla b darija hna...",
-                lines=3
+                placeholder="Kteb chi jomla b darija hna, bhal 'Salam, kifach nta?'...",
+                lines=3,
+                elem_classes="textbox"
             )
             
-            with gr.Row():
+            with gr.Row(elem_classes="radio"):
                 voice_type = gr.Radio(
                     ["male", "female"],
                     label="Voice Type",
@@ -203,42 +314,45 @@ with gr.Blocks(css=custom_css) as demo:
                 maximum=2.0,
                 value=1.0,
                 step=0.1,
-                label="Speech Speed"
+                label="Speech Speed",
+                elem_classes="slider"
             )
             
-            generate_btn = gr.Button("Generate Speech", variant="primary")
+            generate_btn = gr.Button("Generate Speech", variant="primary", elem_classes="button")
             
             gr.HTML(
                 """
-                <div class="example-header">Example phrases:</div>
+                <div class="example-header">Try These Phrases:</div>
                 <ul>
                     <li>"Ana Nadi Bezzaaf hhh"</li>
-                    <li>"Lyoum ajwaa zwina bezzaf."</li>
-                    <li>"lmaghrib ahssan blad fi l3alam "</li>
+                    <li>"Lyoum ajwaa zwina bezzaaf."</li>
+                    <li>"Lmaghrib ahssan blad fi l3alam"</li>
+                    <li>"Chukran bzzaf 3la lmosanada!"</li>
                 </ul>
                 """
             )
             
-        with gr.Column():
-            audio_output = gr.Audio(label="Generated Speech")
+        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)
             
             gr.Examples(
                 examples=[
-                    ["Ana Nadi Bezzaaf hhh", "male", 1.0],
-                    ["Lyoum ajwaa zwina bezzaf.", "female", 1.0],
-                    ["lmaghrib ahssan blad fi l3alam", "male", 1.0],
-                    ["Filistine hora mina lbar ila lbahr", "female", 0.8],
+                    ["Filistine horaa mina lbarri ila lbarri", "male", 0.8],
+                    ["Lyoum ajwaa zwina bezzaaf.", "female", 1.0],
+                    ["Lmaghrib ahssan blad fi l3alam", "male", 1.0],
+                 
                 ],
                 inputs=[text_input, voice_type, speed],
                 outputs=[audio_output, error_output],
-                fn=synthesize_speech
+                fn=synthesize_speech,
+                elem_classes="examples"
             )
     
     gr.HTML(
         """
         <footer>
-            <p>Developed by HAMMALE | Powered by Microsoft SpeechT5 | Data: DODa</p>
+            <p>Developed by HAMMALE | Data: DODa Audio Dataset</p>
         </footer>
         """
     )
@@ -252,4 +366,4 @@ with gr.Blocks(css=custom_css) as demo:
 
 # Launch the demo
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()