Remove max tokens slider and simplify interface

app.py

@@ -1,58 +1,76 @@
 import gradio as gr
 from transformers import AutoTokenizer, AutoModelForSeq2SeqLM
 
-# Load both translation models from Hugging Face
-# English to Moroccan Arabic (Darija)
+# Load models
 tokenizer_eng_to_darija = AutoTokenizer.from_pretrained("lachkarsalim/Helsinki-translation-English_Moroccan-Arabic")
 model_eng_to_darija = AutoModelForSeq2SeqLM.from_pretrained("lachkarsalim/Helsinki-translation-English_Moroccan-Arabic")
 
-# Moroccan Arabic (Darija) to Modern Standard Arabic (MSA)
 tokenizer_darija_to_msa = AutoTokenizer.from_pretrained("Saidtaoussi/AraT5_Darija_to_MSA")
 model_darija_to_msa = AutoModelForSeq2SeqLM.from_pretrained("Saidtaoussi/AraT5_Darija_to_MSA")
 
-# Translation function for Darija to MSA
+# Translation functions
 def translate_darija_to_msa(darija_text):
     inputs = tokenizer_darija_to_msa(darija_text, return_tensors="pt", padding=True)
     translated = model_darija_to_msa.generate(**inputs)
     translated_text = tokenizer_darija_to_msa.decode(translated[0], skip_special_tokens=True)
     return translated_text
 
-# Translation function for English to Moroccan Arabic and vice versa
 def translate_eng_to_darija(eng_text, direction="eng_to_darija"):
     if direction == "eng_to_darija":
         inputs = tokenizer_eng_to_darija(eng_text, return_tensors="pt", padding=True)
         translated = model_eng_to_darija.generate(**inputs)
         translated_text = tokenizer_eng_to_darija.decode(translated[0], skip_special_tokens=True)
     else:
-        # Translate from Darija to English (reverse translation)
+        # Reverse translation (Darija to English)
         inputs = tokenizer_eng_to_darija(eng_text, return_tensors="pt", padding=True)
         translated = model_eng_to_darija.generate(**inputs)
         translated_text = tokenizer_eng_to_darija.decode(translated[0], skip_special_tokens=True)
     return translated_text
 
-
-# Gradio interface setup without max new tokens
-def respond(message, translation_choice: str):
-    # Translate based on the user's choice
+# Respond function
+def respond(message, translation_choice):
     if translation_choice == "Moroccan Arabic to MSA":
         return translate_darija_to_msa(message)
     elif translation_choice == "English to Moroccan Arabic":
         return translate_eng_to_darija(message, direction="eng_to_darija")
 
 
-demo = gr.Interface(
-    fn=respond,
-    inputs=[
-        gr.Textbox(value="", label="Enter Your Text", placeholder="Type your sentence here..."),
-        gr.Dropdown(
-            label="Choose Translation Direction",
-            choices=["English to Moroccan Arabic", "Moroccan Arabic to MSA"],
-            value="English to Moroccan Arabic"
-        ),
-    ],
-    outputs="text"
-)
+# Gradio Interface Layout with organized components
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            # Header with logo and emojis
+            gr.Markdown("""
+                <h1 style="text-align: center;">
+                    🇲🇦 🚀 Moroccan Arabic Translation Demo by Amal 😍
+                </h1>
+                <p style="text-align: center;">
+                    🌟 Dima Meghrib 🌟 <br>
+                    Select the translation direction and type your text. <br>
+                    Get quick translations between **English** and **Moroccan Arabic (Darija)**! 🔥
+                </p>
+                <img src="https://moroccan-culture-image.s3.eu-north-1.amazonaws.com/2159558.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAW3MD7RUI6BPOSTGF%2F20250225%2Feu-north-1%2Fs3%2Faws4_request&X-Amz-Date=20250225T212742Z&X-Amz-Expires=300&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBUaCmV1LW5vcnRoLTEiSDBGAiEA2wC2GISJOKipdbfMelCGfMqoPHnVnM9aY0zmsgmINpACIQCkA5VvqMaCEHNVwJml3%2FBJu%2FQlrU120PByOy8dSEfkdSrqAwhPEAAaDDQ3MTExMjU4NDQ2NSIMosytLgjLE%2BjysHncKscD5SmK3%2FV7ycLFyJpg8GMUa2bi%2BB4Tlj4YLxW37IxScYWjA5dOLyc9NnJNQ87K73ZRJLFSv1sogcVvRQqOnq3Cjb1AQwtljD4MHBjPIpgy7QVBov%2BAdUMzehD7K%2FhL8ME2pLPMV70E12dSdRRpablepF3Y%2FrHU1S8s4HJ%2BDAmfEF6gmnexTRyXVIEYodn%2FqPtOR5oaUF17SGEmmKJBi4b2kLQN%2B353pYrkB8ciBn0gAScNVkkgs2PuDUmzcXtw%2F4qcASvZ%2F11za7YSO%2FPrK30tFrOuVQQgjaB2h4a5%2BETBuXdLDX6EkbnEmN2Rh2ZH0adBut2UnOR9AtR4lRHDtk7qnRrlof6byqCqjDHu9iaJVcBpNMojNo%2BFZMofqZrnKygggvCaJhI3a%2FmJo7v0moz0nRhljyCA18ieJ8PYIBwqGcc53MneKRBbyTrI%2F7lHimTQZ4RDiD8E42qyxyh5vYOOBd9ijYog%2FZEsvzzaLfQC1niWfT35NcpzNXn0QMp8vjHa3S57nV3vXY7uXqj7i6Hf0JGG8YrZ3bpizt3q%2FY1zSHc9RCrYALCmWm9xfXsxy4woC10vBTP9S9tYaKS1j60bOADWikoeemUw4Oj4vQY6kwKyzIUJZkcmGcdRVff6NtSS%2F7hCsUUtyoygbvXIudEFO2jQDChI%2Fx5YbO%2BPH3ynUKVjncXGmtWR7%2BoncsXjFg7xrzsYjBjmDuHWF1umN%2BnA%2FPng6CfJ%2Br%2BlI5VxjnZCAZsvbGEKp9xKSSUI9KXcdsOYC4sMzNm1NdzU3wuWPhlJHvv7Y6Ma%2FPQwUkfDCCBphGheYqiZrQieDLpcnI6TNiefFOzRipE27fbtJXwbzoXIIhlQdtML7LXsQq5XeISwXGRZjeIQo5bIF6ab5QpA%2BFcmvAiVQlAh%2Byqa2KMjZhVHiFxMcPZXb0lRO3y2lB40FGKbQ7SVyUrDJg6pE%2FF67NMhCkanOp34hhjZ4JlWbGcIeBTTPw%3D%3D&X-Amz-Signature=b1f49904eefdd46e21dfe6a89c73c39f41e1b8631afd2b242f9d68e79c025def&X-Amz-SignedHeaders=host&response-content-disposition=inline" 
+                    style="width: 100px; display: block; margin: 20px auto;" alt="Dima Meghrib Logo" />
+            """)
+
+        with gr.Column():
+            # Left Column for Inputs
+            user_input = gr.Textbox(label="Enter Your Text", placeholder="Type your sentence here...")
+            translation_choice = gr.Dropdown(
+                label="Choose Translation Direction",
+                choices=["English to Moroccan Arabic", "Moroccan Arabic to MSA"],
+                value="English to Moroccan Arabic"
+            )
+            submit_button = gr.Button("Submit", elem_id="submit_button")
+    
+    with gr.Row():
+        # Right Column for Outputs
+        output = gr.Textbox(label="Translated Text", placeholder="Translation will appear here...")
+
+    # Define the action for submit
+    submit_button.click(fn=respond, inputs=[user_input, translation_choice], outputs=output)
 
 # Launch the interface
 demo.launch()
 
+