Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Forge — compatibility graph for ML training</title> | |
| <meta name="description" content="Assemble a training recipe from real practitioner evidence. Watch incompatible tools dim. Forge what works."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <link rel="stylesheet" href="landing.css"> | |
| <style> | |
| /* Override styles.css app-shell lock so the landing scrolls naturally */ | |
| html, body { height: auto ; overflow: auto ; } | |
| html { scroll-behavior: smooth; } | |
| /* More intense ember rain — bigger sparks, more of them, brighter trails */ | |
| .sparks { z-index: 0; } | |
| .sparks span { | |
| width: 3px; height: 3px; | |
| background: var(--ember-2); | |
| box-shadow: | |
| 0 0 8px var(--ember-1), | |
| 0 0 18px rgba(255, 106, 31, 0.55), | |
| 0 0 2px #fff5e8; | |
| opacity: 0; | |
| } | |
| .sparks span.big { | |
| width: 4px; height: 4px; | |
| box-shadow: | |
| 0 0 12px var(--ember-1), | |
| 0 0 28px var(--ember-2), | |
| 0 0 3px #fff5e8; | |
| } | |
| .sparks span.trail { | |
| width: 2px; height: 14px; | |
| border-radius: 2px; | |
| background: linear-gradient(180deg, transparent 0%, var(--ember-2) 60%, var(--ember-1) 100%); | |
| box-shadow: 0 0 6px var(--ember-1); | |
| } | |
| @keyframes spark-fall { | |
| 0% { transform: translateY(-8vh) translateX(0); opacity: 0; } | |
| 8% { opacity: 0.9; } | |
| 50% { transform: translateY(50vh) translateX(var(--drift, 0px)); opacity: 0.9; } | |
| 100% { transform: translateY(110vh) translateX(calc(var(--drift, 0px) * 2)); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="sparks"> | |
| <span style="left: 4%; animation-duration: 14s; animation-delay: -2s; --drift: -18px;"></span> | |
| <span class="big" style="left: 9%; animation-duration: 18s; animation-delay: -10s; --drift: 8px;"></span> | |
| <span style="left: 14%; animation-duration: 11s; animation-delay: -6s; --drift: -12px;"></span> | |
| <span class="trail" style="left: 18%; animation-duration: 9s; animation-delay: -3s; --drift: 4px;"></span> | |
| <span style="left: 23%; animation-duration: 16s; animation-delay: -14s; --drift: -20px;"></span> | |
| <span class="big" style="left: 28%; animation-duration: 13s; animation-delay: -7s; --drift: 14px;"></span> | |
| <span style="left: 33%; animation-duration: 19s; animation-delay: -1s; --drift: -8px;"></span> | |
| <span class="trail" style="left: 38%; animation-duration: 8s; animation-delay: -5s; --drift: -10px;"></span> | |
| <span style="left: 42%; animation-duration: 15s; animation-delay: -11s; --drift: 22px;"></span> | |
| <span class="big" style="left: 47%; animation-duration: 12s; animation-delay: -8s; --drift: -6px;"></span> | |
| <span style="left: 52%; animation-duration: 17s; animation-delay: -13s; --drift: 12px;"></span> | |
| <span class="trail" style="left: 56%; animation-duration: 10s; animation-delay: -4s; --drift: -18px;"></span> | |
| <span style="left: 60%; animation-duration: 14s; animation-delay: -9s; --drift: 6px;"></span> | |
| <span class="big" style="left: 65%; animation-duration: 16s; animation-delay: -2s; --drift: -14px;"></span> | |
| <span style="left: 70%; animation-duration: 11s; animation-delay: -12s; --drift: 18px;"></span> | |
| <span class="trail" style="left: 75%; animation-duration: 9s; animation-delay: -6s; --drift: -10px;"></span> | |
| <span style="left: 79%; animation-duration: 18s; animation-delay: -15s; --drift: 8px;"></span> | |
| <span class="big" style="left: 83%; animation-duration: 13s; animation-delay: -3s; --drift: -22px;"></span> | |
| <span style="left: 87%; animation-duration: 15s; animation-delay: -8s; --drift: 14px;"></span> | |
| <span class="trail" style="left: 91%; animation-duration: 10s; animation-delay: -1s; --drift: -4px;"></span> | |
| <span style="left: 95%; animation-duration: 17s; animation-delay: -11s; --drift: 16px;"></span> | |
| <span class="big" style="left: 98%; animation-duration: 12s; animation-delay: -7s; --drift: -12px;"></span> | |
| </div> | |
| <div class="lp"> | |
| <!-- ── Sticky nav ──────────────────────────────────────────────────── --> | |
| <nav class="lp-nav"> | |
| <div class="lp-nav-inner"> | |
| <div class="brand"> | |
| <div class="mark"> | |
| <svg width="20" height="20" viewBox="0 0 32 32" fill="none"> | |
| <path d="M5 14 h17 l3 -3 h4 v4 h-3 l-2 2 h-3 v4 h2 v3 h-13 v-3 h2 v-4 h-7 z" fill="#c4934e" stroke="#2a1a08" stroke-width="0.7" stroke-linejoin="round"/> | |
| <rect x="10" y="25" width="13" height="2" fill="#2a1a08"/> | |
| <circle cx="17" cy="15" r="1.2" fill="#ffba5e"/> | |
| </svg> | |
| </div> | |
| <div class="name">FORGE</div> | |
| </div> | |
| <div class="links"> | |
| <a href="#what">What</a> | |
| <a href="#how">How</a> | |
| <a href="#tiers">Tiers</a> | |
| <a href="#scraper">Scraper</a> | |
| </div> | |
| <a class="cta-mini" href="index.html">Enter the Forge →</a> | |
| </div> | |
| </nav> | |
| <!-- ── Hero ────────────────────────────────────────────────────────── --> | |
| <section class="lp-hero lp-shell"> | |
| <div class="lp-hero-text"> | |
| <div class="lp-eyebrow">a bright data hackathon submission · 2026</div> | |
| <h1 class="lp-title">Forge a<br/><em>training recipe</em><br/>that actually runs.</h1> | |
| <p class="lp-subtitle"> | |
| A live <strong>compatibility graph</strong> for ML training components. | |
| Pick your optimizer, scheduler, quantization, technique. Incompatible tools | |
| <strong>grey out instantly</strong> with cited evidence from real practitioner runs. | |
| Greyed means <em>not yet satisfied</em>, not forbidden — add the missing | |
| ingredient and watch it re-light. | |
| </p> | |
| <div class="lp-cta-row"> | |
| <a href="index.html" class="lp-cta-primary"> | |
| Enter the Forge | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"> | |
| <path d="M5 12h14M13 6l6 6-6 6"/> | |
| </svg> | |
| </a> | |
| <a href="#what" class="lp-cta-secondary">Read first</a> | |
| </div> | |
| </div> | |
| <!-- Mini demo: 5 nodes, looped state animation --> | |
| <div class="lp-hero-art"> | |
| <svg class="demo-svg" viewBox="0 0 460 460"> | |
| <defs> | |
| <radialGradient id="lp-molten" cx="50%" cy="55%" r="65%"> | |
| <stop offset="0%" stop-color="#5a1f0a"/> | |
| <stop offset="35%" stop-color="#3a1408"/> | |
| <stop offset="70%" stop-color="#1a0807"/> | |
| <stop offset="100%" stop-color="#0a0303"/> | |
| </radialGradient> | |
| <filter id="lp-ember" x="-50%" y="-50%" width="200%" height="200%"> | |
| <feGaussianBlur stdDeviation="2.4" result="b"/> | |
| <feFlood flood-color="#ff6a1f" flood-opacity="0.55"/> | |
| <feComposite in2="b" operator="in"/> | |
| <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge> | |
| </filter> | |
| <radialGradient id="lp-brass-t1" cx="40%" cy="35%" r="75%"> | |
| <stop offset="0%" stop-color="#ffd09a"/> | |
| <stop offset="45%" stop-color="#ff8a3d"/> | |
| <stop offset="100%" stop-color="#6a2a08"/> | |
| </radialGradient> | |
| <radialGradient id="lp-brass-t2" cx="40%" cy="35%" r="75%"> | |
| <stop offset="0%" stop-color="#b8d4f0"/> | |
| <stop offset="45%" stop-color="#5b9bd8"/> | |
| <stop offset="100%" stop-color="#1c3a5a"/> | |
| </radialGradient> | |
| <radialGradient id="lp-brass-t3" cx="40%" cy="35%" r="75%"> | |
| <stop offset="0%" stop-color="#cac4b6"/> | |
| <stop offset="45%" stop-color="#9a9285"/> | |
| <stop offset="100%" stop-color="#3a3528"/> | |
| </radialGradient> | |
| </defs> | |
| <!-- Curved edges (drawn first, behind nodes) --> | |
| <g class="lp-edges"> | |
| <path class="lp-edge lp-edge-breaks" d="M 230 230 Q 270 100 320 90"/> | |
| <path class="lp-edge lp-edge-requires" d="M 230 230 Q 350 220 380 250"/> | |
| <path class="lp-edge lp-edge-compatible" d="M 230 230 Q 260 360 320 380"/> | |
| <path class="lp-edge lp-edge-requires-2" d="M 230 230 Q 120 280 80 270"/> | |
| <path class="lp-edge lp-edge-compatible-2" d="M 230 230 Q 110 130 130 90"/> | |
| </g> | |
| <!-- Center node — the "ingredient on the anvil" / selected --> | |
| <g class="lp-node lp-center" transform="translate(230, 230)"> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text> | |
| </g> | |
| <path class="lp-ribbon" d="M -33 33 L -38 47 L -28 44 L -22 48 L -16 44 L -10 48 L -4 44 L 2 48 L 8 44 L 14 48 L 20 44 L 26 48 L 34 47 L 33 33 Z"/> | |
| <text class="lp-name" y="44.5" text-anchor="middle">QLoRA</text> | |
| </g> | |
| <!-- Outer nodes --> | |
| <g class="lp-node lp-outer-1" transform="translate(345, 90)"> <!-- BLOCKED (Full Fine-Tune) --> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text> | |
| </g> | |
| <g class="lp-lock"> | |
| <path d="M -5 -2 v -4 a 5 5 0 0 1 10 0 v 4" fill="none" stroke="#cfc8b8" stroke-width="1.1" stroke-linecap="round"/> | |
| <rect x="-7" y="-2" width="14" height="11" rx="1.5" fill="#8a2520" stroke="#cfc8b8" stroke-width="0.6"/> | |
| <circle cx="0" cy="2" r="1.4" fill="#07090c"/> | |
| </g> | |
| <text class="lp-name" y="48" text-anchor="middle">Full FT</text> | |
| </g> | |
| <g class="lp-node lp-outer-2" transform="translate(385, 270)"> <!-- NEEDED — conditional (bnb 4-bit) --> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <rect x="4" y="13" width="3" height="7" rx="0.5"/><rect x="10.5" y="9" width="3" height="11" rx="0.5"/><rect x="17" y="5" width="3" height="15" rx="0.5"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text> | |
| </g> | |
| <text class="lp-name" y="48" text-anchor="middle">bnb 4-bit</text> | |
| <g class="lp-chip" transform="translate(0, 58)"> | |
| <rect x="-32" y="-7" width="64" height="14" fill="rgba(40,26,8,0.95)" stroke="#e0a13c" stroke-width="0.7"/> | |
| <text y="2.5" text-anchor="middle" font-family="JetBrains Mono" font-size="7" fill="#e0a13c" letter-spacing="0.12em">needs · add</text> | |
| </g> | |
| </g> | |
| <g class="lp-node lp-outer-3" transform="translate(330, 380)"> <!-- AVAILABLE — LoRA --> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text> | |
| </g> | |
| <text class="lp-name" y="48" text-anchor="middle">LoRA</text> | |
| </g> | |
| <g class="lp-node lp-outer-4" transform="translate(70, 270)"> <!-- AVAILABLE — Llama-3 --> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <path d="M3 7l9-4 9 4"/><path d="M5 7v12M19 7v12M12 7v12"/><path d="M3 21h18"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text> | |
| </g> | |
| <text class="lp-name" y="48" text-anchor="middle">Llama-3</text> | |
| </g> | |
| <g class="lp-node lp-outer-5" transform="translate(110, 90)"> <!-- AVAILABLE — Grad Ckpt --> | |
| <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/> | |
| <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/> | |
| <polygon class="lp-plate" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/> | |
| <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/> | |
| <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </g> | |
| <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="-22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="22.6" cy="22.6" r="1.8"/> | |
| <circle class="lp-stud" cx="-22.6" cy="22.6" r="1.8"/> | |
| <g class="lp-seal" transform="translate(22, -22)"> | |
| <circle r="8.5" fill="url(#lp-brass-t2)" stroke="#1a1208"/> | |
| <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#fff">T2</text> | |
| </g> | |
| <text class="lp-name" y="48" text-anchor="middle">Grad Ckpt</text> | |
| </g> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- ── What ───────────────────────────────────────────────────────── --> | |
| <section class="lp-section" id="what"> | |
| <div class="lp-shell"> | |
| <div class="lp-section-head"> | |
| <div class="lp-section-eyebrow">what it does</div> | |
| <h2 class="lp-section-title">A loadout-builder for ML training.</h2> | |
| <p class="lp-section-sub"> | |
| Pick optimizers, schedulers, quantization, techniques. The graph re-resolves | |
| live and tells you what fits, what's missing, and what blows up — every fact | |
| backed by a citation. | |
| </p> | |
| </div> | |
| <div class="lp-tablets"> | |
| <div class="lp-tablet"> | |
| <div class="lp-tablet-num">I</div> | |
| <div class="lp-tablet-icon"> | |
| <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="3"/> | |
| <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/> | |
| </svg> | |
| </div> | |
| <h3>Compatibility-aware</h3> | |
| <p>Pick a component and every other one re-styles by status: <em>available</em>, <em>conditional</em>, or <em>blocked</em>. Greyed means not yet satisfied — add the missing ingredient and it re-lights in real time.</p> | |
| </div> | |
| <div class="lp-tablet"> | |
| <div class="lp-tablet-num">II</div> | |
| <div class="lp-tablet-icon"> | |
| <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M4 19V5a2 2 0 0 1 2-2h11l3 3v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/> | |
| <path d="M8 8h7M8 12h7M8 16h5"/> | |
| </svg> | |
| </div> | |
| <h3>Evidence-backed</h3> | |
| <p>Every grey-out, every fix, every conflict carries its <em>cited source</em> — verbatim quote, URL, and tier badge. Hover anything to see where the claim comes from.</p> | |
| </div> | |
| <div class="lp-tablet"> | |
| <div class="lp-tablet-num">III</div> | |
| <div class="lp-tablet-icon"> | |
| <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M3 12h4l3 8 4-16 3 8h4"/> | |
| </svg> | |
| </div> | |
| <h3>Benchmark-backed</h3> | |
| <p>Scheduler picks aren't picked from a paper — they're picked from <em>real measured val_loss / val_acc</em> on distilbert / sst2, three seeds each. DLRS leads. OneCycle is flagged above cohort cutoff.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── How to use ─────────────────────────────────────────────────── --> | |
| <section class="lp-section" id="how"> | |
| <div class="lp-shell"> | |
| <div class="lp-section-head"> | |
| <div class="lp-section-eyebrow">how to use it</div> | |
| <h2 class="lp-section-title">Three strikes on the anvil.</h2> | |
| <p class="lp-section-sub"> | |
| Sixty seconds, three motions. The demo path the team built it around. | |
| </p> | |
| </div> | |
| <div class="lp-steps"> | |
| <div class="lp-step"> | |
| <div class="lp-step-text"> | |
| <span class="lp-step-num">Step One</span> | |
| <h3>Pick from the inventory.</h3> | |
| <p> | |
| The left rail is your loadout. Tap any optimizer, scheduler, technique, | |
| quantization, architecture, or inference engine. The instant you equip one, | |
| the graph re-runs <code style="font-family: var(--f-mono); font-size: 0.92em; color: var(--brass-1);">POST /resolve</code> and re-styles every other node by status. | |
| </p> | |
| <div class="quote"> | |
| "Pick <strong style="color: var(--brass-1);">QLoRA</strong>. Full Fine-Tune slams to <strong style="color: var(--rust);">blocked</strong>. | |
| bnb 4-bit shimmers <strong style="color: var(--amber);">conditional</strong> — ‘needed by QLoRA’." | |
| </div> | |
| </div> | |
| <div class="lp-step-art"> | |
| <!-- Illustration: inventory card sample --> | |
| <div style="width: 100%; max-width: 320px;"> | |
| <div class="inv-row tier-1 selected" style="--type-color: var(--t-technique);"> | |
| <div class="type-ic"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <div class="inv-name">QLoRA</div> | |
| <div class="inv-meta"><span style="color: var(--ember-2);">equipped</span></div> | |
| </div> | |
| <div class="tier-pip t1">T1</div> | |
| </div> | |
| <div class="inv-row tier-1 blocked" style="margin-top: 6px; --type-color: var(--t-technique);"> | |
| <div class="type-ic"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <div class="inv-name">Full Fine-Tune</div> | |
| <div class="inv-meta"><span style="color: var(--rust);">blocked · breaks with QLoRA</span></div> | |
| </div> | |
| <div class="tier-pip t1">T1</div> | |
| </div> | |
| <div class="inv-row tier-1 dim" style="margin-top: 6px; --type-color: var(--t-quantization);"> | |
| <div class="type-ic"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="4" y="13" width="3" height="7" rx="0.5"/> | |
| <rect x="10.5" y="9" width="3" height="11" rx="0.5"/> | |
| <rect x="17" y="5" width="3" height="15" rx="0.5"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <div class="inv-name">bnb 4-bit</div> | |
| <div class="inv-meta"><span style="color: var(--amber);">needed by QLoRA</span></div> | |
| </div> | |
| <div class="tier-pip t1">T1</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lp-step"> | |
| <div class="lp-step-text"> | |
| <span class="lp-step-num">Step Two</span> | |
| <h3>Read the recipe.</h3> | |
| <p> | |
| The right rail is your crafting window. Conflicts are scored in | |
| <strong style="color: var(--rust);">rust</strong>. Unmet requirements glow | |
| <strong style="color: var(--amber);">amber</strong> with a one-tap | |
| <em>+ add bnb 4-bit</em> button. Benchmark-backed scheduler picks list themselves | |
| by measured val_loss with the leader marked with a star. | |
| </p> | |
| <div class="quote"> | |
| Every entry shows the <strong style="color: var(--brass-1);">tier badge</strong> | |
| and a source link — so the credibility chain stays visible all the way through. | |
| </div> | |
| </div> | |
| <div class="lp-step-art"> | |
| <div style="width: 100%; max-width: 360px;"> | |
| <div class="entry conflict" style="margin-bottom: 8px;"> | |
| <div class="title conflict">QLoRA <span style="color: var(--bone-4);">↔</span> Full Fine-Tune</div> | |
| <div class="fix">QLoRA freezes the base model; Full Fine-Tune updates it. Pick one.</div> | |
| <div class="meta"> | |
| <span class="tier-badge t1">T1</span> | |
| <span style="color: var(--bone-4);">arxiv.org/abs/2305.14314</span> | |
| </div> | |
| </div> | |
| <div class="entry unmet"> | |
| <div class="title unmet">QLoRA needs <strong style="color: #fff5e8;">bnb 4-bit</strong></div> | |
| <div class="fix">QLoRA is defined as 4-bit NF4 base + LoRA adapters — load the base in bnb 4-bit.</div> | |
| <button class="add-btn" type="button"> | |
| <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg> | |
| add bnb 4-bit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lp-step"> | |
| <div class="lp-step-text"> | |
| <span class="lp-step-num">Step Three</span> | |
| <h3>Inspect the evidence.</h3> | |
| <p> | |
| Hover any node, edge, or recipe entry to surface the <em>verbatim quote</em> from | |
| its source and the tier badge it earned. T1 is Rick's own verified runs | |
| (immutable). T2 is community-corroborated. T3 is single-source — lives in | |
| the review queue until something else agrees. | |
| </p> | |
| <div class="quote"> | |
| The point of the tooltip is the source URL. The point of the graph is the | |
| decision. The point of the tier is so you know how much to trust both. | |
| </div> | |
| </div> | |
| <div class="lp-step-art"> | |
| <div style="width: 100%; max-width: 320px;"> | |
| <div class="evidence-tip" style="position: static; box-shadow: 0 14px 30px rgba(0,0,0,0.6);"> | |
| <div class="tip-head"> | |
| <span class="tip-name">AdamW 8-bit</span> | |
| <span class="tip-status blocked">blocked</span> | |
| </div> | |
| <div class="tip-reason"> | |
| <div class="tip-reason-label" style="color: var(--rust);">breaks with Per-Layer LR Rotation</div> | |
| <div class="tip-reason-fix">Pass custom <code style="font-family: var(--f-mono);">optimizer_grouped_parameters</code> — adamw_8bit's default decay/no-decay split silently no-ops per-layer LR.</div> | |
| <div class="quote">"adamw_8bit produces decay/no-decay param groups by default; per-layer LR rotation silently no-ops unless you pass them yourself."</div> | |
| <div class="tip-foot"> | |
| <span class="src-link">mempalace · rick</span> | |
| <span class="tier-badge t1">T1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── Tiers ──────────────────────────────────────────────────────── --> | |
| <section class="lp-section" id="tiers"> | |
| <div class="lp-shell"> | |
| <div class="lp-section-head"> | |
| <div class="lp-section-eyebrow">trust model</div> | |
| <h2 class="lp-section-title">Every claim earns its tier.</h2> | |
| <p class="lp-section-sub"> | |
| We don't assert nonsense as fact. Three tiers, three colors, three weights. | |
| The scraper feeds the bottom; corroboration promotes upward. | |
| </p> | |
| </div> | |
| <div class="lp-tiers"> | |
| <div class="lp-tier lp-tier-1"> | |
| <div class="lp-tier-coin">T1</div> | |
| <div class="lp-tier-label">Legendary · 1.0</div> | |
| <h4>Verified runs</h4> | |
| <p>Rick's own research notes and reproduced runs. <em>Immutable</em> — the scraper can never overwrite these, only add corroboration.</p> | |
| <div class="example">e.g. <span style="color: var(--bone-2);">Per-Layer LR Rotation × AdamW 8-bit</span> · mempalace://chaos-injection-trainer-notes</div> | |
| </div> | |
| <div class="lp-tier lp-tier-2"> | |
| <div class="lp-tier-coin">T2</div> | |
| <div class="lp-tier-label">Rare · 0.8</div> | |
| <h4>Community-confirmed</h4> | |
| <p>Official docs, or two-plus independent sources agree. The bulk of the workable graph.</p> | |
| <div class="example">e.g. <span style="color: var(--bone-2);">Muon → AdamW 8-bit</span> · kellerjordan.github.io/posts/muon</div> | |
| </div> | |
| <div class="lp-tier lp-tier-3"> | |
| <div class="lp-tier-coin">T3</div> | |
| <div class="lp-tier-label">Common · 0.5</div> | |
| <h4>Single-source</h4> | |
| <p>One scraped report, no corroboration yet. Lives in the review queue. Promotes when something else agrees, or when Rick signs off.</p> | |
| <div class="example">e.g. <span style="color: var(--bone-2);">Lion × bnb 8-bit divergence</span> · github.com/bitsandbytes issue</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── Scraper ─────────────────────────────────────────────────────── --> | |
| <section class="lp-section" id="scraper"> | |
| <div class="lp-shell"> | |
| <div class="lp-section-head"> | |
| <div class="lp-section-eyebrow">the live data layer</div> | |
| <h2 class="lp-section-title">The graph grows itself.</h2> | |
| <p class="lp-section-sub"> | |
| A Bright Data scraper hunts SERP results in English <em>and</em> Chinese, | |
| extracts (A, relation, B, conditions, fix, quote) tuples with Haiku, resolves | |
| them against canonical node aliases, and proposes them to the review queue. | |
| </p> | |
| </div> | |
| <div class="lp-scraper"> | |
| <div> | |
| <p> | |
| Watch the <strong style="color: var(--brass-1); font-style: normal;">Live Discoveries</strong> | |
| hearth at the bottom of the Forge while you work — new edges literally rise | |
| out of it as the scraper corroborates them. The graph is alive. | |
| </p> | |
| <p> | |
| English-only sources miss large chunks of the Chinese ML ecosystem. We | |
| cover both. The scraper writes nothing to T1 — that's Rick's territory. | |
| Single-source claims sit at T3 in the queue and only ascend with evidence. | |
| </p> | |
| </div> | |
| <div class="lp-pipeline"> | |
| <div class="lp-pipeline-step"> | |
| <span>SERP·en/zh</span> | |
| <span class="arrow">→</span> | |
| <span class="src">arxiv · github</span> | |
| </div> | |
| <div class="lp-pipeline-step"> | |
| <span>scrape_as_markdown</span> | |
| <span class="arrow">→</span> | |
| <span class="src">bright data</span> | |
| </div> | |
| <div class="lp-pipeline-step"> | |
| <span>extract tuple</span> | |
| <span class="arrow">→</span> | |
| <span class="src">haiku</span> | |
| </div> | |
| <div class="lp-pipeline-step"> | |
| <span>entity-resolve</span> | |
| <span class="arrow">→</span> | |
| <span class="src">canonical aliases</span> | |
| </div> | |
| <div class="lp-pipeline-step"> | |
| <span>review_queue</span> | |
| <span class="arrow">→</span> | |
| <span class="tier t3">T3</span> | |
| </div> | |
| <div class="lp-pipeline-step"> | |
| <span>corroborate</span> | |
| <span class="arrow">→</span> | |
| <span class="tier t2">T2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── Finale CTA ──────────────────────────────────────────────────── --> | |
| <section class="lp-finale"> | |
| <h2 class="lp-finale-title">Light the forge.</h2> | |
| <p class="lp-finale-sub">Ninety seconds. Ten components. One recipe that actually compiles.</p> | |
| <a href="index.html" class="lp-cta-primary"> | |
| Enter the Forge | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"> | |
| <path d="M5 12h14M13 6l6 6-6 6"/> | |
| </svg> | |
| </a> | |
| </section> | |
| <footer class="lp-foot lp-shell"> | |
| bright data · "web data unlocked" · 2026 | |
| · | |
| <a href="index.html">launch app</a> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |