webml-community/lfm2-webgpu-kernels
75
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />6<meta name="color-scheme" content="dark" />7<title>Liquid AI · LFM2.5 230M</title>8<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡️</text></svg>">9<meta name="description" content="LFM2.5-230M (Q4_0 GGUF) running fully in your browser on WebGPU. Every kernel written and optimized by Fable 5 + Opus 4.8." />10<link rel="preconnect" href="https://fonts.googleapis.com" />11<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />12<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />13<!-- KaTeX stylesheet (fonts + layout) for rendering the model's LaTeX math. The KaTeX JS is loaded14 lazily alongside marked; if either CDN is unreachable, math falls back to raw LaTeX text. -->15<link href="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css" rel="stylesheet" />16<style>17 /* ============================================================18 TOKENS (edit these to re-brand)19 ============================================================ */20 :root{21 --bg:#050608;22 --ink:#f4f5f7;23 --muted:#9aa0ab;24 --muted-2:#6b7280;25 --warm:#ff7a30;26 --cool:#7aa0ff;27 --hair:rgba(255,255,255,0.14);28 --hair-soft:rgba(255,255,255,0.08);29 --font-display:"Hanken Grotesk", system-ui, sans-serif;30 --font-mono:"JetBrains Mono", ui-monospace, monospace;31 32 /* Aliases so the chat + kernel-viewer CSS reads against one palette */33 --t1:var(--ink);34 --t2:var(--muted);35 --t3:var(--muted-2);36 --t4:rgba(255,255,255,0.20);37 --line:rgba(255,255,255,0.10);38 --line-soft:rgba(255,255,255,0.07);39 --panel:rgba(255,255,255,0.03);40 --panel-hover:rgba(255,255,255,0.06);41 --ok:#ff8a4d; /* warm accent (assistant / ready / caret) — matches the brand */42 --warn:#ffcd6b;43 --danger:#ff7a6b;44 --user-bubble:rgba(255,255,255,0.06);45 --display:var(--font-display);46 --body:var(--font-display);47 --mono:var(--font-mono);48 --maxw:820px;49 }50 51 *{ box-sizing:border-box; margin:0; padding:0; }52 html,body{ height:100%; }53 body{54 background:55 radial-gradient(120% 80% at 50% 118%, rgba(255,110,40,0.10), rgba(255,110,40,0) 55%),56 radial-gradient(90% 70% at 88% -10%, rgba(80,120,230,0.10), rgba(80,120,230,0) 55%),57 radial-gradient(140% 120% at 50% 50%, #0a0c11 0%, #050608 55%, #030305 100%);58 color:var(--ink);59 font-family:var(--font-display);60 font-size:16px;61 line-height:1.6;62 overflow:hidden;63 -webkit-font-smoothing:antialiased;64 text-rendering:optimizeLegibility;65 }66 67 button, textarea, input{ font:inherit; color:inherit; }68 button{ appearance:none; background:none; border:0; cursor:pointer; }69 a{ color:inherit; text-decoration:none; }70 ::selection{ background:rgba(255,255,255,0.18); }71 72 /* ============================================================73 LAYERS74 ============================================================ */75 /* slow-drifting ambient glow that shows through the transparent canvas */76 #bg-amb{77 position:fixed; inset:-20%; z-index:-1; pointer-events:none;78 background:79 radial-gradient(38% 38% at 30% 72%, rgba(255,120,50,0.11), rgba(255,120,50,0) 70%),80 radial-gradient(34% 34% at 72% 28%, rgba(90,130,255,0.10), rgba(90,130,255,0) 70%);81 filter:blur(10px);82 animation:ambDrift 28s ease-in-out infinite alternate;83 will-change:transform;84 }85 @keyframes ambDrift{86 0%{ transform:translate3d(-2%,-1%,0) scale(1.02); }87 50%{ transform:translate3d(2%,3%,0) scale(1.1); }88 100%{ transform:translate3d(-1%,1%,0) scale(1.04); }89 }90 #scene-wrap{91 position:fixed; inset:0; z-index:0;92 transition:opacity 1.1s ease, filter 1.1s ease;93 }94 #scene-wrap.dim{ opacity:0.18; filter:blur(6px); }95 #scene{ display:block; width:100%; height:100%; }96 97 .vignette{98 position:fixed; inset:0; z-index:2; pointer-events:none;99 background:radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);100 }101 .grain{102 position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:0.05;103 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");104 animation:grain 7s steps(6) infinite;105 will-change:transform;106 }107 @keyframes grain{108 0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)}109 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)}110 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}111 }112 113 /* During chat we hide every background layer so nothing animates behind the conversation114 (keeps the GPU/CPU free for inference). The chat carries its own opaque, matching115 background; body's own static gradient remains as the base. */116 body.chatting #scene-wrap,117 body.chatting #bg-amb,118 body.chatting .grain,119 body.chatting .vignette{ display:none; }120 121 /* UI container does not capture pointer; only its interactive children do,122 so holding empty space reaches the canvas for the BLAST interaction. */123 .ui{ position:fixed; inset:0; z-index:5; pointer-events:none; }124 .ui a, .ui button{ pointer-events:auto; }125 126 /* fade the whole hero in after first render frame */127 .hero{ opacity:0; transition:opacity .9s ease; }128 body.ready .hero{ opacity:1; }129 .hero.fade-out{ opacity:0 !important; transition:opacity .7s ease; pointer-events:none; }130 131 /* ============================================================132 NAV133 ============================================================ */134 .nav{135 position:absolute; top:0; left:0; right:0;136 display:flex; align-items:center; justify-content:space-between;137 padding:30px clamp(20px,4vw,56px);138 }139 .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); cursor:pointer; margin-left:clamp(0px,2vw,36px); }140 .brand-glyph{ display:inline-flex; width:22px; height:22px; color:var(--ink); }141 .brand-glyph svg{ width:100%; height:100%; display:block; }142 .brand-name{ font-weight:700; letter-spacing:0.14em; font-size:1.02rem; }143 .brand-tag{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; color:var(--muted-2); margin-top:2px; }144 145 .nav-right{ display:flex; align-items:center; gap:12px; }146 147 .pill{148 font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.1em;149 text-decoration:none; color:var(--ink); cursor:pointer;150 padding:11px 18px; border-radius:999px;151 background:rgba(255,255,255,0.04); border:1px solid var(--hair);152 transition:background .25s ease, border-color .25s ease, color .25s ease;153 display:inline-flex; align-items:center; gap:8px;154 }155 .pill:hover{ background:var(--ink); color:#08090c; border-color:var(--ink); }156 157 /* ============================================================158 HERO COPY159 ============================================================ */160 .hero-copy{161 position:absolute; left:clamp(20px,4vw,56px); top:50%; transform:translateY(-50%);162 max-width:min(80ch,72vw);163 }164 .headline{165 font-weight:600; line-height:0.98; letter-spacing:-0.03em;166 font-size:clamp(1.8rem,4vw,3.5rem);167 }168 .hl-line{ display:block; }169 .hl-line.accent{ color:#fff; }170 .word{171 display:inline-block;172 opacity:0; filter:blur(16px); transform:translateY(0.32em);173 animation:wordIn 1.15s cubic-bezier(0.2,0.7,0.15,1) var(--d,0s) forwards;174 }175 .accent .word{ text-shadow:0 0 28px rgba(255,122,48,0.32); }176 @keyframes wordIn{ to{ opacity:1; filter:blur(0); transform:none; } }177 178 .subtext{179 margin-top:26px; max-width:48ch;180 color:var(--muted); font-size:clamp(0.95rem,1.1vw,1.06rem);181 line-height:1.55; font-weight:400;182 opacity:0; animation:fadeUp 1s ease 0.6s forwards;183 }184 .subtext b{ color:var(--ink); font-weight:600; }185 @keyframes fadeUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }186 187 .cta{188 display:inline-flex; align-items:center; gap:14px;189 margin-top:30px; text-decoration:none;190 font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.16em;191 color:var(--ink); padding:0 0 8px 0; cursor:pointer;192 background:transparent; appearance:none; -webkit-appearance:none;193 border:0; border-bottom:1px solid var(--hair);194 opacity:0; animation:fadeUp 1s ease 0.82s forwards;195 transition:border-color .3s ease, gap .3s ease, opacity .3s ease;196 }197 .cta:hover:not(:disabled){ border-color:var(--ink); gap:20px; }198 .cta:disabled{ opacity:0.4; cursor:not-allowed; border-color:transparent; }199 .cta-arrow{ transition:transform .3s ease; }200 .cta:hover:not(:disabled) .cta-arrow{ transform:translateX(4px); }201 202 /* ============================================================203 BOTTOM FURNITURE204 ============================================================ */205 .hint{206 position:absolute; left:0; right:0; bottom:30px;207 display:flex; flex-direction:column; align-items:center;208 text-align:center; font-family:var(--font-mono);209 font-size:0.72rem; letter-spacing:0.14em; color:var(--muted);210 line-height:1.9; opacity:0; animation:fadeUp 1s ease 1.1s forwards;211 }212 .hint-row{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }213 .hint-ic{ width:14px; height:14px; }214 .hint-ic.spark{ color:var(--warm); }215 216 /* ============================================================217 FLASH (explosion bloom overlay)218 ============================================================ */219 #flash{220 position:fixed; inset:0; z-index:8; pointer-events:none; opacity:0;221 background:radial-gradient(54% 48% at 50% 48%, rgba(255,200,150,0.82), rgba(255,150,82,0.4) 46%, rgba(255,120,50,0) 80%);222 }223 224 /* ============================================================225 PAGE 2 — BOOT / INITIALIZE (real model load lives here)226 ============================================================ */227 .page2{228 position:fixed; inset:0; z-index:10; pointer-events:none;229 display:grid; place-items:center;230 opacity:0; transform:translateY(8px);231 transition:opacity .6s ease, transform .6s ease;232 }233 .page2.show{ opacity:1; transform:none; pointer-events:auto; }234 .boot{ width:min(460px,86vw); text-align:center; }235 .boot-logo{ display:inline-flex; width:46px; height:46px; color:var(--ink); margin-bottom:24px;236 filter:drop-shadow(0 0 18px rgba(255,122,48,0.55)); animation:logoPulse 3.4s ease-in-out infinite; }237 .boot-logo svg{ width:100%; height:100%; }238 @keyframes logoPulse{ 0%,100%{filter:drop-shadow(0 0 14px rgba(255,122,48,0.4))} 50%{filter:drop-shadow(0 0 26px rgba(255,122,48,0.7))} }239 .boot-title{ font-family:var(--font-mono); letter-spacing:0.2em; font-size:0.78rem; color:var(--ink); margin-bottom:22px; }240 .boot-bar-wrap{ height:2px; background:var(--hair-soft); border-radius:2px; overflow:hidden; }241 .boot-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--warm), #ffd9a8); box-shadow:0 0 12px rgba(255,122,48,0.7); }242 .boot-meta{ display:flex; justify-content:space-between; gap:14px; margin-top:12px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--muted); }243 .boot-meta #boot-step{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:left; }244 .boot-meta #boot-pct{ flex-shrink:0; font-variant-numeric:tabular-nums; }245 .gpu-chip{ display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;246 padding:7px 14px; border-radius:999px; border:1px solid var(--hair); color:var(--muted); }247 .gpu-chip.ok{ color:#bfe6ff; border-color:rgba(122,160,255,0.5); }248 .gpu-chip.bad{ color:#ffb38a; border-color:rgba(255,122,48,0.45); }249 250 /* boot error: full (non-truncated) message + retry, shown if the load fails */251 .boot-error{ display:none; margin-top:24px; text-align:left; }252 .boot-error.show{ display:block; }253 .boot-error-msg{254 margin:0 0 14px; white-space:pre-wrap; word-break:break-word;255 font-family:var(--font-mono); font-size:0.72rem; line-height:1.55; color:var(--muted);256 background:rgba(0,0,0,0.3); border:1px solid rgba(255,122,107,0.3); border-radius:10px; padding:12px 14px;257 }258 .boot-retry{ animation:none; opacity:1; }259 260 /* ============================================================261 CHAT (functional LFM2.5 chat — revealed after the model loads)262 ============================================================ */263 #chat{264 position:fixed; inset:0; z-index:15; display:flex; flex-direction:column;265 opacity:0; pointer-events:none; transform:translateY(10px);266 transition:opacity .6s ease, transform .6s ease;267 /* matches the landing background exactly, but static — nothing animates behind the chat */268 background:269 radial-gradient(120% 80% at 50% 118%, rgba(255,110,40,0.10), rgba(255,110,40,0) 55%),270 radial-gradient(90% 70% at 88% -10%, rgba(80,120,230,0.10), rgba(80,120,230,0) 55%),271 radial-gradient(140% 120% at 50% 50%, #0a0c11 0%, #050608 55%, #030305 100%);272 }273 #chat.show{ opacity:1; pointer-events:auto; transform:none; }274 275 .chat-head{276 position:relative; flex:0 0 auto;277 border-bottom:1px solid var(--line-soft);278 background:rgba(5,6,8,0.72);279 backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);280 }281 .chat-head-inner{282 margin:0 auto; max-width:var(--maxw); padding:16px 28px;283 display:flex; align-items:center; gap:16px;284 }285 .to-top{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:var(--ink); transition:opacity .2s ease; }286 .to-top:hover{ opacity:0.7; }287 .to-top .brand-glyph{ width:18px; height:18px; }288 .to-top .brand-name{ font-size:0.78rem; }289 290 .status{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; color:var(--t2); font-size:13px; }291 .status-dot{ width:7px; height:7px; border-radius:50%; background:var(--t4); flex-shrink:0; transition:background .3s ease, box-shadow .3s ease; }292 .status.loading .status-dot{ background:var(--warn); box-shadow:0 0 10px rgba(255,205,107,0.5); }293 .status.ready .status-dot{ background:var(--ok); box-shadow:0 0 10px rgba(255,138,77,0.55); }294 .status.busy .status-dot{ background:var(--ok); box-shadow:0 0 10px rgba(255,138,77,0.55); animation:statusPulse 1.1s ease-in-out infinite; }295 .status.error .status-dot{ background:var(--danger); box-shadow:0 0 10px rgba(255,122,107,0.5); }296 .status-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }297 .status-text strong{ color:var(--t1); font-weight:600; }298 299 .chat-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }300 .head-btn{301 display:inline-flex; align-items:center; gap:7px; padding:8px 15px;302 font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;303 color:var(--t2); border:1px solid var(--line); border-radius:100px;304 transition:border-color .2s ease, color .2s ease, opacity .2s ease;305 }306 .head-btn:hover:not(:disabled){ border-color:rgba(255,255,255,0.35); color:var(--t1); }307 .head-btn:disabled{ opacity:0.35; cursor:not-allowed; }308 .head-btn[hidden]{ display:none; }309 310 /* No smooth scroll: at 1000+ tok/s a smooth animation chases a moving target and visibly lags, so311 the view must jump to the bottom instantly each frame to stay pinned to the latest text. */312 .thread-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }313 .thread{314 margin:0 auto; max-width:var(--maxw); min-height:100%;315 padding:40px 28px 24px; display:flex; flex-direction:column; gap:32px;316 }317 318 .welcome{ margin:auto 0; text-align:center; padding:4vh 0; animation:rise 0.7s cubic-bezier(0.2,0.7,0.2,1) both; }319 .welcome h2{ font-family:var(--display); font-size:clamp(30px,6vw,46px); font-weight:600; line-height:1.05; color:#fff; margin-bottom:14px; letter-spacing:-0.02em; }320 .welcome h2 .thin{ color:var(--t3); }321 .welcome p{ color:var(--t2); max-width:46ch; margin:0 auto 28px; font-weight:400; }322 .seeds{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }323 .seed{324 padding:9px 16px; font-size:13.5px; color:var(--t2);325 background:var(--panel); border:1px solid var(--line); border-radius:100px;326 transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease, opacity .2s ease;327 }328 .seed:hover:not(:disabled){ border-color:rgba(255,255,255,0.3); color:var(--t1); background:var(--panel-hover); transform:translateY(-1px); }329 .seed:disabled{ opacity:0.4; cursor:not-allowed; }330 331 .msg{ display:flex; flex-direction:column; animation:rise 0.4s cubic-bezier(0.2,0.7,0.2,1) both; }332 .role{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; }333 .role::before{ content:""; width:5px; height:5px; border-radius:50%; }334 .msg.user{ align-items:flex-end; }335 .msg.user .role{ color:var(--t3); }336 .msg.user .role::before{ background:var(--t3); }337 .msg.assistant .role{ color:var(--ok); }338 .msg.assistant .role::before{ background:var(--ok); }339 340 .bubble{ overflow-wrap:anywhere; }341 .bubble.user{342 background:var(--user-bubble); border:1px solid var(--line);343 border-radius:16px 16px 4px 16px; padding:12px 17px; line-height:1.55;344 max-width:min(82%,600px); white-space:pre-wrap; color:var(--t1);345 }346 .bubble.assistant{ font-size:16px; line-height:1.72; color:var(--t1); max-width:100%; }347 .bubble.assistant > :first-child{ margin-top:0; }348 .bubble.assistant > :last-child{ margin-bottom:0; }349 .bubble.assistant p{ margin:0 0 0.9em; }350 .bubble.assistant strong{ color:#fff; font-weight:700; }351 .bubble.assistant em{ font-style:italic; }352 .bubble.assistant a{ color:#8ab4ff; text-decoration:underline; text-underline-offset:2px; }353 .bubble.assistant a:hover{ color:#aecbff; }354 .bubble.assistant h1, .bubble.assistant h2, .bubble.assistant h3,355 .bubble.assistant h4, .bubble.assistant h5, .bubble.assistant h6{356 color:#fff; font-weight:600; line-height:1.25; margin:1.3em 0 0.6em;357 }358 .bubble.assistant h1{ font-size:1.5em; }359 .bubble.assistant h2{ font-size:1.3em; }360 .bubble.assistant h3{ font-size:1.13em; }361 .bubble.assistant h4, .bubble.assistant h5, .bubble.assistant h6{ font-size:1em; }362 .bubble.assistant ul, .bubble.assistant ol{ margin:0 0 0.9em; padding-left:1.5em; }363 .bubble.assistant li{ margin:0.25em 0; }364 .bubble.assistant li::marker{ color:var(--t3); }365 .bubble.assistant blockquote{ margin:0 0 0.9em; padding:2px 0 2px 16px; border-left:2px solid var(--line); color:var(--t2); }366 .bubble.assistant hr{ border:0; border-top:1px solid var(--line); margin:1.3em 0; }367 .bubble.assistant code{ font-family:var(--mono); font-size:0.85em; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }368 .bubble.assistant pre{ margin:0 0 0.9em; padding:14px 16px; background:#0a0a0c; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }369 .bubble.assistant pre code{ background:none; border:0; padding:0; font-size:0.82em; line-height:1.6; }370 .bubble.assistant table{ border-collapse:collapse; margin:0 0 0.9em; font-size:0.92em; display:block; overflow-x:auto; }371 .bubble.assistant th, .bubble.assistant td{ border:1px solid var(--line); padding:6px 11px; text-align:left; }372 .bubble.assistant th{ background:var(--panel); color:var(--t1); font-weight:600; }373 .bubble.assistant pre::-webkit-scrollbar, .bubble.assistant table::-webkit-scrollbar{ height:8px; }374 .bubble.assistant pre::-webkit-scrollbar-thumb, .bubble.assistant table::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }375 /* KaTeX math (rendered by the marked extension). Let wide display equations scroll instead of clipping. */376 .bubble.assistant .katex{ font-size:1.05em; }377 .bubble.assistant .katex-display{ margin:0.6em 0; overflow-x:auto; overflow-y:hidden; padding:2px 0; }378 379 .meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; color:var(--t3); margin-top:12px; }380 381 .thinking{ display:inline-flex; gap:5px; padding:4px 0; }382 .thinking span{ width:7px; height:7px; border-radius:50%; background:var(--ok); opacity:0.5; animation:bob 1.3s ease-in-out infinite; }383 .thinking span:nth-child(2){ animation-delay:0.18s; }384 .thinking span:nth-child(3){ animation-delay:0.36s; }385 386 .caret{ display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-0.16em; background:var(--ok); animation:blink 1s steps(2) infinite; }387 388 .composer-wrap{ flex:0 0 auto; background:linear-gradient(rgba(5,6,8,0), var(--bg) 30%); padding-top:8px; }389 .composer{ margin:0 auto; max-width:var(--maxw); padding:0 28px 22px; }390 .field{391 display:grid; grid-template-columns:1fr 44px; align-items:flex-end; gap:8px;392 background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:8px 8px 8px 18px;393 transition:border-color .2s ease, background .2s ease;394 }395 .field:focus-within{ border-color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.05); }396 textarea{ background:transparent; border:0; outline:none; resize:none; width:100%; min-height:42px; max-height:180px; padding:8px 0; color:var(--t1); }397 textarea::placeholder{ color:var(--t3); }398 399 .icon-button{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; transition:background .2s ease, opacity .2s ease, transform .1s ease; }400 .icon-button svg{ width:19px; height:19px; }401 .icon-button:active:not(:disabled){ transform:scale(0.94); }402 .icon-button:disabled{ opacity:0.3; cursor:not-allowed; }403 .send-button{ background:#fff; color:#000; }404 .send-button:hover:not(:disabled){ opacity:0.86; }405 .stop-button{ background:rgba(255,122,107,0.14); color:var(--danger); border:1px solid rgba(255,122,107,0.3); display:none; }406 .stop-button:hover:not(:disabled){ background:rgba(255,122,107,0.22); }407 408 .composer-meta{409 display:flex; align-items:center; justify-content:center; gap:12px;410 margin:10px 4px 0; min-height:22px;411 font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--t3);412 }413 414 .thread-scroll::-webkit-scrollbar{ width:10px; }415 .thread-scroll::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid var(--bg); border-radius:10px; }416 textarea:focus, textarea:focus-visible{ outline:none; }417 418 /* ============================================================419 KERNELS OVERLAY (real rendered WGSL viewer)420 ============================================================ */421 .kx{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:28px; }422 .kx[hidden]{ display:none; }423 .kx-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:kxFade 0.25s ease; }424 .kx-panel{425 position:relative; display:flex; flex-direction:column;426 width:min(1080px,100%); height:min(86vh,920px);427 background:#0a0a0c; border:1px solid var(--line); border-radius:18px; overflow:hidden;428 box-shadow:0 40px 120px -30px rgba(0,0,0,0.9); animation:kxRise 0.3s cubic-bezier(0.2,0.7,0.2,1);429 }430 .kx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line-soft); }431 .kx-title h3{ font-family:var(--display); font-weight:600; font-size:24px; color:#fff; line-height:1; letter-spacing:-0.01em; }432 .kx-sub{ display:block; margin-top:7px; font-size:12.5px; color:var(--t3); }433 .kx-close{ display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:9px; color:var(--t2); border:1px solid var(--line); transition:color .2s ease, border-color .2s ease, background .2s ease; }434 .kx-close:hover{ color:var(--t1); border-color:rgba(255,255,255,0.35); background:var(--panel); }435 .kx-close svg{ width:15px; height:15px; }436 .kx-body{ flex:1; display:grid; grid-template-columns:236px 1fr; min-height:0; }437 .kx-side{ position:relative; min-width:0; min-height:0; border-right:1px solid var(--line-soft); }438 .kx-list{ height:100%; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; }439 .kx-side::after{ content:""; position:absolute; left:0; right:1px; bottom:0; height:54px; background:linear-gradient(transparent, #0a0a0c 88%); pointer-events:none; opacity:1; transition:opacity .25s ease; }440 .kx-side.at-end::after{ opacity:0; }441 .kx-item{ flex-shrink:0; text-align:left; padding:9px 12px; border-radius:8px; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s ease, color .15s ease; }442 .kx-item:hover{ background:var(--panel); color:var(--t1); }443 .kx-item.active{ background:var(--panel-hover); color:#fff; }444 .kx-view{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }445 .kx-view-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line-soft); }446 .kx-name{ font-family:var(--mono); font-size:13px; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }447 .kx-view-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }448 .kx-lines{ font-family:var(--mono); font-size:11px; color:var(--t4); }449 .kx-copy{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--t2); border:1px solid var(--line); border-radius:100px; padding:5px 13px; transition:color .2s ease, border-color .2s ease; }450 .kx-copy:hover{ color:var(--t1); border-color:rgba(255,255,255,0.35); }451 .kx-code{ flex:1; min-height:0; min-width:0; overflow:auto; margin:0; padding:18px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--t2); tab-size:2; }452 .kx-code code{ white-space:pre; }453 /* WGSL syntax highlight */454 .k-cm{ color:#5d6b6f; font-style:italic; }455 .k-kw{ color:#c792ea; }456 .k-ty{ color:#6fb3ff; }457 .k-at{ color:#ffb074; }458 .k-nu{ color:#7ee787; }459 460 .kx-source{ flex:1; min-height:0; display:flex; flex-direction:column; }461 .kx-source[hidden]{ display:none; }462 .kx-intro{ flex:1; min-height:0; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:34px 30px; }463 .kx-intro[hidden]{ display:none; }464 .kx-intro-inner{ max-width:540px; text-align:center; animation:kxIntroRise 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }465 466 .kx-spark{ position:relative; width:60px; height:60px; margin:0 auto 24px; }467 .kx-spark-ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, #ff7a6b, #ffcd6b, #64ffa0, #6fb3ff, #c792ea, #ff7a6b); animation:kxSpin 6s linear infinite; }468 .kx-spark-ring::after{ content:""; position:absolute; inset:-7px; border-radius:50%; background:inherit; filter:blur(13px); opacity:0.5; }469 .kx-spark-core{ position:absolute; inset:2px; border-radius:50%; background:#0a0a0c; }470 .kx-spark-icon{ position:absolute; inset:0; margin:auto; width:32px; height:32px; color:#fff; }471 472 .kx-intro-title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,32px); line-height:1.12; color:#fff; margin-bottom:16px; letter-spacing:-0.01em; }473 .kx-intro-lead{ font-size:14.5px; font-weight:400; line-height:1.7; color:var(--t2); margin:0 auto 26px; max-width:48ch; }474 .kx-points{ list-style:none; display:flex; flex-direction:column; gap:13px; text-align:left; margin-bottom:28px; }475 .kx-points li{ position:relative; padding-left:22px; font-size:13.5px; line-height:1.62; color:var(--t2); }476 .kx-points li::before{ content:""; position:absolute; left:2px; top:0.6em; width:6px; height:6px; border-radius:50%; }477 .kx-points li:nth-child(1)::before{ background:#ff7a6b; box-shadow:0 0 8px rgba(255,122,107,0.7); }478 .kx-points li:nth-child(2)::before{ background:#6fb3ff; box-shadow:0 0 8px rgba(111,179,255,0.7); }479 .kx-points li:nth-child(3)::before{ background:#64ffa0; box-shadow:0 0 8px rgba(100,255,160,0.7); }480 .kx-points b{ color:var(--t1); font-weight:600; }481 .kx-intro-hint{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--t3); }482 483 .kx-code::-webkit-scrollbar, .kx-list::-webkit-scrollbar{ width:10px; height:10px; }484 .kx-code::-webkit-scrollbar-thumb, .kx-list::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid #0a0a0c; border-radius:10px; }485 body.kx-locked{ overflow:hidden; }486 @keyframes kxFade{ from{ opacity:0; } to{ opacity:1; } }487 @keyframes kxRise{ from{ opacity:0; transform:translateY(12px) scale(0.99); } to{ opacity:1; transform:none; } }488 @keyframes kxSpin{ to{ transform:rotate(360deg); } }489 @keyframes kxIntroRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }490 491 /* ============================================================492 SHARED KEYFRAMES493 ============================================================ */494 @keyframes statusPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }495 @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }496 @keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }497 @keyframes bob{ 0%,60%,100%{ opacity:0.5; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-5px); } }498 499 /* ============================================================500 RESPONSIVE501 ============================================================ */502 @media (max-width:760px){503 .hero-copy{ max-width:88vw; top:clamp(120px,20vh,180px); transform:none; }504 .subtext{ max-width:34ch; }505 .brand-tag{ display:none; }506 .pill#modelcard-btn{ display:none; }507 .hint{ bottom:22px; }508 .chat-head-inner{ padding:13px 18px; gap:12px; }509 .to-top .brand-name{ display:none; }510 .thread{ padding:28px 18px 20px; }511 .composer{ padding:0 18px 18px; }512 .bubble.user{ max-width:88%; }513 .head-btn{ padding:8px 12px; }514 }515 @media (max-width:420px){ .nav{ padding:22px; } }516 @media (max-width:760px){517 .kx{ padding:0; }518 .kx-panel{ width:100%; height:100%; border-radius:0; border:0; }519 .kx-body{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }520 .kx-side{ border-right:0; border-bottom:1px solid var(--line-soft); }521 .kx-side::after{ display:none; }522 .kx-list{ flex-direction:row; height:auto; overflow-x:auto; overflow-y:hidden; }523 .kx-item{ flex-shrink:0; }524 }525 526 :focus-visible{ outline:2px solid var(--cool); outline-offset:3px; border-radius:2px; }527 528 @media (prefers-reduced-motion: reduce){529 *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }530 .grain, #bg-amb{ animation:none; }531 .hero, .subtext, .cta, .hint{ opacity:1 !important; }532 .word{ opacity:1 !important; filter:none !important; transform:none !important; }533 .caret{ opacity:1; }534 }535</style>536</head>537<body>538 <div id="bg-amb"></div>539 <div id="scene-wrap"><canvas id="scene"></canvas></div>540 <div class="vignette"></div>541 <div class="grain"></div>542 543 <!-- ======================= LANDING (3D hero) ======================= -->544 <main class="hero ui">545 <header class="nav">546 <a class="brand" aria-label="Liquid LFM2.5 home">547 <span class="brand-glyph">548 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd"><path d="M12.028 8.546l-.008.005 3.03 5.25a3.94 3.94 0 01.643 2.162c0 .754-.212 1.46-.58 2.062l6.173-1.991L11.63 0 9.304 3.872l2.724 4.674zM6.837 24l4.85-4.053h-.013c-2.219 0-4.017-1.784-4.017-3.984 0-.794.235-1.534.64-2.156l2.865-4.976-2.381-4.087L2 16.034 6.83 24h.007zM13.737 19.382h-.001L8.222 24h8.182l4.148-6.769-6.815 2.151z"></path></svg>549 </span>550 <span class="brand-name">LIQUID</span>551 <span class="brand-tag">/ LFM2.5</span>552 </a>553 <nav class="nav-right">554 <button class="pill" id="modelcard-btn" type="button">MODEL CARD</button>555 </nav>556 </header>557 558 <section class="hero-copy">559 <h1 class="headline">560 <span class="hl-line"><span class="word" style="--d:.05s">Agentic</span> <span class="word" style="--d:.13s">Kernel</span> <span class="word" style="--d:.21s">Optimization</span></span>561 <span class="hl-line accent"><span class="word" style="--d:.34s">at</span> <span class="word" style="--d:.40s">the</span> <span class="word" style="--d:.46s">scale</span> <span class="word" style="--d:.52s">of</span> <span class="word" style="--d:.58s">the</span> <span class="word" style="--d:.64s">web</span></span>562 </h1>563 <p class="subtext"><b>LFM2.5 230M</b> from Liquid AI running entirely locally in the browser on WebGPU, with every kernel optimized by Fable 5 and Opus 4.8. Private by design: no data ever leaves your machine.</p>564 <button class="cta" id="cta" type="button">LOAD MODEL <span class="cta-arrow">→</span></button>565 </section>566 567 <div class="hint" aria-hidden="true">568 <div class="hint-row" id="hint-text">HOLD TO LOAD MODEL</div>569 </div>570 571 </main>572 573 <div id="flash"></div>574 575 <!-- ======================= BOOT / INITIALIZE ======================= -->576 <section id="page2" class="page2">577 <div class="boot">578 <div class="boot-logo">579 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd"><path d="M12.028 8.546l-.008.005 3.03 5.25a3.94 3.94 0 01.643 2.162c0 .754-.212 1.46-.58 2.062l6.173-1.991L11.63 0 9.304 3.872l2.724 4.674zM6.837 24l4.85-4.053h-.013c-2.219 0-4.017-1.784-4.017-3.984 0-.794.235-1.534.64-2.156l2.865-4.976-2.381-4.087L2 16.034 6.83 24h.007zM13.737 19.382h-.001L8.222 24h8.182l4.148-6.769-6.815 2.151z"></path></svg>580 </div>581 <div class="boot-title">INITIALIZING LFM2.5</div>582 <div class="boot-bar-wrap"><div id="boot-bar" class="boot-bar"></div></div>583 <div class="boot-meta"><span id="boot-step">Fetching LFM2.5 weights</span><span id="boot-pct">0%</span></div>584 <div id="gpu-chip" class="gpu-chip">Checking WebGPU…</div>585 <div id="boot-error" class="boot-error">586 <p class="boot-error-msg"></p>587 <button id="boot-retry" class="cta boot-retry" type="button">TRY AGAIN <span class="cta-arrow">→</span></button>588 </div>589 </div>590 </section>591 592 <!-- ======================= CHAT ======================= -->593 <section id="chat">594 <header class="chat-head">595 <div class="chat-head-inner">596 <button class="to-top" id="toHero" type="button" title="Back to intro">597 <span class="brand-glyph">598 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd"><path d="M12.028 8.546l-.008.005 3.03 5.25a3.94 3.94 0 01.643 2.162c0 .754-.212 1.46-.58 2.062l6.173-1.991L11.63 0 9.304 3.872l2.724 4.674zM6.837 24l4.85-4.053h-.013c-2.219 0-4.017-1.784-4.017-3.984 0-.794.235-1.534.64-2.156l2.865-4.976-2.381-4.087L2 16.034 6.83 24h.007zM13.737 19.382h-.001L8.222 24h8.182l4.148-6.769-6.815 2.151z"></path></svg>599 </span>600 <span class="brand-name">LFM2.5</span>601 </button>602 <div class="status ready" id="status">603 <span class="status-dot"></span>604 <span class="status-text" id="statusText">Ready · on-device</span>605 </div>606 <div class="chat-head-actions">607 <button class="head-btn" id="kernelsBtnChat" type="button">View Kernels</button>608 <button class="head-btn" id="clearBtn" type="button" disabled>Clear</button>609 </div>610 </div>611 </header>612 613 <div class="thread-scroll" id="threadScroll">614 <div class="thread" id="thread">615 <div class="welcome" id="welcome">616 <h2>What's on your <span class="thin">mind today?</span></h2>617 <p>LFM2.5 runs entirely on your device.</p>618 <div class="seeds"></div>619 </div>620 </div>621 </div>622 623 <footer class="composer-wrap">624 <div class="composer">625 <div class="field">626 <textarea id="input" rows="1" placeholder="Ask anything…" disabled></textarea>627 <button class="icon-button send-button" id="sendBtn" type="button" disabled aria-label="Send message">628 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>629 </button>630 <button class="icon-button stop-button" id="stopBtn" type="button" aria-label="Stop generation">631 <svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="1.5"/></svg>632 </button>633 </div>634 <div class="composer-meta">635 <span id="hint">Runs fully on-device — nothing leaves your machine</span>636 <span id="liveStat"></span>637 </div>638 </div>639 </footer>640 </section>641 642 <!-- ============ KERNELS OVERLAY ============ -->643 <div class="kx" id="kernelsOverlay" hidden>644 <div class="kx-backdrop" data-close></div>645 <div class="kx-panel" role="dialog" aria-modal="true" aria-label="Rendered kernels">646 <div class="kx-head">647 <div class="kx-title">648 <h3>Kernels</h3>649 <span class="kx-sub" id="kxSub"></span>650 </div>651 <button class="kx-close" id="kxClose" type="button" aria-label="Close" data-close>652 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>653 </button>654 </div>655 <div class="kx-body">656 <div class="kx-side"><div class="kx-list" id="kxList"></div></div>657 <div class="kx-view">658 <div class="kx-intro" id="kxIntro">659 <div class="kx-intro-inner">660 <div class="kx-spark" aria-hidden="true">661 <span class="kx-spark-ring"></span>662 <span class="kx-spark-core"></span>663 <svg class="kx-spark-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M11.7858 1.66699C11.9437 1.66699 12.0957 1.72951 12.2074 1.84115C12.3189 1.95276 12.3815 2.10483 12.3815 2.2627V3.45247H15.3568C15.6725 3.45247 15.9767 3.57757 16.1999 3.80078C16.4231 4.02403 16.5482 4.32813 16.5482 4.64388V7.61914H17.738C17.8957 7.61914 18.0479 7.68181 18.1595 7.79329C18.2712 7.90491 18.3337 8.05698 18.3337 8.21484C18.3336 8.37247 18.2709 8.52323 18.1595 8.63477C18.0478 8.7464 17.8958 8.81055 17.738 8.81055H16.5482V11.1901H17.738C17.8958 11.1901 18.0478 11.2543 18.1595 11.3659C18.2709 11.4774 18.3336 11.6282 18.3337 11.7858C18.3337 11.9437 18.2712 12.0957 18.1595 12.2074C18.0479 12.3188 17.8957 12.3815 17.738 12.3815H16.5482V15.3568C16.5482 15.6725 16.4231 15.9767 16.1999 16.1999C15.9767 16.4231 15.6725 16.5482 15.3568 16.5482H12.3815V17.738C12.3815 17.8959 12.3188 18.0479 12.2074 18.1595C12.0957 18.271 11.9437 18.3337 11.7858 18.3337C11.6282 18.3336 11.4774 18.2707 11.3659 18.1595C11.2543 18.0478 11.1901 17.896 11.1901 17.738V16.5482H8.81055V17.738C8.81055 17.896 8.7464 18.0478 8.63477 18.1595C8.52323 18.2707 8.37247 18.3336 8.21484 18.3337C8.05698 18.3337 7.90491 18.271 7.79329 18.1595C7.68181 18.0479 7.61914 17.8958 7.61914 17.738V16.5482H4.64388C4.32813 16.5482 4.02403 16.4231 3.80078 16.1999C3.57756 15.9767 3.45247 15.6725 3.45247 15.3568V12.3815H2.2627C2.10485 12.3815 1.95276 12.3189 1.84115 12.2074C1.72951 12.0957 1.66699 11.9437 1.66699 11.7858C1.66708 11.6283 1.72987 11.4774 1.84115 11.3659C1.95276 11.2543 2.10483 11.1901 2.2627 11.1901H3.45247V8.81055H2.2627C2.10483 8.81055 1.95276 8.7464 1.84115 8.63477C1.72987 8.52324 1.66704 8.37243 1.66699 8.21484C1.66699 8.05698 1.72951 7.90491 1.84115 7.79329C1.95275 7.68175 2.1049 7.61914 2.2627 7.61914H3.45247V4.64388C3.45247 4.32813 3.57751 4.02403 3.80078 3.80078C4.02403 3.57753 4.32813 3.45247 4.64388 3.45247H7.61914V2.2627C7.61914 2.10488 7.68175 1.95275 7.79329 1.84115C7.90491 1.72951 8.05698 1.66699 8.21484 1.66699C8.37243 1.66704 8.52324 1.72987 8.63477 1.84115C8.7464 1.95276 8.81055 2.10481 8.81055 2.2627V3.45247H11.1901V2.2627C11.1901 2.10481 11.2543 1.95276 11.3659 1.84115C11.4774 1.72987 11.6283 1.66708 11.7858 1.66699ZM6.14616 5.31445C5.6863 5.31489 5.31445 5.68782 5.31445 6.14779V13.8529C5.31445 14.3131 5.68755 14.6862 6.14779 14.6862H13.8529C14.3131 14.6862 14.6862 14.3131 14.6862 13.8529V6.14779C14.6862 5.68755 14.3131 5.31445 13.8529 5.31445H6.14616Z" fill-opacity="0.4"></path><rect x="5.31348" y="5.31445" width="9.37256" height="9.37256" rx="0.833333" fill-opacity="0.15"></rect><path d="M8.19238 7.91225V12.254C8.19238 12.585 8.55699 12.7862 8.83777 12.606L12.2491 10.4351C12.3088 10.3973 12.358 10.3451 12.3921 10.2831C12.4262 10.2212 12.4441 10.1517 12.4441 10.081C12.4441 10.0103 12.4262 9.9408 12.3921 9.87889C12.358 9.81697 12.3088 9.76468 12.2491 9.72688L8.83777 7.56022C8.77456 7.51934 8.70149 7.49627 8.62626 7.49346C8.55103 7.49064 8.47644 7.50819 8.41035 7.54423C8.34426 7.58028 8.28913 7.6335 8.25077 7.69827C8.2124 7.76304 8.19223 7.83697 8.19238 7.91225Z" fill-opacity="0.8"></path></svg>664 </div>665 <h2 class="kx-intro-title">What are Kernels?</h2>666 <p class="kx-intro-lead">Kernels are the low-level GPU programs that do the model's actual math — the matrix multiplications, attention, and normalization behind every token. And how well they're optimized can dramatically speed up inference.</p>667 <ul class="kx-points">668 <li><b>WebGPU & WGSL.</b> Each kernel is a WebGPU compute shader, written in WGSL — the language that runs general-purpose math on the GPU — entirely locally in your browser.</li>669 <li><b>Agentic Kernel Optimization.</b> Every kernel was generated by AI (in this case, Fable 5 and Opus 4.8), benchmarked on an Apple M4 Max, and refined through an evolutionary, genetic-style search toward the fastest version.</li>670 <li><b>Blazingly Fast.</b> This means we are able to run LFM2.5 230M at ~1400 tokens/sec on an M4 Max, pushing your device to its limits.</li>671 </ul>672 <div class="kx-intro-hint">Select a kernel to read its real source</div>673 </div>674 </div>675 <div class="kx-source" id="kxSource" hidden>676 <div class="kx-view-head">677 <span class="kx-name" id="kxName"></span>678 <div class="kx-view-actions">679 <span class="kx-lines" id="kxLines"></span>680 <button class="kx-copy" id="kxCopy" type="button">Copy</button>681 </div>682 </div>683 <pre class="kx-code"><code id="kxCode"></code></pre>684 </div>685 </div>686 </div>687 </div>688 </div>689 690 <!-- ============================================================691 Three.js import map (used only by the scene module below).692 ============================================================ -->693 <script type="importmap">694 {695 "imports": {696 "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",697 "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"698 }699 }700 </script>701 702 <!-- ============================================================703 APP MODULE — model loading, chat, kernel viewer, flow glue.704 Has NO Three.js dependency, so a CDN failure of `three` (the705 scene module below) can never break inference. Communicates706 with the scene through the window.LFMApp / window.LFMScene707 bridge: the scene calls LFMApp.beginBoot() at its blast708 transition; the app calls LFMScene.triggerBlast()/replay()/stop().709 ============================================================ -->710 <script type="module">711 import { Lfm2Mobile } from "./lfm2_5.js";712 713 // Streamed markdown → HTML. `streamdown` is React-only, so we use `marked` — the parser it is714 // built on — loaded lazily from a CDN. Until it loads (or if the CDN is unreachable) we fall715 // back to the tiny inline renderer below, so chat never depends on it.716 // KaTeX (loaded after marked) renders the LaTeX math the model emits (\( … \) inline, \[ … \]717 // display). It's a pure enhancement: if its CDN fails, markdown still works and math shows as raw718 // LaTeX, exactly as before.719 let marked = null;720 let katexLib = null;721 const katexCache = new Map(); // memoize math renders so re-rendering on each stream frame is cheap722 // Per-render scratch: while a buffered render is in flight, the KaTeX extension stashes each723 // equation's (trusted, verbose) HTML here and emits a tiny comment placeholder instead. That keeps724 // marked's output — and especially the sanitiser's element walk — from having to parse KaTeX's725 // hundreds of spans on every frame; renderAssistant splices the real HTML back in at the end.726 let katexFragments = null;727 import("https://esm.sh/marked@17")728 .then((m) => {729 marked = m.marked;730 marked.use({ gfm: true, breaks: true });731 return import("https://esm.sh/katex@0.16")732 .then((k) => { katexLib = k.default ?? k; marked.use(makeKatexExtension()); })733 .catch(() => { /* no KaTeX — math stays as raw LaTeX, markdown still renders */ });734 })735 .catch(() => { marked = null; });736 737 // A marked extension that turns the model's LaTeX delimiters into rendered KaTeX. Both run at the738 // inline level so display math (\[ … \], emitted as consecutive lines inside one paragraph) is739 // caught wherever it appears — including inside list items and bold headers. Incomplete math mid-740 // stream simply doesn't match (the closing delimiter is required), so it renders once it's whole.741 function makeKatexExtension() {742 const inline = {743 name: "katexInline", level: "inline",744 start(src) { return src.match(/\\\(/)?.index; },745 tokenizer(src) {746 const m = /^\\\(([\s\S]+?)\\\)/.exec(src);747 if (m) return { type: "katexInline", raw: m[0], text: m[1] };748 },749 renderer(token) { return stashKatex(token.text, false); },750 };751 const block = {752 name: "katexBlock", level: "inline",753 start(src) { return src.match(/\\\[/)?.index; },754 tokenizer(src) {755 const m = /^\\\[([\s\S]+?)\\\]/.exec(src);756 if (m) return { type: "katexBlock", raw: m[0], text: m[1] };757 },758 renderer(token) { return stashKatex(token.text, true); },759 };760 return { extensions: [inline, block] };761 }762 763 function renderKatex(text, display) {764 const key = (display ? "d:" : "i:") + text;765 let html = katexCache.get(key);766 if (html === undefined) {767 try { html = katexLib.renderToString(text.trim(), { throwOnError: false, displayMode: display }); }768 catch { html = escapeHtml(text); }769 katexCache.set(key, html);770 }771 return html;772 }773 774 // Render the (cached) KaTeX, but during a buffered render emit a tiny comment placeholder and stash775 // the markup. renderAssistant sanitises the lightweight markdown HTML first, then splices the776 // trusted KaTeX back in — so the sanitiser never has to walk an equation's hundreds of spans.777 function stashKatex(text, display) {778 const html = renderKatex(text, display);779 if (!katexFragments) return html;780 return `<!--katex:${katexFragments.push(html) - 1}-->`;781 }782 783 // Drop a trailing, not-yet-closed math block (the model writes left-to-right, so only the LAST784 // opening delimiter can still be open). Returns the text cut at that delimiter, or unchanged when785 // every \( and \[ already has its matching close.786 function trimIncompleteMath(text) {787 let cut = -1;788 for (const [open, close] of [["\\[", "\\]"], ["\\(", "\\)"]]) {789 const lastOpen = text.lastIndexOf(open);790 if (lastOpen !== -1 && text.indexOf(close, lastOpen + open.length) === -1) {791 if (cut === -1 || lastOpen < cut) cut = lastOpen;792 }793 }794 return cut === -1 ? text : text.slice(0, cut);795 }796 797 const $ = (id) => document.getElementById(id);798 799 // --- refs: landing / boot ---800 const heroEl = document.querySelector(".hero");801 const ctaBtn = $("cta");802 const hintText = $("hint-text");803 const modelCardBtn = $("modelcard-btn");804 const page2El = $("page2");805 const bootBar = $("boot-bar");806 const bootStep = $("boot-step");807 const bootPct = $("boot-pct");808 const gpuChip = $("gpu-chip");809 const bootError = $("boot-error");810 const bootRetryBtn = $("boot-retry");811 812 // --- refs: chat ---813 const chatEl = $("chat");814 const toHeroBtn = $("toHero");815 const statusEl = $("status");816 const statusText = $("statusText");817 const threadScroll = $("threadScroll");818 const thread = $("thread");819 const input = $("input");820 const sendBtn = $("sendBtn");821 const stopBtn = $("stopBtn");822 const clearBtn = $("clearBtn");823 const hint = $("hint");824 const liveStat = $("liveStat");825 const kernelsBtnChat = $("kernelsBtnChat");826 const kernelsOverlay = $("kernelsOverlay");827 828 // The model this demo loads. Any LFM2.5 GGUF repo id works — the loader derives the Q4_0 file829 // name from the id (e.g. "LiquidAI/LFM2.5-230M-GGUF" → LFM2.5-230M-Q4_0.gguf).830 const MODEL_ID = "LiquidAI/LFM2.5-230M-GGUF";831 const MODEL_CARD_URL = `https://huggingface.co/${MODEL_ID}`;832 833 // Welcome example prompts. A small model like this shines at structured data tasks, so the seeds834 // are extraction / classification jobs. Each button shows a SHORT summary; clicking sends the full835 // prompt (with sample input) — see renderSeeds + the seed click handler.836 const SEED_EXAMPLES = [837 {838 label: "Extract contact details to JSON",839 prompt: `Extract the name, company, email, and phone number from this text as JSON:\n\n"Hi, I'm Priya Nair from Acme Robotics — reach me at priya.nair@acme.dev or +1 (415) 555-0173."`,840 },841 {842 label: "Solve a quadratic equation",843 prompt: `Solve for x: 2x² + 5x - 3 = 0`,844 },845 {846 label: "Pull out the dates and amounts",847 prompt: `Extract the relevant information and create a well-formatted table with appropriate headers:\n\n"Invoice #4471, dated April 9 2026, is due May 1. Subtotal is $3,820.00 with 7% tax and a $500 credit applied."`,848 },849 ];850 851 let model = null;852 let kernels = [];853 let kxCopySource = "";854 let messages = [];855 let abortController = null;856 let isGenerating = false;857 let loadStarted = false; // a load attempt is in flight or done858 let bootEntered = false; // the boot screen is showing (guards double-entry)859 let loadBlocked = false; // device can't run the model — block the CTA860 let renderScheduled = false;861 let renderState = null;862 let lastStreamRenderAt = 0; // throttle streamed renders so fast decode isn't taxed by re-parsing863 // Boot-bar state: `bootTarget` is the monotonic real target; `bootShown` is the displayed value864 // eased toward it every frame; a gentle asymptotic `creep` fills indeterminate (non-download) waits.865 let bootTarget = 0, bootShown = 0, bootRaf = 0, creepRaf = 0, creepCeil = 0;866 867 // The scene (if it loads) calls this to enter the boot screen, and reads canLoad() before868 // allowing the hold-to-charge blast.869 window.LFMApp = { beginBoot, canLoad: () => !loadBlocked };870 871 // Reveal the hero on the first painted frame, independent of whether the 3D scene ever loads.872 requestAnimationFrame(() => requestAnimationFrame(() => document.body.classList.add("ready")));873 874 // Populate the welcome's example seeds (short labels; full prompts live in data-prompt).875 renderSeeds(document.querySelector("#welcome .seeds"));876 877 // --- availability gate: warn + block BEFORE the user invests in the load ---878 if (!navigator.gpu) {879 blockLoad("WebGPU isn't available here. Try a recent Chrome or Edge, or enable WebGPU in your browser.");880 } else {881 // Cheap fast-path: reads adapter limits + the tiny GGUF header, no device/weights.882 Lfm2Mobile.checkAvailability(MODEL_ID)883 .then((res) => { if (!model && !loadStarted && res && !res.ok && res.reason) blockLoad(res.reason); })884 .catch(() => { /* best-effort — fall back to the check at load time */ });885 }886 887 function blockLoad(reason) {888 loadBlocked = true;889 ctaBtn.disabled = true;890 ctaBtn.textContent = "UNAVAILABLE ON THIS DEVICE";891 if (hintText) hintText.textContent = reason.length > 96 ? reason.slice(0, 94) + "…" : reason;892 }893 894 // --- wiring ---895 // CTA → blast (if the 3D scene is up) or straight to boot. Holding the canvas also routes through896 // the scene, which honours canLoad() before charging.897 ctaBtn.addEventListener("click", (e) => {898 e.preventDefault();899 if (loadBlocked) return;900 if (window.LFMScene) window.LFMScene.triggerBlast();901 else beginBoot();902 });903 modelCardBtn.addEventListener("click", () => window.open(MODEL_CARD_URL, "_blank", "noopener"));904 kernelsBtnChat.addEventListener("click", openKernels);905 toHeroBtn.addEventListener("click", backToHero);906 bootRetryBtn.addEventListener("click", (e) => { e.preventDefault(); hideBootError(); startRealLoad(); });907 908 kernelsOverlay.addEventListener("click", (e) => { if (e.target.closest("[data-close]")) closeKernels(); });909 $("kxList").addEventListener("scroll", updateListFade, { passive: true });910 $("kxCopy").addEventListener("click", copyKernel);911 document.addEventListener("keydown", (e) => { if (e.key === "Escape" && !kernelsOverlay.hidden) closeKernels(); });912 913 sendBtn.addEventListener("click", send);914 stopBtn.addEventListener("click", () => abortController?.abort());915 clearBtn.addEventListener("click", clearChat);916 input.addEventListener("input", () => { autoGrow(); refreshSend(); });917 input.addEventListener("keydown", (e) => {918 if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (!sendBtn.disabled) send(); }919 });920 document.addEventListener("click", (e) => {921 const seed = e.target.closest(".seed");922 if (!seed || seed.disabled || !model || isGenerating) return;923 input.value = seed.dataset.prompt || seed.textContent; // button shows a summary; send the full prompt924 send();925 });926 927 // ====================================================================928 // Boot / model load929 // ====================================================================930 931 // Enter the boot screen and kick off the real load. Idempotent — the scene fires this ~0.9s into932 // the blast, and the no-scene CTA path fires it directly; either way only the first call counts.933 function beginBoot() {934 if (bootEntered) return;935 bootEntered = true;936 ctaBtn.disabled = true;937 heroEl.classList.add("fade-out");938 page2El.classList.add("show");939 updateGpuChip();940 startRealLoad();941 }942 943 function updateGpuChip() {944 const ok = !!navigator.gpu;945 gpuChip.textContent = ok ? "WebGPU available" : "WebGPU unavailable";946 gpuChip.classList.toggle("ok", ok);947 gpuChip.classList.toggle("bad", !ok);948 }949 950 async function startRealLoad() {951 // Already loaded (e.g. user went back to the intro and re-entered): show ready instantly.952 if (model) {953 setBootProgressImmediate(1);954 bootStep.textContent = "Ready · entering chat…";955 setTimeout(enterChat, 300);956 return;957 }958 if (loadStarted) return;959 loadStarted = true;960 hideBootError();961 setBootProgressImmediate(0);962 startCreep(0.05); // smoothly fill the device-request + tokenizer + GGUF-header gap (no real bytes yet)963 bootStep.textContent = "Requesting WebGPU device…";964 965 try {966 // No availability probe here: the page-load checkAvailability() already gated the CTA, and967 // load() runs its OWN header-only device gate before the big download (reusing the cached968 // header). A probe here would just re-read the GGUF header a third time.969 // The download (→~86%) AND the GPU weight upload (→95%) drive the bar via onLoadProgress.970 model = await Lfm2Mobile.load(MODEL_ID, { onProgress: onLoadProgress });971 stopCreep();972 setBootProgress(0.95);973 974 // Warm the kernels thoroughly: warmup() prefills + decodes a long-ish run, compiling every975 // decode pipeline variant AND ramping the GPU clock, so the user's FIRST real reply runs at976 // steady-state speed.977 bootStep.textContent = "Warming up kernels…";978 startCreep(0.98); await model.warmup(); stopCreep();979 980 setBootProgress(1);981 gpuChip.textContent = "WebGPU ready"; gpuChip.classList.add("ok"); gpuChip.classList.remove("bad");982 bootStep.textContent = "Ready · entering chat…";983 // Loaded — transition straight into the chat (a brief beat so "Ready · 100%" registers).984 setTimeout(enterChat, 450);985 } catch (error) {986 stopCreep();987 console.error(error);988 loadStarted = false;989 model = null;990 showBootError(String(error?.message ?? error));991 }992 }993 994 function labelFor(status) {995 return {996 init: "Requesting WebGPU device…",997 tokenizer: "Loading tokenizer…",998 weights: "Downloading weights…",999 ready: "Ready.",1000 }[status] ?? status;1001 }1002 1003 function onLoadProgress(event) {1004 if (event.status !== "weights") {1005 bootStep.textContent = labelFor(event.status);1006 setPhaseProgress(event.status, event.fraction);1007 return;1008 }1009 // The model's `fraction` already spans BOTH the byte download (→0.9) and the GPU upload1010 // (0.9→1.0), in order, so drive the bar off it directly (mapped 5%→95%, leaving 95%→100% for1011 // warmup). The upload phase advances + repaints because the loader yields between tensors.1012 const fraction = finiteNumber(event.fraction) ? clamp(event.fraction, 0, 1) : null;1013 if (fraction !== null) setBootProgress(0.05 + 0.90 * fraction);1014 bootStep.textContent = formatWeightProgress(event, fraction);1015 }1016 1017 // Map each load phase onto a slice of the bar weighted by its real cost. The byte download (the1018 // ~209 MB GGUF, which dwarfs everything else) owns 5%→90% and is tracked exactly off loaded/total;1019 // the small head (device + tokenizer) and the GPU tail (prepare + warmup + prime) get the rest.1020 // `ready` (emitted by load() once weights are resident) caps at 90% so the tail owns 90%→100%.1021 function setPhaseProgress(status, frac) {1022 const [lo, hi] = status === "weights"1023 ? [0.05, 0.90]1024 : ({ init: [0, 0.02], tokenizer: [0.02, 0.05], ready: [0.90, 0.90] }[status] ?? [0, 1]);1025 const f = finiteNumber(frac) ? clamp(frac, 0, 1) : 0;1026 setBootProgress(lo + (hi - lo) * f);1027 }1028 1029 // Set a new monotonic target; a single rAF loop eases the displayed bar toward it (smooth glide,1030 // never a hard jump, never backwards).1031 function setBootProgress(value) {1032 if (!finiteNumber(value)) return;1033 bootTarget = Math.max(clamp(value, 0, 1), bootTarget);1034 if (!bootRaf) bootRaf = requestAnimationFrame(stepBootBar);1035 }1036 function stepBootBar() {1037 const gap = bootTarget - bootShown;1038 bootShown += gap < 0.0015 ? gap : gap * 0.16; // close 16% of the remaining gap each frame1039 bootBar.style.width = `${(bootShown * 100).toFixed(2)}%`;1040 bootPct.textContent = `${Math.round(bootShown * 100)}%`;1041 bootRaf = bootShown < bootTarget - 0.0002 ? requestAnimationFrame(stepBootBar) : 0;1042 }1043 // Snap both target + displayed value (used for resets and the already-loaded fast path).1044 function setBootProgressImmediate(value) {1045 stopCreep();1046 if (bootRaf) { cancelAnimationFrame(bootRaf); bootRaf = 0; }1047 bootTarget = bootShown = clamp(value, 0, 1);1048 bootBar.style.width = `${(bootShown * 100).toFixed(2)}%`;1049 bootPct.textContent = `${Math.round(bootShown * 100)}%`;1050 }1051 // Gentle asymptotic creep toward `ceiling` — fills indeterminate, no-event waits (GGUF header1052 // fetch, GPU warmup, first-token prime) so the bar never looks frozen. Real byte progress, being1053 // monotonic-max and larger, overtakes it; the creep auto-stops once the target passes the ceiling.1054 function startCreep(ceiling) {1055 creepCeil = ceiling;1056 if (!creepRaf) creepRaf = requestAnimationFrame(creepStep);1057 }1058 function creepStep() {1059 const gap = creepCeil - bootTarget;1060 if (gap > 0.0005) { setBootProgress(bootTarget + gap * 0.02); creepRaf = requestAnimationFrame(creepStep); }1061 else creepRaf = 0;1062 }1063 function stopCreep() { if (creepRaf) { cancelAnimationFrame(creepRaf); creepRaf = 0; } }1064 1065 // Plain-text (textContent-safe) progress label.1066 function formatWeightProgress(event, fraction) {1067 const kind = event.kind ?? inferProgressKind(event);1068 const pct = fraction === null ? "" : ` (${Math.round(fraction * 100)}%)`;1069 const loaded = finiteNumber(event.loaded) ? event.loaded : null;1070 const total = finiteNumber(event.total) ? event.total : null;1071 if (kind === "bytes") {1072 const verb = event.fromCache ? "Loading cached weights" : "Downloading weights";1073 if (loaded !== null && total !== null) return `${verb}: ${formatBytes(loaded)} / ${formatBytes(total)}${pct}`;1074 if (total !== null) return `${verb}: ${formatBytes(total)} total`;1075 return `${event.message || verb}…`;1076 }1077 if (loaded !== null && total !== null) {1078 const label = event.message ? ` (${event.message})` : "";1079 return `Preparing GPU weights: ${formatInteger(loaded)} / ${formatInteger(total)} tensors${pct}${label}`;1080 }1081 return event.message ? `Preparing GPU weights: ${event.message}` : "Preparing GPU weights…";1082 }1083 1084 function inferProgressKind(event) {1085 if (event.kind === "bytes" || event.kind === "tensors") return event.kind;1086 if (finiteNumber(event.total) && event.total > 1_000_000) return "bytes";1087 return "tensors";1088 }1089 1090 function showBootError(message) {1091 gpuChip.textContent = "Load failed";1092 gpuChip.classList.add("bad"); gpuChip.classList.remove("ok");1093 const cantRun = /cannot run on this GPU\/browser|maxBufferSize|storage buffers per shader stage|WebGPU isn't available/i.test(message);1094 bootStep.textContent = cantRun ? "This device can't run the model" : "Couldn't load the model";1095 bootError.querySelector(".boot-error-msg").textContent = message; // textContent: safe + preserves newlines1096 bootError.classList.add("show");1097 }1098 function hideBootError() { bootError.classList.remove("show"); }1099 1100 // ====================================================================1101 // Screen transitions1102 // ====================================================================1103 1104 function enterChat() {1105 if (!model || chatEl.classList.contains("show")) return;1106 window.LFMScene?.stop(); // free the GPU for inference — no 3D render competing1107 page2El.classList.remove("show");1108 heroEl.classList.add("fade-out");1109 chatEl.classList.add("show");1110 document.body.classList.add("chatting"); // freeze + hide the animated background layers1111 input.disabled = false;1112 clearBtn.disabled = false;1113 setSeedButtonsEnabled(true);1114 setStatus("ready", "Ready · on-device");1115 refreshSend();1116 input.focus();1117 }1118 1119 // Back to the landing intro. The model + conversation persist; re-loading from the hero jumps1120 // straight to "Ready" since the weights are already resident.1121 function backToHero() {1122 chatEl.classList.remove("show");1123 document.body.classList.remove("chatting");1124 page2El.classList.remove("show");1125 heroEl.classList.remove("fade-out");1126 bootEntered = false;1127 if (!loadBlocked) ctaBtn.disabled = false;1128 hideBootError();1129 setBootProgressImmediate(0);1130 bootStep.textContent = "Fetching LFM2.5 weights";1131 if (window.LFMScene) window.LFMScene.replay();1132 }1133 1134 function setStatus(state, text) {1135 statusEl.className = "status" + (state ? " " + state : "");1136 if (text !== undefined) statusText.textContent = text;1137 }1138 1139 // ====================================================================1140 // Chat1141 // ====================================================================1142 1143 async function send() {1144 const text = input.value.trim();1145 if (!text || !model || isGenerating) return;1146 1147 removeWelcome();1148 input.value = "";1149 autoGrow(); refreshSend();1150 1151 appendUserMessage(text);1152 messages.push({ role: "user", content: text });1153 1154 const assistant = appendAssistantMessage();1155 const bubble = assistant.querySelector(".bubble");1156 bubble.innerHTML = '<span class="thinking"><span></span><span></span><span></span></span>';1157 scrollDown();1158 1159 setGenerating(true);1160 abortController = new AbortController();1161 1162 let reply = "";1163 let startedAt = 0, firstTokenAt = 0, endedAt = 0, generatedTokens = 0;1164 1165 try {1166 const stream = model.generate(messages, { maxNewTokens: 4096, signal: abortController.signal });1167 startedAt = performance.now();1168 for await (const { text: full } of stream) {1169 const now = performance.now();1170 if (!firstTokenAt) firstTokenAt = now;1171 generatedTokens++;1172 reply = full;1173 scheduleAssistantRender(bubble, reply);1174 updateLiveStat({ startedAt, firstTokenAt, now, generatedTokens });1175 }1176 } catch (error) {1177 console.error(error);1178 if (!reply) reply = `_Stopped: ${String(error?.message ?? error)}_`;1179 } finally {1180 endedAt = performance.now();1181 renderState = null; // cancel any pending coalesced render; show the final reply now1182 renderAssistant(bubble, reply, false);1183 appendMeta(assistant, { startedAt, firstTokenAt, endedAt, generatedTokens });1184 scrollDown();1185 messages.push({ role: "assistant", content: reply });1186 setGenerating(false);1187 liveStat.textContent = "";1188 abortController = null;1189 input.focus();1190 }1191 }1192 1193 function setGenerating(on) {1194 isGenerating = on;1195 input.disabled = on;1196 clearBtn.disabled = on;1197 sendBtn.style.display = on ? "none" : "";1198 stopBtn.style.display = on ? "grid" : "none";1199 setStatus(on ? "busy" : "ready", on ? "Generating…" : "Ready · on-device");1200 hint.textContent = on ? "Generating on-device…" : "Runs fully on-device — nothing leaves your machine";