Update app.py

app.py

@@ -343,28 +343,36 @@ def generate_reply(
 # ══════════════════════════════════════════════════════════════════════════════
 
 # ══════════════════════════════════════════════════════════════════════════════
-# 6.  GRADIO UI — Sidebar + Chat layout
+# 6.  GRADIO UI
 # ══════════════════════════════════════════════════════════════════════════════
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
 @import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400;500;700;800&display=swap');
 :root{--v:#6d28d9;--v2:#7c3aed;--teal:#0d9488;--cream:#faf8f5;--ink:#1c1917;--ink3:#78716c;--ink4:#a8a29e;--line:#e4dfd8;--fog:#ede9e3}
+
+/* === FIX: lock viewport, kill all outer scrolling === */
+html,body,.gradio-container,.main,.wrap,.contain{overflow:hidden!important;height:100vh!important;max-height:100vh!important}
 .gradio-container{background:var(--cream)!important;font-family:'Cabinet Grotesk',sans-serif!important;max-width:100%!important;padding:0!important}
 footer,.svelte-1rjryqp{display:none!important}
 
+/* Background orbs */
 #orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
-.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:drift linear infinite}
-.orb1{width:500px;height:500px;background:radial-gradient(circle,rgba(109,40,217,.3),transparent 70%);top:-100px;left:-100px;animation-duration:22s}
-.orb2{width:380px;height:380px;background:radial-gradient(circle,rgba(16,185,129,.25),transparent 70%);top:5%;right:-60px;animation-duration:28s;animation-delay:-9s}
+.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:drift 22s linear infinite}
+.orb1{width:450px;height:450px;background:radial-gradient(circle,rgba(109,40,217,.3),transparent 70%);top:-80px;left:-80px}
+.orb2{width:350px;height:350px;background:radial-gradient(circle,rgba(16,185,129,.25),transparent 70%);top:5%;right:-50px;animation-delay:-9s}
 @keyframes drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.97)}100%{transform:translate(0,0) scale(1)}}
 
-#shell{display:grid!important;grid-template-columns:280px 1fr!important;height:100vh!important;overflow:hidden!important;position:relative;z-index:1;gap:0!important;padding:0!important}
-#sidebar{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(24px);border-right:1px solid var(--line)!important;overflow-y:auto!important;padding:0!important;border:none!important;border-radius:0!important;display:flex!important;flex-direction:column!important;gap:0!important}
+/* === Shell: sidebar + main === */
+#shell-row{height:100vh!important;overflow:hidden!important;flex-wrap:nowrap!important;gap:0!important;padding:0!important;position:relative;z-index:1}
+
+/* === Sidebar === */
+#sidebar{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(24px);border-right:1px solid var(--line)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;border-radius:0!important;max-width:280px!important;min-width:280px!important;height:100vh!important}
 #sidebar::-webkit-scrollbar{width:3px}
 #sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
-#sidebar .gr-group{background:none!important;border:none!important;padding:0!important}
+#sidebar .gr-group{background:none!important;border:none!important;padding:0!important;box-shadow:none!important}
 
+/* Logo */
 #logo-area{padding:18px 16px 14px;border-bottom:1px solid var(--line)}
 .logo-row{display:flex;align-items:center;gap:10px}
 .logo-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#6d28d9,#a78bfa,#10b981);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 14px rgba(109,40,217,.3);flex-shrink:0}
@@ -372,6 +380,7 @@ footer,.svelte-1rjryqp{display:none!important}
 .logo-name em{color:var(--v);font-style:italic}
 .logo-sub{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink4)}
 
+/* Model cards */
 .mcard{margin:6px 12px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer;transition:all .25s}
 .mcard:hover{border-color:rgba(109,40,217,.3);box-shadow:0 2px 12px rgba(109,40,217,.08)}
 .mcard.active{border-color:var(--v)!important;background:linear-gradient(135deg,rgba(109,40,217,.06),rgba(16,185,129,.04))!important;box-shadow:0 4px 20px rgba(109,40,217,.12)}
@@ -384,40 +393,41 @@ footer,.svelte-1rjryqp{display:none!important}
 .mc-ok{background:rgba(22,163,74,.09);color:#16a34a}
 .mc-desc{font-size:9px;color:var(--ink3);line-height:1.5}
 .mc-check{display:none;font-size:14px}.mcard.active .mc-check{display:inline}
-
 .sec-lbl{font-size:8px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink4);padding:10px 14px 4px}
 .preset-chips{display:flex;flex-wrap:wrap;gap:3px;padding:0 14px 6px}
 .pchip{font-size:9px;font-weight:600;padding:3px 9px;border-radius:16px;background:var(--fog);border:1px solid var(--line);color:var(--ink3);cursor:pointer;transition:all .2s}
 .pchip:hover{background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.25);color:var(--v)}
-
-#sidebar-settings{padding:4px 12px 12px;flex:1}
+#sidebar-settings{padding:4px 12px 12px}
 #sidebar-settings label span{font-size:11px!important;font-weight:600!important;color:var(--ink3)!important}
-#sidebar-settings textarea{background:var(--fog)!important;border:1.5px solid var(--line)!important;border-radius:8px!important;font-size:11px!important;padding:6px 8px!important;min-height:50px!important}
+#sidebar-settings textarea{background:var(--fog)!important;border:1.5px solid var(--line)!important;border-radius:8px!important;font-size:11px!important;min-height:50px!important}
 #sidebar-settings textarea:focus{border-color:rgba(109,40,217,.35)!important;box-shadow:0 0 0 3px rgba(109,40,217,.08)!important}
 #clear-btn{margin:8px 12px 12px!important;border-radius:8px!important;border:1.5px solid var(--line)!important;background:var(--fog)!important;color:var(--ink3)!important;font-size:11px!important}
 #clear-btn:hover{border-color:rgba(225,29,72,.3)!important;color:#e11d48!important}
 
-#main-col{display:flex!important;flex-direction:column!important;height:100vh!important;overflow:hidden!important;padding:0!important;background:rgba(250,248,245,.4)!important;border:none!important;border-radius:0!important}
-#main-col .gr-group{background:none!important;border:none!important}
-#chat-header{padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(20px);display:flex;align-items:center;gap:10px}
+/* === Main column === */
+#main-col{display:flex!important;flex-direction:column!important;height:100vh!important;overflow:hidden!important;padding:0!important;background:rgba(250,248,245,.4)!important;border-radius:0!important;border:none!important}
+#chat-header{padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(20px);flex-shrink:0}
+.hdr-row{display:flex;align-items:center;gap:10px}
 .dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--v),#10b981);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
 @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(109,40,217,.4)}50%{box-shadow:0 0 0 4px rgba(109,40,217,0)}}
 .hdr-model-name{font-size:12px;font-weight:700;color:var(--v);font-family:'Geist Mono',monospace}
 .hdr-model-meta{font-size:10px;color:var(--ink4);margin-left:auto;font-family:'Geist Mono',monospace}
 
-#chatbot{flex:1!important;min-height:0!important;overflow-y:auto!important;border:none!important;border-radius:0!important;background:transparent!important}
+/* === CHATBOT: fill remaining space, internal scroll === */
+#chatbot{flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important;overflow-y:auto!important;border:none!important;border-radius:0!important;background:transparent!important}
+#chatbot>.wrapper{height:100%!important;max-height:none!important}
 #chatbot .bot{background:rgba(109,40,217,.03)!important;border-left:3px solid rgba(109,40,217,.15)!important;border-radius:12px!important}
-#input-row{padding:12px 20px!important;border-top:1px solid var(--line)!important;background:rgba(255,255,255,.8)!important;backdrop-filter:blur(20px);flex-shrink:0!important}
+
+/* === Input row: fixed at bottom === */
+#input-row{padding:10px 16px!important;border-top:1px solid var(--line)!important;background:rgba(255,255,255,.85)!important;backdrop-filter:blur(20px);flex-shrink:0!important;flex-grow:0!important}
 #chat-input textarea{border-radius:14px!important;border:1.5px solid var(--line)!important;background:white!important;font-size:13px!important}
 #chat-input textarea:focus{border-color:rgba(109,40,217,.35)!important;box-shadow:0 0 0 3px rgba(109,40,217,.08)!important}
 #send-btn{background:linear-gradient(135deg,var(--v),var(--v2))!important;border:none!important;border-radius:12px!important;color:white!important;font-weight:700!important;min-width:48px!important;font-size:18px!important}
-.ex-card{background:white;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:all .22s}
-.ex-card:hover{border-color:rgba(109,40,217,.3);box-shadow:0 2px 12px rgba(28,25,23,.06);transform:translateY(-2px)}
-.ex-icon{font-size:16px;display:block;margin-bottom:3px}
-.ex-title{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:1px}
-.ex-desc{font-size:9px;color:var(--ink4)}
 
-@media(max-width:768px){#shell{grid-template-columns:1fr!important}#sidebar{display:none!important}}
+@media(max-width:768px){
+  #shell-row{flex-direction:column!important}
+  #sidebar{display:none!important}
+}
 """
 
 SIDEBAR_LOGO = '<div id="logo-area"><div class="logo-row"><div class="logo-icon">💎</div><div><div class="logo-name"><em>Gemma</em> 4</div><div class="logo-sub">Google DeepMind</div></div></div></div>'
@@ -436,14 +446,7 @@ MODEL_CARDS_HTML = """<div class="sec-lbl">Select Model</div>
 
 PRESETS_HTML = '<div class="sec-lbl">Preset</div><div class="preset-chips"><span class="pchip" onclick="window._setPreset(\'general\')">General</span><span class="pchip" onclick="window._setPreset(\'code\')">Code</span><span class="pchip" onclick="window._setPreset(\'math\')">Math</span><span class="pchip" onclick="window._setPreset(\'creative\')">Creative</span><span class="pchip" onclick="window._setPreset(\'translate\')">Translate</span><span class="pchip" onclick="window._setPreset(\'research\')">Research</span></div>'
 
-CHAT_HEADER_HTML = '<div id="chat-header"><div class="dot"></div><span class="hdr-model-name" id="hdrModelName">Gemma-4-26B-A4B-it</span><span class="hdr-model-meta" id="hdrModelMeta">MoE · 3.8B active · 256K ctx</span></div>'
-
-EXAMPLES_HTML = """<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:460px;margin:40px auto">
-<div class="ex-card" onclick="window._sendEx('Explain how Gemma 4 MoE architecture works with 128 experts and hybrid attention.')"><span class="ex-icon">💎</span><div class="ex-title">Architecture</div><div class="ex-desc">MoE + hybrid attention</div></div>
-<div class="ex-card" onclick="window._sendEx('Write a Python async web scraper with retry logic, rate limiting, and type hints.')"><span class="ex-icon">💻</span><div class="ex-title">Code</div><div class="ex-desc">Production-quality Python</div></div>
-<div class="ex-card" onclick="window._sendEx('한국의 K-pop이 세계적으로 성공한 이유를 문화적, 경제적 관점에서 분석해주세요.')"><span class="ex-icon">🌐</span><div class="ex-title">다국어</div><div class="ex-desc">Korean, Japanese, Arabic…</div></div>
-<div class="ex-card" onclick="window._sendEx('Solve: Find all real solutions to x³ - 6x² + 11x - 6 = 0')"><span class="ex-icon">🧮</span><div class="ex-title">Math</div><div class="ex-desc">Step-by-step reasoning</div></div>
-</div>"""
+CHAT_HEADER_HTML = '<div id="chat-header"><div class="hdr-row"><div class="dot"></div><span class="hdr-model-name" id="hdrModelName">Gemma-4-26B-A4B-it</span><span class="hdr-model-meta" id="hdrModelMeta">MoE · 3.8B active · 256K ctx</span></div></div>'
 
 BRIDGE_JS = """<script>
 window._selectModel=function(name){
@@ -453,16 +456,16 @@ window._selectModel=function(name){
   var meta={'Gemma-4-26B-A4B-it':'MoE · 3.8B active · 256K ctx','Gemma-4-31B-it':'Dense · 30.7B · 256K ctx'};
   var hm=document.getElementById('hdrModelMeta');if(hm)hm.textContent=meta[name]||'';
   var dd=document.querySelector('#model-select input');
-  if(dd){var nativeSet=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set;nativeSet.call(dd,name);dd.dispatchEvent(new Event('input',{bubbles:true}));}
+  if(dd){var ns=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set;ns.call(dd,name);dd.dispatchEvent(new Event('input',{bubbles:true}));}
 };
 window._sendEx=function(text){
   var ta=document.querySelector('#chat-input textarea');
-  if(ta){var nativeSet=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;nativeSet.call(ta,text);ta.dispatchEvent(new Event('input',{bubbles:true}));ta.focus();}
+  if(ta){var ns=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;ns.call(ta,text);ta.dispatchEvent(new Event('input',{bubbles:true}));ta.focus();}
 };
 window._setPreset=function(key){
-  var presets={general:'You are Gemma 4, a highly capable multimodal AI assistant by Google DeepMind. Think step by step for complex questions.',code:'You are an expert software engineer. Write clean, efficient, well-commented code.',math:'You are a world-class mathematician. Break problems step-by-step. Show full working.',creative:'You are a brilliant creative writer. Be imaginative, vivid, and engaging.',translate:'You are a professional translator fluent in 140+ languages.',research:'You are a rigorous research analyst. Provide structured, well-reasoned analysis.'};
+  var p={general:'You are Gemma 4, a highly capable multimodal AI assistant by Google DeepMind. Think step by step for complex questions.',code:'You are an expert software engineer. Write clean, efficient, well-commented code.',math:'You are a world-class mathematician. Break problems step-by-step.',creative:'You are a brilliant creative writer. Be imaginative, vivid, and engaging.',translate:'You are a professional translator fluent in 140+ languages.',research:'You are a rigorous research analyst. Provide structured, well-reasoned analysis.'};
   var ta=document.querySelector('#sidebar-settings textarea');
-  if(ta){var nativeSet=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;nativeSet.call(ta,presets[key]||presets.general);ta.dispatchEvent(new Event('input',{bubbles:true}));}
+  if(ta){var ns=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;ns.call(ta,p[key]||p.general);ta.dispatchEvent(new Event('input',{bubbles:true}));}
 };
 </script>"""
 
@@ -470,7 +473,9 @@ window._setPreset=function(key){
 with gr.Blocks(title="Gemma 4 Playground", fill_height=True) as demo:
     gr.HTML('<div id="orbs"><div class="orb orb1"></div><div class="orb orb2"></div></div>')
 
-    with gr.Row(elem_id="shell"):
+    with gr.Row(elem_id="shell-row", equal_height=True):
+
+        # ═══ SIDEBAR ═══
         with gr.Column(scale=0, min_width=280, elem_id="sidebar"):
             gr.HTML(SIDEBAR_LOGO)
             gr.HTML(MODEL_CARDS_HTML)
@@ -484,11 +489,14 @@ with gr.Blocks(title="Gemma 4 Playground", fill_height=True) as demo:
                 topp_sl = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-P")
             clear_btn = gr.Button("🗑️ Clear conversation", elem_id="clear-btn")
 
+        # ═══ MAIN ═══
         with gr.Column(scale=1, elem_id="main-col"):
             gr.HTML(CHAT_HEADER_HTML)
+
             chatbot = gr.Chatbot(
-                elem_id="chatbot", show_label=False,
-                placeholder=EXAMPLES_HTML,
+                elem_id="chatbot",
+                show_label=False,
+                height="calc(100vh - 140px)",
                 latex_delimiters=[
                     {"left": "$$", "right": "$$", "display": True},
                     {"left": "$", "right": "$", "display": False},
@@ -496,19 +504,27 @@ with gr.Blocks(title="Gemma 4 Playground", fill_height=True) as demo:
                     {"left": "\\[", "right": "\\]", "display": True},
                 ],
             )
+
             image_input = gr.Textbox(value="", visible=False)
+
             with gr.Row(elem_id="input-row"):
-                chat_input = gr.Textbox(placeholder="Message Gemma 4…", lines=1, max_lines=5, scale=7, elem_id="chat-input", show_label=False, autofocus=True)
+                chat_input = gr.Textbox(
+                    placeholder="Message Gemma 4…", lines=1, max_lines=4,
+                    scale=7, elem_id="chat-input", show_label=False, autofocus=True,
+                )
                 send_btn = gr.Button("↑", variant="primary", scale=0, min_width=48, elem_id="send-btn")
 
     gr.HTML(BRIDGE_JS)
 
+    # ── Chat logic ──
     def user_msg(message, history):
-        if not message.strip(): return "", history
+        if not message.strip():
+            return "", history
         return "", history + [{"role": "user", "content": message}]
 
     def bot_reply(history, thinking_mode, image_data, system_prompt, max_new_tokens, temperature, top_p, model_choice):
-        if not history or history[-1]["role"] != "user": return history
+        if not history or history[-1]["role"] != "user":
+            return history
         user_text = history[-1]["content"]
         past = history[:-1]
         history = history + [{"role": "assistant", "content": ""}]