Team Ai
Apppublic

webml-community/lfm2-webgpu-kernels

sourceHugging Faceupdated 4mo agoView on Hugging Face
75likes
index.html2247 linesDownload Raw Back to root
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&nbsp;230M</b> from Liquid&nbsp;AI running entirely locally in the browser on WebGPU, with every kernel optimized by Fable&nbsp;5 and Opus&nbsp;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 &amp; 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";

Showing the first 1,200 of 2247 lines. Download the file for the rest.