update to use latest gradio functions

app.py

@@ -11,58 +11,35 @@ def translate(inp, direction):
         res = translater_ss_en(inp, max_length=512, early_stopping=True)[0]['translation_text']
     return res
 
-with gr.Row():
-    gr.Column()
-    gr.Column(gr.Image("logo_transparent_small.png", elem_id="logo", label=None))
-    gr.Column()
-
-description = """
-<p style='text-align: center;'>
-    Siswati to English Translation
-</p>
-<p>
-    This space provides a bidirectional translation service from Siswati to English.
-</p>
-"""
-
-article = """
-<div style='text-align: center;'>
-    <a href='https://github.com/dsfsi/en-ss-m2m100-combo' target='_blank'>En-Ss GitHub</a> |
-    <a href='https://github.com/dsfsi/ss-en-m2m100-combo' target='_blank'>Ss-En GitHub</a> |
-    <a href='https://docs.google.com/forms/d/e/1FAIpQLSf7S36dyAUPx2egmXbFpnTBuzoRulhL5Elu-N1eoMhaO7v10w/viewform' target='_blank'>Feedback Form</a> 
-</div>
-"""
-
-authors = """
-<div style='text-align: center;'>
-    Authors: Vukosi Marivate, Richard Lastrucci
-</div>
-"""
-
-examples = [
-    ["Thank you for your help", "en->ss"],
-    ["Ngiyabonga ngesiciniseko sakho", "ss->en"]
-]
-
-iface = gr.Interface(
-    fn=translate,
-    title="Siswati-English Translation",
-    description=description,
-    article=article,
-    examples=examples,
-    inputs=[
-        gr.Textbox(lines=5, placeholder="Enter text (maximum 5 lines)", label="Input"),
-        gr.Radio(
-            choices=['en->ss', 'ss->en'],
-            label='Direction'),
-    ],
-    outputs="text"
-)
-
-iface.launch(enable_queue=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("<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():
+            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)
+
+    gr.Markdown(
+        """
+        <div style='text-align: center;'>
+            <a href='https://github.com/dsfsi/en-ss-m2m100-combo' target='_blank'>En-Ss GitHub</a> |
+            <a href='https://github.com/dsfsi/ss-en-m2m100-combo' target='_blank'>Ss-En GitHub</a> |
+            <a href='https://docs.google.com/forms/d/e/1FAIpQLSf7S36dyAUPx2egmXbFpnTBuzoRulhL5Elu-N1eoMhaO7v10w/viewform' target='_blank'>Feedback Form</a> 
+        </div>
+        """
+    )
+    gr.Markdown("<div style='text-align: center;'>Authors: Vukosi Marivate, Richard Lastrucci</div>")
+
+demo.launch(enable_queue=True)