improve formatting

app.py

@@ -16,8 +16,8 @@ def translate(inp):
 
 with gr.Blocks() as demo:
     gr.Markdown("""
-    <div style='text-align: center;'>
-        <img src='file/logo_transparent_small.png' alt='Logo' width='150'/>
+    <div style='text-align: center; margin-bottom: 20px;'>
+        <img src='file/logo_transparent_small.png' alt='Logo' width='150' style='display: block; margin: 0 auto;'/>
     </div>
     """)
     
@@ -26,10 +26,11 @@ with gr.Blocks() as demo:
     <p style='text-align: center;'>This space provides a translation service from Northern Sotho to English using the M2M100 model, fine-tuned for low-resource languages. It supports researchers, linguists, and users working with Northern Sotho texts.</p>
     """)
     
-    inp_text = gr.Textbox(lines=5, placeholder="Enter Northern Sotho text (maximum 5 lines)", label="Input")
-    output_text = gr.Textbox(label="Output")
-    translate_button = gr.Button("Translate")
-    translate_button.click(translate, inputs=inp_text, outputs=output_text)
+    with gr.Column(variant="panel"):
+        inp_text = gr.Textbox(lines=5, placeholder="Enter Northern Sotho text (maximum 5 lines)", label="Input", elem_id="centered-input")
+        output_text = gr.Textbox(label="Output", elem_id="centered-output")
+        translate_button = gr.Button("Translate", elem_id="centered-button")
+        translate_button.click(translate, inputs=inp_text, outputs=output_text)
     
     gr.Markdown("""
     <div style='text-align: center;'>
@@ -42,17 +43,19 @@ with gr.Blocks() as demo:
     
     with gr.Accordion("More Information", open=False):
         gr.Markdown("""
-        <h4 style="text-align: center;">More information about the space</h4>
-        <p>This is a variant of the M2M100 model, fine-tuned on a multilingual dataset to support translation from Northern Sotho (Sepedi) to English. The model was trained with a focus on improving translation accuracy for low-resource languages.</p>
+        <h4 style="text-align: center;">Model Description</h4>
+        <p style='text-align: center;'>This is a variant of the M2M100 model, fine-tuned on a multilingual dataset to support translation from Northern Sotho (Sepedi) to English. The model was trained with a focus on improving translation accuracy for low-resource languages.</p>
         """)
         gr.Markdown("""
+        <h4 style="text-align: center;">Authors</h4>
         <div style='text-align: center;'>
-            Authors: Vukosi Marivate, Matimba Shingange, Richard Lastrucci, 
+            Vukosi Marivate, Matimba Shingange, Richard Lastrucci, 
             Isheanesu Joseph Dzingirai, Jenalea Rajab
         </div>
         """)
         gr.Markdown("""
-        <pre style="text-align: left; white-space: pre-wrap;">
+        <h4 style="text-align: center;">Citation</h4>
+        <pre style="text-align: center; white-space: pre-wrap;">
         @inproceedings{lastrucci-etal-2023-preparing,
             title = "Preparing the Vuk{'}uzenzele and {ZA}-gov-multilingual {S}outh {A}frican multilingual corpora",
             author = "Richard Lastrucci and Isheanesu Dzingirai and Jenalea Rajab 
@@ -68,8 +71,9 @@ with gr.Blocks() as demo:
         </pre>
         """)
         gr.Markdown("""
+        <h4 style="text-align: center;">DOI</h4>
         <div style='text-align: center;'>
-            DOI: <a href="https://doi.org/10.48550/arXiv.2303.03750" target="_blank">10.48550/arXiv.2303.03750</a>
+            <a href="https://doi.org/10.48550/arXiv.2303.03750" target="_blank">10.48550/arXiv.2303.03750</a>
         </div>
         """)