Update app.py

app.py

@@ -55,34 +55,25 @@ 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)
 
@@ -99,9 +90,7 @@ 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),
@@ -114,10 +103,7 @@ 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()
 
@@ -154,52 +140,52 @@ THEME = gr.themes.Soft(
     button_primary_text_color="#ffffff",
 )
 
-# -------------------- LAYOUT CSS (simple, robust) --------------------
+# -------------------- LAYOUT CSS (20/40/40 exact split) --------------------
 CUSTOM_CSS = """
-/* allow natural page scroll (prevents clipping on short screens) */
-html, body { background:#0b1220; }
-.gradio-container { max-width: 1280px; margin: 0 auto; padding: 16px; }
+/* Full-bleed app */
+html, body { height: 100%; background:#0b1220; }
+.gradio-container { height: 100vh !important; width: 100vw !important; max-width: 100vw !important; margin: 0; padding: 0 8px 8px 8px; }
 
-/* header */
-#hdr { background:#162434; border:1px solid #223144; border-radius:12px; padding:12px; text-align:center; }
+/* Header */
+#hdr { height: 64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
+       background:#162434; border:1px solid #223144; border-radius:12px; margin:8px 0; }
 #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;
+/* Main grid: 20% / 40% / 40% widths; fills the rest of the viewport height */
+#main {
+  height: calc(100vh - 64px - 16px);  /* header + top/bottom margins */
+  display: grid;
+  grid-template-columns: 20% 40% 40%;
+  gap: 10px;
 }
 
-/* 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 shell */
-.panel { border:1px solid #223144; border-radius:12px; background:#0f172a; overflow:hidden; }
+/* Panels */
+.panel { border:1px solid #223144; border-radius:12px; background:#0f172a; display:flex; flex-direction:column; min-height:0; }
 .panel-h {
   display:flex; align-items:center; justify-content:space-between;
   padding:10px 12px; background:#0b1b2b; border-bottom:1px solid #243244;
   color:#eaf2ff; font-weight:900; letter-spacing:.2px;
+  border-top-left-radius:12px; border-top-right-radius:12px;
 }
-.panel-b { padding:12px; }
+.panel-b { flex:1 1 auto; min-height:0; padding:10px 12px; }
 
-/* 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; }
+/* Left column (Advanced) = 100% of main height; scroll inside if overflow */
+#left { height: 100%; }
+#adv-inner { height: 100%; overflow: auto; padding-right: 6px; }
+label { color:#ffffff !important; font-weight:800 !important; }
+
+/* Middle column splits 75% (input) / 25% (buttons) */
+#middle { display:grid; grid-template-rows: 75% 25%; height:100%; gap:10px; }
+
+/* Right column splits 50% / 50% */
+#right { display:grid; grid-template-rows: 1fr 1fr; height:100%; gap:10px; }
+
+/* Textareas fill their panel without overflow */
+.textwrap { height:100%; min-height:0; display:flex; }
+.textwrap > div { flex:1 1 auto; min-height:0; }
+.textwrap textarea { height:100% !important; }
 
-/* inputs */
 textarea, textarea:focus {
   background:#0b1220 !important; color:#f9fbff !important;
   font-size: 17px !important; line-height:1.55 !important;
@@ -209,99 +195,77 @@ textarea::placeholder { color:#9fb4d1 !important; }
 textarea:hover { border-color:#6b8db6 !important; }
 textarea:focus { border-color:#60a5fa !important; outline:none !important; }
 
-label { color:#ffffff !important; font-weight:800 !important; }
+/* Buttons row */
+#btnrow { display:flex; align-items:center; justify-content:center; gap:14px; height:100%; }
+#btnrow > button { min-width: 160px; height: 46px; font-weight:800; border-radius:10px; }
 
-/* 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; }
+/* Maximize button (Hindi/Telugu headers) */
+.max { font-weight:900; padding:4px 10px; border-radius:10px; border:1px solid #3c5a86;
+       background:#122037; color:#ffffff; }
+.max:hover { border-color:#60a5fa; }
 
-/* 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; }
 .modal-title { color:#ffffff; font-weight:800; font-size:18px; letter-spacing:.2px; margin:0; }
 #fs_box textarea { height: calc(100% - 52px) !important; }
 .modal-actions { display:flex; gap:8px; justify-content:flex-end; }
-
-/* 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'
+    modal_state = gr.State(value="")  # '', 'hi', 'te'
 
     # 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"]):
-                    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
+    # Main 20/40/40 layout
+    with gr.Row(elem_id="main"):
+        # LEFT: Advanced (20% width, 100% height)
+        with gr.Column(elem_id="left", elem_classes=["panel"]):
+            gr.Markdown('<div class="panel-h">Advanced Settings</div>')
+            with gr.Group(elem_id="adv-inner", 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")
+
+        # MIDDLE: English (40% width) → 75% input, 25% buttons
+        with gr.Column(elem_id="middle"):
+            with gr.Column(elem_classes=["panel"]):
+                gr.Markdown('<div class="panel-h">English Text</div>')
+                with gr.Group(elem_classes=["panel-b","textwrap"]):
+                    src = gr.Textbox(placeholder="Type English here…", show_label=False, lines=14)
             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)
+                gr.Markdown('<div class="panel-h">Actions</div>')
+                with gr.Row(elem_id="btnrow", elem_classes=["panel-b"]):
+                    translate_btn = gr.Button("Translate", variant="primary")
+                    clear_btn     = gr.Button("Clear", variant="secondary")
 
-    # Footer
-    gr.Markdown('<div id="ftr">Model: law-ai/InLegalTrans-En2Indic-1B · Tokenizer: ai4bharat/indictrans2-en-indic-1B</div>')
+        # RIGHT: outputs (40% width) → 50% Hindi, 50% Telugu
+        with gr.Column(elem_id="right"):
+            with gr.Column(elem_classes=["panel"]):
+                with gr.Row(elem_classes=["panel-h"]):
+                    gr.Markdown("Hindi (hin_Deva)")
+                    hi_max = gr.Button("⤢", elem_classes=["max"])
+                with gr.Group(elem_classes=["panel-b","textwrap"]):
+                    hi_out = gr.Textbox(show_copy_button=True, show_label=False, lines=10)
+            with gr.Column(elem_classes=["panel"]):
+                with gr.Row(elem_classes=["panel-h"]):
+                    gr.Markdown("Telugu (tel_Telu)")
+                    te_max = gr.Button("⤢", elem_classes=["max"])
+                with gr.Group(elem_classes=["panel-b","textwrap"]):
+                    te_out = gr.Textbox(show_copy_button=True, show_label=False, lines=10)
 
     # ---- 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 ----
@@ -313,34 +277,12 @@ with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title="EN→HI / EN→TE Translator"
     )
     clear_btn.click(lambda: ("", "", ""), outputs=[src, hi_out, te_out])
 
-    # 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)
-
-    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):
-        if which == "src": s = fs_val
-        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])
+    # Maximize handlers (read-only preview; no save-back)
+    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
+    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])
+    fs_close.click(lambda: (gr.update(visible=False), ""), outputs=[modal, modal_state])
 
 # Keep queue to enable buffering; omit unsupported args on older Gradio
 demo.queue(max_size=48).launch()