Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>lfm2 · 64 chats at once</title> | |
| <style> | |
| :root { | |
| --bg: #0b0908; | |
| --amber: #ffb454; | |
| --amber-dim: #b87f3d; | |
| --amber-faint: #5e4322; | |
| --grid: #241c14; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body { | |
| background: var(--bg); | |
| color: var(--amber); | |
| font-family: "SF Mono", ui-monospace, Menlo, monospace; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| body::after { | |
| content: ""; | |
| position: fixed; inset: 0; | |
| pointer-events: none; | |
| background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.55)); | |
| } | |
| header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 1.2rem; | |
| padding: 0.7rem 1.1rem 0.5rem; | |
| border-bottom: 1px solid var(--grid); | |
| flex: none; | |
| } | |
| header h1 { | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--amber-dim); | |
| } | |
| #total { | |
| font-size: 1.5rem; | |
| font-variant-numeric: tabular-nums; | |
| text-shadow: 0 0 18px rgba(255, 180, 84, 0.45); | |
| } | |
| #total small { font-size: 0.65rem; color: var(--amber-dim); letter-spacing: 0.1em; } | |
| #status { margin-left: auto; font-size: 0.68rem; color: var(--amber-dim); } | |
| #wall { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| gap: 1px; | |
| background: var(--grid); | |
| min-height: 0; | |
| } | |
| .cell { | |
| background: var(--bg); | |
| padding: 4px 5px; | |
| font-size: 8.5px; | |
| line-height: 1.35; | |
| color: var(--amber-dim); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .cell .q { | |
| color: var(--amber-faint); | |
| display: block; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| margin-bottom: 2px; | |
| } | |
| .cell .a { word-break: break-word; } | |
| .cell.live .a::after { | |
| content: "▌"; | |
| color: var(--amber); | |
| animation: blink 0.9s step-end infinite; | |
| } | |
| .cell.done { color: #7d6a4f; } | |
| .cell.done .q { color: #3d3223; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>lfm2 · 64 parallel chats · WGSL batch decode</h1> | |
| <div id="total">0<small> TOK/S TOTAL</small></div> | |
| <div id="status">loading weights…</div> | |
| </header> | |
| <div id="wall"></div> | |
| <script type="module" src="/web/batch-main.js"></script> | |
| </body> | |
| </html> | |