feat: add UI improvements for usability

Two-column layout with English label and searchable dropdown with locale
codes, live character count, clear button, and Ctrl+Enter submit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -42,7 +42,12 @@ def _load_model() -> AutoModelForSeq2SeqLM:
 def _build_language_mappings() -> tuple[dict[str, str], list[str]]:
     tokenizer = _load_tokenizer()
     vocab = tokenizer.get_vocab()
-    name_to_code = {v: k for k, v in langid_to_language.items() if k in vocab}
+    name_to_code = {}
+    for code, name in langid_to_language.items():
+        if code in vocab:
+            locale = code[2:-1]  # <2fr> → fr
+            display_name = f"{name} ({locale})"
+            name_to_code[display_name] = code
     return name_to_code, sorted(name_to_code.keys())
 
 
@@ -80,41 +85,61 @@ def translate(
     return result
 
 
+def _update_char_count(text: str) -> str:
+    return f"{len(text)} characters"
+
+
 def _build_demo() -> gr.Blocks:
     _, language_names = _build_language_mappings()
 
     with gr.Blocks(title="MADLAD-400 Translation") as demo:
-        gr.Markdown("# MADLAD-400 Translation")
+        with gr.Row(equal_height=True):
+            with gr.Column():
+                gr.Markdown("**English**")
+                input_text = gr.Textbox(
+                    placeholder="Enter English text here",
+                    lines=4,
+                    show_label=False,
+                )
+                char_count = gr.Markdown("0 characters")
+            with gr.Column():
+                target_language = gr.Dropdown(
+                    choices=language_names,
+                    value="French (fr)",
+                    show_label=False,
+                    filterable=True,
+                )
+                output_text = gr.Textbox(
+                    placeholder="Translation",
+                    lines=4,
+                    show_label=False,
+                    interactive=False,
+                    buttons=["copy"],
+                )
 
         with gr.Row():
-            gr.Markdown("English &rarr;", container=False)
-            target_language = gr.Dropdown(
-                choices=language_names,
-                value="French",
-                label="Target language",
-                scale=0,
-            )
-
-        with gr.Row():
-            input_text = gr.Textbox(
-                label="English",
-                placeholder="Enter English text here",
-                lines=4,
-            )
-            output_text = gr.Textbox(
-                label="Translation",
-                lines=4,
-                buttons=["copy"],
-                interactive=False,
-            )
-
-        translate_btn = gr.Button("Translate", variant="primary")
+            clear_btn = gr.Button("Clear")
+            translate_btn = gr.Button("Translate", variant="primary")
 
         translate_btn.click(
             fn=translate,
             inputs=[input_text, target_language],
             outputs=output_text,
         )
+        input_text.submit(
+            fn=translate,
+            inputs=[input_text, target_language],
+            outputs=output_text,
+        )
+        input_text.input(
+            fn=_update_char_count,
+            inputs=input_text,
+            outputs=char_count,
+        )
+        clear_btn.click(
+            fn=lambda: ("", "", "0 characters"),
+            outputs=[input_text, output_text, char_count],
+        )
 
     return demo