update formatting

app.py

@@ -12,24 +12,31 @@ def translate(inp, direction):
     return res
 
 with gr.Blocks() as demo:
-    gr.Markdown("<div style='text-align: center;'><img src='logo_transparent_small.png' alt='Logo' id='logo' /></div>")
-    gr.Markdown(
-        """
-        <h1 style='text-align: center;'>Siswati-English Translation</h1>
-        <p style='text-align: center;'>This space provides a bidirectional translation service from Siswati to English.</p>
-        """
-    )
+    with gr.Row():
+        with gr.Column(scale=1):  
+            pass
+        with gr.Column(scale=2): 
+            gr.Image("logo_transparent_small.png", elem_id="logo", show_label=False, width=150)
+            gr.Markdown(
+                """
+                <h1 style='text-align: center;'>Siswati-English Translation</h1>
+                <p style='text-align: center;'>This space provides a bidirectional translation service from Siswati to English.</p>
+                """
+            )
+        with gr.Column(scale=1):  
+            pass
     
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=1):  
+            pass
+        with gr.Column(scale=2): 
             inp_text = gr.Textbox(lines=5, placeholder="Enter text (maximum 5 lines)", label="Input")
-        with gr.Column():
             direction = gr.Radio(choices=['en->ss', 'ss->en'], label='Direction')
-    
-    output_text = gr.Textbox(label="Output")
-
-    translate_button = gr.Button("Translate")
-    translate_button.click(translate, inputs=[inp_text, direction], outputs=output_text)
+            translate_button = gr.Button("Translate")
+            output_text = gr.Textbox(label="Output")
+            translate_button.click(translate, inputs=[inp_text, direction], outputs=output_text)
+        with gr.Column(scale=1):  
+            pass
 
     gr.Markdown(
         """
@@ -40,6 +47,11 @@ with gr.Blocks() as demo:
         </div>
         """
     )
-    gr.Markdown("<div style='text-align: center;'>Authors: Vukosi Marivate, Richard Lastrucci</div>")
+
+    with gr.Accordion("More Information", open=False):
+        gr.Markdown("""
+        <h4 style="text-align: center;">Authors</h4>
+        <div style='text-align: center;'>Vukosi Marivate, Richard Lastrucci</div>
+        """)
 
 demo.launch()