refactored layout using gradio blocks so as to have source and back translation together.

app.py

@@ -10,19 +10,47 @@ def translate(text, model):
     return output
 
 def check(en):
+    if en is None:
+        return None,None
     fr = translate(en, en_fr_model)
     en2 = translate(fr,fr_en_model)
     return fr,en2
 
-gr.Interface(
-    fn=check,
-    inputs = gr.Textbox(label="EN - original"),
-    outputs = [ gr.Textbox(label="FR - target"), gr.Textbox(label="EN - back") ],
-    title="Back translation : insights in target translation quality",
-    description="Translating back to source language is one mean to measure the quality of the target translation. Can be useful when you need to check the translation to a language you hardly understand... The loop feedback may even guide you to rewrite original text enabling a better translation. Translations using Helsinki-NLP Opus MT models.",
-    examples= [
-        "Translating a language is a very complex problem and yet this Helsinki-NLP model does it both well and quickly, do you agree?",
-        "Reverse translation, is the process of translating content from the target language back to its source language. The final outcome in English should match the original as closely as possible in a quality translation job."
-    ],
-    allow_flagging="never"
-).launch(debug=True, enable_queue=True)
+def clear():
+    return None,None,None
+
+source=gr.Textbox(label="EN - original", value="") # delaying rendering enables to control layout order
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Back translation : insights in target translation quality")
+    gr.Markdown("Translating back to source language is one mean to measure the quality of the target translation. Can be useful when you need to check the translation to a language you hardly understand...")
+    gr.Markdown("The loop feedback may even guide you to rewrite original text enabling a better translation. Translations using Helsinki-NLP Opus MT models.")
+
+    examples= gr.Examples(
+        examples= [
+            "Translating a language is a very complex problem and yet this Helsinki-NLP model does it both well and quickly, do you agree?",
+            "Reverse translation, is the process of translating content from the target language back to its source language. The final outcome in English should match the original as closely as possible in a quality translation job."
+        ],
+        inputs= [ source ]
+    )
+    go_btn = gr.Button("Translate")
+    source.render()
+    en_back = gr.Textbox(label="EN - back")
+    target =gr.Textbox(label="FR - target")
+    go_btn.click( fn=check, inputs=[source], outputs= [target,en_back])
+    gr.Button("Clear").click( fn=clear, inputs=[], outputs= [source, en_back,target] )
+
+demo.launch(debug=True, enable_queue=True)
+
+# gr.Interface(
+#     fn=check,
+#     inputs = gr.Textbox(label="EN - original"),
+#     outputs = [ gr.Textbox(label="FR - target"), gr.Textbox(label="EN - back") ],
+#     title="Back translation : insights in target translation quality",
+#     description="Translating back to source language is one mean to measure the quality of the target translation. Can be useful when you need to check the translation to a language you hardly understand... The loop feedback may even guide you to rewrite original text enabling a better translation. Translations using Helsinki-NLP Opus MT models.",
+#     examples= [
+#         "Translating a language is a very complex problem and yet this Helsinki-NLP model does it both well and quickly, do you agree?",
+#         "Reverse translation, is the process of translating content from the target language back to its source language. The final outcome in English should match the original as closely as possible in a quality translation job."
+#     ],
+#     allow_flagging="never"
+# ).launch(debug=True, enable_queue=True)