Upload 3 files

app.py

@@ -0,0 +1,307 @@
+"""
+🧬 Darwin-35B-A3B-Opus — Demo Space
+Single model · SGLang backend · Vision support
+"""
+import sys
+print(f"[BOOT] Python {sys.version}", flush=True)
+
+import base64, os, re, json
+from typing import Generator, Optional
+
+try:
+    import gradio as gr
+    print(f"[BOOT] gradio {gr.__version__}", flush=True)
+except ImportError as e:
+    print(f"[BOOT] FATAL: {e}", flush=True); sys.exit(1)
+
+try:
+    import httpx, uvicorn, requests
+    from fastapi import FastAPI, Request
+    from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
+    print("[BOOT] All imports OK", flush=True)
+except ImportError as e:
+    print(f"[BOOT] FATAL: {e}", flush=True); sys.exit(1)
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 1.  SGLANG BACKEND CONFIG
+# ══════════════════════════════════════════════════════════════════════════════
+SGLANG_BASE = os.getenv("SGLANG_BASE", "http://localhost:7947")
+SGLANG_URL  = f"{SGLANG_BASE}/v1/chat/completions"
+
+MODEL_NAME = "Darwin-35B-A3B-Opus"
+MODEL_CAP  = {
+    "arch": "MoE", "active": "3B / 35B total",
+    "ctx": "262K", "thinking": True, "vision": True,
+    "max_tokens": 16384, "temp_max": 1.5,
+}
+
+PRESETS = {
+    "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.",
+    "code":      "You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing. Use modern best practices.",
+    "math":      "You are a world-class mathematician. Break problems step-by-step. Show full working. Use LaTeX where helpful.",
+    "creative":  "You are a brilliant creative writer. Be imaginative, vivid, and engaging. Adapt tone and style to the request.",
+    "translate": "You are a professional translator fluent in 201 languages. Provide accurate, natural-sounding translations with cultural context.",
+    "research":  "You are a rigorous research analyst. Provide structured, well-reasoned analysis. Identify assumptions and acknowledge uncertainty.",
+}
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 2.  THINKING MODE HELPERS
+# ══════════════════════════════════════════════════════════════════════════════
+def build_user_message(text: str, thinking: bool) -> str:
+    return ("/think\n" if thinking else "/no_think\n") + text
+
+def parse_think_blocks(text: str) -> tuple[str, str]:
+    m = re.search(r"<think>(.*?)</think>\s*", text, re.DOTALL)
+    return (m.group(1).strip(), text[m.end():].strip()) if m else ("", text)
+
+def format_response(raw: str) -> str:
+    chain, answer = parse_think_blocks(raw)
+    if chain:
+        lines  = chain.split("\n")
+        quoted = "\n".join(f"> {l}" for l in lines)
+        block  = (
+            "<details>\n"
+            "<summary>🧠 Reasoning Chain — click to expand</summary>\n\n"
+            f"{quoted}\n\n"
+            "</details>\n\n"
+        )
+        return block + answer
+    return raw
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 3.  STREAMING BACKEND — SGLang OpenAI-compatible API
+# ══════════════════════════════════════════════════════════════════════════════
+def generate_reply(
+    message:        str,
+    history:        list,
+    thinking_mode:  str,
+    image_input,
+    system_prompt:  str,
+    max_new_tokens: int,
+    temperature:    float,
+    top_p:          float,
+) -> Generator[str, None, None]:
+
+    use_think = "Thinking" in thinking_mode
+    max_new_tokens = min(int(max_new_tokens), MODEL_CAP["max_tokens"])
+    temperature    = min(float(temperature),  MODEL_CAP["temp_max"])
+
+    messages: list[dict] = []
+    if system_prompt.strip():
+        messages.append({"role": "system", "content": system_prompt.strip()})
+
+    for turn in history:
+        if isinstance(turn, dict):
+            role = turn.get("role", "")
+            raw  = turn.get("content") or ""
+            text = (" ".join(p.get("text","") for p in raw
+                             if isinstance(p,dict) and p.get("type")=="text")
+                    if isinstance(raw, list) else str(raw))
+            if role == "user":
+                messages.append({"role":"user","content":text})
+            elif role == "assistant":
+                _, clean = parse_think_blocks(text)
+                messages.append({"role":"assistant","content":clean})
+        else:
+            try:
+                u, a = (turn[0] or None), (turn[1] if len(turn)>1 else None)
+            except (IndexError, TypeError):
+                continue
+            def _txt(v):
+                if v is None: return None
+                if isinstance(v, list):
+                    return " ".join(p.get("text","") for p in v
+                                    if isinstance(p,dict) and p.get("type")=="text")
+                return str(v)
+            if u := _txt(u): messages.append({"role":"user","content":u})
+            if a := _txt(a):
+                _, clean = parse_think_blocks(a)
+                messages.append({"role":"assistant","content":clean})
+
+    user_text = build_user_message(message, use_think)
+
+    # Vision: image input handling
+    if image_input and MODEL_CAP["vision"]:
+        import io
+        from PIL import Image as PILImage
+
+        if isinstance(image_input, str) and image_input.startswith("data:"):
+            header, b64_data = image_input.split(",", 1)
+            b64 = b64_data
+        else:
+            buf = io.BytesIO()
+            if not isinstance(image_input, PILImage.Image):
+                image_input = PILImage.fromarray(image_input)
+            image_input.save(buf, format="JPEG")
+            b64 = base64.b64encode(buf.getvalue()).decode()
+
+        content = [
+            {"type":"image_url","image_url":{"url":f"data:image/jpeg;base64,{b64}"}},
+            {"type":"text","text":user_text},
+        ]
+    else:
+        content = user_text
+    messages.append({"role":"user","content":content})
+
+    # Stream from SGLang
+    try:
+        resp = requests.post(SGLANG_URL, json={
+            "model": "default",
+            "messages": messages,
+            "max_tokens": max_new_tokens,
+            "temperature": temperature,
+            "top_p": float(top_p),
+            "stream": True,
+        }, stream=True, timeout=600)
+
+        raw = ""
+        for line in resp.iter_lines(decode_unicode=True):
+            if not line or not line.startswith("data: "):
+                continue
+            payload = line[6:]
+            if payload.strip() == "[DONE]":
+                break
+            try:
+                chunk = json.loads(payload)
+                delta = chunk.get("choices", [{}])[0].get("delta", {})
+                token = delta.get("content", "")
+                if token:
+                    raw += token
+                    yield format_response(raw)
+            except (json.JSONDecodeError, IndexError, KeyError):
+                continue
+
+        if raw:
+            yield format_response(raw)
+
+    except requests.exceptions.ConnectionError:
+        yield "**❌ SGLang 서버 연결 실패.** `localhost:7947`에 서버가 실행 중인지 확인하세요."
+    except Exception as exc:
+        yield f"**Error:** `{exc}`"
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 4.  GRADIO BLOCKS  (hidden — serves API for frontend)
+# ══════════════════════════════════════════════════════════════════════════════
+with gr.Blocks(title="Darwin-35B-A3B-Opus") as gradio_demo:
+    thinking_toggle = gr.Radio(
+        choices=["⚡ Fast Mode  (direct answer)",
+                 "🧠 Thinking Mode  (chain-of-thought reasoning)"],
+        value="⚡ Fast Mode  (direct answer)",
+        visible=False,
+    )
+    image_input    = gr.Textbox(value="", visible=False)
+    system_prompt  = gr.Textbox(value=PRESETS["general"], visible=False)
+    max_new_tokens = gr.Slider(minimum=64, maximum=16384, value=4096, visible=False)
+    temperature    = gr.Slider(minimum=0.0, maximum=1.5, value=0.6,  visible=False)
+    top_p          = gr.Slider(minimum=0.1, maximum=1.0, value=0.9,  visible=False)
+
+    gr.ChatInterface(
+        fn=generate_reply,
+        api_name="chat",
+        additional_inputs=[
+            thinking_toggle, image_input,
+            system_prompt, max_new_tokens, temperature, top_p,
+        ],
+    )
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 5.  FASTAPI — index.html + HF OAuth + Gradio API
+# ════════════════════════════════════��═════════════════════════════════════════
+import pathlib, secrets
+
+fapp    = FastAPI()
+SESSIONS: dict[str, dict] = {}
+HTML    = pathlib.Path(__file__).parent / "index.html"
+
+CLIENT_ID     = os.getenv("OAUTH_CLIENT_ID", "")
+CLIENT_SECRET = os.getenv("OAUTH_CLIENT_SECRET", "")
+SPACE_HOST    = os.getenv("SPACE_HOST", "localhost:7860")
+REDIRECT_URI  = f"https://{SPACE_HOST}/login/callback"
+
+print(f"[OAuth] CLIENT_ID set: {bool(CLIENT_ID)}")
+print(f"[OAuth] SPACE_HOST: {SPACE_HOST}")
+HF_AUTH_URL   = "https://huggingface.co/oauth/authorize"
+HF_TOKEN_URL  = "https://huggingface.co/oauth/token"
+HF_USER_URL   = "https://huggingface.co/oauth/userinfo"
+SCOPES        = os.getenv("OAUTH_SCOPES", "openid profile")
+
+from urllib.parse import urlencode
+
+def _sid(req: Request) -> Optional[str]:
+    return req.cookies.get("mc_session")
+
+def _user(req: Request) -> Optional[dict]:
+    sid = _sid(req)
+    return SESSIONS.get(sid) if sid else None
+
+@fapp.get("/")
+async def root(request: Request):
+    html = HTML.read_text(encoding="utf-8") if HTML.exists() else "<h2>index.html missing</h2>"
+    return HTMLResponse(html)
+
+@fapp.get("/oauth/user")
+async def oauth_user(request: Request):
+    u = _user(request)
+    return JSONResponse(u) if u else JSONResponse({"logged_in": False}, status_code=401)
+
+@fapp.get("/oauth/login")
+async def oauth_login(request: Request):
+    if not CLIENT_ID:
+        return RedirectResponse("/?oauth_error=not_configured")
+    state = secrets.token_urlsafe(16)
+    params = {"response_type":"code","client_id":CLIENT_ID,"redirect_uri":REDIRECT_URI,"scope":SCOPES,"state":state}
+    return RedirectResponse(f"{HF_AUTH_URL}?{urlencode(params)}", status_code=302)
+
+@fapp.get("/login/callback")
+async def oauth_callback(code: str = "", error: str = "", state: str = ""):
+    if error or not code:
+        return RedirectResponse("/?auth_error=1")
+    basic = base64.b64encode(f"{CLIENT_ID}:{CLIENT_SECRET}".encode()).decode()
+    async with httpx.AsyncClient() as client:
+        tok = await client.post(HF_TOKEN_URL, data={"grant_type":"authorization_code","code":code,"redirect_uri":REDIRECT_URI},
+                                headers={"Accept":"application/json","Authorization":f"Basic {basic}"})
+        if tok.status_code != 200:
+            return RedirectResponse("/?auth_error=1")
+        access_token = tok.json().get("access_token", "")
+        if not access_token:
+            return RedirectResponse("/?auth_error=1")
+        uinfo = await client.get(HF_USER_URL, headers={"Authorization":f"Bearer {access_token}"})
+        if uinfo.status_code != 200:
+            return RedirectResponse("/?auth_error=1")
+        user = uinfo.json()
+
+    sid = secrets.token_urlsafe(32)
+    SESSIONS[sid] = {
+        "logged_in": True,
+        "username": user.get("preferred_username", user.get("name", "User")),
+        "name": user.get("name", ""),
+        "avatar": user.get("picture", ""),
+        "profile": f"https://huggingface.co/{user.get('preferred_username', '')}",
+    }
+    resp = RedirectResponse("/")
+    resp.set_cookie("mc_session", sid, httponly=True, samesite="lax", secure=True, max_age=60*60*24*7)
+    return resp
+
+@fapp.get("/oauth/logout")
+async def oauth_logout(request: Request):
+    sid = _sid(request)
+    if sid and sid in SESSIONS: del SESSIONS[sid]
+    resp = RedirectResponse("/")
+    resp.delete_cookie("mc_session")
+    return resp
+
+@fapp.get("/health")
+async def health():
+    # Check SGLang
+    try:
+        r = requests.get(f"{SGLANG_BASE}/v1/models", timeout=3)
+        return {"status":"ok","sglang":"connected"}
+    except:
+        return {"status":"ok","sglang":"disconnected"}
+
+app = gr.mount_gradio_app(fapp, gradio_demo, path="/gradio")
+
+if __name__ == "__main__":
+    print(f"[BOOT] Darwin-35B-A3B-Opus Demo · SGLang: {SGLANG_URL}", flush=True)
+    uvicorn.run(app, host="0.0.0.0", port=7860)

index.html

@@ -0,0 +1,565 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>🧬 Darwin-35B-A3B-Opus</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<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">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+<style>
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+  --cream:#faf8f5;--paper:#f5f2ed;--white:#ffffff;--fog:#ede9e3;
+  --line:#e4dfd8;--line2:#d5cfc7;
+  --ink:#1c1917;--ink2:#44403c;--ink3:#78716c;--ink4:#a8a29e;
+  --v:#6d28d9;--v2:#7c3aed;--vg:rgba(109,40,217,.08);
+  --teal:#0d9488;--tg:rgba(13,148,136,.07);
+  --rose:#e11d48;--green:#16a34a;--amber:#d97706;
+  --r:20px;--r-sm:12px;--r-xs:8px;
+  --sh:0 2px 12px rgba(28,25,23,.06),0 1px 3px rgba(28,25,23,.04);
+  --sh2:0 8px 32px rgba(28,25,23,.08),0 2px 8px rgba(28,25,23,.04);
+  --sh3:0 20px 60px rgba(28,25,23,.10),0 4px 16px rgba(28,25,23,.06);
+  --fd:'Instrument Serif',serif;
+  --fb:'Cabinet Grotesk',sans-serif;
+  --fm:'Geist Mono',monospace;
+}
+html,body{height:100%;overflow:hidden;background:var(--cream);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased;}
+
+.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
+.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;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,.06) 1px,transparent 1px);background-size:28px 28px;}
+
+.shell{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;height:100vh;}
+
+/* SIDEBAR */
+.sidebar{display:flex;flex-direction:column;background:rgba(255,255,255,.75);backdrop-filter:blur(24px);border-right:1px solid var(--line);overflow:hidden;}
+.logo-area{padding:20px 18px 14px;border-bottom:1px solid var(--line);}
+.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
+.logo-icon{width:42px;height:42px;border-radius:13px;flex-shrink:0;background:linear-gradient(135deg,#6d28d9,#a78bfa,#10b981);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 14px rgba(109,40,217,.3);}
+.logo-text{line-height:1.2;}
+.logo-name{font-family:var(--fd);font-size:20px;color:var(--ink);}
+.logo-name em{color:var(--v);font-style:italic;}
+.logo-sub{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink4);}
+
+.model-card{margin:14px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid rgba(109,40,217,.25);background:linear-gradient(135deg,rgba(109,40,217,.04),rgba(16,185,129,.03));box-shadow:var(--sh);}
+.mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
+.mc-name{font-size:13px;font-weight:700;color:var(--ink);}
+.mc-arch{font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:10px;background:var(--vg);color:var(--v);font-family:var(--fm);}
+.mc-stats{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
+.mc-stat{font-size:9px;font-weight:600;padding:2px 7px;border-radius:6px;font-family:var(--fm);}
+.mc-ok{background:rgba(22,163,74,.09);color:#16a34a;}
+.mc-hl{background:rgba(109,40,217,.08);color:var(--v);}
+.mc-desc{font-size:10px;color:var(--ink3);line-height:1.6;}
+
+.settings{padding:14px;flex:1;overflow-y:auto;}
+.settings::-webkit-scrollbar{width:3px;}
+.settings::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;}
+.field{margin-bottom:12px;}
+.field-lbl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink4);margin-bottom:6px;display:block;}
+.field textarea{width:100%;background:var(--fog);border:1.5px solid var(--line);border-radius:var(--r-xs);color:var(--ink);font-family:var(--fb);font-size:12px;line-height:1.6;padding:8px 10px;resize:none;outline:none;transition:border-color .2s,box-shadow .2s;height:64px;}
+.field textarea:focus{border-color:rgba(109,40,217,.35);box-shadow:0 0 0 3px rgba(109,40,217,.08);}
+
+.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
+.toggle-info{flex:1;}
+.tl{font-size:11px;font-weight:600;color:var(--ink2);}
+.ts{font-size:9px;color:var(--ink4);margin-top:1px;}
+.toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
+.toggle input{opacity:0;width:0;height:0;position:absolute;}
+.t-track{position:absolute;inset:0;border-radius:10px;background:var(--line2);cursor:pointer;transition:background .22s;}
+.toggle input:checked+.t-track{background:linear-gradient(135deg,var(--v),var(--v2));}
+.t-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .22s cubic-bezier(.4,0,.2,1);}
+.toggle input:checked~.t-thumb{transform:translateX(16px);}
+
+.presets{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
+.chip{font-size:9px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--fog);border:1px solid var(--line);color:var(--ink3);cursor:pointer;transition:all .2s;white-space:nowrap;}
+.chip:hover{background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.25);color:var(--v);}
+
+.sl-wrap{margin-bottom:10px;}
+.sl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
+.sl-title{font-size:11px;font-weight:600;color:var(--ink2);}
+.sl-val{font-size:10px;font-weight:700;font-family:var(--fm);background:var(--fog);color:var(--ink3);padding:1px 6px;border-radius:5px;border:1px solid var(--line);}
+input[type=range]{width:100%;height:4px;appearance:none;background:var(--line);border-radius:2px;outline:none;cursor:pointer;}
+input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--v2));box-shadow:0 2px 6px rgba(109,40,217,.3);border:2px solid var(--white);cursor:pointer;transition:transform .2s;}
+input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
+
+.clear-btn{width:100%;padding:8px;border-radius:var(--r-xs);background:var(--fog);border:1.5px solid var(--line);color:var(--ink3);font-family:var(--fb);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px;}
+.clear-btn:hover{border-color:rgba(225,29,72,.3);color:var(--rose);}
+
+.section-lbl{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink4);margin-bottom:10px;padding:0 2px;}
+
+/* MAIN CHAT */
+.chat-main{display:flex;flex-direction:column;background:rgba(250,248,245,.5);overflow:hidden;}
+.chat-hdr{padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
+.hdr-left{display:flex;align-items:center;gap:10px;}
+.model-pill{display:flex;align-items:center;gap:7px;padding:5px 13px;border-radius:30px;background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(16,185,129,.06));border:1px solid rgba(109,40,217,.2);}
+.dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--v),#10b981);animation:pulse 2s ease-in-out infinite;}
+@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);}}
+.model-name{font-size:12px;font-weight:700;color:var(--v);font-family:var(--fm);}
+.mode-tag{font-size:10px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--fog);border:1px solid var(--line);color:var(--ink3);font-family:var(--fm);transition:all .3s;}
+.mode-tag.thinking{background:rgba(13,148,136,.08);border-color:rgba(13,148,136,.25);color:var(--teal);}
+.hdr-stats{display:flex;gap:16px;}
+.hstat{text-align:center;}
+.hstat-n{font-size:17px;font-weight:800;color:var(--ink);font-family:var(--fd);}
+.hstat-l{font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink4);}
+
+.hf-login-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:22px;border:1.5px solid rgba(109,40,217,.25);background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(139,92,246,.08));color:var(--v);font-family:var(--fb);font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .22s;white-space:nowrap;}
+.hf-login-btn:hover{background:linear-gradient(135deg,rgba(109,40,217,.18),rgba(139,92,246,.14));border-color:rgba(109,40,217,.45);box-shadow:0 4px 14px rgba(109,40,217,.18);transform:translateY(-1px);}
+.user-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:22px;border:1.5px solid var(--line);background:rgba(255,255,255,.8);font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;text-decoration:none;transition:all .2s;}
+.user-chip:hover{border-color:rgba(109,40,217,.3);box-shadow:var(--sh);}
+.user-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--v),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;overflow:hidden;flex-shrink:0;}
+.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
+.logout-btn{padding:5px 11px;border-radius:18px;border:1.5px solid var(--line);background:var(--fog);color:var(--ink4);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--fb);}
+.logout-btn:hover{border-color:rgba(225,29,72,.3);color:var(--rose);}
+
+.messages{flex:1;overflow-y:auto;padding:22px 26px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth;}
+.messages::-webkit-scrollbar{width:4px;}
+.messages::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;}
+
+.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 36px;gap:20px;flex:1;min-height:400px;}
+.welcome-icon{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);animation:float 4s ease-in-out infinite;}
+@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
+.welcome-title{font-family:var(--fd);font-size:34px;color:var(--ink);line-height:1.2;}
+.welcome-title em{font-style:italic;color:var(--v);}
+.welcome-sub{font-size:13px;color:var(--ink3);line-height:1.7;max-width:450px;}
+.welcome-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
+.welcome-badge{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;font-family:var(--fm);}
+.wb-purple{background:rgba(109,40,217,.08);color:var(--v);border:1px solid rgba(109,40,217,.15);}
+.wb-green{background:rgba(16,185,129,.08);color:#059669;border:1px solid rgba(16,185,129,.15);}
+.wb-amber{background:rgba(217,119,6,.08);color:var(--amber);border:1px solid rgba(217,119,6,.15);}
+.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;width:100%;max-width:500px;}
+.ex-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;text-align:left;transition:all .22s;}
+.ex-card:hover{border-color:rgba(109,40,217,.3);box-shadow:var(--sh);transform:translateY(-2px);}
+.ex-icon{font-size:16px;margin-bottom:5px;display:block;}
+.ex-title{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:2px;}
+.ex-desc{font-size:10px;color:var(--ink3);line-height:1.5;}
+
+.msg{display:flex;gap:10px;animation:msgIn .32s cubic-bezier(.34,1.56,.64,1) both;}
+@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
+.msg.user{flex-direction:row-reverse;}
+.avatar{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:2px;}
+.msg.user .avatar{background:linear-gradient(135deg,var(--v),#a78bfa);color:#fff;}
+.msg.bot .avatar{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #d1fae5;font-size:15px;}
+.body{max-width:74%;display:flex;flex-direction:column;gap:3px;}
+.msg.user .body{align-items:flex-end;}
+.bubble{padding:11px 15px;border-radius:17px;font-size:13.5px;line-height:1.7;color:var(--ink);}
+.msg.user .bubble{background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;border-radius:17px 3px 17px 17px;box-shadow:0 4px 16px rgba(109,40,217,.22);}
+.msg.bot .bubble{background:var(--white);border:1px solid var(--line);border-radius:3px 17px 17px 17px;box-shadow:var(--sh);}
+.msg-time{font-size:9px;color:var(--ink4);padding:0 3px;font-family:var(--fm);}
+
+.think-blk{background:linear-gradient(135deg,rgba(13,148,136,.04),rgba(6,182,212,.04));border:1px solid rgba(13,148,136,.2);border-radius:9px;padding:8px 12px;margin-bottom:10px;}
+.think-hdr{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:10px;font-weight:700;color:var(--teal);letter-spacing:.4px;text-transform:uppercase;user-select:none;}
+.think-hdr::before{content:'▶';font-size:8px;transition:transform .2s;}
+.think-blk.open .think-hdr::before{content:'▼';}
+.think-body{margin-top:7px;display:none;border-top:1px solid rgba(13,148,136,.15);padding-top:7px;font-size:12px;color:var(--ink3);line-height:1.6;}
+.think-blk.open .think-body{display:block;}
+
+.bubble pre{background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;margin:7px 0;overflow-x:auto;font-family:var(--fm);font-size:11.5px;line-height:1.6;}
+.bubble code{font-family:var(--fm);font-size:11.5px;background:var(--fog);padding:1px 5px;border-radius:4px;}
+.bubble pre code{background:transparent;padding:0;}
+
+.typing{display:flex;align-items:center;gap:5px;padding:12px 15px;}
+.typing span{width:6px;height:6px;border-radius:50%;background:var(--v2);opacity:.4;animation:bounce .8s ease-in-out infinite;}
+.typing span:nth-child(2){animation-delay:.15s;}
+.typing span:nth-child(3){animation-delay:.3s;}
+@keyframes bounce{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-5px);opacity:1;}}
+
+.img-prev{display:none;padding:8px 26px 0;}
+.img-prev.show{display:block;}
+.img-tw{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid rgba(109,40,217,.2);border-radius:var(--r-xs);padding:5px 9px 5px 5px;}
+.img-th{width:44px;height:44px;object-fit:cover;border-radius:5px;}
+.img-nm{font-size:10px;font-weight:600;color:var(--ink2);}
+.img-sz{font-size:9px;color:var(--ink4);}
+.img-rm{width:17px;height:17px;border-radius:50%;background:var(--fog);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--ink3);transition:all .2s;margin-left:4px;}
+.img-rm:hover{background:rgba(225,29,72,.1);color:var(--rose);}
+
+.inputbar{padding:14px 18px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.88);backdrop-filter:blur(20px);flex-shrink:0;}
+.input-wrap{display:flex;align-items:flex-end;gap:8px;background:var(--white);border:1.5px solid var(--line2);border-radius:var(--r);padding:7px 9px 7px 13px;transition:border-color .22s,box-shadow .22s;box-shadow:var(--sh);}
+.input-wrap:focus-within{border-color:rgba(109,40,217,.32);box-shadow:var(--sh2),0 0 0 4px rgba(109,40,217,.06);}
+.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--fb);font-size:13.5px;color:var(--ink);line-height:1.6;resize:none;max-height:150px;min-height:22px;overflow-y:auto;padding:3px 0;}
+.chat-ta::placeholder{color:var(--ink4);}
+.input-acts{display:flex;align-items:center;gap:5px;padding-bottom:3px;}
+.icon-btn{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:var(--fog);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink3);font-size:14px;transition:all .2s;flex-shrink:0;}
+.icon-btn:hover{background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.25);color:var(--v);}
+.file-btn{position:relative;}
+.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;}
+.send-btn{width:36px;height:36px;border-radius:11px;border:none;background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;font-size:15px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(109,40,217,.28);transition:all .22s cubic-bezier(.4,0,.2,1);}
+.send-btn:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 20px rgba(109,40,217,.38);}
+.send-btn:active{transform:scale(.96);}
+.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
+.input-hint{font-size:10px;color:var(--ink4);padding:5px 3px 0;display:flex;align-items:center;gap:8px;}
+.kbd{background:var(--fog);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:var(--fm);font-size:9px;color:var(--ink3);}
+.model-hint{margin-left:auto;font-weight:700;color:var(--v);font-size:10px;}
+
+.toast{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:9px 16px;border-radius:var(--r-sm);box-shadow:var(--sh3);transform:translateY(50px);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
+.toast.show{transform:translateY(0);opacity:1;}
+
+@media(max-width:768px){
+  .shell{grid-template-columns:1fr;}
+  .sidebar{display:none;}
+}
+</style>
+</head>
+<body>
+
+<div class="bg">
+  <div class="orb orb1"></div><div class="orb orb2"></div><div class="orb orb3"></div>
+  <div class="bg-grid"></div>
+</div>
+
+<div class="shell">
+  <!-- SIDEBAR -->
+  <aside class="sidebar">
+    <div class="logo-area">
+      <div class="logo-row">
+        <div class="logo-icon">🧬</div>
+        <div class="logo-text">
+          <div class="logo-name"><em>Darwin</em>-35B</div>
+          <div class="logo-sub">Evolutionary Merge</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Single Model Card -->
+    <div class="model-card">
+      <div class="mc-top">
+        <span class="mc-name">Darwin-35B-A3B-Opus</span>
+        <span class="mc-arch">MoE 3B/35B</span>
+      </div>
+      <div class="mc-stats">
+        <span class="mc-stat mc-hl">GPQA 90.0%</span>
+        <span class="mc-stat mc-ok">MMMLU 85%</span>
+        <span class="mc-stat mc-ok">👁️ Vision</span>
+        <span class="mc-stat mc-ok">147.8 t/s</span>
+      </div>
+      <div class="mc-desc">MRI-guided evolutionary merge · Surpassed both parents · 201 languages · 262K context</div>
+    </div>
+
+    <!-- Settings -->
+    <div class="settings">
+      <div class="section-lbl">Settings</div>
+
+      <div class="toggle-row">
+        <div class="toggle-info"><div class="tl">🧠 Thinking Mode</div><div class="ts">Chain-of-thought reasoning</div></div>
+        <label class="toggle"><input type="checkbox" id="thinkToggle"><span class="t-track"></span><span class="t-thumb"></span></label>
+      </div>
+
+      <div class="toggle-row">
+        <div class="toggle-info"><div class="tl">👁️ Vision</div><div class="ts">Image understanding</div></div>
+        <label class="toggle"><input type="checkbox" id="visionToggle" checked><span class="t-track"></span><span class="t-thumb"></span></label>
+      </div>
+
+      <div class="field">
+        <span class="field-lbl">System Prompt</span>
+        <div class="presets">
+          <span class="chip" onclick="setPreset('general')">General</span>
+          <span class="chip" onclick="setPreset('code')">Code</span>
+          <span class="chip" onclick="setPreset('math')">Math</span>
+          <span class="chip" onclick="setPreset('creative')">Creative</span>
+          <span class="chip" onclick="setPreset('translate')">Translate</span>
+          <span class="chip" onclick="setPreset('research')">Research</span>
+        </div>
+        <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>
+      </div>
+
+      <div class="sl-wrap">
+        <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div>
+        <input type="range" id="tokSl" min="64" max="16384" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value">
+      </div>
+
+      <div class="sl-wrap">
+        <div class="sl-meta"><span class="sl-title">Temperature</span><span class="sl-val" id="tempVal">0.60</span></div>
+        <input type="range" id="tempSl" min="0" max="1.5" value="0.6" step="0.05" oninput="document.getElementById('tempVal').textContent=parseFloat(this.value).toFixed(2)">
+      </div>
+
+      <div class="sl-wrap">
+        <div class="sl-meta"><span class="sl-title">Top-P</span><span class="sl-val" id="topPVal">0.90</span></div>
+        <input type="range" id="topPSl" min="0.1" max="1.0" value="0.9" step="0.05" oninput="document.getElementById('topPVal').textContent=parseFloat(this.value).toFixed(2)">
+      </div>
+
+      <button class="clear-btn" onclick="clearChat()">🗑️ Clear conversation</button>
+    </div>
+  </aside>
+
+  <!-- MAIN -->
+  <main class="chat-main">
+    <header class="chat-hdr">
+      <div class="hdr-left">
+        <div class="model-pill"><div class="dot"></div><span class="model-name" id="hdrModel">Darwin-35B-A3B-Opus</span></div>
+        <div class="mode-tag" id="modeTag">⚡ Fast Mode</div>
+      </div>
+      <div style="display:flex;align-items:center;gap:12px;">
+        <a class="hf-login-btn" id="loginBtn" href="/oauth/login">
+          <svg viewBox="0 0 120 120" width="16" height="16"><path fill="currentColor" d="M41.7 56.6c-5 0-8.8 4-8.8 9s3.8 9 8.8 9 8.8-4 8.8-9-3.8-9-8.8-9zm36.6 0c-5 0-8.8 4-8.8 9s3.8 9 8.8 9 8.8-4 8.8-9-3.8-9-8.8-9z"/></svg>
+          Sign in with HF
+        </a>
+        <div id="userArea" style="display:none;align-items:center;gap:8px;">
+          <a class="user-chip" id="userChip" href="#"><div class="user-avatar" id="userAvatar"><span id="userInitial">U</span></div><span id="userName">User</span></a>
+          <button class="logout-btn" onclick="location.href='/oauth/logout'">Log out</button>
+        </div>
+        <div class="hdr-stats">
+          <div class="hstat"><div class="hstat-n" id="stMsgs">0</div><div class="hstat-l">Messages</div></div>
+          <div class="hstat"><div class="hstat-n" id="stTok">0</div><div class="hstat-l">Tokens</div></div>
+        </div>
+      </div>
+    </header>
+
+    <div class="img-prev" id="imgPrev">
+      <div class="img-tw">
+        <img class="img-th" id="imgThumb" src="">
+        <div><div class="img-nm" id="imgName">image.jpg</div><div class="img-sz" id="imgSize">—</div></div>
+        <button class="img-rm" onclick="removeImg()">✕</button>
+      </div>
+    </div>
+
+    <div class="messages" id="msgs">
+      <div class="welcome" id="welcome">
+        <div class="welcome-icon">🧬</div>
+        <div class="welcome-title">Hello, I'm <em>Darwin</em></div>
+        <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>
+        <div class="welcome-badges">
+          <span class="welcome-badge wb-purple">GPQA 90.0%</span>
+          <span class="welcome-badge wb-green">MMMLU 85%</span>
+          <span class="welcome-badge wb-amber">147.8 tok/s</span>
+        </div>
+        <div class="ex-grid">
+          <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>
+          <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>
+          <div class="ex-card" onclick="sendEx('Prove that √2 is irrational using proof by contradiction. Show every step.')"><span class="ex-icon">🔢</span><div class="ex-title">Math Reasoning</div><div class="ex-desc">Deep chain-of-thought</div></div>
+          <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>
+        </div>
+      </div>
+    </div>
+
+    <div class="inputbar">
+      <div class="input-wrap">
+        <textarea class="chat-ta" id="chatInput" placeholder="Message Darwin…" rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
+        <div class="input-acts">
+          <label class="icon-btn file-btn" id="fileLabel" title="Upload image">🖼<input type="file" accept="image/*" onchange="handleImg(this)" id="fileInput"></label>
+          <button class="icon-btn" onclick="clearChat()" title="New chat" style="font-size:16px;">🧬</button>
+          <button class="send-btn" id="sendBtn" onclick="sendMsg()">➤</button>
+        </div>
+      </div>
+      <div class="input-hint">
+        <span><span class="kbd">Enter</span> send</span>
+        <span><span class="kbd">Shift+Enter</span> new line</span>
+        <span class="model-hint">35B MoE · 3B active · 262K ctx</span>
+      </div>
+    </div>
+  </main>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const S={thinking:false,vision:true,history:[],msgCount:0,totalTok:0,pending:null,busy:false,
+  presets:{
+    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.',
+    code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing.',
+    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 201 languages. Provide accurate translations with cultural context.',
+    research:'You are a rigorous research analyst. Provide structured, well-reasoned analysis.',
+  }
+};
+
+function apiBase(){return'/gradio';}
+
+// Toggles
+document.getElementById('thinkToggle').addEventListener('change',function(){
+  S.thinking=this.checked;
+  const t=document.getElementById('modeTag');
+  t.textContent=this.checked?'🧠 Thinking Mode':'⚡ Fast Mode';
+  t.className='mode-tag'+(this.checked?' thinking':'');
+});
+document.getElementById('visionToggle').addEventListener('change',function(){
+  S.vision=this.checked;
+  const l=document.getElementById('fileLabel');
+  l.style.opacity=this.checked?'1':'.35';
+  l.style.pointerEvents=this.checked?'auto':'none';
+  if(!this.checked)removeImg();
+});
+
+function setPreset(k){document.getElementById('sysPrompt').value=S.presets[k];showToast('Preset applied ✓');}
+
+// Image
+function handleImg(input){
+  const f=input.files[0];if(!f)return;
+  const r=new FileReader();
+  r.onload=e=>{
+    S.pending={data:e.target.result,name:f.name,size:fmtSz(f.size)};
+    document.getElementById('imgThumb').src=e.target.result;
+    document.getElementById('imgName').textContent=f.name;
+    document.getElementById('imgSize').textContent=fmtSz(f.size);
+    document.getElementById('imgPrev').classList.add('show');
+  };
+  r.readAsDataURL(f);
+}
+function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+function fmtSz(b){return b<1048576?`${(b/1024).toFixed(0)} KB`:`${(b/1048576).toFixed(1)} MB`;}
+
+// Send
+function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
+function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,150)+'px';}
+
+async function sendMsg(){
+  if(S.busy)return;
+  const inp=document.getElementById('chatInput');
+  const msg=inp.value.trim();if(!msg)return;
+  inp.value='';inp.style.height='auto';
+  document.getElementById('sendBtn').disabled=true;
+  S.busy=true;
+  hideWelcome();
+
+  const imgSnap=S.pending?{...S.pending}:null;
+  removeImg();
+  appendUser(msg,imgSnap);
+
+  const thinkStr=S.thinking?'🧠 Thinking Mode  (chain-of-thought reasoning)':'⚡ Fast Mode  (direct answer)';
+
+  const payload=[
+    msg,S.history,thinkStr,
+    imgSnap?imgSnap.data:null,
+    document.getElementById('sysPrompt').value.trim()||S.presets.general,
+    parseInt(document.getElementById('tokSl').value),
+    parseFloat(document.getElementById('tempSl').value),
+    parseFloat(document.getElementById('topPSl').value),
+  ];
+
+  const botDiv=appendBot();
+
+  try{
+    const base=apiBase();
+    const postRes=await fetch(`${base}/gradio_api/call/chat`,{
+      method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({data:payload}),
+    });
+    if(!postRes.ok)throw new Error(`HTTP ${postRes.status}: ${await postRes.text()}`);
+    const{event_id}=await postRes.json();
+    if(!event_id)throw new Error('No event_id from Gradio');
+
+    await new Promise((resolve,reject)=>{
+      const es=new EventSource(`${base}/gradio_api/call/chat/${event_id}`);
+      let raw='',done=false;
+
+      const finish=text=>{
+        if(done)return;done=true;es.close();
+        renderBot(botDiv,text);
+        S.history.push([msg,stripThink(text)]);
+        S.msgCount+=2;S.totalTok+=Math.round(text.length/4);
+        updateStats();
+        resolve();
+      };
+
+      es.addEventListener('generating',e=>{
+        try{const d=JSON.parse(e.data);if(Array.isArray(d)&&d[0]!=null){raw=String(d[0]);renderBot(botDiv,raw);}}catch{}
+      });
+      es.addEventListener('complete',e=>{try{const d=JSON.parse(e.data);finish(Array.isArray(d)?String(d[0]??raw):raw);}catch{finish(raw);}});
+      es.addEventListener('process_completed',e=>{try{const d=JSON.parse(e.data);finish(String(d?.output?.data?.[0]??raw));}catch{finish(raw);}});
+      es.onmessage=e=>{
+        if(done)return;
+        try{const d=JSON.parse(e.data);if(d&&d.msg==='process_completed')finish(String(d?.output?.data?.[0]??raw));else if(Array.isArray(d)&&d[0]!=null){raw=String(d[0]);renderBot(botDiv,raw);}}catch{}
+      };
+      es.onerror=()=>{if(done)return;if(raw&&raw.length>0){finish(raw);}else{done=true;es.close();reject(new Error('SSE stream ended'));}};
+      setTimeout(()=>{if(!done){done=true;es.close();reject(new Error('Request timed out'));}},300000);
+    });
+  }catch(err){
+    renderBot(botDiv,`**Error:** ${esc(err.message)}\n\n_Check if SGLang server is running._`);
+  }
+
+  S.busy=false;
+  document.getElementById('sendBtn').disabled=false;
+  scrollDown();
+}
+
+function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
+function hideWelcome(){const w=document.getElementById('welcome');if(w){w.style.transition='opacity .25s';w.style.opacity='0';setTimeout(()=>w.remove(),260);}}
+
+function appendUser(text,img){
+  const t=new Date().toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit'});
+  const ih=img?`<img src="${img.data}" style="max-width:180px;border-radius:9px;margin-bottom:6px;display:block;">`:'';
+  const el=document.createElement('div');
+  el.className='msg user';
+  el.innerHTML=`<div class="avatar">U</div><div class="body">${ih}<div class="bubble">${esc(text)}</div><div class="msg-time">${t}</div></div>`;
+  document.getElementById('msgs').appendChild(el);
+  scrollDown();
+}
+function appendBot(){
+  const el=document.createElement('div');
+  el.className='msg bot';
+  el.innerHTML='<div class="avatar">🧬</div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div><div class="msg-time">—</div></div>';
+  document.getElementById('msgs').appendChild(el);
+  scrollDown();return el;
+}
+function renderBot(el,raw){
+  const t=new Date().toLocaleTimeString('en',{hour:'2-digit',minute:'2-digit'});
+  el.querySelector('.msg-time').textContent=t;
+  const b=el.querySelector('.bubble');
+  let thinkHtml='',ans=raw;
+  const tOpen=raw.indexOf('<think>'),tClose=raw.indexOf('</think>');
+  const dOpen=raw.indexOf('<details>'),sClose=raw.indexOf('</summary>'),dClose=raw.indexOf('</details>');
+  if(tOpen>=0&&tClose>tOpen){
+    const chain=raw.slice(tOpen+7,tClose).trim();ans=raw.slice(tClose+8).trim();thinkHtml=buildThink(chain);
+  }else if(tOpen>=0){
+    ans='';thinkHtml=buildThink(raw.slice(tOpen+7).trim()+' …');
+  }else if(dOpen>=0&&sClose>dOpen){
+    const body=dClose>sClose?raw.slice(sClose+10,dClose):raw.slice(sClose+10);
+    const chain=body.replace(/^> ?/gm,'').replace(/<[^>]+>/g,'').trim();
+    ans=dClose>0?raw.slice(dClose+10).trim():'';thinkHtml=buildThink(chain);
+  }
+  b.innerHTML=thinkHtml+md(ans);
+}
+function buildThink(chain){
+  if(!chain)return'';
+  return`<div class="think-blk" onclick="this.classList.toggle('open')"><div class="think-hdr">🧠 Reasoning Chain (${chain.length} chars)</div><div class="think-body">${esc(chain)}</div></div>`;
+}
+function stripThink(t){return t.replace(/^<details>[\s\S]*?<\/details>\n\n/,'').replace(/^<think>[\s\S]*?<\/think>\s*/,'');}
+
+// Marked.js
+(function setupMarked(){
+  if(typeof marked==='undefined')return;
+  const renderer=new marked.Renderer();
+  renderer.code=(code,lang)=>{
+    const language=lang&&hljs.getLanguage(lang)?lang:'plaintext';
+    const highlighted=hljs.highlight(typeof code==='object'?code.text:code,{language}).value;
+    const langLabel=language!=='plaintext'?`<span style="display:block;padding:6px 14px;font-size:11px;font-weight:600;color:#8b949e;border-bottom:1px solid rgba(255,255,255,.06)">${language}</span>`:'';
+    return`<div style="position:relative;margin:10px 0;border-radius:10px;overflow:hidden;background:#0d1117;border:1px solid rgba(255,255,255,.08)">${langLabel}<pre><code class="hljs language-${language}">${highlighted}</code></pre></div>`;
+  };
+  renderer.codespan=code=>`<code style="background:var(--fog);padding:1px 5px;border-radius:4px;font-family:var(--fm);font-size:11.5px">${code}</code>`;
+  renderer.link=(href,title,text)=>`<a href="${typeof href==='object'?href.href:href}" target="_blank" rel="noopener">${text}</a>`;
+  marked.setOptions({renderer,breaks:true,gfm:true});
+})();
+
+function md(t){if(!t)return'';if(typeof marked!=='undefined'){try{return marked.parse(t);}catch(e){}}return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/`([^`]+)`/g,'<code>$1</code>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>');}
+function esc(t){return t?t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'):'';}
+function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;}
+function updateStats(){document.getElementById('stMsgs').textContent=S.msgCount;const t=S.totalTok;document.getElementById('stTok').textContent=t>999?(t/1000).toFixed(1)+'k':t;}
+function clearChat(){
+  S.history=[];S.msgCount=0;S.totalTok=0;updateStats();
+  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>';
+}
+function showToast(msg,dur=2200){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),dur);}
+
+// HF OAuth
+async function checkAuth(){try{const res=await fetch('/oauth/user');if(res.ok){const u=await res.json();if(u.logged_in){showLoggedIn(u);return;}}}catch(e){}showLoggedOut();}
+document.addEventListener('visibilitychange',()=>{if(!document.hidden)checkAuth();});
+function showLoggedIn(u){
+  document.getElementById('loginBtn').style.display='none';
+  const ua=document.getElementById('userArea');ua.style.display='flex';
+  document.getElementById('userName').textContent=u.username||u.name||'User';
+  document.getElementById('userChip').href=u.profile||'https://huggingface.co';
+  const av=document.getElementById('userAvatar');
+  if(u.avatar){av.innerHTML='<img src="'+u.avatar+'" alt="av">';}
+  else{document.getElementById('userInitial').textContent=(u.username||'U')[0].toUpperCase();}
+}
+function showLoggedOut(){document.getElementById('loginBtn').style.display='inline-flex';document.getElementById('userArea').style.display='none';}
+checkAuth();
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=5.0
+huggingface_hub
+httpx
+Pillow
+uvicorn
+fastapi
+requests