Update app.py

app.py

@@ -20,31 +20,55 @@ def translate_text(text, src_lang, target_lang):
 
 # Créer l'interface Gradio
 with gr.Blocks() as interface:
-    # Section d'en-tête
-    gr.Markdown("<h2>Traduction automatique Lingala-Français</h2>")
+    # Titre et description
     gr.Markdown("""
-    <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 bokasi ya modeli pôna nkota nà biso Lingala.</p>
+    <div style="text-align: center;">
+        <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>
+    </div>
     """)
 
-    # Entrée de traduction
-    with gr.Row():
-        text_input = gr.Textbox(label="Entrez le texte à traduire", placeholder="Entrez le texte à traduire ici...")
-    
-    with gr.Row():
-        source_lang = gr.Dropdown(choices=["fr", "li"], label="Langue Source")
-        target_lang = gr.Dropdown(choices=["li", "fr"], label="Langue Cible")
-    
-    # Sortie de traduction
-    translation_output = gr.Textbox(label="Traduction", placeholder="Le texte traduit s'affichera ici...")
-
-    # Bouton pour soumettre
-    translate_button = gr.Button("Traduire")
+    # 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)
+
+        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
     translate_button.click(
         translate_text, 
         inputs=[text_input, source_lang, target_lang], 
         outputs=translation_output
     )
 
+# Personnalisation CSS pour la boîte et l'alignement
+interface.css = """
+    #form-container {
+        width: 50%;
+        margin: auto;
+        padding: 20px;
+        border: 2px solid #ddd;
+        border-radius: 10px;
+        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
 interface.launch()