Update app.py

app.py

@@ -20,40 +20,57 @@ def translate_text(text, src_lang, target_lang):
 
 # Créer l'interface Gradio
 with gr.Blocks() as interface:
-    # Titre et description
+    # Titre et description avec du texte en italique et en gras en lingala
     gr.Markdown("""
-    <div style="text-align: center;">
+    <div style="text-align: center; font-family: 'Lobster', sans-serif;">
         <h2>Traduction automatique Lingala-Français</h2>
         <p>Ceci est la version d'essai et nous comptons sur vous pour améliorer les performances du modèle pour notre langue Lingala.</p>
-        <p>Oyo e za version ya komeka pe to zo talela bino pôna ko kolisa makoki ya modeli pôna nkota nà biso Lingala.</p>
+        <p><strong><em>Oyo e za version ya komeka pe to zo talela bino pôna ko kolisa makoki ya modeli pôna nkota nà biso Lingala.</em></strong></p>
     </div>
     """)
 
-    # Création du formulaire centré dans un conteneur avec un contour
-    with gr.Box(elem_id="form-container"):
-        with gr.Row(variant="panel", align="center"):
-            text_input = gr.Textbox(label="Entrez le texte à traduire", placeholder="Entrez le texte à traduire ici...", lines=3)
+    # Création du formulaire centré avec une bordure
+    with gr.Column(align="center"):
+        text_input = gr.Textbox(label="Entrez le texte à traduire", placeholder="Entrez le texte à traduire ici...", lines=3)
+        source_lang = gr.Dropdown(choices=["fr", "li"], label="Langue Source")
+        target_lang = gr.Dropdown(choices=["li", "fr"], label="Langue Cible")
+        translate_button = gr.Button("Traduire")
+        translation_output = gr.Textbox(label="Traduction", placeholder="Le texte traduit s'affichera ici...")
 
-        with gr.Row(variant="panel", align="center"):
-            source_lang = gr.Dropdown(choices=["fr", "li"], label="Langue Source")
-            target_lang = gr.Dropdown(choices=["li", "fr"], label="Langue Cible")
-
-        with gr.Row(variant="panel", align="center"):
-            translate_button = gr.Button("Traduire")
-        
-        with gr.Row(variant="panel", align="center"):
-            translation_output = gr.Textbox(label="Traduction", placeholder="Le texte traduit s'affichera ici...")
-
-    # Lancer la traduction avec le bouton
+    # Lier le bouton au processus de traduction
     translate_button.click(
         translate_text, 
         inputs=[text_input, source_lang, target_lang], 
         outputs=translation_output
     )
 
-# Personnalisation CSS pour la boîte et l'alignement
+# Personnalisation CSS pour la boîte et les textes
 interface.css = """
-    #form-container {
+    /* Police personnalisée pour rendre l'interface plus attrayante */
+    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
+    
+    .gradio-container {
+        font-family: 'Arial', sans-serif;
+    }
+    .gradio-button {
+        background-color: #4CAF50;
+        color: white;
+        border-radius: 5px;
+        border: none;
+    }
+    .gradio-button:hover {
+        background-color: #45a049;
+    }
+    .gr-markdown {
+        font-family: 'Lobster', sans-serif;
+        font-size: 24px;
+        font-weight: bold;
+    }
+    .gradio-row {
+        margin-top: 10px;
+    }
+    /* Centrer la colonne */
+    .gr-column {
         width: 50%;
         margin: auto;
         padding: 20px;
@@ -62,12 +79,6 @@ interface.css = """
         background-color: #f9f9f9;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
-    #form-container .row {
-        margin-bottom: 15px;
-    }
-    #form-container .button {
-        width: 100%;
-    }
 """
 
 # Lancer l'interface