cybersecqwen-chat

Running

App Files Files Community

athena129 commited on 16 days ago

Commit

c3caf12

1 Parent(s): 8c64948

Initial static frontend — calls athena129/cybersecqwen-demo via @gradio/client

Browse files

Files changed (2) hide show

README.md +13 -5
index.html +1030 -17

README.md CHANGED Viewed

@@ -1,10 +1,18 @@
 ---
-title: Cybersecqwen Chat
-emoji: 🏃
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CyberSecQwen Chat
+emoji: "\U0001F6E1"
+colorFrom: blue
+colorTo: indigo
 sdk: static
 pinned: false
+license: apache-2.0
+short_description: Polished chat UI for CyberSecQwen-4B
 ---
+# CyberSecQwen Chat
+Static frontend that calls the [`athena129/cybersecqwen-demo`](https://huggingface.co/spaces/athena129/cybersecqwen-demo) Gradio Space (ZeroGPU backend) via `@gradio/client`.
+- Single-file HTML, vanilla JS, no build step
+- Connects to the deployed Gradio backend's `/chat` endpoint
+- Streaming token-by-token via Gradio's submit job iterator

index.html CHANGED Viewed

@@ -1,19 +1,1032 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>CyberSecQwen-4B</title>
+<!--
+  CyberSecQwen-4B · single-file frontend
+  ──────────────────────────────────────
+  Two views:
+    #/        Chat      — vertically centered hero → docks composer after first message
+    #/about   About     — long-form scrollable page with sticky sub-nav
+  Backend hook: askModel(prompt) — swap its body for fetch('/infer', …).
+  Vanilla JS only. No build step.
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
+<style>
+  /* ── DESIGN TOKENS ─────────────────────────────────────── */
+  :root{
+    --bg:           #08080a;
+    --surface:      #0e0e11;
+    --surface-2:    #16161a;
+    --border:       #232326;
+    --border-soft:  #1a1a1d;
+    --fg:           #fafafa;
+    --fg-2:         #e4e4e7;
+    --fg-3:         #a1a1aa;
+    --fg-4:         #71717a;
+    --fg-5:         #52525b;
+    --accent:        #22d3ee;
+    --accent-soft:   rgba(34,211,238,0.08);
+    --accent-border: rgba(34,211,238,0.28);
+    --accent-glow:   rgba(34,211,238,0.18);
+    --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;
+    --ease-out: cubic-bezier(.22,.61,.36,1);
+  }
+  *,*::before,*::after{box-sizing:border-box}
+  html,body{height:100%}
+  body{
+    margin:0;
+    color:var(--fg-2);
+    background: var(--bg);
+    font-family:var(--font-sans);
+    font-size:14px;
+    line-height:1.5;
+    -webkit-font-smoothing:antialiased;
+    text-rendering:optimizeLegibility;
+    overflow:hidden;
+  }
+  ::selection{background:var(--accent-soft);color:#fff}
+  a{color:inherit;text-decoration:none}
+  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+  /* Atmospheric background — two cyan radial meshes + grain */
+  .bg-mesh{
+    position:fixed;inset:0;pointer-events:none;z-index:0;
+    background:
+      radial-gradient(900px 540px at 92% -8%, rgba(34,211,238,.16), transparent 60%),
+      radial-gradient(620px 420px at 6% 108%, rgba(34,211,238,.10), transparent 60%);
+  }
+  .bg-grain{
+    position:fixed;inset:0;pointer-events:none;z-index:1;
+    opacity:.035;mix-blend-mode:overlay;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  }
+  /* ── APP SHELL ─────────────────────────────────────────── */
+  .app{
+    position:relative;z-index:2;
+    display:grid;
+    grid-template-columns: 240px 1fr;
+    height:100vh;
+  }
+  /* Sidebar */
+  .sidebar{
+    border-right:1px solid var(--border-soft);
+    background: rgba(14,14,17,.6);
+    backdrop-filter: blur(8px);
+    display:flex;flex-direction:column;
+    padding:18px 14px;
+    min-height:0;
+  }
+  .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 18px}
+  .brand-mark{
+    width:30px;height:30px;border-radius:8px;
+    border:1px solid var(--accent-border);
+    display:grid;place-items:center;
+    font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--accent);
+    background:var(--accent-soft);
+  }
+  .brand-name{font-weight:600;letter-spacing:-.005em;color:var(--fg);font-size:14px}
+  .brand-tag{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-4);letter-spacing:.02em}
+  .nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
+  .nav a{
+    display:flex;align-items:center;gap:10px;
+    padding:8px 10px;border-radius:8px;color:var(--fg-3);font-size:13.5px;
+    transition:background .15s, color .15s;
+  }
+  .nav a:hover{color:var(--fg-2)}
+  .nav a.active{background:var(--surface-2);color:var(--fg)}
+  .nav a svg{width:15px;height:15px;flex:none;opacity:.85}
+  .side-foot{
+    margin-top:auto;display:flex;flex-direction:column;gap:4px;
+    padding-top:14px;border-top:1px solid var(--border-soft);
+  }
+  .side-foot a{
+    padding:6px 10px;border-radius:6px;color:var(--fg-4);font-size:12.5px;
+    display:flex;align-items:center;gap:8px;
+  }
+  .side-foot a:hover{color:var(--fg-2);background:var(--surface)}
+  .side-foot a svg{width:13px;height:13px;opacity:.8}
+  .status-pill{
+    margin-top:6px;align-self:flex-start;
+    padding:3px 9px;border:1px solid var(--border);border-radius:999px;
+    font-family:var(--font-mono);font-size:10.5px;color:var(--fg-4);
+    display:inline-flex;align-items:center;gap:6px;
+  }
+  .status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
+  /* Main */
+  .main{display:flex;flex-direction:column;min-width:0;min-height:0}
+  .topbar{
+    height:56px;flex:none;
+    padding:0 28px;border-bottom:1px solid var(--border-soft);
+    display:flex;align-items:center;justify-content:space-between;
+    background:rgba(8,8,10,.5);backdrop-filter:blur(8px);
+  }
+  .topbar h1.section-title{
+    margin:0;font-size:13.5px;font-weight:500;color:var(--fg-2);letter-spacing:.005em;
+  }
+  .top-status{
+    font-family:var(--font-mono);font-size:11px;color:var(--fg-4);
+    padding:4px 10px;border:1px solid var(--border);border-radius:999px;
+    display:inline-flex;align-items:center;gap:7px;
+  }
+  .view{flex:1;min-height:0;overflow:auto;position:relative}
+  .view.no-scroll{overflow:hidden;display:flex;flex-direction:column}
+  .view.no-scroll > .chat-active{flex:1;min-height:0}
+  /* ── CHAT VIEW ─────────────────────────────────────────── */
+  .chat-empty{
+    min-height:100%;
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    padding:7vh 28px 12vh;
+    gap:24px;
+  }
+  .hero-icon{
+    color:var(--accent);
+    width:36px;height:36px;
+    display:grid;place-items:center;
+    animation: fadeUp .6s var(--ease-out) both;
+  }
+  .hero-h1{
+    margin:0;
+    font-family:var(--font-serif);font-weight:400;
+    font-size:clamp(40px, 6vw, 56px);
+    line-height:1.05;letter-spacing:-.01em;color:var(--fg);
+    text-align:center;
+    animation: fadeUp .6s var(--ease-out) both;animation-delay:.08s;
+  }
+  .hero-h1 em{font-style:italic;color:var(--accent);font-family:var(--font-serif)}
+  .hero-sub{
+    margin:0;font-size:15px;color:var(--fg-4);max-width:54ch;text-align:center;
+    animation: fadeUp .6s var(--ease-out) both;animation-delay:.16s;
+  }
+  .composer{
+    width:100%;max-width:640px;
+    background:var(--surface);
+    border:1px solid var(--border);border-radius:14px;
+    padding:14px 14px 10px;
+    display:flex;flex-direction:column;gap:10px;
+    transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
+    animation: fadeUp .6s var(--ease-out) both;animation-delay:.24s;
+  }
+  .composer:focus-within{
+    border-color:var(--accent-border);
+    box-shadow: 0 0 0 4px var(--accent-soft), 0 0 32px var(--accent-glow);
+  }
+  .composer textarea{
+    width:100%;min-height:24px;max-height:240px;
+    background:transparent;color:var(--fg);
+    border:0;outline:none;resize:none;
+    font:inherit;font-size:15px;line-height:1.5;
+  }
+  .composer textarea::placeholder{color:var(--fg-5)}
+  .composer-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
+  .send-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-5)}
+  .send-btn{
+    display:inline-flex;align-items:center;gap:7px;
+    padding:8px 14px;border-radius:8px;
+    background:var(--accent);color:#06181c;font-weight:600;font-size:13px;
+    transition:transform .2s var(--ease-out), filter .15s, box-shadow .2s var(--ease-out);
+    box-shadow: 0 0 0 1px var(--accent-border), 0 0 24px var(--accent-glow);
+  }
+  .send-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
+  .send-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
+  .chips{
+    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
+    max-width:640px;
+    animation: fadeUp .6s var(--ease-out) both;animation-delay:.32s;
+  }
+  .chip{
+    padding:6px 12px;border:1px solid var(--border);border-radius:999px;
+    font-size:12.5px;color:var(--fg-3);
+    display:inline-flex;align-items:center;gap:7px;
+    transition:transform .2s var(--ease-out), border-color .15s, color .15s;
+  }
+  .chip .kind{font-family:var(--font-mono);font-size:10.5px;color:var(--accent)}
+  .chip:hover{transform:translateY(-1px);border-color:var(--accent-border);color:var(--fg-2)}
+  /* Active conversation layout */
+  .chat-active{
+    display:flex;flex-direction:column;
+    width:100%;min-height:0;
+  }
+  .thread{
+    flex:1;min-height:0;overflow:auto;
+    padding: 28px 28px 32px;
+    display:flex;flex-direction:column;align-items:center;
+    scroll-behavior:smooth;
+  }
+  .thread-inner{width:100%;max-width:720px;display:flex;flex-direction:column;gap:18px}
+  .msg{display:flex;flex-direction:column;gap:6px;max-width:100%}
+  .msg .who{
+    font-family:var(--font-mono);font-size:10.5px;color:var(--fg-5);
+    letter-spacing:.04em;text-transform:uppercase;
+  }
+  .msg.user .bubble{
+    align-self:flex-end;max-width:80%;
+    background:var(--surface-2);border:1px solid var(--border);
+    color:var(--fg);
+    padding:10px 14px;
+    border-radius:12px 12px 4px 12px;
+    white-space:pre-wrap;
+    font-size:14.5px;
+  }
+  .msg.user .who{align-self:flex-end}
+  .msg.bot .body{
+    color:var(--fg-2);font-size:14.5px;line-height:1.65;
+    white-space:pre-wrap;
+  }
+  .msg.bot .body strong{color:var(--fg)}
+  .msg.bot .body code{
+    font-family:var(--font-mono);font-size:13px;
+    background:var(--surface);border:1px solid var(--border-soft);
+    padding:1px 6px;border-radius:5px;color:var(--fg-2);
+  }
+  .typing{display:inline-flex;gap:5px;padding:8px 0}
+  .typing i{
+    width:5px;height:5px;border-radius:50%;background:var(--fg-5);
+    animation:blink 1.2s infinite ease-in-out;
+  }
+  .typing i:nth-child(2){animation-delay:.15s}
+  .typing i:nth-child(3){animation-delay:.30s}
+  @keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
+  /* Docked composer */
+  .dock{
+    flex:none;
+    padding:14px 28px 22px;
+    background:linear-gradient(to bottom, transparent, rgba(8,8,10,.85) 22%, var(--bg) 60%);
+    display:flex;justify-content:center;
+    margin-top:-32px;
+    position:relative;z-index:2;
+    pointer-events:none;
+  }
+  .dock > .dock-inner{
+    pointer-events:auto;width:100%;max-width:720px;
+    display:flex;align-items:flex-end;gap:10px;
+  }
+  .dock .composer{margin:0;flex:1;animation:none}
+  .new-chat{
+    flex:none;height:46px;padding:0 14px;
+    border:1px solid var(--border);border-radius:10px;
+    color:var(--fg-3);font-size:13px;
+    display:inline-flex;align-items:center;gap:7px;
+    transition:border-color .15s, color .15s;
+  }
+  .new-chat:hover{color:var(--fg);border-color:var(--accent-border)}
+  /* ── ABOUT VIEW ────────────────────────────────────────── */
+  .about{padding:0}
+  .about-inner{max-width:880px;margin:0 auto;padding:48px 32px 120px}
+  .subnav{
+    position:sticky;top:0;z-index:5;
+    background:rgba(8,8,10,.78);backdrop-filter:blur(10px);
+    border-bottom:1px solid var(--border-soft);
+    padding:12px 32px;
+    display:flex;justify-content:center;
+  }
+  .subnav-inner{display:flex;gap:6px;flex-wrap:wrap;max-width:880px;width:100%}
+  .subnav a{
+    font-family:var(--font-mono);font-size:11.5px;color:var(--fg-4);
+    padding:5px 10px;border-radius:6px;letter-spacing:.02em;
+    transition:color .15s, background .15s;
+  }
+  .subnav a:hover{color:var(--fg-2);background:var(--surface)}
+  .subnav a.is-current{color:var(--accent);background:var(--accent-soft)}
+  .about h2{
+    font-family:var(--font-serif);font-weight:400;
+    font-size:36px;line-height:1.1;letter-spacing:-.01em;color:var(--fg);
+    margin:0 0 14px;
+  }
+  .about h3{
+    font-size:13px;font-weight:600;color:var(--fg-4);
+    text-transform:uppercase;letter-spacing:.12em;
+    margin:0 0 18px;
+  }
+  .about p{color:var(--fg-3);font-size:15px;line-height:1.7;margin:0 0 14px;max-width:64ch}
+  .about p strong{color:var(--fg-2)}
+  .about section{padding:48px 0;border-top:1px solid var(--border-soft)}
+  .about section:first-of-type{border-top:0;padding-top:24px}
+  .tagline{
+    font-family:var(--font-serif);font-style:italic;font-weight:400;
+    font-size:28px;line-height:1.25;color:var(--fg);
+    border-left:1px solid var(--accent-border);
+    padding:6px 0 6px 18px;margin:18px 0 0;max-width:42ch;
+  }
+  .tagline em{font-style:italic;color:var(--accent)}
+  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 28px}
+  .stat{
+    border:1px solid var(--border);border-radius:12px;
+    background:var(--surface);padding:18px;
+    display:flex;flex-direction:column;gap:6px;
+  }
+  .stat .lbl{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-5);text-transform:uppercase;letter-spacing:.08em}
+  .stat .num{
+    font-family:var(--font-serif);font-size:38px;line-height:1;color:var(--fg);
+    font-feature-settings:"tnum";letter-spacing:-.01em;
+  }
+  .stat.accent .num{color:var(--accent)}
+  .stat .sub{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-4)}
+  table.cmp{
+    width:100%;border-collapse:collapse;font-size:13px;
+    border:1px solid var(--border);border-radius:12px;overflow:hidden;
+    background:var(--surface);
+  }
+  table.cmp th, table.cmp td{
+    padding:10px 14px;border-bottom:1px solid var(--border-soft);text-align:left;
+    font-variant-numeric:tabular-nums;
+  }
+  table.cmp th{
+    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
+    text-transform:uppercase;color:var(--fg-5);font-weight:500;
+    background:var(--surface-2);
+  }
+  table.cmp td{color:var(--fg-3)}
+  table.cmp td.model{color:var(--fg-2);font-weight:500}
+  table.cmp tr.us td{background:var(--accent-soft);color:var(--fg)}
+  table.cmp tr.us td.model{color:var(--accent);font-weight:600}
+  table.cmp tr:last-child td{border-bottom:0}
+  .lift-callout{
+    margin-top:22px;padding:16px 18px;border:1px solid var(--accent-border);
+    border-radius:12px;background:var(--accent-soft);
+    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
+  }
+  .lift-callout .lift{
+    font-family:var(--font-serif);font-size:32px;line-height:1;color:var(--accent);
+  }
+  .lift-callout .desc{color:var(--fg-2);font-size:14px}
+  .lift-callout .desc small{display:block;color:var(--fg-4);font-family:var(--font-mono);font-size:11px;margin-top:4px}
+  .card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 26px}
+  .card{
+    border:1px solid var(--border);border-radius:12px;background:var(--surface);
+    padding:18px;display:flex;flex-direction:column;gap:8px;
+  }
+  .card .pill{
+    font-family:var(--font-mono);font-size:10.5px;color:var(--accent);
+    text-transform:uppercase;letter-spacing:.08em;
+  }
+  .card h4{margin:0;color:var(--fg);font-size:15px;font-weight:600;letter-spacing:-.005em}
+  .card p{margin:0;color:var(--fg-3);font-size:13.5px;line-height:1.6}
+  .spec{
+    display:grid;grid-template-columns:auto 1fr;gap:0;
+    border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);
+    margin:14px 0;
+  }
+  .spec dt, .spec dd{padding:9px 14px;border-bottom:1px solid var(--border-soft)}
+  .spec dt{
+    font-family:var(--font-mono);font-size:11.5px;color:var(--fg-4);
+    background:var(--surface-2);border-right:1px solid var(--border-soft);
+    text-transform:uppercase;letter-spacing:.04em;
+  }
+  .spec dd{margin:0;color:var(--fg-2);font-size:13.5px;font-family:var(--font-mono)}
+  .spec dt:nth-last-of-type(1), .spec dd:nth-last-of-type(1){border-bottom:0}
+  pre.code{
+    margin:14px 0;background:var(--surface);border:1px solid var(--border-soft);
+    border-radius:10px;padding:14px 16px;
+    font-family:var(--font-mono);font-size:12.5px;color:var(--fg-2);
+    overflow:auto;line-height:1.55;
+  }
+  pre.code .c{color:var(--fg-5)}
+  pre.code .k{color:var(--accent)}
+  ul.bullets{padding-left:18px;color:var(--fg-3);font-size:14.5px;line-height:1.7;margin:0 0 14px}
+  ul.bullets li{margin:4px 0}
+  ul.bullets li strong{color:var(--fg-2)}
+  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
+  /* Scrollbar */
+  *::-webkit-scrollbar{width:10px;height:10px}
+  *::-webkit-scrollbar-track{background:transparent}
+  *::-webkit-scrollbar-thumb{background:#1d1d20;border-radius:99px;border:2px solid transparent;background-clip:content-box}
+  *::-webkit-scrollbar-thumb:hover{background:#2a2a2e;background-clip:content-box;border:2px solid transparent}
+  @keyframes fadeUp{
+    from{opacity:0;transform:translateY(8px)}
+    to  {opacity:1;transform:translateY(0)}
+  }
+  /* Responsive */
+  @media (max-width: 860px){
+    .app{grid-template-columns: 1fr}
+    .sidebar{display:none}
+    .stat-grid, .card-row, .twocol{grid-template-columns:1fr}
+  }
+</style>
+</head>
+<body>
+  <div class="bg-mesh" aria-hidden="true"></div>
+  <div class="bg-grain" aria-hidden="true"></div>
+  <div class="app">
+    <!-- ── SIDEBAR ─────────────────────────────────────────── -->
+    <aside class="sidebar">
+      <div class="brand">
+        <div class="brand-mark">C</div>
+        <div>
+          <div class="brand-name">CyberSecQwen</div>
+          <div class="brand-tag">4B · CTI</div>
+        </div>
+      </div>
+      <nav class="nav" id="nav">
+        <a href="#/" data-route="/" class="active">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+          Chat
+        </a>
+        <a href="#/about" data-route="/about">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg>
+          About
+        </a>
+      </nav>
+      <div class="side-foot">
+        <a href="https://huggingface.co/athena129/CyberSecQwen-4B" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
+          Model card
+        </a>
+        <a href="https://github.com/GPT-64590/CyberSecQwen-4B" target="_blank" rel="noopener">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4 1.5-4-2-6-2"/><path d="M15 22v-4a3 3 0 0 0-1-2.3c3 0 6-2 6-5.5a4 4 0 0 0-1-2.8 4 4 0 0 0 0-2.8s-1 0-3 1.3a10 10 0 0 0-5 0C7.9 2.6 7 2.6 7 2.6a4 4 0 0 0 0 2.8 4 4 0 0 0-1 2.8C6 11.7 9 13.7 12 13.7a3 3 0 0 0-1 2.3v4"/></svg>
+          GitHub
+        </a>
+        <span class="status-pill"><span class="status-dot"></span> ZeroGPU · A100</span>
+      </div>
+    </aside>
+    <!-- ── MAIN ────────────────────────────────────────────── -->
+    <main class="main">
+      <header class="topbar">
+        <h1 class="section-title" id="topTitle">Chat</h1>
+        <span class="top-status">cybersecqwen-4b · temp 0.3</span>
+      </header>
+      <div class="view" id="view"><!-- routed content --></div>
+    </main>
+  </div>
+  <!-- ── CHAT VIEW (template) ─────────────────────────────── -->
+  <template id="tpl-chat-empty">
+    <div class="chat-empty">
+      <div class="hero-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
+      </div>
+      <h2 class="hero-h1">Map a vulnerability<br/><em>to a CWE.</em></h2>
+      <p class="hero-sub">Paste a snippet, log line, or CVE. The model returns a Common Weakness Enumeration with a one-paragraph rationale.</p>
+      <form class="composer" id="composer-empty">
+        <textarea rows="1" id="ta-empty" placeholder="Describe the issue, paste code, or drop a CVE id…"></textarea>
+        <div class="composer-row">
+          <span class="send-hint">↵ to send · ⇧↵ for newline</span>
+          <button class="send-btn" type="submit" id="send-empty" disabled>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
+            Send
+          </button>
+        </div>
+      </form>
+      <div class="chips" id="chips">
+        <button class="chip" data-prompt="Explain CWE-120 (classic buffer overflow) with a minimal C example and the standard mitigation.">
+          <span class="kind">CWE</span> Buffer overflow
+        </button>
+        <button class="chip" data-prompt="What CWE underlies the MOVEit Transfer SQL injection chain (CVE-2023-34362)?">
+          <span class="kind">CVE</span> MOVEit
+        </button>
+        <button class="chip" data-prompt="Audit this nginx config snippet for security weaknesses:&#10;server { listen 80; root /var/www; autoindex on; location /api/ { proxy_pass http://127.0.0.1:8000; } }">
+          <span class="kind">CFG</span> nginx audit
+        </button>
+        <button class="chip" data-prompt="Log line: GET /static/../../../etc/passwd HTTP/1.1 200 — what weakness, and how to fix?">
+          <span class="kind">LOG</span> path traversal
+        </button>
+      </div>
+    </div>
+  </template>
+  <template id="tpl-chat-active">
+    <div class="chat-active">
+      <div class="thread" id="thread"><div class="thread-inner" id="thread-inner"></div></div>
+      <div class="dock">
+        <div class="dock-inner">
+          <form class="composer" id="composer-dock">
+            <textarea rows="1" id="ta-dock" placeholder="Continue the conversation…"></textarea>
+            <div class="composer-row">
+              <span class="send-hint">↵ to send · ⇧↵ for newline</span>
+              <button class="send-btn" type="submit" id="send-dock" disabled>
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
+                Send
+              </button>
+            </div>
+          </form>
+          <button class="new-chat" id="newChat" type="button" title="Start a new chat">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            New chat
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+  <!-- ── ABOUT VIEW (template) ────────────────────────────── -->
+  <template id="tpl-about">
+    <div class="about">
+      <div class="subnav">
+        <div class="subnav-inner" id="subnav">
+          <a href="#performance">Performance</a>
+          <a href="#recipe">Recipe</a>
+          <a href="#hardware">Hardware</a>
+          <a href="#limitations">Limitations</a>
+          <a href="#companion">Companion</a>
+          <a href="#citation">Citation</a>
+        </div>
+      </div>
+      <div class="about-inner">
+        <section id="overview">
+          <h3>Overview</h3>
+          <h2>CyberSecQwen-4B</h2>
+          <p>A Qwen3-4B base fine-tuned for cyber threat intelligence — CWE classification, CVE-to-CWE mapping, and code-pattern reasoning. Trained on AMD MI300X with a recipe designed to preserve instruction-tuned behavior while shifting the model's distribution onto the CTI domain.</p>
+          <p class="tagline">Beating an 8B Cisco specialist <em>at half the size.</em></p>
+        </section>
+        <section id="performance">
+          <h3>Performance</h3>
+          <h2>CTI-Bench, n=5, temp 0.3</h2>
+          <p>Evaluated on the public CTI-Bench multi-trial protocol. Scores below are mean ± 1σ over five runs.</p>
+          <div class="stat-grid">
+            <div class="stat">
+              <span class="lbl">CTI-RCM</span>
+              <span class="num">0.6664</span>
+              <span class="sub">± 0.0023 · CWE root-cause mapping</span>
+            </div>
+            <div class="stat accent">
+              <span class="lbl">CTI-MCQ</span>
+              <span class="num">0.5868</span>
+              <span class="sub">± 0.0029 · +8.7 pp vs Cisco-Instruct-8B</span>
+            </div>
+            <div class="stat">
+              <span class="lbl">Param ratio</span>
+              <span class="num">2×</span>
+              <span class="sub">smaller than Cisco-Foundation-Sec-8B</span>
+            </div>
+          </div>
+          <table class="cmp">
+            <thead>
+              <tr><th>Model</th><th>Params</th><th>CTI-RCM</th><th>CTI-MCQ</th></tr>
+            </thead>
+            <tbody>
+              <tr><td class="model">Foundation-Sec-8B (base, 5-shot)</td><td>8B</td><td>0.7450</td><td>0.6552</td></tr>
+              <tr><td class="model">Cisco-Foundation-Sec-Instruct-8B</td><td>8B</td><td>0.6850</td><td>0.4996</td></tr>
+              <tr><td class="model">CyberPal-2.0-20B</td><td>20B</td><td>0.7280</td><td>0.7384</td></tr>
+              <tr class="us"><td class="model">CyberSecQwen-4B</td><td>4B</td><td>0.6664</td><td>0.5868</td></tr>
+              <tr><td class="model">Gemma4Defense-2B (companion)</td><td>2B</td><td>0.6754</td><td>0.6042</td></tr>
+              <tr><td class="model">Qwen3-4B-Instruct-2507 (raw)</td><td>4B</td><td>0.5190</td><td>0.4732</td></tr>
+              <tr><td class="model">Qwen3-4B-Base (5-shot)</td><td>4B</td><td>0.5170</td><td>0.6672</td></tr>
+              <tr><td class="model">Gemma-4-E2B-it (raw)</td><td>2B</td><td>0.5800</td><td>0.5780</td></tr>
+            </tbody>
+          </table>
+          <div class="lift-callout">
+            <span class="lift">+15.1 pp</span>
+            <div class="desc">RCM lift over our Qwen3-4B base
+              <small>and +12.0 pp on MCQ — same architecture, recipe alone</small>
+            </div>
+          </div>
+        </section>
+        <section id="recipe">
+          <h3>Recipe</h3>
+          <h2>What changed, in three ideas.</h2>
+          <div class="card-row">
+            <div class="card">
+              <span class="pill">01 · Decontamination</span>
+              <h4>Strict eval-set scrub</h4>
+              <p>Training corpus is filtered against CTI-Bench prompts and near-duplicates before any update sees a gradient. No leakage, no shortcutting.</p>
+            </div>
+            <div class="card">
+              <span class="pill">02 · IT-base preservation</span>
+              <h4>Keep the instruction-tuned voice</h4>
+              <p>Loss is balanced so the model adopts CTI domain knowledge without losing Qwen3's general instruction-following. Tone, formatting, and refusal behavior remain intact.</p>
+            </div>
+            <div class="card">
+              <span class="pill">03 · Recipe portability</span>
+              <h4>Same recipe, different base</h4>
+              <p>The same procedure applied to Gemma-4-E2B-it produces Gemma4Defense-2B with comparable lift — evidence the gains come from the recipe, not the base.</p>
+            </div>
+          </div>
+          <h3>Corpus · ~14,776 supervised records</h3>
+          <ul class="bullets">
+            <li><strong>rcm-2021 (decontaminated)</strong> — ~6,776 CVE → CWE classification examples from MITRE/NVD 2021 cohort, with all CTI-Bench overlap items removed.</li>
+            <li><strong>cve_cti synthetic Q&amp;A</strong> — ~8,000 defensive-analyst-style Q&amp;A pairs grounded in CVE descriptions.</li>
+          </ul>
+          <p>An earlier internal CPT corpus had <strong>72.3% test-set overlap</strong> with CTI-Bench. The released model trains exclusively on the 2021 cohort with overlap removed — released numbers are post-fix.</p>
+          <h3>Hyperparameters</h3>
+          <dl class="spec">
+            <dt>Base</dt>            <dd>Qwen3-4B-Instruct-2507</dd>
+            <dt>Adapter</dt>         <dd>LoRA r=64, α=64, dropout=0.05</dd>
+            <dt>Targets</dt>         <dd>q_proj, k_proj, v_proj, o_proj, gate_proj, up_proj, down_proj</dd>
+            <dt>Optimizer</dt>       <dd>AdamW · cosine schedule · warmup_ratio=0.05 · weight_decay=0.01</dd>
+            <dt>LR · peak</dt>       <dd>5e-5</dd>
+            <dt>Batch · effective</dt><dd>2 per device · grad_accum 8 · effective batch 16</dd>
+            <dt>Schedule</dt>        <dd>10 epochs · max_seq_len 4096</dd>
+            <dt>Precision</dt>       <dd>bfloat16 throughout</dd>
+            <dt>Attention</dt>       <dd>flash_attention_2 (FA2)</dd>
+            <dt>Wall · MI300X</dt>   <dd>173 min · 1,290 steps · 7.85 s/step</dd>
+            <dt>Eval protocol</dt>   <dd>Foundation-Sec arXiv:2504.21039 §B.3-B.4 · n=5 · temp 0.3</dd>
+          </dl>
+        </section>
+        <section id="hardware">
+          <h3>Hardware</h3>
+          <h2>Trained on AMD MI300X.</h2>
+          <p>The recipe was developed on a single-node MI300X stack. Optimizations are aimed at ROCm; the recipe ports cleanly to NVIDIA H100 / A100 with the FA2 caveat noted below.</p>
+          <h3>Stack</h3>
+          <dl class="spec">
+            <dt>Accelerator</dt>      <dd>AMD Instinct MI300X · 192 GB HBM3 (gfx942)</dd>
+            <dt>Runtime</dt>          <dd>ROCm 7.0</dd>
+            <dt>Docker image</dt>     <dd>vllm/vllm-openai-rocm:latest</dd>
+            <dt>PyTorch</dt>          <dd>2.6.0 (ROCm)</dd>
+            <dt>flash-attn</dt>       <dd>2.8.3 (preinstalled in vLLM ROCm image)</dd>
+            <dt>vLLM</dt>             <dd>0.10.1</dd>
+          </dl>
+          <h3>FA2 viability per model family</h3>
+          <p style="font-size:13.5px;color:var(--fg-4);margin:0 0 10px;">FA2 via the ROCm/flash-attention Composable-Kernels backend is supported on MI300X but bounded at <strong style="color:var(--fg-2)">head_dim ≤ 256</strong> by the LDS shared-memory budget.</p>
+          <table class="cmp">
+            <thead><tr><th>Family</th><th>head_dim</th><th>FA2</th><th>Note</th></tr></thead>
+            <tbody>
+              <tr class="us"><td class="model">Qwen3 (this work)</td><td>128</td><td>✓ enabled</td><td>fits LDS budget — ~1.6× faster than sdpa</td></tr>
+              <tr><td class="model">Llama-3 / Mistral</td><td>128</td><td>✓ works</td><td>same head_dim class</td></tr>
+              <tr><td class="model">Gemma-2</td><td>256</td><td>✓ boundary</td><td>at LDS limit, viable</td></tr>
+              <tr><td class="model">Gemma-4 (global layers)</td><td>512</td><td>✗ disabled</td><td>exceeds LDS — fallback to sdpa</td></tr>
+            </tbody>
+          </table>
+          <h3>Optimizations</h3>
+          <ul class="bullets">
+            <li><strong>FA2 enabled in training</strong> — Qwen3-4B head_dim=128 fits the gfx942 LDS budget; ~7.85 s/step at LoRA r=64 / max_seq_len=4096 — <strong>~1.6× faster</strong> than the same recipe on Gemma-4 (sdpa fallback).</li>
+            <li><strong>TRITON_ATTN backend for vLLM inference</strong> — recommended on MI300X for Qwen3-class models.</li>
+            <li><strong>bf16 throughout</strong> — native MI300X precision; no mixed-precision dance.</li>
+            <li><strong>AITER kernels for matmul</strong> — <code>VLLM_ROCM_USE_AITER=1</code> + <code>TORCH_BLAS_PREFER_HIPBLASLT=1</code>. Note: this works for Qwen3 dense — does NOT work for gpt-oss MoE (AITER=0 required there).</li>
+            <li><strong>Prefix caching</strong> — vLLM <code>--enable-prefix-caching</code> for shared system-prompt batches.</li>
+            <li><strong>HF Transfer for push/pull</strong> — <code>HF_HUB_ENABLE_HF_TRANSFER=1</code> saturates ~240 MB/s; 8 GB merged model uploads in ~36 s.</li>
+          </ul>
+          <h3>ROCm environment (verified-working)</h3>
+          <pre class="code"><span class="c"># env exported inside the vLLM ROCm Docker container</span>
+<span class="k">export</span> VLLM_ROCM_USE_AITER=1
+<span class="k">export</span> TORCH_BLAS_PREFER_HIPBLASLT=1
+<span class="k">export</span> HF_HUB_DISABLE_XET=1
+<span class="k">export</span> PYTORCH_ROCM_ARCH=<span class="c">'gfx90a;gfx942;gfx950'</span>
+<span class="k">export</span> AITER_ROCM_ARCH=<span class="c">'gfx942;gfx950'</span>
+<span class="k">export</span> HIP_FORCE_DEV_KERNARG=1</pre>
+          <p><strong>Portability:</strong> the recipe runs on NVIDIA A100 / H100 with the AMD env vars dropped (no-ops there). FA2 via <code>pip install flash-attn --no-build-isolation</code>. Same VRAM minimums: 24 GB+ for training, 12 GB+ for inference.</p>
+        </section>
+        <section id="limitations">
+          <h3>Limitations</h3>
+          <h2>What it's good at, and where it isn't.</h2>
+          <h3>In-distribution · verified strong</h3>
+          <div class="card-row">
+            <div class="card">
+              <span class="pill">Strong</span>
+              <h4>CWE classification</h4>
+              <p>Mapping a described weakness or code pattern to a CWE id with a short rationale. Calibrated on CTI-Bench RCM.</p>
+            </div>
+            <div class="card">
+              <span class="pill">Strong</span>
+              <h4>CVE-to-CWE on trained CVEs</h4>
+              <p>Returns the underlying CWE for CVEs whose descriptions are in-distribution. Confidence drops for CVEs disclosed after the corpus cutoff.</p>
+            </div>
+            <div class="card">
+              <span class="pill">Strong</span>
+              <h4>Code-pattern reasoning</h4>
+              <p>Identifying the weakness class behind a small snippet (string-format SQL, unchecked path joins, inline HTML rendering, etc.).</p>
+            </div>
+          </div>
+          <h3>Out-of-distribution · known failure modes</h3>
+          <div class="card-row">
+            <div class="card">
+              <span class="pill">Weak</span>
+              <h4>MITRE ATT&amp;CK technique IDs</h4>
+              <p>Wrong T-numbers (returned T1543/003 — Windows Service — for scheduled-task persistence, vs the correct T1053.005). Wrong technique names (called LSASS dumping "Extract Web Credentials"; correct is T1003.001 OS Credential Dumping: LSASS Memory).</p>
+            </div>
+            <div class="card">
+              <span class="pill">Weak</span>
+              <h4>CVE implementation specifics</h4>
+              <p>Fabricates implementation details. Cited a non-existent <code>pgp</code> binary path when asked about CVE-2024-3400 (PAN-OS GlobalProtect — actual root cause is session-ID handling). Top-level CWE call usually correct; deep mechanics often invented.</p>
+            </div>
+            <div class="card">
+              <span class="pill">Weak</span>
+              <h4>Tool categorization</h4>
+              <p>Misclassifies offensive tooling. Listed Mimikatz as a "ransomware loader" — Mimikatz is a credential-dumping utility, not a ransomware loader.</p>
+            </div>
+          </div>
+          <h3>Validated empirically · we tested 14, kept 7</h3>
+          <p>We ran 14 candidate demo prompts through the deployed model and graded each output for factual accuracy. <strong>7 passed</strong>, <strong>7 were cut</strong>: Log4Shell vs Spring4Shell exploit-primitive comparison; CVE-2024-3400 explanation; LSASS ATT&amp;CK mapping; schtasks ATT&amp;CK mapping; Dockerfile <code>curl|bash</code> review; ransomware detection signals; Python dynamic-code-execution CWE. Most cuts were OOD hallucinations: invented technique numbers, fabricated CVE specifics, mislabeled mitigations.</p>
+          <h3>Out-of-scope use</h3>
+          <ul class="bullets">
+            <li>Generating exploit code, weaponized PoC, or attacker tradecraft.</li>
+            <li>Critical security decisions without qualified human review.</li>
+            <li>Legal, medical, or other regulated-advice contexts.</li>
+            <li>Tasks outside cybersecurity (general chat, code generation, summarization).</li>
+            <li>Violation of laws (CFAA, GDPR, etc.).</li>
+          </ul>
+          <h3>Recommendations</h3>
+          <ul class="bullets">
+            <li><strong>Pair with retrieval.</strong> Ground CVE / advisory queries against an authoritative source before quoting specifics.</li>
+            <li><strong>Sample at low temperature.</strong> CWE selection benefits from determinism (temp 0.2–0.3).</li>
+            <li><strong>Treat output as a triage hint,</strong> not a verdict — keep an analyst in the loop.</li>
+          </ul>
+        </section>
+        <section id="companion">
+          <h3>Companion</h3>
+          <h2>Gemma4Defense-2B</h2>
+          <p>The same recipe applied to Gemma-4-E2B-it produces a 2B companion that scores RCM <strong>0.6754 ± 0.0035</strong> and MCQ <strong>0.6042 ± 0.0090</strong> — slightly higher MCQ than CyberSecQwen-4B at half the parameters again. Use the 2B when memory is tight; use the 4B when you want stronger general instruction-following and longer-form rationales.</p>
+        </section>
+        <section id="citation">
+          <h3>Citation</h3>
+          <h2>Cite &amp; license.</h2>
+          <pre class="code"><span class="c">% bibtex</span>
+@misc{cybersecqwen2026,
+  title  = {CyberSecQwen-4B: A Compact CTI Specialist Fine-Tuned from
+            Qwen3-4B-Instruct-2507 on AMD MI300X},
+  author = {Mulia, Samuel},
+  year   = {2026},
+  publisher = {Hugging Face},
+  url    = {https://huggingface.co/athena129/CyberSecQwen-4B}
+}</pre>
+          <p><strong>License:</strong> Apache 2.0, end-to-end — weights, training code, and the synthetic CVE/CTI Q&amp;A corpus. The decontaminated 2021 CVE→CWE mappings derive from public MITRE/NVD records. Evaluation protocol: <a href="https://arxiv.org/abs/2504.21039" target="_blank" style="color:var(--accent)">Foundation-Sec-8B (arXiv:2504.21039)</a>. Benchmark: <a href="https://github.com/xashru/cti-bench" target="_blank" style="color:var(--accent)">CTI-Bench</a>.</p>
+        </section>
+      </div>
+    </div>
+  </template>
+<script>
+/* ─── BACKEND HOOK ────────────────────────────────────────────
+   Calls the deployed Gradio Space `athena129/cybersecqwen-demo`
+   via @gradio/client. The backend exposes `/chat` which streams
+   {message, chat_history} tuples; we surface partials via onChunk.
+*/
+const BACKEND_SPACE = "athena129/cybersecqwen-demo";
+let _client = null;
+async function getClient(){
+  if (_client) return _client;
+  const { Client } = await import("https://esm.sh/@gradio/client@1.10.0");
+  _client = await Client.connect(BACKEND_SPACE);
+  return _client;
+}
+async function askModel(prompt, onChunk){
+  const client = await getClient();
+  const job = client.submit("/chat", [prompt, []]);
+  let lastContent = "";
+  for await (const msg of job){
+    if (msg.type === "data" && msg.data && Array.isArray(msg.data)){
+      const history = msg.data[1];
+      if (Array.isArray(history) && history.length > 0){
+        const last = history[history.length - 1];
+        if (last && last.role === "assistant" && typeof last.content === "string"){
+          if (last.content !== lastContent){
+            lastContent = last.content;
+            if (onChunk) onChunk(lastContent);
+          }
+        }
+      }
+    }
+  }
+  return { answer: lastContent || "The model returned no output. Try again." };
+}
+/* ─── ROUTING ─────────────────────────────────────────────── */
+const view = document.getElementById('view');
+const topTitle = document.getElementById('topTitle');
+const navLinks = document.querySelectorAll('#nav a');
+let convo = []; // [{role:'user'|'bot', text, pending?}]
+function route(){
+  const hash = location.hash || '#/';
+  navLinks.forEach(a => a.classList.toggle('active', a.dataset.route === (hash.replace(/^#/,'') || '/')));
+  if (hash.startsWith('#/about')){
+    topTitle.textContent = 'About';
+    renderAbout();
+  } else {
+    topTitle.textContent = 'Chat';
+    renderChat();
+  }
+}
+window.addEventListener('hashchange', route);
+/* ─── CHAT ────────────────────────────────────────────────── */
+function renderChat(){
+  view.innerHTML = '';
+  view.classList.toggle('no-scroll', convo.length > 0);
+  if (convo.length === 0) renderEmptyChat(); else renderActiveChat();
+}
+function bindComposer(form, ta, btn, onSend){
+  const update = () => { btn.disabled = ta.value.trim().length === 0; };
+  ta.addEventListener('input', () => {
+    ta.style.height = 'auto';
+    ta.style.height = Math.min(ta.scrollHeight, 240) + 'px';
+    update();
+  });
+  ta.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); if (!btn.disabled) form.requestSubmit(); }
+  });
+  form.addEventListener('submit', e => { e.preventDefault(); const v = ta.value.trim(); if (!v) return; onSend(v); });
+  update();
+}
+function renderEmptyChat(){
+  view.appendChild(document.getElementById('tpl-chat-empty').content.cloneNode(true));
+  const form = document.getElementById('composer-empty');
+  const ta = document.getElementById('ta-empty');
+  const btn = document.getElementById('send-empty');
+  bindComposer(form, ta, btn, sendMessage);
+  // focus
+  setTimeout(() => ta.focus(), 30);
+  document.querySelectorAll('#chips .chip').forEach(c => {
+    c.addEventListener('click', () => {
+      ta.value = c.dataset.prompt;
+      ta.dispatchEvent(new Event('input'));
+      ta.focus();
+    });
+  });
+}
+function renderActiveChat(){
+  view.innerHTML = '';
+  view.classList.add('no-scroll');
+  view.appendChild(document.getElementById('tpl-chat-active').content.cloneNode(true));
+  const inner = document.getElementById('thread-inner');
+  inner.innerHTML = '';
+  convo.forEach(m => inner.appendChild(renderMsg(m)));
+  scrollThread();
+  const form = document.getElementById('composer-dock');
+  const ta = document.getElementById('ta-dock');
+  const btn = document.getElementById('send-dock');
+  bindComposer(form, ta, btn, sendMessage);
+  setTimeout(() => ta.focus(), 30);
+  document.getElementById('newChat').addEventListener('click', () => {
+    convo = [];
+    renderChat();
+  });
+}
+function renderMsg(m){
+  const wrap = document.createElement('div');
+  wrap.className = 'msg ' + (m.role === 'user' ? 'user' : 'bot');
+  if (m.role === 'user'){
+    wrap.innerHTML = `<span class="who">You</span><div class="bubble"></div>`;
+    wrap.querySelector('.bubble').textContent = m.text;
+  } else {
+    wrap.innerHTML = `<span class="who">CyberSecQwen</span><div class="body"></div>`;
+    const body = wrap.querySelector('.body');
+    if (m.pending){
+      body.innerHTML = '<span class="typing"><i></i><i></i><i></i></span>';
+    } else {
+      body.innerHTML = renderMd(m.text);
+    }
+  }
+  return wrap;
+}
+function renderMd(s){
+  return s
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/`([^`]+)`/g, '<code>$1</code>');
+}
+function scrollThread(){
+  const t = document.getElementById('thread');
+  if (t) t.scrollTop = t.scrollHeight;
+}
+async function sendMessage(text){
+  const wasEmpty = convo.length === 0;
+  convo.push({ role:'user', text });
+  convo.push({ role:'bot', text:'', pending:true });
+  // Always re-render the active chat so the empty-state DOM
+  // (hero, chips, empty composer) is fully removed on first send.
+  renderActiveChat();
+  scrollThread();
+  // Stream tokens into the last bot message as they arrive.
+  const onChunk = (partial) => {
+    convo[convo.length - 1] = { role:'bot', text: partial };
+    const inner = document.getElementById('thread-inner');
+    if (!inner) return;
+    const last = inner.lastElementChild;
+    if (last) last.replaceWith(renderMsg(convo[convo.length - 1]));
+    scrollThread();
+  };
+  try{
+    const { answer } = await askModel(text, onChunk);
+    convo[convo.length - 1] = { role:'bot', text: answer };
+  } catch (e){
+    convo[convo.length - 1] = {
+      role:'bot',
+      text: 'The model is unavailable right now. ZeroGPU may be cold-starting (first call after idle takes ~30 s) — try again in a moment.\n\n`' + (e?.message || String(e)) + '`',
+    };
+  }
+  // Final re-render of the bot message in place.
+  const inner = document.getElementById('thread-inner');
+  if (inner){
+    const last = inner.lastElementChild;
+    if (last) last.replaceWith(renderMsg(convo[convo.length - 1]));
+    scrollThread();
+  }
+  // refocus composer
+  const ta = document.getElementById('ta-dock');
+  if (ta){ ta.value = ''; ta.style.height = 'auto'; ta.dispatchEvent(new Event('input')); ta.focus(); }
+}
+/* ─── ABOUT ────────────────────────────────────────────────── */
+function renderAbout(){
+  view.innerHTML = '';
+  view.appendChild(document.getElementById('tpl-about').content.cloneNode(true));
+  // Sub-nav scroll-spy + smooth-scroll within the view (the scroll container is .view)
+  const subnav = view.querySelector('#subnav');
+  const links = subnav.querySelectorAll('a');
+  const sections = view.querySelectorAll('.about section');
+  links.forEach(a => {
+    a.addEventListener('click', e => {
+      e.preventDefault();
+      const id = a.getAttribute('href').slice(1);
+      const target = view.querySelector('#' + id);
+      if (target) view.scrollTo({ top: target.offsetTop - 60, behavior:'smooth' });
+    });
+  });
+  const setCurrent = () => {
+    const top = view.scrollTop + 80;
+    let current = sections[0]?.id;
+    sections.forEach(s => { if (s.offsetTop <= top) current = s.id; });
+    links.forEach(a => a.classList.toggle('is-current', a.getAttribute('href') === '#' + current));
+  };
+  view.addEventListener('scroll', setCurrent, { passive:true });
+  setCurrent();
+}
+/* ─── BOOT ─────────────────────────────────────────────────── */
+route();
+</script>
+</body>
 </html>