Spaces:
Running
Running
File size: 57,085 Bytes
ac63855 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>VibeThinker-3B · in-browser WebGPU training + hot-swap LoRA</title>
<meta name="description" content="Train VibeThinker-3B in your browser on a WebGPU int4 runtime — fine-tune a LoRA adapter in the tab (full backward pass + AdamW) and hot-swap it into inference live. No server, no upload.">
<meta property="og:title" content="VibeThinker-3B · in-browser WebGPU training + hot-swap LoRA">
<meta property="og:description" content="WebGPU in-browser LoRA training · full backward pass + AdamW · runtime adapter hot-swap.">
<link rel="preconnect" href="https://huggingface.co" crossorigin>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='88'%3E%F0%9F%94%A5%3C/text%3E%3C/svg%3E">
<script type="importmap">{"imports":{"@huggingface/transformers":"https://esm.sh/@huggingface/transformers@4.2.0?bundle"}}</script>
<style>
/* ============================================================
EMBERGLASS DESIGN SYSTEM
One set of tokens + components. Build new UI from THESE only;
never hand-roll one-off sizes/colors (that's what caused drift).
------------------------------------------------------------
Tokens → Layout(shell + 3 layout modes) → Components.
Layout modes are switched via body[data-layout] (JS/matchMedia)
so mobile & foldable are real layouts, not breakpoint tweaks.
============================================================ */
:root{
/* ─── palette (BeOS desktop) ─── */
--beige:#d8d4c5; --beige2:#e8e5d8; --beige3:#f3f1e8; --ink:#1b1b18;
--hi:#ffffff; --lo:#8a8472; --line:#b3ad9a;
--tab:#ffd24a; --ember:#ff7a3c; --teal:#1d6f6a;
/* bevel (one source of truth for the chiselled BeOS edges) */
--bevel-hi:#ffffff; --bevel-lo:#9a937e;
/* ─── brand ramp ─── */
--primary:#ff7a3c; --primary-2:#ffb37a; --primary-press:#e8631f;
--on-primary:#3a1a06; --primary-edge:#b8511e;
/* ─── semantic colors + button variants ─── */
--danger:#b1311f; --danger-2:#dd6a58; --danger-press:#8f2616; --on-danger:#fff; --danger-edge:#8f2616;
/* semantic surfaces */
--surface:var(--beige); --panel:var(--beige2); --raised:var(--beige3);
--text:#1b1b18; --text-dim:#6a6450;
/* state (status rail + leds) */
--st-idle:#6a6450; --st-idle-bg:#cfccbd;
--st-busy:#b4540f; --st-busy-bg:#ffe3c4;
--st-ok:#1f7a35; --st-ok-bg:#cdebd3;
--st-err:#b1311f; --st-err-bg:#f4d3cd;
/* ─── spacing scale (use these, not magic numbers) ─── */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
/* ─── shape, control sizes, motion, elevation ─── */
--radius:8px; --r-sm:5px; --r-lg:12px;
--ctl-h:36px; --hero-h:46px; --ctl-sm:28px;
--gap:8px; --rail-w:252px; --hinge:26px;
--ring:0 0 0 3px rgba(255,122,60,.42);
--dur:.15s; --ease:cubic-bezier(.3,.7,.4,1);
--shadow-1:0 1px 2px rgba(0,0,0,.18); --shadow-2:0 8px 24px rgba(0,0,0,.42);
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0s; } }
*{ box-sizing:border-box; }
body{ margin:0; font:14px/1.5 Verdana, Geneva, system-ui, sans-serif; color:var(--text);
background:
radial-gradient(circle at 12px 12px, rgba(255,255,255,.06) 1.5px, transparent 1.6px) 0 0/24px 24px,
linear-gradient(160deg,#1d6f6a,#15524e 60%,#123f3c);
min-height:100vh; padding:18px; }
.desk{ max-width:1100px; margin:0 auto; }
a{ color:#0a5; }
.muted{ color:var(--text-dim); font-size:12px; }
code{ background:#0002; padding:1px 5px; border-radius:3px; }
/* ── deskbar ── */
.deskbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#eafffb; }
.deskbar .logo{ width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
background:linear-gradient(#ff8a52,#c0461a); box-shadow:0 2px 0 #0006, inset 0 1px 0 #ffd9c4; font-size:18px; }
.deskbar h1{ font-size:20px; margin:0; letter-spacing:.5px; }
.deskbar .sub{ font-size:12px; opacity:.8; margin-left:2px; }
/* ── window chrome ── */
.win{ position:relative; background:var(--surface); border:2px solid;
border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 8px 24px #0007; border-radius:3px; margin-bottom:16px; }
/* full-width tab strip — the tabs fill the whole app */
.tabbar{ display:flex; align-items:stretch; gap:4px; padding:6px 8px 0; }
.tabs{ display:flex; flex:1; gap:4px; }
.tab{ flex:1; text-align:center; font:700 13px Verdana,sans-serif; padding:9px 16px 8px; cursor:pointer; color:#4a4636;
background:#c4c0b1; border:2px solid; border-color:var(--hi) var(--lo) var(--surface) var(--hi);
border-bottom:none; border-radius:7px 7px 0 0; user-select:none; }
.tab.on{ background:var(--tab); color:#3a2a00; box-shadow:0 -2px 0 #0002; }
.iconbtn{ flex:0 0 auto; width:40px; display:grid; place-items:center; font-size:16px; cursor:pointer; color:#4a4636;
background:#c8c4b5; border:2px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); border-radius:7px 7px 0 0; user-select:none; }
.iconbtn:hover{ filter:brightness(1.04); }
.iconbtn.on{ background:var(--tab); color:#3a2a00; }
.winbody{ border-top:2px solid var(--lo); padding:var(--s5); }
/* ── settings drawer (advanced; clean labeled form) ── */
.settings{ border-top:2px solid var(--bevel-lo); background:#cfccbd; padding:var(--s5); animation:drop var(--dur) var(--ease); }
.settings[hidden]{ display:none; }
@keyframes drop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.settings__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); max-width:980px; }
.set-group{ display:flex; flex-direction:column; gap:var(--s3); }
.set-title{ font:700 11px Verdana,sans-serif; letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim); margin:0; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field>span{ font:600 11px Verdana,sans-serif; letter-spacing:.3px; text-transform:uppercase; color:var(--text-dim); }
.field>span em{ font-style:normal; opacity:.7; text-transform:none; letter-spacing:0; }
.field-row{ display:flex; gap:var(--s2); align-items:flex-end; flex-wrap:wrap; }
.field-row .field{ flex:1; min-width:160px; }
.lbl{ font-size:12px; color:var(--text-dim); }
@media (max-width:760px){ .settings__grid{ grid-template-columns:1fr; } }
/* ── app layout (shell) — 3 modes via body[data-layout] ── */
.layout{ display:grid; gap:var(--s5); grid-template-columns:var(--rail-w) minmax(0,1fr); align-items:start; }
.history{ grid-column:1; }
#paneInfer,#paneTrain{ grid-column:2; min-width:0; }
/* ── fields (ONE input system) ── */
input[type=text],input[type=password],select,textarea{ font:13px Verdana,sans-serif; color:var(--text);
background:#fbfaf4; border:2px solid; border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo); border-radius:var(--radius);
transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
input[type=text],input[type=password],select{ height:var(--ctl-h); padding:0 10px; }
input[type=text]{ flex:1; min-width:200px; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; box-shadow:var(--ring); border-color:var(--primary-edge); }
.w-narrow{ flex:0 0 120px; min-width:0; }
textarea{ width:100%; padding:9px 10px; font:13px ui-monospace,monospace; }
/* file inputs: tame the native chrome so they match the button system */
input[type=file]{ font:12px Verdana,sans-serif; color:var(--text-dim); max-width:100%; }
input[type=file]::file-selector-button{ font:700 12px Verdana,sans-serif; color:#2a2620; height:var(--ctl-sm); margin-right:10px;
padding:0 12px; cursor:pointer; border-radius:var(--r-sm); background:linear-gradient(var(--beige3),#cfcbbb);
border:2px solid; border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi); transition:filter var(--dur) var(--ease); }
input[type=file]::file-selector-button:hover{ filter:brightness(1.05); }
/* ── buttons (ONE system: base + primary / secondary / danger / ghost · sizes big / tiny) ── */
button,.btn{ --b1:var(--beige3); --b2:#cfcbbb; --bd-hi:var(--bevel-hi); --bd-lo:var(--bevel-lo); --fg:#2a2620;
appearance:none; font:700 13px/1 Verdana,sans-serif; color:var(--fg);
height:var(--ctl-h); padding:0 var(--s4); cursor:pointer; white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--radius);
background:linear-gradient(var(--b1),var(--b2)); border:2px solid; border-color:var(--bd-hi) var(--bd-lo) var(--bd-lo) var(--bd-hi);
transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
button:hover:not(:disabled),.btn:hover{ filter:brightness(1.05); }
button:active:not(:disabled),.btn:active{ transform:translateY(1px); filter:brightness(.96);
border-color:var(--bd-lo) var(--bd-hi) var(--bd-hi) var(--bd-lo); }
button:focus-visible,.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
button:disabled{ opacity:.42; cursor:not-allowed; filter:saturate(.55); }
/* variants */
button.primary{ --b1:var(--primary-2); --b2:var(--primary); --fg:var(--on-primary); --bd-hi:#ffd9c4; --bd-lo:var(--primary-edge); }
button.secondary{ /* = neutral base, named for intent */ }
button.danger{ --b1:var(--danger-2); --b2:var(--danger); --fg:var(--on-danger); --bd-hi:#f6c3ba; --bd-lo:var(--danger-edge); }
button.ghost{ --b1:transparent; --b2:transparent; --bd-hi:transparent; --bd-lo:transparent; --fg:var(--text-dim); box-shadow:none; }
button.ghost:hover:not(:disabled){ filter:none; background:rgba(0,0,0,.05); color:var(--text); }
button.ghost:active:not(:disabled){ transform:translateY(1px); background:rgba(0,0,0,.08); }
/* sizes */
button.big{ height:var(--hero-h); padding:0 var(--s5); font-size:15px; border-radius:var(--r-lg); }
button.tiny{ height:var(--ctl-sm); padding:0 10px; font-size:11px; gap:5px; border-radius:var(--r-sm); }
/* ── section block ── */
.sec{ margin:var(--s5) 0; }
.sec:first-child{ margin-top:0; }
.sec[hidden]{ display:none; }
#askSection:not([hidden]){ animation:reveal .35s var(--ease); }
@keyframes reveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.sec__title{ font:700 12px Verdana,sans-serif; letter-spacing:.8px; text-transform:uppercase; color:#5a5440; margin:0 0 var(--s3); }
.row{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin:var(--s3) 0; }
/* ── status rail (single info area) ── */
.rail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:6px; }
.rail__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rail__chip{ font:700 11px ui-monospace,monospace; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px;
display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.rail__chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.rail[data-state=idle] .rail__chip{ color:var(--st-idle); background:var(--st-idle-bg); }
.rail[data-state=busy] .rail__chip{ color:var(--st-busy); background:var(--st-busy-bg); animation:pulse 1s ease-in-out infinite; }
.rail[data-state=ok] .rail__chip,
.rail[data-state=tuned] .rail__chip{ color:var(--st-ok); background:var(--st-ok-bg); }
.rail[data-state=err] .rail__chip{ color:var(--st-err); background:var(--st-err-bg); }
.rail__msg{ flex:1; min-width:180px; font:12px ui-monospace,monospace; color:#5a5440; white-space:pre-wrap; }
.rail__adapter{ display:flex; align-items:center; gap:6px; }
.rail__adapter[hidden]{ display:none; }
@keyframes pulse{ 50%{ opacity:.55; } }
/* ── inventory (left): each forged skill drops here as a loot item ── */
.history{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; align-self:stretch; }
.history__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.history__head h2{ font:700 12px Verdana,sans-serif; letter-spacing:.6px; text-transform:uppercase; color:#5a5440; margin:0; }
.history__count{ font:11px ui-monospace,monospace; color:var(--text-dim); background:#cfccbd; padding:1px 7px; border-radius:999px; }
.history__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:62vh; overflow:auto; }
.history__empty{ font:12px ui-monospace,monospace; color:var(--text-dim); padding:10px 4px; }
.item{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:0 10px; padding:9px; cursor:pointer;
background:#fbfaf4; border:1px solid var(--line); border-left:4px solid var(--rar,#b9a374); border-radius:var(--radius);
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.item:hover{ transform:translateY(-1px); box-shadow:2px 3px 0 var(--lo); border-color:#caa36e; }
.item.active{ box-shadow:0 0 0 2px #ff7a3c55; background:#fff6ee; }
.item__frame{ grid-row:1/3; position:relative; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at 50% 32%, #fff, #efe6d2); border:2px solid var(--rar,#b9a374);
border-radius:8px; box-shadow:inset 0 0 0 1px #fff8, 0 1px 0 var(--lo); }
.item__icon{ font-size:21px; line-height:1; }
.item__lv{ position:absolute; right:-5px; bottom:-6px; min-width:17px; height:15px; padding:0 3px; display:flex; align-items:center;
justify-content:center; font:800 9px ui-monospace,monospace; color:#fff; background:var(--rar,#7a4a16);
border:1px solid #fff9; border-radius:4px; }
.item__body{ min-width:0; }
.item__name{ font:700 13px Verdana,sans-serif; color:#2a2620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item.active .item__name{ padding-right:64px; }
.item__rar{ font:700 9px ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--rar,#8a7a52);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item__meta{ font:10px ui-monospace,monospace; color:var(--text-dim); margin-top:1px; }
.item__xp{ height:4px; margin-top:4px; background:#d8c8a8; border-radius:3px; overflow:hidden; }
.item__xp > i{ display:block; height:100%; background:linear-gradient(90deg,#ff9a3c,#e2641a); }
.item__tag{ position:absolute; top:7px; right:8px; font:800 8px ui-monospace,monospace; letter-spacing:.1em; color:#fff;
background:var(--ember); padding:2px 5px; border-radius:4px; box-shadow:0 1px 0 #0003; }
.item__acts{ grid-column:1/3; display:flex; gap:6px; margin-top:8px; }
.item__acts button{ height:24px; padding:0 8px; font-size:11px; flex:0 0 auto; }
.item__acts button[data-act=apply]{ flex:1 1 auto; }
/* rarity tiers, by cosmetic level */
.item[data-rarity=common] { --rar:#9a9078; }
.item[data-rarity=uncommon] { --rar:#3f9a52; }
.item[data-rarity=rare] { --rar:#2f72c4; }
.item[data-rarity=epic] { --rar:#8a4fc0; }
.item[data-rarity=legendary]{ --rar:#e2641a; }
/* skill list (Train pane) — request → emitted macro */
.skill-req{ display:block; font:600 12px Verdana,sans-serif; color:#2a2620; }
.skill-macro{ margin:3px 0 0; padding:6px 8px; background:#fff7ee; border:1px solid var(--line);
border-radius:var(--r-sm); font:11px/1.5 ui-monospace,SFMono-Regular,monospace; color:#5a3b18;
white-space:pre-wrap; overflow-x:auto; }
/* skill tree (Train pane) — choose which skill to forge, RPG card grid */
.skillpick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:var(--s2); margin:0 0 var(--s3); }
.skillpick__btn{ position:relative; display:flex; align-items:center; gap:9px; padding:8px 10px; cursor:pointer; text-align:left;
font:700 12px Verdana,sans-serif; color:#3a382e; background:var(--panel);
border:2px solid var(--bevel-hi); box-shadow:1px 1px 0 var(--lo); border-radius:var(--r-sm);
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.skillpick__btn:hover{ transform:translateY(-1px); box-shadow:2px 3px 0 var(--lo); border-color:#caa36e; }
.skillpick__btn.on{ border-color:var(--ember); background:#fff6ee; box-shadow:0 0 0 2px #ff7a3c55; }
.skillpick__icon{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:9px;
font-weight:800; color:#fff; box-shadow:inset 0 1px 0 #ffffff55, inset 0 -2px 3px #00000030, 0 1px 2px #0003; }
.skillpick__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.skillpick__txt b{ font-size:12.5px; color:#2a2820; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skillpick__txt i{ font-style:normal; font-size:10px; color:var(--text-dim); }
.skillpick__lv{ position:absolute; top:-7px; right:-7px; min-width:20px; height:18px; padding:0 4px; display:grid; place-items:center;
font:800 10px Verdana,sans-serif; color:#3a1a06; background:linear-gradient(#ffd24a,#f3a82a);
border:1.5px solid #fff; border-radius:9px; box-shadow:0 1px 2px #0004; }
.skill-more{ list-style:none; margin-top:6px; padding:5px 9px; font:600 11px Verdana,sans-serif; color:var(--text-dim);
background:#00000008; border:1px dashed var(--line); border-radius:var(--r-sm); }
/* ── the stage: a Sierra-style adventure scene (you roam "the web") ── */
.stage{ position:relative; margin:8px 8px 0; border:2px solid;
border-color:var(--hi) var(--lo) var(--lo) var(--hi); border-radius:8px; overflow:hidden;
display:grid; grid-template-columns:1fr 188px; grid-template-rows:auto auto; background:#0a1416;
box-shadow:inset 0 1px 0 #ffffff10, 0 2px 4px #0005; }
.stage__scene{ --scene:#1d6f6a; position:relative; height:128px; overflow:hidden;
background:radial-gradient(130% 95% at 50% 130%, var(--scene), #08110f 72%); transition:--scene .4s var(--ease); }
.stage__far{ position:absolute; left:0; right:0; bottom:44%; height:30px; opacity:.45; filter:blur(.3px);
background:repeating-linear-gradient(90deg,#000a 0 12px,transparent 12px 20px,#0008 20px 30px,transparent 30px 46px,#000a 46px 58px,transparent 58px 74px); }
.stage__floor{ position:absolute; left:-20%; right:-20%; bottom:0; height:46%; transform:perspective(200px) rotateX(60deg); transform-origin:bottom; opacity:.5;
background:repeating-linear-gradient(90deg,#ffffff26 0 1px,transparent 1px 38px), repeating-linear-gradient(0deg,#ffffff22 0 1px,transparent 1px 24px), linear-gradient(#0000,#00000055); }
.stage__scene::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 60px #000a; }
.stage__sign{ position:absolute; right:22px; bottom:22px; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; }
.stage__icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; font:800 18px Verdana,sans-serif; color:#fff;
box-shadow:inset 0 1px 0 #ffffff55, inset 0 -2px 4px #00000033, 0 3px 8px #0009; }
.stage__place{ font:700 11px Verdana,sans-serif; color:#eafffb; background:#000000bb; border:1px solid #ffffff22;
padding:2px 9px; border-radius:11px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage__actor{ position:absolute; left:22px; bottom:18px; font-size:34px; z-index:2; filter:drop-shadow(0 5px 1px #0007);
animation:bob 1.7s var(--ease) infinite; }
.stage__actor::after{ content:""; position:absolute; left:50%; bottom:-7px; width:30px; height:7px; transform:translateX(-50%); background:#0006; border-radius:50%; filter:blur(2px); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.stage__panel{ background:linear-gradient(#efe6d2,#e0d4ba); border-left:2px solid #0006; padding:10px 13px;
display:flex; flex-direction:column; gap:7px; justify-content:center; }
.stage__score{ display:flex; align-items:baseline; gap:8px; }
.stage__k{ font:800 10px Verdana,sans-serif; letter-spacing:1.2px; color:#8a5a13; }
.stage__score b{ font:800 22px ui-monospace,monospace; color:#5a3b18; }
.stage__rank{ display:flex; align-items:center; gap:8px; font:700 11px Verdana,sans-serif; color:#6a4a1e; }
.stage__lv b{ color:#3a1a06; }
.stage__xpbar{ height:6px; border-radius:4px; background:#0000001f; overflow:hidden; box-shadow:inset 0 1px 1px #0006; }
.stage__xpbar span{ display:block; height:100%; background:linear-gradient(90deg,#ff7a3c,#ffb37a); transition:width .4s var(--ease); }
.stage__msg{ grid-column:1 / -1; font:600 12px ui-monospace,SFMono-Regular,monospace; color:#ffd9a0;
background:#0a0f10; border-top:2px solid #000; padding:7px 12px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body[data-layout=mobile] .stage{ grid-template-columns:1fr; }
body[data-layout=mobile] .stage__panel{ flex-direction:row; align-items:center; justify-content:space-between; border-left:none; border-top:2px solid #0006; }
body[data-layout=mobile] .stage__xpbar{ flex:1; min-width:80px; }
@media (prefers-reduced-motion: reduce){ .stage__actor{ animation:none; } }
/* macro verifier readout (Inference HUD) — the "does what we say" gate */
.macrochk{ margin-top:var(--s3); padding:8px 11px; border-radius:var(--r-sm);
font:600 12px Verdana,sans-serif; border:1px solid var(--line); background:#f3eee0; }
.macrochk code{ font:11px ui-monospace,monospace; background:#0000000d; padding:1px 5px; border-radius:4px; }
.macrochk[data-state=ok]{ background:#e9f6ea; border-color:#7fbf86; color:#1f6b2c; }
.macrochk[data-state=oos]{ background:#fff4e2; border-color:#e0a94a; color:#8a5a13; }
.macrochk[data-state=bad]{ background:#fdecea; border-color:#e08a82; color:#9b2f25; }
.macrochk__plan{ margin:7px 0 0; padding:0 0 0 20px; font:600 11.5px Verdana,sans-serif; color:#27532f; }
.macrochk__plan li{ margin:2px 0; }
/* equipped-skill panel (Inference) — actions + one-tap drills */
.equip{ margin:0 0 var(--s3); padding:9px 11px; border:2px solid var(--bevel-hi);
background:linear-gradient(#fff7ec,#f6ecd8); box-shadow:1px 1px 0 var(--lo); border-radius:var(--r-sm); }
.equip__head{ display:flex; align-items:center; gap:9px; }
.equip__icon{ width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; font-size:16px;
background:linear-gradient(#ff8a52,#c0461a); color:#fff; box-shadow:inset 0 1px 0 #ffd9c4, 0 1px 2px #0005; }
.equip__id{ display:flex; flex-direction:column; line-height:1.2; }
.equip__id b{ font-size:13px; color:#5a3b18; }
.equip__scope{ font-size:10.5px; color:var(--text-dim); }
.equip__tag{ margin-left:auto; font:800 9px Verdana,sans-serif; letter-spacing:.5px; color:#3a1a06;
background:linear-gradient(#ffd24a,#f3a82a); padding:2px 7px; border-radius:8px; border:1px solid #fff8; }
.equip__row{ display:flex; align-items:flex-start; gap:8px; margin-top:8px; }
.equip__lbl{ flex:0 0 42px; font:800 10px Verdana,sans-serif; letter-spacing:.4px; color:var(--text-dim); padding-top:3px; text-transform:uppercase; }
.equip__ops, .equip__drills{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.equip__op{ font:600 10.5px ui-monospace,monospace; color:#6a4a1e; background:#fff; border:1px solid var(--line);
padding:1px 6px; border-radius:4px; }
.drill{ cursor:pointer; font:600 11px Verdana,sans-serif; color:#5a3b18; background:var(--panel);
border:1.5px solid var(--bevel-hi); box-shadow:1px 1px 0 var(--lo); border-radius:13px; padding:4px 10px; max-width:100%;
text-align:left; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.drill:hover{ transform:translateY(-1px); border-color:var(--ember); box-shadow:0 0 0 2px #ff7a3c33, 1px 2px 0 var(--lo); }
.drill:active{ transform:translateY(0); }
/* ── the dock: a bottom-anchored armory of square service tiles ─────────── */
.dock{ position:sticky; bottom:0; z-index:20; display:flex; justify-content:center;
padding:10px var(--s5) 12px; border-top:2px solid var(--hi); background:linear-gradient(#efe6d2,#e4d8bf); }
.dock__tray{ display:flex; align-items:flex-end; gap:9px; padding:9px 13px; max-width:100%; overflow-x:auto; overflow-y:visible;
background:#ffffff55; border:1px solid var(--bevel-hi); border-radius:18px;
box-shadow:inset 0 1px 0 #fff9, 0 2px 4px #0000001a; }
.dock__sep{ flex:0 0 auto; align-self:stretch; width:1px; margin:6px 3px; background:#00000022; }
.dock__tile{ position:relative; flex:0 0 auto; width:52px; height:52px; cursor:pointer; outline:none;
transition:transform var(--dur) var(--ease); }
.dock__glyph{ width:52px; height:52px; display:flex; align-items:center; justify-content:center;
border-radius:14px; font:800 21px Verdana,sans-serif; color:#fff; letter-spacing:-.02em;
box-shadow:inset 0 1px 0 #ffffff55, inset 0 -2px 4px #0000002e, 0 1px 2px #0003; }
.dock__tile:hover, .dock__tile:focus-visible{ transform:translateY(-9px) scale(1.1); z-index:2; }
.dock__tile:active{ transform:translateY(-3px) scale(1.04); }
/* state rings + badges */
.dock__tile::after{ content:""; position:absolute; inset:-3px; border-radius:17px; pointer-events:none; }
.dock__tile[data-state=equipped]::after{ box-shadow:0 0 0 2px var(--ember), 0 0 13px #ff7a3c99; }
.dock__tile[data-state=soon] .dock__glyph{ filter:grayscale(.9) opacity(.5); }
.dock__tile[data-state=soon]:hover .dock__glyph{ filter:grayscale(.35) opacity(.9); }
.dock__lv{ position:absolute; left:-4px; bottom:-5px; min-width:16px; height:15px; padding:0 3px; display:flex;
align-items:center; justify-content:center; font:800 9px ui-monospace,monospace; color:#fff; background:#7a4a16;
border:1.5px solid #fff; border-radius:5px; box-shadow:0 1px 2px #0004; }
.dock__key{ position:absolute; right:-4px; bottom:-5px; min-width:15px; height:15px; display:flex; align-items:center;
justify-content:center; font:800 9px ui-monospace,monospace; color:#7a4a16; background:#fff;
border:1px solid var(--bevel-hi); border-radius:5px; box-shadow:0 1px 2px #0003; }
.dock__forge{ position:absolute; right:-4px; top:-4px; width:17px; height:17px; display:flex; align-items:center;
justify-content:center; font:800 12px Verdana,sans-serif; color:#fff; background:#1f7a35; border:1.5px solid #fff;
border-radius:50%; box-shadow:0 1px 2px #0004; }
.dock__lock{ position:absolute; right:-4px; top:-4px; font-size:11px; opacity:.7; }
.dock__tip{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(5px);
opacity:0; pointer-events:none; white-space:nowrap; font:700 11px Verdana,sans-serif; color:#fff;
background:#2a2620; padding:4px 9px; border-radius:7px; box-shadow:0 2px 6px #0005;
transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dock__tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:#2a2620; }
.dock__tile:hover .dock__tip, .dock__tile:focus-visible .dock__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce){ .dock__tile, .dock__tile:hover, .dock__tile:focus-visible{ transform:none; } }
body[data-layout=mobile] .dock{ padding:8px; }
body[data-layout=mobile] .dock__tray{ width:100%; justify-content:flex-start; border-radius:14px; }
/* ── panels & output ── */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
#guidedList{ margin:6px 0 0; padding-left:18px; font-size:12px; color:#3a382e; max-height:170px; overflow:auto; }
#guidedList li{ margin:4px 0; }
details.cfg{ margin:12px 0; border:1px solid var(--line); border-radius:var(--radius); background:#cfccbd55; }
details.cfg>summary{ cursor:pointer; list-style:none; padding:8px 12px; font:700 12px Verdana,sans-serif; color:var(--text-dim); user-select:none; }
details.cfg>summary::-webkit-details-marker{ display:none; }
details.cfg>summary::before{ content:"▸ "; color:#9a9480; }
details.cfg[open]>summary::before{ content:"▾ "; }
details.cfg[open]>summary{ border-bottom:1px solid var(--line); }
details.cfg .cfgbody{ padding:10px 12px; }
#out{ background:#0d1410; color:#d6ffe0; border:2px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
border-radius:var(--radius); padding:12px; white-space:pre-wrap; font:13px ui-monospace,monospace; min-height:140px; max-height:380px; overflow:auto; margin-top:8px; }
.stat{ font:12px ui-monospace,monospace; color:#5a5440; }
.done-banner{ display:none; margin-top:12px; padding:12px 14px; border-radius:var(--radius);
background:var(--st-ok-bg); border:1px solid #8fce9d; color:#1f5a30; align-items:center; gap:12px; flex-wrap:wrap; }
.done-banner b{ color:#16632b; }
/* ── inference lock overlay ── */
.lockwrap{ position:relative; }
#inferLock{ display:none; position:absolute; inset:0; background:#d8d4c5dd; z-index:5; border-radius:4px;
align-items:center; justify-content:center; text-align:center; font-weight:700; color:#5a4636; padding:20px; }
/* ── training activity bar ── */
#trainWidget{ display:none; margin:12px 0; }
.actbar{ height:14px; background:linear-gradient(#1d1206,#120b04); border:1px solid #5a3a18; border-radius:7px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.6); }
#trainBar{ height:100%; width:0%; background:linear-gradient(90deg,#7a2c00,#ff7a18,#ffc06a); background-size:200% 100%; box-shadow:0 0 12px rgba(255,130,40,.5); transition:width .25s ease; animation:bar-sheen 1.1s linear infinite; }
@keyframes bar-sheen{ to{ background-position:-200% 0; } }
#trainLabel{ font:12px ui-monospace,monospace; color:#5a5440; margin-top:6px; }
.trainMetrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.trainMetrics[hidden]{ display:none; }
.tm{ background:#fbfaf4; border:1px solid var(--line); border-radius:var(--radius); padding:8px 9px; min-width:0; }
.tm b{ display:block; font:700 10px Verdana,sans-serif; letter-spacing:.4px; text-transform:uppercase; color:#8a8069; margin-bottom:3px; }
.tm span{ display:block; font:13px ui-monospace,monospace; color:#2e2a23; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lossSpark{ grid-column:1/-1; height:46px; background:#1a1208; border:1px solid #5a3a18; border-radius:var(--radius); padding:5px; }
.lossSpark svg{ width:100%; height:100%; display:block; }
.lossSpark polyline{ fill:none; stroke:#ff9b45; stroke-width:2; vector-effect:non-scaling-stroke; }
.maskPreview{ margin-top:12px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fbfaf4; }
.maskPreview[hidden]{ display:none; }
.maskPreview__head{ display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line); font:11px ui-monospace,monospace; color:#5a5440; }
.maskRows{ max-height:170px; overflow:auto; display:grid; grid-template-columns:52px 86px 1fr 1fr; font:11px ui-monospace,monospace; }
.maskRows div{ padding:5px 7px; border-bottom:1px solid #ded9ca; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:pre; }
.maskRows .hdr{ position:sticky; top:0; z-index:1; background:#ded9ca; color:#6c6250; font-weight:700; }
.maskRows .train{ background:#fff2df; color:#4f2607; font-weight:700; }
.maskRows .prompt{ color:#77705f; }
.maskRows .completion{ color:#184c25; }
.maskRows .eos{ color:#7a2c2c; }
@media (max-width:700px){ .trainMetrics{ grid-template-columns:repeat(2,minmax(0,1fr)); } .maskRows{ grid-template-columns:44px 74px 1fr; } .maskRows .target{ display:none; } }
/* ── step infographic + stopwatch ── */
.steps{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.step{ flex:1; min-width:92px; text-align:center; font:600 11px Verdana,sans-serif; padding:8px 6px; border-radius:6px;
background:#cfccbd; color:#7a7563; border:2px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); position:relative; transition:all .2s; }
.step.active{ background:linear-gradient(180deg,#ffa44e,#e2641a); color:#1c0f04; border-color:#ffc486; box-shadow:0 0 10px rgba(255,140,55,.5); }
.step.active::after{ content:"⏱"; position:absolute; top:-10px; right:-7px; font-size:15px; transform-origin:50% 60%; animation:tick .85s ease-in-out infinite; }
.step.done{ background:linear-gradient(180deg,#3fbf5a,#2a8a3e); color:#fff; border-color:#7be09a; }
.step.done::after{ content:"✓"; position:absolute; top:-9px; right:-5px; color:#bff7cc; font-weight:800; font-size:13px; }
#trainSteps .step.loop{ animation:stepglow 1.3s ease-in-out infinite; }
#trainSteps .step:nth-child(2).loop{ animation-delay:0s; }
#trainSteps .step:nth-child(3).loop{ animation-delay:.43s; }
#trainSteps .step:nth-child(4).loop{ animation-delay:.86s; }
@keyframes stepglow{ 0%,100%{ background:#cfccbd; color:#7a7563; box-shadow:none; } 45%{ background:linear-gradient(180deg,#ffa44e,#e2641a); color:#1c0f04; box-shadow:0 0 10px rgba(255,140,55,.5); } }
@keyframes tick{ 0%,100%{ transform:rotate(-13deg); } 50%{ transform:rotate(13deg); } }
.caption{ font:12px ui-monospace,monospace; color:#5a5440; min-height:16px; margin:4px 0 0; }
.clock{ display:none; font:700 12px ui-monospace,monospace; color:#e2641a; align-items:center; gap:5px; }
.clock.on{ display:inline-flex; }
.clock .sw{ display:inline-block; font-size:14px; transform-origin:50% 60%; animation:tick .85s ease-in-out infinite; }
.proc{ display:none; position:relative; height:6px; border-radius:4px; overflow:hidden; margin:8px 0 2px;
background:linear-gradient(#1d1206,#120b04); border:1px solid #5a3a18; }
.proc.on{ display:block; }
.proc::before{ content:""; position:absolute; top:0; bottom:0; left:-42%; width:42%; border-radius:4px;
background:linear-gradient(90deg,transparent,#ff7a18,#ffc06a,transparent); animation:proc-run 1.05s ease-in-out infinite; }
@keyframes proc-run{ to{ left:100%; } }
@media (prefers-reduced-motion: reduce){ .step.active::after,.clock .sw,.proc::before{ animation:none !important; } }
/* ── warehouse conveyor loader ── */
#warehouse{ display:none; margin-top:10px; }
#warehouse.on{ display:block; animation:wh-in .3s ease-out; }
@keyframes wh-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.wh-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font:12px ui-monospace,monospace; color:#9a8a72; }
.wh-head b{ color:#ff8a3c; font-variant-numeric:tabular-nums; }
#whEl{ margin-right:10px; color:#c79a6a; }
.wh-rail{ position:relative; height:36px; border-radius:9px; overflow:hidden;
background:linear-gradient(#1d1206,#120b04); border:1px solid #5a3a18; box-shadow:inset 0 1px 4px rgba(0,0,0,.7); }
.wh-rail .belt{ position:absolute; inset:0; opacity:.5;
background:repeating-linear-gradient(115deg, rgba(255,150,70,.0) 0 13px, rgba(255,150,70,.16) 13px 26px); animation:wh-belt .65s linear infinite; }
@keyframes wh-belt{ to{ background-position:26px 0; } }
.wh-rail .fill{ position:absolute; inset:0 auto 0 0; width:0%; transition:width .35s ease;
background:linear-gradient(90deg,#7a2c00,#ff7a18 55%,#ffc06a); box-shadow:0 0 16px rgba(255,130,40,.5); }
.wh-rail .fill::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:2px; background:#ffe6c2; box-shadow:0 0 8px #ffb066; }
.wh-truck{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); font-size:20px; transition:left .35s ease; z-index:2; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.wh-truck span{ display:inline-block; animation:wh-bob .8s ease-in-out infinite; }
@keyframes wh-bob{ 0%,100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-2px); } }
.wh-label{ position:absolute; inset:0; display:flex; align-items:center; gap:9px; padding:0 12px; z-index:3;
font:11px ui-monospace,monospace; color:#fff1e0; text-shadow:0 1px 2px #000,0 0 3px #000; pointer-events:none; }
.wh-label .pk{ flex:0 0 auto; color:#ffd9a8; font-weight:700; letter-spacing:.5px; }
.wh-label .it{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wh-label .ai{ flex:0 0 auto; color:#e0a96a; }
.wh-rail.done .belt{ animation:none; opacity:0; }
.wh-rail.done .fill{ width:100% !important; background:linear-gradient(90deg,#1c7a32,#46c25a); box-shadow:0 0 16px rgba(70,210,100,.45); }
.wh-rail.done .wh-truck{ left:100% !important; }
@media (prefers-reduced-motion: reduce){ #warehouse.on{ animation:none; } .wh-rail .belt,.wh-truck span{ animation:none !important; } }
.pane{ display:none; }
.pane.active{ display:block; }
/* ============================================================
LAYOUT MODE · MOBILE (ground-up: single column; the history
rail becomes a horizontal swipe-strip of chips above content;
tabs already span full width; everything stacks & breathes)
============================================================ */
body[data-layout=mobile]{ padding:10px; }
body[data-layout=mobile] .desk{ max-width:none; }
body[data-layout=mobile] .deskbar .sub{ display:none; }
body[data-layout=mobile] .layout{ grid-template-columns:1fr; gap:10px; }
body[data-layout=mobile] .history{ grid-column:1; order:-1; }
body[data-layout=mobile] .history__list{ flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
body[data-layout=mobile] .item{ flex:0 0 210px; }
body[data-layout=mobile] #paneInfer,body[data-layout=mobile] #paneTrain{ grid-column:1; }
body[data-layout=mobile] .steps{ gap:5px; }
body[data-layout=mobile] .step{ min-width:0; flex:1 1 30%; font-size:10px; padding:6px 3px; }
body[data-layout=mobile] button.big{ width:100%; justify-content:center; }
body[data-layout=mobile] .winbody{ padding:12px; }
/* ============================================================
LAYOUT MODE · FOLDABLE (open) (ground-up dual-pane: the two
screen segments each own a job. Left segment = your fine-tunes
+ the Train console; right segment = live Inference. No tab
flipping — both are on screen, split across the hinge.)
============================================================ */
body[data-layout=foldable] .desk{ max-width:none; }
body[data-layout=foldable] .tabs{ display:none; } /* both panes show; tabs not needed */
body[data-layout=foldable] .tabbar{ justify-content:flex-end; }
body[data-layout=foldable] .tabbar::before{ content:"FOLDABLE · DUAL-PANE"; flex:1; align-self:center; padding-left:6px;
font:700 11px ui-monospace,monospace; letter-spacing:1px; color:#7a7563; }
body[data-layout=foldable] .layout{
grid-template-columns:minmax(0,1fr) var(--hinge) minmax(0,1fr);
grid-template-rows:auto auto; column-gap:0; }
body[data-layout=foldable] .history{ grid-column:1; grid-row:1; }
body[data-layout=foldable] #paneTrain{ grid-column:1; grid-row:2; display:block; padding-right:14px; }
body[data-layout=foldable] #paneInfer{ grid-column:3; grid-row:1/3; display:block; padding-left:14px; }
body[data-layout=foldable] .seg-divider{ display:block; }
/* the hinge gutter — a soft seam between the two panels */
body[data-layout=foldable] .layout::after{ content:""; grid-column:2; grid-row:1/3;
background:linear-gradient(#0000,#0001,#0000); border-left:1px dashed #0002; border-right:1px dashed #0002; }
.seg-divider{ display:none; }
</style>
</head>
<body data-layout="desktop">
<div class="desk">
<header class="deskbar">
<div class="logo">🜂</div>
<div>
<h1>VIBETHINKER · WEBGPU TRAIN + HOT-SWAP LoRA</h1>
<div class="sub">Train VibeThinker-3B in your browser — full WebGPU backward pass + AdamW over the int4 base — then hot-swap the LoRA into inference live. No server. No upload.</div>
</div>
</header>
<div class="win">
<div class="tabbar">
<div class="tabs">
<div class="tab on" id="tabInfer">🎮 Act</div>
<div class="tab" id="tabTrain">🗺 Learn</div>
</div>
<div class="iconbtn" id="gear" title="Model source, workspace & settings" aria-label="Settings">⚙</div>
</div>
<!-- settings drawer: advanced model source + workspace folder -->
<div class="settings" id="settings" hidden>
<div class="settings__grid">
<div class="set-group">
<div class="set-title">Model source</div>
<label class="field"><span>Hugging Face repo</span>
<input id="hfRepo" type="text" value="WeiboAI/VibeThinker-3B" placeholder="owner/model"></label>
<label class="field"><span>HF token <em>(gated repos only)</em></span>
<input id="hfToken" type="password" placeholder="hf_…"></label>
<div class="field-row">
<label class="field"><span>Same-origin path</span>
<input id="modelUrl" type="text" value="" placeholder="/model (only if self-hosted)"></label>
<button id="load" class="secondary">Load from source</button>
</div>
<label class="field"><span>Local model folder</span>
<input id="modelFiles" type="file" webkitdirectory multiple></label>
</div>
<div class="set-group" id="fsBlock" hidden>
<div class="set-title">Workspace folder</div>
<p class="muted" id="fsStatus" style="margin:0">Not connected — import training text & save adapters straight to a folder you pick.</p>
<div class="field-row">
<button id="fsConnect" class="secondary">📁 Connect a folder</button>
<button id="fsForget" class="ghost" hidden>Disconnect</button>
</div>
</div>
</div>
</div>
<!-- the stage: a Sierra-style adventure scene — roam the web, learn skills, equip & act -->
<div class="stage" id="stage" data-where="out">
<div class="stage__scene" id="stageScene">
<div class="stage__far"></div>
<div class="stage__floor"></div>
<div class="stage__actor" id="stageActor">🧍</div>
<div class="stage__sign">
<span class="stage__icon" id="stageSignIcon">🌐</span>
<span class="stage__place" id="stageSignName">The open web</span>
</div>
</div>
<aside class="stage__panel">
<div class="stage__score"><span class="stage__k">SKILLS</span><b id="stageScore">0 / 0</b></div>
<div class="stage__rank"><span class="stage__lv">LVL <b id="stageLv">1</b></span><span id="stageRank">Initiate</span></div>
<div class="stage__xpbar"><span id="stageXp" style="width:0%"></span></div>
</aside>
<div class="stage__msg" id="stageMsg">» Roaming the web — visit a service in LEARN to acquire your first skill.</div>
</div>
<div class="winbody">
<div class="layout">
<!-- ───────────── HISTORY RAIL (left) ───────────── -->
<aside class="history">
<div class="history__head">
<h2>Inventory</h2>
<span class="history__count" id="historyCount">0</span>
</div>
<ul class="history__list" id="historyList"></ul>
<div class="history__empty" id="historyEmpty">Your inventory is empty. Forge a skill in the Train tab — each trained skill drops here as an item you can equip, export, or scrap, and survives reloads.</div>
</aside>
<!-- ───────────── INFERENCE PANE ───────────── -->
<section class="pane active" id="paneInfer">
<div class="lockwrap">
<div id="inferLock">⚙ Inference is paused while VibeThinker-3B is learning in the Train tab…</div>
<div class="rail" id="rail" data-state="idle">
<div class="rail__top">
<span class="rail__chip" id="railChip">Model not loaded</span>
<span class="rail__msg" id="railMsg">Press “Load VibeThinker-3B” to begin. First load streams the weights once, then it's cached.</span>
<span class="rail__adapter" id="adapterWrap" hidden>
<span class="lbl">adapter</span>
<select id="adapterSel"><option value="none">none (base)</option></select>
</span>
</div>
<div id="warehouse" aria-hidden="true">
<div class="wh-head"><span>🏗️ Assembling VibeThinker-3B on your GPU…</span><span><span id="whEl"></span><b class="wh-pct">0%</b></span></div>
<div class="wh-rail" id="whRail">
<div class="belt"></div>
<div class="fill" id="whFill"></div>
<div class="wh-label"><span class="pk" id="whTag">▸ BUILDING</span><span class="it" id="whItem">spinning up the line…</span><span class="ai" id="whAisle">main aisle</span></div>
<div class="wh-truck" id="whTruck"><span>🚚</span></div>
</div>
</div>
</div>
<div class="sec">
<div class="sec__title">Step 1 · Install the model</div>
<div class="row">
<button id="loadHF" class="primary big">⤓ Load VibeThinker-3B</button>
<span class="muted">~6 GB, one-time — streamed from Hugging Face & cached in your browser. Other sources under ⚙.</span>
</div>
</div>
<div class="sec" id="askSection" hidden>
<div class="sec__title">Step 2 · Ask it something</div>
<!-- equipped-skill panel: actions + one-tap drills (shown when a service skill is equipped) -->
<div class="equip" id="equipBar" hidden>
<div class="equip__head">
<span class="equip__icon" id="equipIcon">⚔</span>
<div class="equip__id"><b id="equipName">—</b><span class="equip__scope" id="equipScope"></span></div>
<span class="equip__tag">EQUIPPED</span>
</div>
<div class="equip__row"><span class="equip__lbl">Actions</span><span class="equip__ops" id="equipOps"></span></div>
<div class="equip__row"><span class="equip__lbl">Drills</span><span class="equip__drills" id="equipDrills"></span></div>
</div>
<textarea id="prompt" rows="4" placeholder="Ask VibeThinker-3B anything… (⌘/Ctrl+Enter to run)">Email the design team this week's notes, then put a 30-minute review on my calendar for Monday morning.</textarea>
<div class="row">
<button id="run" class="primary big" disabled>▶ Run</button>
<span class="clock" id="inferClock"><span class="sw">⏱</span><span class="t"></span></span>
<span class="stat" id="tokps"></span>
</div>
<div class="steps" id="inferSteps">
<div class="step" data-s="tok">① Tokenize</div>
<div class="step" data-s="prefill">② Read prompt (prefill KV)</div>
<div class="step" data-s="decode">③ Generate tokens</div>
<div class="step" data-s="done">✓ Answer</div>
</div>
<div class="proc" id="inferProc"></div>
<div class="caption" id="inferCap"></div>
<div id="out">—</div>
<div id="macroCheck" class="macrochk" hidden></div>
</div>
</div>
</section>
<!-- ───────────── TRAIN PANE ───────────── -->
<section class="pane" id="paneTrain">
<p class="muted" style="margin:0 0 var(--s4)">🗺 <b>Travel the web</b> and learn a skill from a service you use. Each one is a LoRA trained <b>entirely in this tab</b> that compiles a plain request into a precise <b>macro</b> over a small, typed action space — constrained codegen (the model's strength), not chat. Pick a destination to learn:</p>
<div class="skillpick" id="skillPicker"></div>
<div class="panel">
<b id="skillTitle">⚔ Inbox & Calendar skill</b>
<p class="muted" id="skillDesc" style="margin:var(--s2) 0 var(--s3)"></p>
<ul id="guidedList"></ul>
</div>
<div class="row" style="margin-top:var(--s4)"><button id="trainGuided" class="primary big" disabled>✦ Train this skill</button></div>
<details class="cfg">
<summary>Forge a custom skill from your own text</summary>
<div class="cfgbody">
<p class="muted" style="margin:0 0 var(--s3)">Paste the private text you would never send to a cloud model — notes, decision rules, your own action vocabulary — and the skill is trained locally. For strongest results, include explicit rules, examples, or acceptance criteria the model can reason over. Everything stays local to this browser session unless you export it.</p>
<div class="field-row" style="align-items:flex-end">
<label class="field" style="flex:1"><span>Fetch a web page</span>
<input id="ownUrl" type="text" placeholder="https://a-page-with-text…"></label>
<button id="ownFetch" class="secondary">Fetch page</button>
</div>
<div class="field-row" style="margin-top:var(--s3)">
<label class="field"><span>Local files</span>
<input id="ownFiles" type="file" accept=".txt,.md,.json,.csv" multiple></label>
<button id="ownImportDir" class="secondary" hidden>📁 Import from folder</button>
</div>
<textarea id="ownText" rows="7" style="margin-top:var(--s3)" placeholder="Paste private notes here: DMs, journals, goals, names, project facts, draft docs, decisions, preferences, scoring rules, checklists. Guardrails: up to 12,000 chars / 24 snippets, capped steps — this is a fast local demo, not a full training run."></textarea>
<div class="muted" id="ownStats" style="margin-top:var(--s2)"></div>
<div class="row" style="margin-top:var(--s4)"><button id="trainOwn" class="primary big" disabled>✦ Train on my data</button></div>
</div>
</details>
<div class="steps" id="trainSteps">
<div class="step" data-s="prep">① Build & tokenize</div>
<div class="step" data-s="fwd">② Forward</div>
<div class="step" data-s="bwd">③ Backward (grads)</div>
<div class="step" data-s="opt">④ AdamW update</div>
<div class="step" data-s="swap">⑤ Hot-swap live</div>
</div>
<div class="caption" id="trainCap"></div>
<div id="trainWidget">
<div class="actbar"><div id="trainBar"></div></div>
<div class="row" style="margin:6px 0 0">
<span class="clock" id="trainClock"><span class="sw">⏱</span><span class="t"></span></span>
<span id="trainLabel"></span>
</div>
<div class="trainMetrics" id="trainMetrics" hidden>
<div class="tm"><b>loss</b><span id="tmLoss">—</span></div>
<div class="tm"><b>train tok/s</b><span id="tmTokps">—</span></div>
<div class="tm"><b>active labels</b><span id="tmActive">—</span></div>
<div class="tm"><b>optimizer</b><span id="tmOpt">—</span></div>
<div class="lossSpark"><svg id="lossSpark" viewBox="0 0 300 40" preserveAspectRatio="none"><polyline id="lossLine" points=""></polyline></svg></div>
</div>
<div class="maskPreview" id="maskPreview" hidden>
<div class="maskPreview__head"><b>loss mask preview</b><span id="maskSummary"></span></div>
<div class="maskRows" id="maskRows"></div>
</div>
</div>
<div id="tryIt" class="done-banner">
<span>✅ <b>Done.</b> The tuned adapter is live and saved to your fine-tunes. Open it in Inference.</span>
<button id="tryItBtn" class="primary">▶ Try it in Inference</button>
<button id="downloadAdapter" class="secondary" style="display:none">⬇ Download adapter (.safetensors)</button>
</div>
</section>
</div>
</div>
<div class="dock" id="dockBar" aria-label="Skill dock — your trained services">
<div class="dock__tray" id="dockSlots"></div>
</div>
</div>
<div class="muted" style="color:#bfe; text-align:center">
In-browser WebGPU training · full backward + AdamW · runtime LoRA hot-swap. 🜂 ·
<a href="https://huggingface.co/WeiboAI/VibeThinker-3B" style="color:#cff">model</a> ·
<a href="https://github.com/maceip/vibethinker-webgpu-lora" style="color:#cff">source</a>
</div>
</div>
<script type="module" src="./bundle.js"></script>
<script>
/* Assembly-line loader, driven by the live status text in the rail (#railMsg). */
(function () {
var wh = document.getElementById('warehouse'); if (!wh) return;
var statusEl = document.getElementById('railMsg');
var rail = document.getElementById('whRail'), fill = document.getElementById('whFill');
var pctEl = wh.querySelector('.wh-pct'), itemEl = document.getElementById('whItem');
var aisleEl = document.getElementById('whAisle'), truck = document.getElementById('whTruck');
var tagEl = document.getElementById('whTag');
var whEl = document.getElementById('whEl');
var active = false, shipT = null, t0 = 0, elTimer = null;
function startEl(){ if (elTimer) return; t0 = performance.now();
elTimer = setInterval(function(){ if (whEl) whEl.textContent = '⏱ ' + ((performance.now()-t0)/1000).toFixed(1) + 's'; }, 100); }
function stopEl(){ if (elTimer){ clearInterval(elTimer); elTimer = null; } }
function show(){ if(!wh.classList.contains('on')){ wh.classList.add('on'); wh.setAttribute('aria-hidden','false'); } }
function hide(){ wh.classList.remove('on'); wh.setAttribute('aria-hidden','true'); rail.classList.remove('done'); }
function prettyItem(t){
var m = t.match(/weights:\s*([^\s]+)/);
if (m && !/^(ready|streaming|workgroup|f16|timestamp|autotuning)$/i.test(m[1])) return m[1];
if (/tokenizer/i.test(t)) return 'tokenizer.json';
if (/autotun/i.test(t)) return 'calibrating the line (autotune)…';
if (/quantiz|streaming/i.test(t)) return 'streaming + quantizing to int4…';
if (/requesting WebGPU|WebGPU ready/i.test(t)) return 'powering up the GPU…';
return (t.replace(/\s*\d+%\s*$/, '').slice(0, 64)) || 'fetching…';
}
function aisleOf(name){
var m = name && name.match(/layers\.(\d+)/);
if (m) return 'aisle ' + ('0'+m[1]).slice(-2);
if (/embed/i.test(name)) return 'aisle 00 · intake';
if (/\bnorm\b/i.test(name)) return 'aisle 99 · QA';
return 'main aisle';
}
function update(){
var t = (statusEl.textContent || '').trim();
var pm = t.match(/(\d+)%/), p = pm ? Math.max(0,Math.min(100,+pm[1])) : null;
var done = /READY in/i.test(t) || p === 100;
var loadStart = /requesting WebGPU|loading tokenizer|streaming|weights:|quantiz|autotun/i.test(t);
if (loadStart && !done) { active = true; startEl(); rail.classList.remove('done'); if (tagEl) tagEl.textContent = '▸ BUILDING'; }
if (!active) { if (/^idle/i.test(t) || /press/i.test(t) || t === '') hide(); return; }
show();
var nm = prettyItem(t); itemEl.textContent = nm; aisleEl.textContent = aisleOf(nm);
if (p != null) {
fill.style.width = p + '%'; pctEl.textContent = p + '%';
truck.style.left = p + '%';
}
if (done) {
active = false; stopEl(); fill.style.width='100%'; pctEl.textContent='100%';
truck.style.left = '100%';
rail.classList.add('done');
if (tagEl) tagEl.textContent = '✓ ONLINE';
itemEl.textContent = 'assembled — running on your GPU'; aisleEl.textContent = 'online';
clearTimeout(shipT); shipT = setTimeout(hide, 2400);
}
}
new MutationObserver(update).observe(statusEl, { childList:true, subtree:true, characterData:true });
update();
})();
</script>
</body>
</html>
|