adjust layout

app.py

@@ -16,11 +16,13 @@ def translate(inp):
     translated_text = tokenizer.decode(translated_tokens[0], skip_special_tokens=True)
     return translated_text
 
+
 logo = """
 <div style='text-align: center;'>
     <img src='file/logo_transparent_small.png' alt='Logo' width='150'/>
 </div>
 """
+
 description = """
 <p style='text-align: center;'>
     Northern Sotho to English Translation
@@ -48,17 +50,6 @@ extra_info = """
 </p>
 """
 
-with gr.Interface(
-    fn=translate,
-    title="Northern Sotho to English Translation",
-    description=description,
-    article=article,
-    inputs=gr.components.Textbox(lines=5, placeholder="Enter Northern Sotho text (maximum 5 lines)", label="Input"),
-    outputs="text"
-) as iface:
-    gr.Markdown(logo, unsafe_allow_html=True)
-    iface.launch(enable_queue=True)
-
 authors = """
 <div style='text-align: center;'>
     Authors: Vukosi Marivate, Matimba Shingange, Richard Lastrucci, Isheanesu Joseph Dzingirai, Jenalea Rajab
@@ -85,7 +76,25 @@ doi = """
 </div>
 """
 
-gr.markdown(extra_info, unsafe_allow_html=True)
-gr.markdown(authors, unsafe_allow_html=True)
-gr.markdown(citation, unsafe_allow_html=True)
-gr.markdown(doi, unsafe_allow_html=True)
+with gr.Blocks() as demo:
+    gr.Markdown(logo)    
+    gr.Markdown(description) 
+    gr.Markdown(article)
+    
+    textbox = gr.Textbox(lines=5, placeholder="Enter Northern Sotho text (maximum 5 lines)", label="Input")
+    output_text = gr.Textbox(label="Translation")
+    
+    gr.Interface(
+        fn=translate,
+        inputs=textbox,
+        outputs=output_text,
+        title="Northern Sotho to English Translation"
+    )
+    
+    gr.Markdown(extra_info)
+    gr.Markdown(authors)
+    gr.Markdown(citation)
+    gr.Markdown(doi)
+
+demo.launch(enable_queue=True)
+