feat: full-page language switch (UK/EN)

app.py

@@ -4,8 +4,8 @@ Ukrainian official-letter decoder. Photo or pasted text in; plain-language
 summary, required actions, deadlines, and scam flags out. Fully local:
 Tesseract OCR + Qwen3-4B-Instruct-2507 (Q4_K_M) via llama.cpp. No cloud calls.
 
-Answer-language toggle (UK/EN): the product is Ukrainian-first for my parents;
-English answers exist so hackathon judges can evaluate output quality.
+The language radio switches the whole page and the model's answer language.
+Ukrainian-first for my parents; English exists so judges can evaluate output.
 
 Build Small Hackathon 2026 · Backyard AI track.
 """
@@ -54,6 +54,7 @@ EN = "English"
 
 T = {
     "uk": {
+        # result rendering
         "stamp_danger": "Схоже на шахрайство",
         "stamp_ok": "Виглядає як справжній лист",
         "h_summary": "Про що цей лист",
@@ -71,6 +72,20 @@ T = {
         "err_empty": "Спочатку додайте лист: сфотографуйте його або вставте текст у поле зліва.",
         "err_conn": "Помилка зв'язку з моделлю:",
         "err_json": "Модель повернула некоректну відповідь. Спробуйте ще раз.",
+        # page UI
+        "wordmark": 'Розшифровувач <span class="accent">паперів</span>',
+        "tagline": (
+            "Сфотографуйте офіційний лист — отримаєте просте пояснення, "
+            "список дій, усі дати й суми та перевірку на шахрайство. "
+            "Працює повністю на цьому сервері, лист нікуди не надсилається."
+        ),
+        "lbl_image": "Фото листа",
+        "lbl_letter": "Текст листа",
+        "ph_letter": "…або вставте текст листа сюди",
+        "btn_decode": "Розшифрувати лист",
+        "btn_clear": "Очистити",
+        "lbl_examples": "Приклади",
+        "placeholder_result": "Тут з'явиться розшифровка листа.",
     },
     "en": {
         "stamp_danger": "Looks like a scam",
@@ -90,6 +105,19 @@ T = {
         "err_empty": "Add a letter first: photograph it or paste the text on the left.",
         "err_conn": "Model connection error:",
         "err_json": "The model returned a malformed answer. Try again.",
+        "wordmark": 'Paper <span class="accent">Decoder</span>',
+        "tagline": (
+            "Photograph an official Ukrainian letter — get a plain-language "
+            "explanation, an action list, every date and amount, and a scam "
+            "check. Runs entirely on this server; the letter is sent nowhere."
+        ),
+        "lbl_image": "Photo of the letter",
+        "lbl_letter": "Letter text",
+        "ph_letter": "…or paste the letter text here",
+        "btn_decode": "Decode the letter",
+        "btn_clear": "Clear",
+        "lbl_examples": "Examples",
+        "placeholder_result": "The decoded letter will appear here.",
     },
 }
 
@@ -98,6 +126,15 @@ def lang_code(choice: str) -> str:
     return "en" if choice == EN else "uk"
 
 
+def header_html(lang: str) -> str:
+    t = T[lang]
+    return (
+        '<div class="pd-header">'
+        f'<div class="pd-wordmark">{t["wordmark"]}</div>'
+        f'<div class="pd-tagline">{html.escape(t["tagline"])}</div></div>'
+    )
+
+
 # ---------------------------------------------------------------- OCR path
 
 
@@ -318,6 +355,18 @@ def decode(letter_text: str, lang_choice: str):
     yield render_result(data, tok_s, t)
 
 
+def switch_ui(lang_choice: str):
+    """Swap every static UI string when the language radio changes."""
+    t = T[lang_code(lang_choice)]
+    return (
+        header_html(lang_code(lang_choice)),
+        gr.update(label=t["lbl_image"]),
+        gr.update(label=t["lbl_letter"], placeholder=t["ph_letter"]),
+        gr.update(value=t["btn_decode"]),
+        gr.update(value=t["btn_clear"]),
+    )
+
+
 # --------------------------------------------------------------------- UI
 
 CSS = """
@@ -415,34 +464,30 @@ EXAMPLE_SCAM = """UA-BANK ПОВІДОМЛЕННЯ
 Служба безпеки банку."""
 
 with gr.Blocks(title="Paper Decoder — Розшифровувач паперів") as demo:
-    gr.HTML(
-        '<div class="pd-header">'
-        '<div class="pd-wordmark">Розшифровувач <span class="accent">паперів</span></div>'
-        '<div class="pd-tagline">Сфотографуйте офіційний лист — отримаєте просте пояснення, '
-        "список дій, усі дати й суми та перевірку на шахрайство. "
-        "Працює повністю на цьому сервері, лист нікуди не надсилається.</div></div>"
-    )
+    header = gr.HTML(header_html("uk"))
     with gr.Row():
         with gr.Column(scale=5):
             image = gr.Image(
                 type="filepath",
                 sources=["upload"],
-                label="Фото листа / Photo of the letter",
+                label=T["uk"]["lbl_image"],
                 height=260,
             )
             letter = gr.Textbox(
-                label="Текст листа / Letter text",
-                placeholder="…або вставте текст листа сюди",
+                label=T["uk"]["lbl_letter"],
+                placeholder=T["uk"]["ph_letter"],
                 lines=10,
             )
             lang = gr.Radio(
                 choices=[UK, EN],
                 value=UK,
-                label="Мова відповіді / Answer language",
+                label="Мова / Language",
             )
             with gr.Row():
-                decode_btn = gr.Button("Розшифрувати лист", variant="primary", size="lg")
-                clear_btn = gr.ClearButton([image, letter], value="Очистити")
+                decode_btn = gr.Button(
+                    T["uk"]["btn_decode"], variant="primary", size="lg"
+                )
+                clear_btn = gr.ClearButton([image, letter], value=T["uk"]["btn_clear"])
             gr.Examples(
                 examples=[[EXAMPLE_LEGIT], [EXAMPLE_SCAM]],
                 inputs=[letter],
@@ -457,6 +502,11 @@ with gr.Blocks(title="Paper Decoder — Розшифровувач папері
     image.upload(do_ocr, inputs=[image], outputs=[letter])
     decode_btn.click(decode, inputs=[letter, lang], outputs=[result])
     letter.submit(decode, inputs=[letter, lang], outputs=[result])
+    lang.change(
+        switch_ui,
+        inputs=[lang],
+        outputs=[header, image, letter, decode_btn, clear_btn],
+    )
 
 if __name__ == "__main__":
     demo.launch(css=CSS)