Update app.py

app.py

@@ -343,49 +343,284 @@ def generate_reply(
 # ══════════════════════════════════════════════════════════════════════════════
 # 6.  GRADIO CHAT INTERFACE — ZeroGPU compatible (must use demo.launch())
 # ══════════════════════════════════════════════════════════════════════════════
-demo = gr.ChatInterface(
-    fn=generate_reply,
-    chatbot=gr.Chatbot(
-        scale=1,
+# ══════════════════════════════════════════════════════════════════════════════
+# 6.  GRADIO UI — Custom design inspired by index.html
+# ══════════════════════════════════════════════════════════════════════════════
+
+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;
+}
+
+/* Global overrides */
+.gradio-container { background: var(--cream) !important; font-family: 'Cabinet Grotesk', sans-serif !important; }
+footer { display: none !important; }
+
+/* Animated 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: .45; animation: drift linear infinite; }
+.orb1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(109,40,217,.35), transparent 70%); top: -100px; left: -100px; animation-duration: 22s; }
+.orb2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(16,185,129,.28), transparent 70%); top: 5%; right: -60px; animation-duration: 28s; animation-delay: -9s; }
+.orb3 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(252,211,77,.22), transparent 70%); bottom: -60px; left: 35%; animation-duration: 19s; animation-delay: -5s; }
+@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)} }
+.bg-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(28,25,23,.05) 1px, transparent 1px); background-size: 28px 28px; }
+
+/* Header banner */
+#header-banner { text-align: center; padding: 24px 16px 8px; position: relative; z-index: 1; }
+#header-banner .logo-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #6d28d9, #a78bfa, #10b981); align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 30px rgba(109,40,217,.25); margin-bottom: 10px; animation: float 4s ease-in-out infinite; }
+@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+#header-banner h1 { font-family: 'Instrument Serif', serif !important; font-size: 32px !important; color: var(--ink) !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; background: none !important; }
+#header-banner h1 em { color: var(--v); font-style: italic; }
+#header-banner .sub { font-size: 13px; color: var(--ink3); margin-top: 4px; }
+#header-banner .badges { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
+#header-banner .badge { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; font-family: 'Geist Mono', monospace; }
+.wb-purple { background: rgba(109,40,217,.08); color: var(--v); }
+.wb-green { background: rgba(22,163,74,.08); color: #16a34a; }
+.wb-amber { background: rgba(217,119,6,.08); color: #d97706; }
+.wb-teal { background: rgba(13,148,136,.08); color: var(--teal); }
+
+/* Model card */
+#model-card { margin: 8px auto; max-width: 680px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid rgba(109,40,217,.2); background: linear-gradient(135deg, rgba(109,40,217,.04), rgba(16,185,129,.03)); position: relative; z-index: 1; }
+#model-card .mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+#model-card .mc-name { font-size: 13px; font-weight: 700; color: var(--ink); }
+#model-card .mc-arch { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(109,40,217,.08); color: var(--v); font-family: 'Geist Mono', monospace; letter-spacing: .4px; }
+#model-card .mc-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
+#model-card .mc-stat { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 6px; font-family: 'Geist Mono', monospace; }
+.mc-hl { background: rgba(109,40,217,.08); color: var(--v); }
+.mc-ok { background: rgba(22,163,74,.09); color: #16a34a; }
+#model-card .mc-desc { font-size: 10px; color: var(--ink3); line-height: 1.6; }
+#model-card .mc-links { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+#model-card .mc-links a { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 16px; text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; }
+
+/* Example cards */
+#examples-area { max-width: 680px; margin: 12px auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; position: relative; z-index: 1; }
+.ex-card { background: white; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; 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: 18px; display: block; margin-bottom: 4px; }
+.ex-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
+.ex-desc { font-size: 10px; color: var(--ink4); }
+
+/* Chat area styling */
+#chatbot { border-radius: 16px !important; border: 1.5px solid var(--line) !important; background: rgba(255,255,255,.7) !important; backdrop-filter: blur(12px); position: relative; z-index: 1; }
+#chatbot .message { font-family: 'Cabinet Grotesk', sans-serif !important; }
+#chatbot .bot { background: rgba(109,40,217,.03) !important; border-left: 3px solid rgba(109,40,217,.2) !important; }
+
+/* Settings row */
+#settings-row { position: relative; z-index: 1; }
+#settings-row .gr-accordion { border-radius: 12px !important; border: 1.5px solid var(--line) !important; background: rgba(255,255,255,.6) !important; }
+
+/* Input area */
+#chat-input { border-radius: 14px !important; border: 1.5px solid var(--line) !important; background: white !important; }
+#chat-input:focus-within { border-color: rgba(109,40,217,.35) !important; box-shadow: 0 0 0 3px rgba(109,40,217,.08) !important; }
+
+/* Submit button */
+.primary { background: linear-gradient(135deg, var(--v), var(--v2)) !important; border: none !important; border-radius: 12px !important; }
+
+/* Model dropdown */
+#model-select .wrap { border-color: rgba(109,40,217,.2) !important; }
+#model-select .wrap:focus-within { border-color: var(--v) !important; box-shadow: 0 0 0 3px rgba(109,40,217,.08) !important; }
+
+@media(max-width:768px) {
+  #examples-area { grid-template-columns: 1fr; }
+  #header-banner h1 { font-size: 24px !important; }
+}
+"""
+
+HEADER_HTML = """
+<div id="orbs"><div class="orb orb1"></div><div class="orb orb2"></div><div class="orb orb3"></div><div class="bg-grid"></div></div>
+<div id="header-banner">
+  <div class="logo-icon">💎</div>
+  <h1>Hello, I'm <em>Gemma 4</em></h1>
+  <div class="sub">Google DeepMind's most intelligent open model — Dense 31B or MoE 26B-A4B · Vision · Thinking · Apache 2.0</div>
+  <div class="badges">
+    <span class="badge wb-purple">AIME 89.2%</span>
+    <span class="badge wb-green">GPQA 84.3%</span>
+    <span class="badge wb-amber">Codeforces 2150</span>
+    <span class="badge wb-teal">256K context</span>
+    <a href="https://huggingface.co/collections/google/gemma-4" target="_blank" class="badge wb-purple" style="text-decoration:none;">🤗 Gemma 4 ↗</a>
+  </div>
+</div>
+"""
+
+MODEL_CARD_HTML = """
+<div id="model-card">
+  <div class="mc-top">
+    <span class="mc-name" id="mcName">Gemma-4-26B-A4B-it</span>
+    <span class="mc-arch" id="mcArch">MoE 3.8B / 26B</span>
+  </div>
+  <div class="mc-stats" id="mcStats">
+    <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>
+    <span class="mc-stat mc-ok">256K ctx</span>
+  </div>
+  <div class="mc-desc" id="mcDesc">MoE 128 experts · 3.8B active params · 31B의 95% 성능, 추론 ~8배 빠름 · 140+ languages</div>
+  <div class="mc-links">
+    <a id="mcHfLink" href="https://huggingface.co/google/gemma-4-26B-A4B-it" target="_blank" style="background:rgba(109,40,217,.08);color:#6d28d9;border:1px solid rgba(109,40,217,.15);">🤗 Model Card ↗</a>
+    <a href="https://deepmind.google/models/gemma/gemma-4/" target="_blank" style="background:rgba(16,185,129,.08);color:#059669;border:1px solid rgba(16,185,129,.15);">🔬 DeepMind ↗</a>
+  </div>
+</div>
+"""
+
+EXAMPLES_HTML = """
+<div id="examples-area">
+  <div class="ex-card" onclick="document.querySelector('#chat-input textarea').value='Explain how Gemma 4 MoE architecture works with 128 experts and hybrid attention.';document.querySelector('#chat-input textarea').dispatchEvent(new Event('input',{bubbles:true}));">
+    <span class="ex-icon">💎</span><div class="ex-title">Gemma 4 Architecture</div><div class="ex-desc">MoE + hybrid attention explained</div>
+  </div>
+  <div class="ex-card" onclick="document.querySelector('#chat-input textarea').value='Write a Python async web scraper with retry logic, rate limiting, and type hints.';document.querySelector('#chat-input textarea').dispatchEvent(new Event('input',{bubbles:true}));">
+    <span class="ex-icon">💻</span><div class="ex-title">Code Generation</div><div class="ex-desc">Production-quality Python</div>
+  </div>
+  <div class="ex-card" onclick="document.querySelector('#chat-input textarea').value='한국의 K-pop이 세계적으로 성공한 이유를 문화적, 경제적 관점에서 분석해주세요.';document.querySelector('#chat-input textarea').dispatchEvent(new Event('input',{bubbles:true}));">
+    <span class="ex-icon">🌐</span><div class="ex-title">140+ Languages</div><div class="ex-desc">Korean, Japanese, Arabic…</div>
+  </div>
+  <div class="ex-card" onclick="document.querySelector('#chat-input textarea').value='Solve: Find all real solutions to x³ - 6x² + 11x - 6 = 0. Show step-by-step reasoning.';document.querySelector('#chat-input textarea').dispatchEvent(new Event('input',{bubbles:true}));">
+    <span class="ex-icon">🧮</span><div class="ex-title">Math Reasoning</div><div class="ex-desc">Step-by-step problem solving</div>
+  </div>
+</div>
+"""
+
+# Model switcher JS (injected into the page)
+MODEL_SWITCH_JS = """
+<script>
+const MODEL_INFO = {
+  'Gemma-4-26B-A4B-it': {
+    name: 'Gemma-4-26B-A4B-it', arch: 'MoE 3.8B / 26B',
+    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><span class="mc-stat mc-ok">256K ctx</span>',
+    desc: 'MoE 128 experts · 3.8B active params · 31B의 95% 성능, 추론 ~8배 빠름 · 140+ languages',
+    hf: 'https://huggingface.co/google/gemma-4-26B-A4B-it'
+  },
+  'Gemma-4-31B-it': {
+    name: 'Gemma-4-31B-it', arch: 'Dense 30.7B',
+    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><span class="mc-stat mc-ok">256K ctx</span>',
+    desc: 'Dense 31B · 최고 품질 · Codeforces 2150 · Arena 오픈모델 3위 · 140+ languages',
+    hf: 'https://huggingface.co/google/gemma-4-31B-it'
+  }
+};
+// Watch for model dropdown changes
+new MutationObserver(() => {
+  const sel = document.querySelector('#model-select input');
+  if (!sel) return;
+  const val = sel.value;
+  const m = MODEL_INFO[val];
+  if (!m) return;
+  const n = document.getElementById('mcName');
+  if (n && n.textContent !== m.name) {
+    n.textContent = m.name;
+    document.getElementById('mcArch').textContent = m.arch;
+    document.getElementById('mcStats').innerHTML = m.stats;
+    document.getElementById('mcDesc').textContent = m.desc;
+    document.getElementById('mcHfLink').href = m.hf;
+  }
+}).observe(document.body, {subtree: true, childList: true, characterData: true});
+</script>
+"""
+
+
+with gr.Blocks(css=CSS, title="💎 Gemma 4 Playground", fill_height=True) as demo:
+
+    gr.HTML(HEADER_HTML)
+    gr.HTML(MODEL_CARD_HTML)
+
+    with gr.Accordion("⚙️ Settings", open=False, elem_id="settings-row"):
+        with gr.Row():
+            model_dd = gr.Dropdown(
+                choices=list(MODELS.keys()), value=DEFAULT_MODEL,
+                label="Model", elem_id="model-select", scale=2,
+                info="26B-A4B: MoE (fast) | 31B: Dense (best quality)",
+            )
+            thinking_radio = gr.Radio(
+                choices=["⚡ Fast", "🧠 Thinking"],
+                value="⚡ Fast", label="Mode", scale=1,
+            )
+        with gr.Row():
+            sys_prompt = gr.Textbox(
+                value=PRESETS["general"], label="System Prompt", lines=2, scale=3,
+            )
+        with gr.Row():
+            with gr.Column(scale=1):
+                preset_dd = gr.Dropdown(
+                    choices=list(PRESETS.keys()), value="general",
+                    label="Preset", info="Quick system prompt selection",
+                )
+            with gr.Column(scale=1):
+                max_tok_sl = gr.Slider(64, 8192, value=4096, step=64, label="Max Tokens")
+            with gr.Column(scale=1):
+                temp_sl = gr.Slider(0.0, 1.5, value=0.6, step=0.05, label="Temperature")
+            with gr.Column(scale=1):
+                topp_sl = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-P")
+
+    # Preset → System Prompt
+    preset_dd.change(
+        fn=lambda k: PRESETS.get(k, PRESETS["general"]),
+        inputs=[preset_dd], outputs=[sys_prompt],
+    )
+
+    gr.HTML(EXAMPLES_HTML)
+
+    image_input = gr.Textbox(value="", visible=False)
+
+    chatbot = gr.Chatbot(
+        elem_id="chatbot", scale=1, type="messages",
         latex_delimiters=[
             {"left": "$$", "right": "$$", "display": True},
             {"left": "$", "right": "$", "display": False},
             {"left": "\\(", "right": "\\)", "display": False},
             {"left": "\\[", "right": "\\]", "display": True},
         ],
-    ),
-    textbox=gr.Textbox(placeholder="Message Gemma 4…", lines=1, scale=7),
-    additional_inputs=[
-        gr.Radio(
-            choices=["⚡ Fast Mode  (direct answer)",
-                     "🧠 Thinking Mode  (chain-of-thought reasoning)"],
-            value="⚡ Fast Mode  (direct answer)",
-            label="Mode",
-        ),
-        gr.Textbox(value="", label="Image (base64 or URL)", visible=False),
-        gr.Textbox(value=PRESETS["general"], label="System Prompt", lines=2),
-        gr.Slider(minimum=64, maximum=8192, value=4096, step=64, label="Max Tokens"),
-        gr.Slider(minimum=0.0, maximum=1.5, value=0.6, step=0.05, label="Temperature"),
-        gr.Slider(minimum=0.1, maximum=1.0, value=0.9, step=0.05, label="Top-P"),
-        gr.Dropdown(
-            choices=list(MODELS.keys()),
-            value=DEFAULT_MODEL,
-            label="Model",
-            info="26B-A4B: MoE 3.8B active (fast) | 31B: Dense (best quality)",
-        ),
-    ],
-    additional_inputs_accordion=gr.Accordion("⚙️ Settings", open=False),
-    title="💎 Gemma 4 Playground",
-    description="Google DeepMind Gemma 4 — Dense 31B or MoE 26B-A4B · Vision · Thinking · Apache 2.0",
-    examples=[
-        ["Explain how Gemma 4 achieves frontier-level performance with Mixture-of-Experts architecture."],
-        ["Write a Python async web scraper with retry logic and rate limiting."],
-        ["한국의 K-pop이 세계적으로 성공한 이유를 문화적, 경제적 관점에서 분석해주세요."],
-        ["Solve: What is the sum of all prime numbers less than 100?"],
-    ],
-    run_examples_on_click=False,
-    cache_examples=False,
-)
+    )
+
+    with gr.Row():
+        chat_input = gr.Textbox(
+            placeholder="Message Gemma 4…", lines=1, scale=7,
+            elem_id="chat-input", show_label=False, autofocus=True,
+        )
+        send_btn = gr.Button("Send", variant="primary", scale=1, min_width=80)
+
+    # ── Chat logic ──
+    def user_msg(message, history):
+        if not message.strip():
+            return "", history
+        history = history + [{"role": "user", "content": message}]
+        return "", history
+
+    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
+
+        user_text = history[-1]["content"]
+        past = history[:-1]
+
+        history = history + [{"role": "assistant", "content": ""}]
+
+        for chunk in generate_reply(
+            user_text, past, thinking_mode, image_data,
+            system_prompt, max_new_tokens, temperature, top_p, model_choice,
+        ):
+            history[-1]["content"] = chunk
+            yield history
+
+    common_inputs = [
+        chatbot, thinking_radio, image_input, sys_prompt,
+        max_tok_sl, temp_sl, topp_sl, model_dd,
+    ]
+
+    # Send on button click
+    send_btn.click(user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False).then(
+        bot_reply, common_inputs, chatbot,
+    )
+    # Send on Enter
+    chat_input.submit(user_msg, [chat_input, chatbot], [chat_input, chatbot], queue=False).then(
+        bot_reply, common_inputs, chatbot,
+    )
+
+    gr.HTML(MODEL_SWITCH_JS)
+
 
 # ══════════════════════════════════════════════════════════════════════════════
 # 7.  LAUNCH  — must use demo.launch() for ZeroGPU @spaces.GPU registration