Update app.py

app.py

@@ -41,35 +41,64 @@ def predict(prompt, speaker, agree, subfolder_name, file_name):
     return output_path
 
 custom_css = """
-.gradio-container { font-family: 'Arial', sans-serif; background-color: #f0f4f8; }
-.gr-form { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
-.gr-button { background-color: #4a90e2; border: none; }
-.gr-button:hover { background-color: #3a7bc8; }
+.gradio-container {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f7f9fc;
+}
+.gr-form {
+    background-color: white;
+    border-radius: 15px;
+    padding: 30px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+.gr-button {
+    background-color: #4a90e2;
+    border: none;
+    color: white;
+    font-weight: bold;
+    transition: all 0.3s ease;
+}
+.gr-button:hover {
+    background-color: #3a7bc8;
+    transform: translateY(-2px);
+}
+.gr-input, .gr-dropdown {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 10px;
+}
+.gr-checkbox {
+    margin-top: 10px;
+}
+.gr-form > div {
+    margin-bottom: 20px;
+}
 """
 
-title = "Synthèse Vocale XTTS 🎙️"
+title = "🎙️ Synthèse Vocale XTTS"
 description = """
-<h3>Bienvenue sur notre outil de synthèse vocale XTTS !</h3>
-<p>Cet outil vous permet de générer une voix naturelle à partir d'un texte en français. Choisissez une voix, entrez votre texte, et écoutez le résultat !</p>
+<h3 style='text-align: center; margin-bottom: 1em;'>Bienvenue sur notre outil de synthèse vocale XTTS !</h3>
+<p style='text-align: center;'>Générez une voix naturelle à partir de votre texte en français. Choisissez une voix, entrez votre texte, et écoutez le résultat !</p>
 """
 article = """
-<div style='margin:20px auto; text-align: center;'>
-<p>En utilisant cette démo, vous acceptez les conditions d'utilisation du modèle Coqui Public disponibles sur <a href='https://coqui.ai/cpml' target='_blank'>https://coqui.ai/cpml</a></p>
+<div style='margin: 20px auto; text-align: center; padding: 10px; background-color: #e8f0fe; border-radius: 10px;'>
+<p>En utilisant cette démo, vous acceptez les <a href='https://coqui.ai/cpml' target='_blank' style='color: #4a90e2; text-decoration: none;'>conditions d'utilisation du modèle Coqui Public</a></p>
 </div>
 """
 
 available_speakers = list(set([f.split('_')[0] for f in os.listdir("examples") if f.endswith(".wav")]))
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown(f"<h1 style='text-align: center;'>{title}</h1>")
+    gr.Markdown(f"<h1 style='text-align: center; color: #4a90e2;'>{title}</h1>")
     gr.Markdown(description)
+    
     with gr.Row():
         with gr.Column(scale=2):
             prompt = gr.Textbox(
                 label="Texte pour la synthèse vocale",
-                info="Une ou deux phrases à la fois sont préférables* (max : 10)",
+                info="Une ou deux phrases à la fois sont préférables (max : 10)",
                 placeholder="Bonjour ! Comment allez-vous aujourd'hui ?",
-                lines=10
+                lines=5
             )
         with gr.Column(scale=1):
             speaker = gr.Dropdown(
@@ -89,8 +118,8 @@ with gr.Blocks(css=custom_css) as demo:
                 label="Nom du fichier (facultatif)",
                 placeholder="Nom du fichier audio généré"
             )
-            generate_btn = gr.Button("Générer la voix", variant="primary")
     
+    generate_btn = gr.Button("Générer la voix", variant="primary")
     audio_output = gr.Audio(label="Audio généré")
     
     generate_btn.click(
@@ -101,4 +130,4 @@ with gr.Blocks(css=custom_css) as demo:
     
     gr.Markdown(article)
 
-demo.launch(debug=True)
+demo.launch(debug=True)