Hugging Face's logo

Spaces:
FINAL-Bench
/
Gemma-4-Multi
Running on Zero

App Files Community
SeaWolf-AI commited on
Commit
4a5da45
Β·
verified Β·
1 Parent(s): 09b67da

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -34
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>🧬 Darwin-35B-A3B-Opus</title>
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Cabinet+Grotesk:wght@300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
@@ -252,35 +252,42 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
252
  <aside class="sidebar">
253
  <div class="logo-area">
254
  <div class="logo-row">
255
- <div class="logo-icon">🧬</div>
256
  <div class="logo-text">
257
- <div class="logo-name"><em>Darwin</em>-35B</div>
258
- <div class="logo-sub">Evolutionary Merge</div>
259
  </div>
260
  </div>
261
  </div>
262
 
263
- <!-- Single Model Card -->
264
  <div class="model-card">
 
 
 
 
 
 
 
265
  <div class="mc-top">
266
- <span class="mc-name">Darwin-35B-A3B-Opus</span>
267
- <span class="mc-arch">MoE 3B/35B</span>
268
  </div>
269
- <div class="mc-stats">
270
- <span class="mc-stat mc-hl">GPQA 90.0%</span>
271
- <span class="mc-stat mc-ok">MMMLU 85%</span>
272
  <span class="mc-stat mc-ok">πŸ‘οΈ Vision</span>
273
- <span class="mc-stat mc-ok">147.8 t/s</span>
274
  </div>
275
- <div class="mc-desc">MRI-guided evolutionary merge Β· Surpassed both parents Β· 201 languages Β· 262K context</div>
276
- <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;font-weight:700;color:var(--v);text-decoration:none;padding:4px 10px;border-radius:16px;background:var(--vg);border:1px solid rgba(109,40,217,.15);transition:all .2s;">πŸ€— Model Card β†—</a>
277
  <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
278
- <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:#059669;text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.15);transition:all .2s;">πŸ† FINAL Bench</a>
279
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--amber);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.15);transition:all .2s;">πŸ“Š ALL Bench</a>
280
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--v);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(109,40,217,.06);border:1px solid rgba(109,40,217,.12);transition:all .2s;">🌐 MAYA LB</a>
281
  </div>
282
  <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
283
- <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;text-decoration:none;transition:all .2s;">πŸ† FINAL Bench</a>
284
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;text-decoration:none;transition:all .2s;">πŸ“Š ALL Bench</a>
285
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);text-decoration:none;transition:all .2s;">🌐 MAYA LB</a>
286
  </div>
@@ -305,12 +312,12 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
305
  <span class="chip" onclick="setPreset('translate')">Translate</span>
306
  <span class="chip" onclick="setPreset('research')">Research</span>
307
  </div>
308
- <textarea id="sysPrompt">You are Darwin-35B-A3B-Opus, a highly capable reasoning model created by VIDRAFT via evolutionary merge. Think step by step for complex questions.</textarea>
309
  </div>
310
 
311
  <div class="sl-wrap">
312
  <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div>
313
- <input type="range" id="tokSl" min="64" max="16384" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value">
314
  </div>
315
 
316
  <div class="sl-wrap">
@@ -331,11 +338,11 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
331
  <main class="chat-main">
332
  <header class="chat-hdr">
333
  <div class="hdr-left">
334
- <div class="model-pill"><div class="dot"></div><span class="model-name" id="hdrModel">Darwin-35B-A3B-Opus</span></div>
335
  </div>
336
  <div style="display:flex;align-items:center;gap:12px;">
337
- <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(16,185,129,.08));border:1.5px solid rgba(109,40,217,.25);color:var(--v);font-size:12px;font-weight:700;text-decoration:none;transition:all .22s;font-family:var(--fm);">πŸ€— Model Card β†—</a>
338
- <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">πŸ† FINAL</a>
339
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">πŸ“Š ALL</a>
340
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">🌐 MAYA</a>
341
  <a class="hf-login-btn" id="loginBtn" href="/oauth/login">
@@ -363,20 +370,20 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
363
 
364
  <div class="messages" id="msgs">
365
  <div class="welcome" id="welcome">
366
- <div class="welcome-icon">🧬</div>
367
- <div class="welcome-title">Hello, I'm <em>Darwin</em></div>
368
- <div class="welcome-sub">The child that surpassed both parents β€” built by VIDRAFT with evolutionary merge + Model MRI. Upload an image or ask anything.</div>
369
  <div class="welcome-badges">
370
- <span class="welcome-badge wb-purple">GPQA 90.0%</span>
371
- <span class="welcome-badge wb-green">MMMLU 85%</span>
372
- <span class="welcome-badge wb-amber">147.8 tok/s</span>
373
- <a href="https://huggingface.co/FINAL-Bench/Darwin-35B-A3B-Opus" target="_blank" style="font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;background:rgba(109,40,217,.08);color:var(--v);border:1px solid rgba(109,40,217,.15);text-decoration:none;transition:all .2s;">πŸ€— Model Card β†—</a>
374
  </div>
375
  <div class="ex-grid">
376
- <div class="ex-card" onclick="sendEx('Explain how Darwin V5 evolutionary merge with Model MRI works, and why it surpasses both parent models.')"><span class="ex-icon">🧬</span><div class="ex-title">Darwin Architecture</div><div class="ex-desc">How evolutionary merge works</div></div>
377
  <div class="ex-card" onclick="sendEx('Write a Python async web scraper with retry logic and rate limiting. Include type hints.')"><span class="ex-icon">πŸ’»</span><div class="ex-title">Code Generation</div><div class="ex-desc">Production-quality code</div></div>
378
  <div class="ex-card" onclick="trySampleVision()"><span class="ex-icon">πŸ‘οΈ</span><div class="ex-title">Vision Demo</div><div class="ex-desc">Try image analysis now</div></div>
379
- <div class="ex-card" onclick="sendEx('ν•œκ΅­μ˜ K-pop이 μ„Έκ³„μ μœΌλ‘œ μ„±κ³΅ν•œ 이유λ₯Ό 문화적, 경제적 κ΄€μ μ—μ„œ λΆ„μ„ν•΄μ£Όμ„Έμš”.')"><span class="ex-icon">🌐</span><div class="ex-title">201 Languages</div><div class="ex-desc">Korean, Japanese, Arabic…</div></div>
380
  </div>
381
  </div>
382
  </div>
@@ -393,7 +400,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
393
 
394
  <div class="inputbar">
395
  <div class="input-wrap">
396
- <textarea class="chat-ta" id="chatInput" placeholder="Message Darwin…" rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
397
  <div class="input-acts">
398
  <label class="icon-btn file-btn" id="fileLabel" title="Upload image or PDF">πŸ–Ό<input type="file" accept="image/*,.pdf" onchange="handleFile(this)" id="fileInput"></label>
399
  <button class="icon-btn" id="searchToggleBtn" onclick="toggleSearch()" title="Web search">πŸ”</button>
@@ -404,7 +411,7 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
404
  <div class="input-hint">
405
  <span><span class="kbd">Enter</span> send</span>
406
  <span><span class="kbd">Shift+Enter</span> new line</span>
407
- <span class="model-hint" id="modelHint">35B MoE Β· 3B active Β· 262K ctx</span>
408
  </div>
409
  </div>
410
  </main>
@@ -415,11 +422,11 @@ input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
415
  <script>
416
  const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,searchResults:null,
417
  presets:{
418
- general:'You are Darwin-35B-A3B-Opus, a highly capable reasoning model created by VIDRAFT via evolutionary merge. Think step by step for complex questions.',
419
  code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing.',
420
  math:'You are a world-class mathematician. Break problems step-by-step. Show full working.',
421
  creative:'You are a brilliant creative writer. Be imaginative, vivid, and engaging.',
422
- translate:'You are a professional translator fluent in 201 languages. Provide accurate translations with cultural context.',
423
  research:'You are a rigorous research analyst. Provide structured, well-reasoned analysis.',
424
  }
425
  };
@@ -556,6 +563,7 @@ async function sendMsg(){
556
  parseInt(document.getElementById('tokSl').value),
557
  parseFloat(document.getElementById('tempSl').value),
558
  parseFloat(document.getElementById('topPSl').value),
 
559
  ];
560
 
561
  const botDiv=appendBot();
@@ -734,7 +742,7 @@ function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scro
734
  function updateStats(){document.getElementById('stMsgs').textContent=S.msgCount;const t=S.totalTok;document.getElementById('stTok').textContent=t>999?(t/1000).toFixed(1)+'k':t;}
735
  function clearChat(){
736
  S.history=[];S.msgCount=0;S.totalTok=0;updateStats();
737
- document.getElementById('msgs').innerHTML='<div class="welcome" id="welcome" style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:400px;text-align:center;padding:30px 36px;gap:20px;"><div class="welcome-icon" style="width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#6d28d9,#a78bfa,#10b981);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 8px 30px rgba(109,40,217,.25)">🧬</div><div class="welcome-title" style="font-family:var(--fd);font-size:34px">Hello, I\'m <em>Darwin</em></div></div>';
738
  }
739
  function showToast(msg,dur=2200){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),dur);}
740
 
@@ -752,6 +760,24 @@ function showLoggedIn(u){
752
  }
753
  function showLoggedOut(){document.getElementById('loginBtn').style.display='inline-flex';document.getElementById('userArea').style.display='none';}
754
  checkAuth();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
755
  </script>
756
  </body>
757
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>πŸ’Ž Gemma 4 Playground</title>
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Cabinet+Grotesk:wght@300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
 
252
  <aside class="sidebar">
253
  <div class="logo-area">
254
  <div class="logo-row">
255
+ <div class="logo-icon">πŸ’Ž</div>
256
  <div class="logo-text">
257
+ <div class="logo-name"><em>Gemma</em> 4</div>
258
+ <div class="logo-sub">Google DeepMind</div>
259
  </div>
260
  </div>
261
  </div>
262
 
263
+ <!-- Model Selector -->
264
  <div class="model-card">
265
+ <div class="field" style="margin-bottom:8px;">
266
+ <span class="field-lbl">Model</span>
267
+ <select id="modelSelect" onchange="switchModel(this.value)" style="width:100%;padding:7px 10px;border-radius:8px;border:1.5px solid rgba(109,40,217,.2);background:rgba(109,40,217,.03);font-size:12px;font-weight:600;font-family:var(--fm);color:var(--fg);cursor:pointer;outline:none;">
268
+ <option value="Gemma-4-26B-A4B-it">πŸ’Ž Gemma 4 26B-A4B (MoE, 3.8B active) β€” Fast</option>
269
+ <option value="Gemma-4-31B-it">πŸ’Ž Gemma 4 31B (Dense) β€” Best Quality</option>
270
+ </select>
271
+ </div>
272
  <div class="mc-top">
273
+ <span class="mc-name" id="mcName">Gemma-4-26B-A4B-it</span>
274
+ <span class="mc-arch" id="mcArch">MoE 3.8B/26B</span>
275
  </div>
276
+ <div class="mc-stats" id="mcStats">
277
+ <span class="mc-stat mc-hl">GPQA 82.3%</span>
278
+ <span class="mc-stat mc-ok">AIME 88.3%</span>
279
  <span class="mc-stat mc-ok">πŸ‘οΈ Vision</span>
280
+ <span class="mc-stat mc-ok">256K ctx</span>
281
  </div>
282
+ <div class="mc-desc" id="mcDesc">MoE 128 experts Β· 3.8B active Β· 31B의 95% μ„±λŠ₯, μΆ”λ‘  ~8λ°° 빠름 Β· 140+ languages</div>
283
+ <a href="https://huggingface.co/google/gemma-4-26B-A4B-it" id="mcHfLink" target="_blank" style="display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;font-weight:700;color:var(--v);text-decoration:none;padding:4px 10px;border-radius:16px;background:var(--vg);border:1px solid rgba(109,40,217,.15);transition:all .2s;">πŸ€— Model Card β†—</a>
284
  <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
285
+ <a href="https://huggingface.co/collections/google/gemma-4" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:#059669;text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.15);transition:all .2s;">πŸ’Ž Gemma 4</a>
286
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--amber);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.15);transition:all .2s;">πŸ“Š ALL Bench</a>
287
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--v);text-decoration:none;padding:3px 8px;border-radius:12px;background:rgba(109,40,217,.06);border:1px solid rgba(109,40,217,.12);transition:all .2s;">🌐 MAYA LB</a>
288
  </div>
289
  <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;">
290
+ <a href="https://huggingface.co/collections/google/gemma-4" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;text-decoration:none;transition:all .2s;">πŸ’Ž Gemma 4</a>
291
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;text-decoration:none;transition:all .2s;">πŸ“Š ALL Bench</a>
292
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);text-decoration:none;transition:all .2s;">🌐 MAYA LB</a>
293
  </div>
 
312
  <span class="chip" onclick="setPreset('translate')">Translate</span>
313
  <span class="chip" onclick="setPreset('research')">Research</span>
314
  </div>
315
+ <textarea id="sysPrompt">You are Gemma 4, a highly capable multimodal AI assistant by Google DeepMind. Think step by step for complex questions.</textarea>
316
  </div>
317
 
318
  <div class="sl-wrap">
319
  <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div>
320
+ <input type="range" id="tokSl" min="64" max="8192" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value">
321
  </div>
322
 
323
  <div class="sl-wrap">
 
338
  <main class="chat-main">
339
  <header class="chat-hdr">
340
  <div class="hdr-left">
341
+ <div class="model-pill"><div class="dot"></div><span class="model-name" id="hdrModel">Gemma-4-26B-A4B-it</span></div>
342
  </div>
343
  <div style="display:flex;align-items:center;gap:12px;">
344
+ <a href="https://huggingface.co/google/gemma-4-26B-A4B-it" id="mcHfLink" target="_blank" style="display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:22px;background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(16,185,129,.08));border:1.5px solid rgba(109,40,217,.25);color:var(--v);font-size:12px;font-weight:700;text-decoration:none;transition:all .22s;font-family:var(--fm);">πŸ€— Model Card β†—</a>
345
+ <a href="https://huggingface.co/collections/google/gemma-4" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">πŸ’Ž Gemma</a>
346
  <a href="https://huggingface.co/spaces/FINAL-Bench/all-bench-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.18);color:#d97706;font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">πŸ“Š ALL</a>
347
  <a href="https://huggingface.co/spaces/MAYA-AI/all-leaderboard" target="_blank" style="padding:4px 9px;border-radius:14px;background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.18);color:var(--v);font-size:9px;font-weight:700;text-decoration:none;font-family:var(--fm);">🌐 MAYA</a>
348
  <a class="hf-login-btn" id="loginBtn" href="/oauth/login">
 
370
 
371
  <div class="messages" id="msgs">
372
  <div class="welcome" id="welcome">
373
+ <div class="welcome-icon">πŸ’Ž</div>
374
+ <div class="welcome-title">Hello, I'm <em>Gemma 4</em></div>
375
+ <div class="welcome-sub">Google DeepMind's most intelligent open model β€” Dense 31B or MoE 26B. Upload an image or ask anything. Apache 2.0 licensed.</div>
376
  <div class="welcome-badges">
377
+ <span class="welcome-badge wb-purple">AIME 89.2%</span>
378
+ <span class="welcome-badge wb-green">GPQA 84.3%</span>
379
+ <span class="welcome-badge wb-amber">256K context</span>
380
+ <a href="https://huggingface.co/google/gemma-4-26B-A4B-it" id="mcHfLink" target="_blank" style="font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;background:rgba(109,40,217,.08);color:var(--v);border:1px solid rgba(109,40,217,.15);text-decoration:none;transition:all .2s;">πŸ€— Model Card β†—</a>
381
  </div>
382
  <div class="ex-grid">
383
+ <div class="ex-card" onclick="sendEx('Explain how Gemma 4 achieves frontier-level performance with Mixture-of-Experts architecture and hybrid attention.')"><span class="ex-icon">🧬</span><div class="ex-title">Gemma 4 Architecture</div><div class="ex-desc">MoE + hybrid attention</div></div>
384
  <div class="ex-card" onclick="sendEx('Write a Python async web scraper with retry logic and rate limiting. Include type hints.')"><span class="ex-icon">πŸ’»</span><div class="ex-title">Code Generation</div><div class="ex-desc">Production-quality code</div></div>
385
  <div class="ex-card" onclick="trySampleVision()"><span class="ex-icon">πŸ‘οΈ</span><div class="ex-title">Vision Demo</div><div class="ex-desc">Try image analysis now</div></div>
386
+ <div class="ex-card" onclick="sendEx('ν•œκ΅­μ˜ K-pop이 μ„Έκ³„μ μœΌλ‘œ μ„±κ³΅ν•œ 이유λ₯Ό 문화적, 경제적 κ΄€μ μ—μ„œ λΆ„μ„ν•΄μ£Όμ„Έμš”.')"><span class="ex-icon">🌐</span><div class="ex-title">140+ Languages</div><div class="ex-desc">Korean, Japanese, Arabic…</div></div>
387
  </div>
388
  </div>
389
  </div>
 
400
 
401
  <div class="inputbar">
402
  <div class="input-wrap">
403
+ <textarea class="chat-ta" id="chatInput" placeholder="Message Gemma 4…" rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
404
  <div class="input-acts">
405
  <label class="icon-btn file-btn" id="fileLabel" title="Upload image or PDF">πŸ–Ό<input type="file" accept="image/*,.pdf" onchange="handleFile(this)" id="fileInput"></label>
406
  <button class="icon-btn" id="searchToggleBtn" onclick="toggleSearch()" title="Web search">πŸ”</button>
 
411
  <div class="input-hint">
412
  <span><span class="kbd">Enter</span> send</span>
413
  <span><span class="kbd">Shift+Enter</span> new line</span>
414
+ <span class="model-hint" id="modelHint">26B MoE Β· 3.8B active Β· 256K ctx</span>
415
  </div>
416
  </div>
417
  </main>
 
422
  <script>
423
  const S={vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,searchResults:null,
424
  presets:{
425
+ general:'You are Gemma 4, a highly capable multimodal AI assistant by Google DeepMind. Think step by step for complex questions.',
426
  code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing.',
427
  math:'You are a world-class mathematician. Break problems step-by-step. Show full working.',
428
  creative:'You are a brilliant creative writer. Be imaginative, vivid, and engaging.',
429
+ translate:'You are a professional translator fluent in 140+ languages. Provide accurate translations with cultural context.',
430
  research:'You are a rigorous research analyst. Provide structured, well-reasoned analysis.',
431
  }
432
  };
 
563
  parseInt(document.getElementById('tokSl').value),
564
  parseFloat(document.getElementById('tempSl').value),
565
  parseFloat(document.getElementById('topPSl').value),
566
+ document.getElementById('modelSelect').value,
567
  ];
568
 
569
  const botDiv=appendBot();
 
742
  function updateStats(){document.getElementById('stMsgs').textContent=S.msgCount;const t=S.totalTok;document.getElementById('stTok').textContent=t>999?(t/1000).toFixed(1)+'k':t;}
743
  function clearChat(){
744
  S.history=[];S.msgCount=0;S.totalTok=0;updateStats();
745
+ document.getElementById('msgs').innerHTML='<div class="welcome" id="welcome" style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:400px;text-align:center;padding:30px 36px;gap:20px;"><div class="welcome-icon" style="width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#6d28d9,#a78bfa,#10b981);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 8px 30px rgba(109,40,217,.25)">πŸ’Ž</div><div class="welcome-title" style="font-family:var(--fd);font-size:34px">Hello, I\'m <em>Gemma 4</em></div></div>';
746
  }
747
  function showToast(msg,dur=2200){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),dur);}
748
 
 
760
  }
761
  function showLoggedOut(){document.getElementById('loginBtn').style.display='inline-flex';document.getElementById('userArea').style.display='none';}
762
  checkAuth();
763
+
764
+ // ── Model Switching ──
765
+ const MODEL_INFO={
766
+ '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 Β· 31B의 95% μ„±λŠ₯, μΆ”λ‘  ~8λ°° 빠름 Β· 140+ languages',hint:'26B MoE Β· 3.8B active Β· 256K ctx',hf:'https://huggingface.co/google/gemma-4-26B-A4B-it'},
767
+ 'Gemma-4-31B-it':{arch:'Dense 31B',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',hint:'31B Dense Β· 30.7B active Β· 256K ctx',hf:'https://huggingface.co/google/gemma-4-31B-it'},
768
+ };
769
+ function switchModel(name){
770
+ const m=MODEL_INFO[name];if(!m)return;
771
+ document.getElementById('mcName').textContent=name;
772
+ document.getElementById('mcArch').textContent=m.arch;
773
+ document.getElementById('mcStats').innerHTML=m.stats;
774
+ document.getElementById('mcDesc').textContent=m.desc;
775
+ document.getElementById('hdrModel').textContent=name;
776
+ document.getElementById('modelHint').textContent=m.hint;
777
+ try{document.getElementById('mcHfLink').href=m.hf;}catch(e){}
778
+ try{document.getElementById('hdrHfLink').href=m.hf;}catch(e){}
779
+ showToast('Model: '+name+' βœ“');
780
+ }
781
  </script>
782
  </body>
783
  </html>