Update app.py

app.py

@@ -22,7 +22,7 @@ def translate_text(text, src_lang, target_lang):
 with gr.Blocks() as interface:
     # Titre et description avec du texte en italique et en gras en lingala
     gr.Markdown("""
-    <div style="text-align: center; font-family: 'Lobster', sans-serif;width:100%;display: flex; justify-content: center; width:100%;">
+    <div class="contenant">
         <h2 style=" width:100%;">Traduction automatique Lingala-Français</h2>
         <div style=" width:100%;">Ceci est la version d'essai et nous comptons sur vous pour améliorer les performances du modèle pour notre langue Lingala.</div>
         <div style=" width:100%;"><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>
@@ -34,8 +34,9 @@ with gr.Blocks() as interface:
         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...")
+        translate_button = gr.Button("Traduire")
+       
 
     # Lier le bouton au processus de traduction
     translate_button.click(
@@ -51,6 +52,15 @@ interface.css = """
     
     .gradio-container {
         font-family: 'Arial', sans-serif;
+    }
+      .contenant {
+       text-align: center;
+       font-family: Ghisha;
+       width:100%;
+       display: flex; 
+       justify-content: center; 
+       width:100%;
+       flex-wrap: wrap;
     }
     .gradio-button {
         background-color: #4CAF50;