Update app.py

app.py

@@ -347,97 +347,95 @@ def generate_reply(
 # ══════════════════════════════════════════════════════════════════════════════
 
 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');
-
 footer { display: none !important; }
 .gradio-container { background: #faf8f5 !important; }
-
-.mcard { padding: 10px 12px; border-radius: 10px; border: 2px solid #e4dfd8; background: rgba(255,255,255,.6); cursor: pointer; transition: all .2s; margin-bottom: 6px; }
-.mcard:hover { border-color: rgba(109,40,217,.3); box-shadow: 0 2px 10px rgba(109,40,217,.08); }
-.mcard.active { border-color: #6d28d9 !important; background: linear-gradient(135deg, rgba(109,40,217,.06), rgba(16,185,129,.04)) !important; }
-.mc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
-.mc-name { font-size: 13px; font-weight: 700; }
-.mc-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: rgba(109,40,217,.08); color: #6d28d9; }
-.mc-stats { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
-.mc-stat { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 5px; }
-.mc-hl { background: rgba(109,40,217,.08); color: #6d28d9; }
-.mc-ok { background: rgba(22,163,74,.09); color: #16a34a; }
-.mc-desc { font-size: 10px; color: #78716c; }
-.mc-check { display: none; } .mcard.active .mc-check { display: inline; }
-
-.pchip { display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 16px; background: #ede9e3; border: 1px solid #e4dfd8; color: #78716c; cursor: pointer; transition: all .2s; margin: 2px; }
-.pchip:hover { background: rgba(109,40,217,.08); border-color: rgba(109,40,217,.25); color: #6d28d9; }
-
 #send-btn { background: linear-gradient(135deg, #6d28d9, #7c3aed) !important; border: none !important; border-radius: 12px !important; color: white !important; font-size: 18px !important; min-width: 48px !important; }
+#chatbot { border: 1.5px solid #e4dfd8 !important; border-radius: 14px !important; background: rgba(255,255,255,.65) !important; }
+.model-info-box { padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(109,40,217,.2); background: linear-gradient(135deg, rgba(109,40,217,.04), rgba(16,185,129,.03)); font-size: 12px; line-height: 1.6; }
+.model-info-box b { color: #6d28d9; }
+.model-info-box .stats { font-size: 10px; color: #78716c; margin-top: 4px; }
 """
 
-MODEL_CARDS = """
-<div class="mcard active" id="card-moe" onclick="window._sel('Gemma-4-26B-A4B-it')">
-  <div class="mc-row"><span class="mc-name">⚡ Gemma 4 · 26B-A4B</span> <span class="mc-badge">MoE</span> <span class="mc-check">✓</span></div>
-  <div class="mc-stats"><span class="mc-stat mc-hl">GPQA 82.3%</span><span class="mc-stat mc-ok">AIME 88.3%</span><span class="mc-stat mc-ok">👁️ Vision</span></div>
-  <div class="mc-desc">3.8B active / 26B total · 128 experts · Fast inference</div>
-</div>
-<div class="mcard" id="card-dense" onclick="window._sel('Gemma-4-31B-it')">
-  <div class="mc-row"><span class="mc-name">🏆 Gemma 4 · 31B</span> <span class="mc-badge">Dense</span> <span class="mc-check">✓</span></div>
-  <div class="mc-stats"><span class="mc-stat mc-hl">AIME 89.2%</span><span class="mc-stat mc-ok">GPQA 84.3%</span><span class="mc-stat mc-ok">👁️ Vision</span></div>
-  <div class="mc-desc">30.7B Dense · Codeforces 2150 · Best quality</div>
-</div>
-"""
-
-PRESETS_CHIPS = '<div style="margin-bottom:8px">' + ''.join(
-    f'<span class="pchip" onclick="window._pre(\'{k}\')">{k.title()}</span>' for k in PRESETS
-) + '</div>'
-
-JS = """<script>
-window._sel=function(n){
-  document.querySelectorAll('.mcard').forEach(function(c){c.classList.remove('active')});
-  document.getElementById(n==='Gemma-4-26B-A4B-it'?'card-moe':'card-dense').classList.add('active');
-  var d=document.querySelector('#model-dd input');
-  if(d){var s=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set;s.call(d,n);d.dispatchEvent(new Event('input',{bubbles:true}));}
-};
-window._pre=function(k){
-  var p=""" + json.dumps(PRESETS) + """;
-  var t=document.querySelector('#sys-prompt textarea');
-  if(t){var s=Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;s.call(t,p[k]||p.general);t.dispatchEvent(new Event('input',{bubbles:true}));}
-};
-</script>"""
+# Model info display (updates when dropdown changes)
+def _model_info_html(name):
+    m = MODELS.get(name, MODELS[DEFAULT_MODEL])
+    return (
+        f'<div class="model-info-box">'
+        f'<b>{"⚡" if m["arch"]=="MoE" else "🏆"} {name}</b> '
+        f'<span style="font-size:9px;padding:2px 6px;border-radius:6px;background:rgba(109,40,217,.08);color:#6d28d9;font-weight:700">{m["arch"]}</span><br>'
+        f'<div class="stats">{m["active"]} active / {m["total"]} total · 👁️ Vision · {m["ctx"]} context<br>{m["desc"]}</div>'
+        f'</div>'
+    )
 
 with gr.Blocks(title="Gemma 4 Playground") as demo:
 
-    gr.Markdown("## 💎 Gemma 4 Playground\nGoogle DeepMind · Dense 31B / MoE 26B-A4B · Vision · Thinking · Apache 2.0")
+    gr.Markdown("## 💎 Gemma 4 Playground\nGoogle DeepMind · Dense 31B or MoE 26B-A4B · Vision · Thinking · Apache 2.0")
 
     with gr.Row():
-        # ── Sidebar ──
-        with gr.Column(scale=0, min_width=280):
-            gr.HTML(MODEL_CARDS)
-            model_dd = gr.Dropdown(choices=list(MODELS.keys()), value=DEFAULT_MODEL, elem_id="model-dd", visible=False)
-
-            gr.HTML(PRESETS_CHIPS)
-            sys_prompt = gr.Textbox(value=PRESETS["general"], label="System Prompt", lines=2, elem_id="sys-prompt")
-            thinking_radio = gr.Radio(["⚡ Fast", "🧠 Thinking"], value="⚡ Fast", label="Mode")
+        # ══ Sidebar ══
+        with gr.Column(scale=0, min_width=300):
+
+            gr.Markdown("#### Select Model")
+            model_dd = gr.Dropdown(
+                choices=list(MODELS.keys()), value=DEFAULT_MODEL,
+                label="Model", elem_id="model-dd",
+                info="MoE=Fast inference | Dense=Best quality",
+            )
+            model_info = gr.HTML(value=_model_info_html(DEFAULT_MODEL))
+
+            gr.Markdown("---")
+            gr.Markdown("#### 👁️ Vision")
+            image_input = gr.Image(label="Upload image", type="filepath", height=150)
+
+            gr.Markdown("---")
+            gr.Markdown("#### Settings")
+            thinking_radio = gr.Radio(
+                ["⚡ Fast", "🧠 Thinking"], value="⚡ Fast", label="Mode",
+            )
+            sys_prompt = gr.Textbox(
+                value=PRESETS["general"], label="System Prompt", lines=2,
+            )
+            preset_dd = gr.Dropdown(
+                choices=list(PRESETS.keys()), value="general", label="Preset",
+            )
             max_tok = gr.Slider(64, 8192, value=4096, step=64, label="Max Tokens")
             temp = gr.Slider(0.0, 1.5, value=0.6, step=0.05, label="Temperature")
             topp = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-P")
-            clear_btn = gr.Button("🗑️ Clear", size="sm")
+            clear_btn = gr.Button("🗑️ Clear conversation", size="sm")
 
-        # ── Chat ──
+        # ══ Chat ══
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(elem_id="chatbot", show_label=False, height=550)
-            image_input = gr.Textbox(value="", visible=False)
+            chatbot = gr.Chatbot(elem_id="chatbot", show_label=False, height=600)
             with gr.Row():
-                chat_input = gr.Textbox(placeholder="Message Gemma 4…", show_label=False, scale=7, autofocus=True, lines=1, max_lines=4, elem_id="chat-input")
+                chat_input = gr.Textbox(
+                    placeholder="Message Gemma 4…", show_label=False,
+                    scale=7, autofocus=True, lines=1, max_lines=4,
+                )
                 send_btn = gr.Button("↑", variant="primary", scale=0, min_width=48, elem_id="send-btn")
 
-    gr.HTML(JS)
+    # ── Events: model info update ──
+    model_dd.change(
+        fn=_model_info_html,
+        inputs=[model_dd],
+        outputs=[model_info],
+    )
 
-    # ── Logic ──
+    # ── Events: preset → system prompt ──
+    preset_dd.change(
+        fn=lambda k: PRESETS.get(k, PRESETS["general"]),
+        inputs=[preset_dd],
+        outputs=[sys_prompt],
+    )
+
+    # ── Chat logic ──
     def user_msg(msg, hist):
-        if not msg.strip(): return "", hist
+        if not msg.strip():
+            return "", hist
         return "", hist + [{"role": "user", "content": msg}]
 
     def bot_reply(hist, think, img, sysp, maxt, tmp, tp, model):
-        if not hist or hist[-1]["role"] != "user": return hist
+        if not hist or hist[-1]["role"] != "user":
+            return hist
         txt, past = hist[-1]["content"], hist[:-1]
         hist = hist + [{"role": "assistant", "content": ""}]
         for chunk in generate_reply(txt, past, think, img, sysp, maxt, tmp, tp, model):
@@ -445,10 +443,23 @@ with gr.Blocks(title="Gemma 4 Playground") as demo:
             yield hist
 
     ins = [chatbot, thinking_radio, image_input, sys_prompt, max_tok, temp, topp, model_dd]
-    send_btn.click(user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False).then(bot_reply, ins, chatbot)
-    chat_input.submit(user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False).then(bot_reply, ins, chatbot)
+
+    send_btn.click(
+        user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False
+    ).then(
+        bot_reply, ins, chatbot
+    )
+    chat_input.submit(
+        user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False
+    ).then(
+        bot_reply, ins, chatbot
+    )
     clear_btn.click(lambda: [], None, chatbot, queue=False)
 
+
+# ════════��═════════════════════════════════════════════════════════════════════
+# 7.  LAUNCH
+# ══════════════════════════════════════════════════════════════════════════════
 if __name__ == "__main__":
     print(f"[BOOT] Gemma 4 Playground · Default: {DEFAULT_MODEL}", flush=True)
     demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS)