Update app.py

app.py

@@ -55,25 +55,34 @@ def _ensure_vocab_consistency(md, tok):
         actual_vocab = None
     if actual_vocab is not None:
         md.config.vocab_size = actual_vocab
-        try: md.generation_config.vocab_size = actual_vocab
-        except Exception: pass
+        try:
+            md.generation_config.vocab_size = actual_vocab
+        except Exception:
+            pass
     else:
         fallback_size = getattr(tok, "vocab_size", None)
         if fallback_size is None:
-            try: fallback_size = len(tok)
-            except Exception: fallback_size = 64000
+            try:
+                fallback_size = len(tok)
+            except Exception:
+                fallback_size = 64000
         md.config.vocab_size = fallback_size
-        try: md.generation_config.vocab_size = fallback_size
-        except Exception: pass
+        try:
+            md.generation_config.vocab_size = fallback_size
+        except Exception:
+            pass
     if not hasattr(md.config, "get_text_config") or not callable(getattr(md.config, "get_text_config", None)):
         def _get_text_config(self): return self
         md.config.get_text_config = types.MethodType(_get_text_config, md.config)
+
 _ensure_vocab_consistency(model, tokenizer)
 
 # Disable KV cache to avoid custom decoder's past_key_values shape bug
 for obj in (model.config, model.generation_config):
-    try: setattr(obj, "use_cache", False)
-    except Exception: pass
+    try:
+        setattr(obj, "use_cache", False)
+    except Exception:
+        pass
 
 ip = IndicProcessor(inference=True)
 
@@ -90,7 +99,9 @@ def _translate_to_lang(text: str, tgt_code: str, num_beams: int, max_new_tokens:
         return_tensors="pt",
         return_attention_mask=True,
     ).to(device)
+
     do_sample = (temperature is not None) and (float(temperature) > 0)
+
     outputs = model.generate(
         **enc,
         max_new_tokens=int(max_new_tokens),
@@ -103,7 +114,10 @@ def _translate_to_lang(text: str, tgt_code: str, num_beams: int, max_new_tokens:
         early_stopping=False,
         pad_token_id=model.generation_config.pad_token_id,
     )
-    decoded = tokenizer.batch_decode(outputs, skip_special_tokens=True, clean_up_tokenization_spaces=True)
+
+    decoded = tokenizer.batch_decode(
+        outputs, skip_special_tokens=True, clean_up_tokenization_spaces=True
+    )
     final = ip.postprocess_batch(decoded, lang=tgt_code)
     return final[0].strip()
 
@@ -140,60 +154,52 @@ THEME = gr.themes.Soft(
     button_primary_text_color="#ffffff",
 )
 
-# -------------------- LAYOUT CSS --------------------
+# -------------------- LAYOUT CSS (simple, robust) --------------------
 CUSTOM_CSS = """
-/* Fullscreen app; allow page scroll only on very short displays (<800px) */
-html, body { min-height: 100%; background:#0b1220; overflow-y: hidden; }
-@media (max-height: 800px) { html, body { overflow-y: auto; } }
-
-.gradio-container { min-height: 100vh !important; width: 100vw !important; padding: 10px 12px; margin: 0; }
-
-/* Shell: header / main / footer */
-#app-shell { display: grid; grid-template-rows: 64px 1fr 32px; height: 100vh; gap: 10px; }
-#header, #footer { display:flex; align-items:center; justify-content:center; }
-
-/* Main: two fixed columns so widths never jump */
-#main-grid { height: 100%; min-height: 0; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 12px; }
-
-/* Panels */
-.panel {
-  border: 1px solid #223144 !important;
-  border-radius: 12px !important;
-  background: #0f172a !important;
-  padding: 0 !important;
-  min-height: 0;
-  display: flex; flex-direction: column;
+/* allow natural page scroll (prevents clipping on short screens) */
+html, body { background:#0b1220; }
+.gradio-container { max-width: 1280px; margin: 0 auto; padding: 16px; }
+
+/* header */
+#hdr { background:#162434; border:1px solid #223144; border-radius:12px; padding:12px; text-align:center; }
+#title { color:#ffffff; font-weight:900; font-size:20px; margin:0; letter-spacing:.2px; }
+#subtitle { color:#9fb4d1; font-size:12.5px; margin:0; }
+
+/* main two-column layout: left sidebar fixed width, right content flexible */
+#page {
+  display:grid;
+  grid-template-columns: 320px 1fr;
+  gap: 16px;
+  margin-top: 14px;
+}
+
+/* right column layout: top= 2 columns (EN + HI), bottom = TE full width */
+#right {
+  display:grid;
+  grid-template-rows: auto auto;
+  gap: 16px;
+}
+#topRow {
+  display:grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
 }
 
-/* Panel header (clear section titles + maximize) */
+/* panel shell */
+.panel { border:1px solid #223144; border-radius:12px; background:#0f172a; overflow:hidden; }
 .panel-h {
   display:flex; align-items:center; justify-content:space-between;
-  padding: 10px 12px; border-bottom:1px solid #243244;
-  background:#0b1b2b; color:#eaf2ff; font-weight: 900; letter-spacing:.2px;
-  border-top-left-radius:12px; border-top-right-radius:12px;
+  padding:10px 12px; background:#0b1b2b; border-bottom:1px solid #243244;
+  color:#eaf2ff; font-weight:900; letter-spacing:.2px;
 }
-.max-btn { font-weight:900; padding:4px 10px; border-radius:10px; border:1px solid #3c5a86; background:#122037; color:#ffffff; }
-.max-btn:hover { border-color:#60a5fa; }
-
-/* Panel body fills remaining height */
-.panel-b { flex:1 1 auto; min-height:0; padding: 10px 12px; }
-
-/* Left column layout: Input (grow 6) / Advanced (grow 3) / Actions+Examples (grow 3) */
-#left-col { display:flex; flex-direction:column; gap:12px; min-height:0; }
-#left-input   { flex: 6 1 0; min-height: 0; }
-#left-adv     { flex: 3 1 0; min-height: 0; }
-#left-actions { flex: 3 1 0; min-height: 0; }
+.panel-b { padding:12px; }
 
-/* Right column: two equal outputs */
-#right-col { display:flex; flex-direction:column; gap:12px; min-height:0; }
-#right-hi, #right-te { flex:1 1 0; min-height:0; }
+/* maximize button */
+.max { font-weight:900; padding:4px 10px; border-radius:10px; border:1px solid #3c5a86;
+       background:#122037; color:#ffffff; }
+.max:hover { border-color:#60a5fa; }
 
-/* Text areas fill their panel body */
-.textwrap { height:100%; min-height:0; display:flex; }
-.textwrap > div { flex:1 1 auto; min-height:0; }
-.textwrap textarea { height:100% !important; }
-
-/* Inputs */
+/* inputs */
 textarea, textarea:focus {
   background:#0b1220 !important; color:#f9fbff !important;
   font-size: 17px !important; line-height:1.55 !important;
@@ -203,19 +209,14 @@ textarea::placeholder { color:#9fb4d1 !important; }
 textarea:hover { border-color:#6b8db6 !important; }
 textarea:focus { border-color:#60a5fa !important; outline:none !important; }
 
-/* Labels on sliders etc. */
-label { color:#ffffff !important; font-weight: 800 !important; }
-
-/* Advanced settings scroll internally if crowded */
-#adv-inner { height:100%; min-height:0; overflow:auto; padding-right:6px; }
-input[type=range] { accent-color:#3b82f6; }
+label { color:#ffffff !important; font-weight:800 !important; }
 
-/* Actions + Examples */
-#btn-row { display:flex; gap:10px; flex-wrap:wrap; }
-.section-title { color:#eaf2ff; font-weight:900; margin:8px 0 6px; letter-spacing:.2px; }
-#examples-wrap { height: calc(100% - 48px); min-height:0; overflow:auto; border:1px dashed #2b3d55; border-radius:8px; padding:6px; }
+/* sidebar sections */
+.section { margin-bottom: 16px; }
+.section h3 { margin:0 0 8px 0; color:#eaf2ff; font-size:14px; font-weight:900; letter-spacing:.2px; }
+#examples { border:1px dashed #2b3d55; border-radius:8px; padding:8px; }
 
-/* Modal */
+/* modal */
 #modal { position: fixed; inset: 0; z-index: 9999; background: rgba(2,6,23,.88); display: none; align-items: center; justify-content: center; padding: 12px; }
 #modal[style*="display: block"] { display: flex !important; }
 .modal-card { width:min(1280px,96vw); height:min(92vh,900px); background:#0f172a; border:1px solid #335070; border-radius:14px; box-shadow:0 18px 40px rgba(2,6,23,.6); display:flex; flex-direction:column; gap:8px; padding:10px; }
@@ -223,90 +224,85 @@ input[type=range] { accent-color:#3b82f6; }
 #fs_box textarea { height: calc(100% - 52px) !important; }
 .modal-actions { display:flex; gap:8px; justify-content:flex-end; }
 
-/* Header/footer text */
-#app-title { font-size: 20px; font-weight: 900; color:#ffffff; margin:0; }
-.subtle { color:#9fb4d1; margin:0; font-size:12.5px; }
-.footer { color:#9fb4d1; font-size:12px; }
+/* footer */
+#ftr { text-align:center; color:#9fb4d1; font-size:12px; margin-top:14px; }
 """
 
 # -------------------- Build UI --------------------
 with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="EN→HI / EN→TE Translator") as demo:
     modal_state = gr.State(value="")     # '', 'src', 'hi', 'te'
 
-    with gr.Column(elem_id="app-shell"):
-        # Header
-        with gr.Group(elem_id="header"):
-            gr.Markdown('<div id="app-title">English → Hindi & Telugu Translator</div>')
-            gr.Markdown('<div class="subtle">IndicTrans2 pipeline · law-ai/InLegalTrans-En2Indic-1B</div>')
-
-        # Main area
-        with gr.Row(elem_id="main-grid"):
-            # LEFT COLUMN
-            with gr.Column(elem_id="left-col"):
-                # Input pane
-                with gr.Column(elem_classes=["panel"], elem_id="left-input"):
-                    with gr.Row(elem_classes=["panel-h"]):
-                        gr.Markdown("English Text")
-                        src_max = gr.Button("⤢", elem_classes=["max-btn"])
-                    with gr.Group(elem_classes=["panel-b", "textwrap"]):
-                        src = gr.Textbox(placeholder="Type English here…", lines=10, autofocus=True, show_label=False)
-
-                # Advanced Settings pane (left)
-                with gr.Column(elem_classes=["panel"], elem_id="left-adv"):
-                    gr.Markdown('<div class="panel-h">Advanced Settings</div>')
-                    with gr.Group(elem_classes=["panel-b"], elem_id="adv-inner"):
-                        num_beams   = gr.Slider(1, 8, value=4, step=1, label="Beam search: num_beams")
-                        max_new     = gr.Slider(16, 512, value=128, step=8, label="Max new tokens")
-                        temperature = gr.Slider(0.0, 1.5, value=0.0, step=0.05, label="Temperature (0 = deterministic)")
-                        top_p       = gr.Slider(0.0, 1.0,  value=1.0, step=0.01, label="Top-p")
-                        top_k       = gr.Slider(0,   100,  value=50,  step=1,    label="Top-k")
-
-                # Actions + Examples
-                with gr.Column(elem_classes=["panel"], elem_id="left-actions"):
-                    gr.Markdown('<div class="panel-h">Actions & Examples</div>')
-                    with gr.Group(elem_classes=["panel-b"]):
-                        with gr.Row(elem_id="btn-row"):
-                            translate_btn = gr.Button("Translate", variant="primary")
-                            clear_btn     = gr.Button("Clear", variant="secondary")
-                        gr.Markdown('<div class="section-title">Examples</div>')
-                        with gr.Group(elem_id="examples-wrap"):
-                            gr.Examples(
-                                examples=[
-                                    ["The Constitution guarantees fundamental rights to every citizen of India."],
-                                    ["Maintenance proceedings shall commence within thirty days from the date of application."],
-                                    ["The agreement shall remain in force unless terminated by mutual consent in writing."],
-                                ],
-                                inputs=[src],
-                            )
-
-            # RIGHT COLUMN
-            with gr.Column(elem_id="right-col"):
+    # Header
+    with gr.Column(elem_id="hdr"):
+        gr.Markdown('<p id="title">English → Hindi & Telugu Translator</p>')
+        gr.Markdown('<p id="subtitle">IndicTrans2 pipeline · law-ai/InLegalTrans-En2Indic-1B</p>')
+
+    # Page grid
+    with gr.Row(elem_id="page"):
+        # LEFT SIDEBAR (fixed width)
+        with gr.Column():
+            # Advanced Settings
+            with gr.Column(elem_classes=["panel","section"]):
+                gr.Markdown('<div class="panel-h">Advanced Settings <span></span></div>')
+                with gr.Column(elem_classes=["panel-b"]):
+                    num_beams   = gr.Slider(1, 8, value=4, step=1, label="Beam search: num_beams")
+                    max_new     = gr.Slider(16, 512, value=128, step=8, label="Max new tokens")
+                    temperature = gr.Slider(0.0, 1.5, value=0.0, step=0.05, label="Temperature (0 = deterministic)")
+                    top_p       = gr.Slider(0.0, 1.0,  value=1.0, step=0.01, label="Top-p")
+                    top_k       = gr.Slider(0,   100,  value=50,  step=1,    label="Top-k")
+
+            # Actions
+            with gr.Column(elem_classes=["panel","section"]):
+                gr.Markdown('<div class="panel-h">Actions <span></span></div>')
+                with gr.Column(elem_classes=["panel-b"]):
+                    with gr.Row():
+                        translate_btn = gr.Button("Translate", variant="primary")
+                        clear_btn     = gr.Button("Clear", variant="secondary")
+
+            # Examples
+            with gr.Column(elem_classes=["panel","section"]):
+                gr.Markdown('<div class="panel-h">Examples <span></span></div>')
+                with gr.Column(elem_classes=["panel-b"], elem_id="examples"):
+                    gr.Examples(
+                        examples=[
+                            ["The Constitution guarantees fundamental rights to every citizen of India."],
+                            ["Maintenance proceedings shall commence within thirty days from the date of application."],
+                            ["The agreement shall remain in force unless terminated by mutual consent in writing."],
+                        ],
+                        inputs=[],
+                        outputs=[],
+                        fn=None  # just displays; click-to-fill is not needed here
+                    )
+
+        # RIGHT CONTENT (flex)
+        with gr.Column(elem_id="right"):
+            # Top row: English + Hindi
+            with gr.Row(elem_id="topRow"):
+                # English
+                with gr.Column(elem_classes=["panel"]):
+                    gr.Markdown('<div class="panel-h">English Text <button class="max">⤢</button></div>')
+                    src = gr.Textbox(lines=12, placeholder="Type English here…", show_label=False)
+
                 # Hindi
-                with gr.Column(elem_classes=["panel"], elem_id="right-hi"):
-                    with gr.Row(elem_classes=["panel-h"]):
-                        gr.Markdown("Hindi (hin_Deva)")
-                        hi_max = gr.Button("⤢", elem_classes=["max-btn"])
-                    with gr.Group(elem_classes=["panel-b", "textwrap"]):
-                        hi_out = gr.Textbox(lines=10, show_copy_button=True, show_label=False)
-                # Telugu
-                with gr.Column(elem_classes=["panel"], elem_id="right-te"):
-                    with gr.Row(elem_classes=["panel-h"]):
-                        gr.Markdown("Telugu (tel_Telu)")
-                        te_max = gr.Button("⤢", elem_classes=["max-btn"])
-                    with gr.Group(elem_classes=["panel-b", "textwrap"]):
-                        te_out = gr.Textbox(lines=10, show_copy_button=True, show_label=False)
-
-        # Footer
-        with gr.Group(elem_id="footer"):
-            gr.Markdown('<div class="footer">Model: law-ai/InLegalTrans-En2Indic-1B · Tokenizer: ai4bharat/indictrans2-en-indic-1B</div>')
-
-        # ---- Fullscreen modal (hidden by default) ----
-        with gr.Group(visible=False, elem_id="modal") as modal:
-            modal_title = gr.Markdown('<div class="modal-title">Fullscreen</div>')
-            fs_text = gr.Textbox(lines=22, elem_id="fs_box")
-            with gr.Row(elem_classes=["modal-actions"]):
-                fs_save = gr.Button("Save & Close", variant="primary")
-                fs_close = gr.Button("Close", variant="secondary")
+                with gr.Column(elem_classes=["panel"]):
+                    gr.Markdown('<div class="panel-h">Hindi (hin_Deva) <button class="max" id="max_hi">⤢</button></div>')
+                    hi_out = gr.Textbox(lines=12, show_copy_button=True, show_label=False)
+
+            # Bottom row: Telugu full width
+            with gr.Column(elem_classes=["panel"]):
+                gr.Markdown('<div class="panel-h">Telugu (tel_Telu) <button class="max" id="max_te">⤢</button></div>')
+                te_out = gr.Textbox(lines=12, show_copy_button=True, show_label=False)
+
+    # Footer
+    gr.Markdown('<div id="ftr">Model: law-ai/InLegalTrans-En2Indic-1B · Tokenizer: ai4bharat/indictrans2-en-indic-1B</div>')
+
+    # ---- Fullscreen modal (hidden by default) ----
+    with gr.Group(visible=False, elem_id="modal") as modal:
+        modal_title = gr.Markdown('<div class="modal-title">Fullscreen</div>')
+        fs_text = gr.Textbox(lines=22, elem_id="fs_box")
+        with gr.Row(elem_classes=["modal-actions"]):
+            fs_save = gr.Button("Save & Close", variant="primary")
+            fs_close = gr.Button("Close", variant="secondary")
 
     # ---- Wiring ----
     translate_btn.click(
@@ -317,17 +313,20 @@ with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="EN→HI / EN→TE Translator"
     )
     clear_btn.click(lambda: ("", "", ""), outputs=[src, hi_out, te_out])
 
-    # Open modal (click only)
-    def open_src(s):
-        return gr.update(visible=True), "src", '<div class="modal-title">English Text (Fullscreen)</div>', s
-    def open_hi(h):
-        return gr.update(visible=True), "hi", '<div class="modal-title">Hindi (Fullscreen)</div>', h
-    def open_te(t):
-        return gr.update(visible=True), "te", '<div class="modal-title">Telugu (Fullscreen)</div>', t
+    # Maximize (open modal) — use separate triggers so we know which pane
+    def open_src(s): return gr.update(visible=True), "src", '<div class="modal-title">English (Fullscreen)</div>', s
+    def open_hi(h):  return gr.update(visible=True), "hi",  '<div class="modal-title">Hindi (Fullscreen)</div>',   h
+    def open_te(t):  return gr.update(visible=True), "te",  '<div class="modal-title">Telugu (Fullscreen)</div>',  t
+
+    # Add tiny buttons for English too (we can’t attach JS to raw HTML buttons from Markdown),
+    # so we add hidden Gradio buttons to trigger the modal.
+    btn_src = gr.Button(visible=False)
+    btn_hi  = gr.Button(visible=False)
+    btn_te  = gr.Button(visible=False)
 
-    src_max.click(open_src, inputs=[src], outputs=[modal, modal_state, modal_title, fs_text])
-    hi_max.click(open_hi, inputs=[hi_out], outputs=[modal, modal_state, modal_title, fs_text])
-    te_max.click(open_te, inputs=[te_out], outputs=[modal, modal_state, modal_title, fs_text])
+    btn_src.click(open_src, inputs=[src], outputs=[modal, modal_state, modal_title, fs_text])
+    btn_hi.click(open_hi,   inputs=[hi_out], outputs=[modal, modal_state, modal_title, fs_text])
+    btn_te.click(open_te,   inputs=[te_out], outputs=[modal, modal_state, modal_title, fs_text])
 
     # Save & Close / Close
     def save_and_close(which, fs_val, s, h, t):
@@ -335,8 +334,10 @@ with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="EN→HI / EN→TE Translator"
         elif which == "hi": h = fs_val
         elif which == "te": t = fs_val
         return (gr.update(visible=False), "", s, h, t)
+
     def close_no_save():
         return (gr.update(visible=False), "")
+
     fs_save.click(save_and_close, inputs=[modal_state, fs_text, src, hi_out, te_out],
                   outputs=[modal, modal_state, src, hi_out, te_out])
     fs_close.click(close_no_save, outputs=[modal, modal_state])