Download static/index.html from VIDraft/vkae: direct link, hf CLI and curl.
- Browser
- Download file 65.3 kB
-
https://huggingface.co/spaces/VIDraft/vkae/resolve/main/static/index.html
- Command line
-
hf download hf://spaces/VIDraft/vkae/static/index.html
-
curl -L -o index.html https://huggingface.co/spaces/VIDraft/vkae/resolve/main/static/index.html
65.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>VKAE-Gemma | VIDRAFT Kernel Acceleration Engine</title> | |
| <style> | |
| :root { | |
| color-scheme: light; | |
| --ink: #132238; | |
| --muted: #5d6f86; | |
| --line: #d9e4ee; | |
| --paper: #ffffff; | |
| --mist: #f2f7fb; | |
| --cyan: #13b8c8; | |
| --green: #2fbf71; | |
| --blue: #356cff; | |
| --rose: #f36b7f; | |
| --amber: #f1b643; | |
| --shadow: 0 20px 60px rgba(31, 64, 102, 0.14); | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: var(--ink); | |
| background: var(--mist); | |
| letter-spacing: 0; | |
| } | |
| button, input, select, textarea { font: inherit; } | |
| .shell { | |
| min-height: 100vh; | |
| background: | |
| radial-gradient(circle at 12% 14%, rgba(19, 184, 200, 0.18), transparent 26%), | |
| radial-gradient(circle at 82% 8%, rgba(53, 108, 255, 0.15), transparent 22%), | |
| linear-gradient(180deg, #f8fcff 0%, #edf5fb 54%, #ffffff 100%); | |
| } | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| background: rgba(255, 255, 255, 0.82); | |
| backdrop-filter: blur(18px); | |
| border-bottom: 1px solid rgba(217, 228, 238, 0.9); | |
| } | |
| .nav { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| min-height: 68px; | |
| padding: 0 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 18px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-weight: 780; | |
| font-size: 18px; | |
| } | |
| .mark { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 8px; | |
| background: conic-gradient(from 30deg, var(--blue), var(--cyan), var(--green), var(--amber), var(--blue)); | |
| box-shadow: 0 10px 28px rgba(19, 184, 200, 0.28); | |
| } | |
| .navlinks { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| color: var(--muted); | |
| font-size: 14px; | |
| } | |
| .navlinks a { | |
| color: inherit; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .button { | |
| appearance: none; | |
| border: 0; | |
| border-radius: 8px; | |
| min-height: 42px; | |
| padding: 0 16px; | |
| color: white; | |
| background: var(--ink); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| box-shadow: 0 14px 34px rgba(19, 34, 56, 0.18); | |
| } | |
| .button.secondary { | |
| background: white; | |
| color: var(--ink); | |
| border: 1px solid var(--line); | |
| box-shadow: none; | |
| } | |
| .hero { | |
| position: relative; | |
| max-width: 1180px; | |
| min-height: min(760px, calc(100vh - 70px)); | |
| margin: 0 auto; | |
| padding: 64px 22px 44px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); | |
| align-items: center; | |
| gap: 34px; | |
| } | |
| .hero h1 { | |
| margin: 0; | |
| max-width: 820px; | |
| font-size: clamp(44px, 7vw, 86px); | |
| line-height: 0.94; | |
| letter-spacing: 0; | |
| } | |
| .kicker { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-height: 34px; | |
| padding: 0 12px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.72); | |
| border: 1px solid var(--line); | |
| color: #24606a; | |
| font-weight: 700; | |
| font-size: 13px; | |
| margin-bottom: 20px; | |
| } | |
| .pulse-dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 999px; | |
| background: var(--green); | |
| box-shadow: 0 0 0 8px rgba(47, 191, 113, 0.14); | |
| } | |
| .hero-copy { | |
| margin: 22px 0 0; | |
| max-width: 690px; | |
| color: var(--muted); | |
| font-size: 20px; | |
| line-height: 1.58; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 30px; | |
| } | |
| .scene { | |
| position: relative; | |
| height: 520px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: rgba(255, 255, 255, 0.74); | |
| border: 1px solid rgba(217, 228, 238, 0.95); | |
| box-shadow: var(--shadow); | |
| } | |
| #flowCanvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .scene-readout { | |
| position: absolute; | |
| left: 20px; | |
| right: 20px; | |
| bottom: 20px; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .readout { | |
| background: rgba(255, 255, 255, 0.88); | |
| border: 1px solid rgba(217, 228, 238, 0.94); | |
| border-radius: 8px; | |
| padding: 14px; | |
| } | |
| .readout strong { | |
| display: block; | |
| font-size: 22px; | |
| line-height: 1; | |
| } | |
| .readout span { | |
| display: block; | |
| margin-top: 8px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| line-height: 1.35; | |
| } | |
| main { | |
| background: white; | |
| } | |
| section { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| padding: 66px 22px; | |
| } | |
| .section-head { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 24px; | |
| margin-bottom: 28px; | |
| } | |
| h2 { | |
| margin: 0; | |
| font-size: clamp(30px, 4vw, 48px); | |
| line-height: 1.02; | |
| letter-spacing: 0; | |
| } | |
| .section-head p { | |
| max-width: 520px; | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| .benchmark-grid { | |
| display: grid; | |
| grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); | |
| gap: 22px; | |
| align-items: stretch; | |
| } | |
| .panel { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--paper); | |
| box-shadow: 0 16px 48px rgba(40, 77, 116, 0.08); | |
| } | |
| .selector-panel { | |
| padding: 18px; | |
| } | |
| .selector-panel label { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 760; | |
| color: var(--muted); | |
| margin-bottom: 8px; | |
| } | |
| select, input, textarea { | |
| width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 12px 13px; | |
| background: white; | |
| color: var(--ink); | |
| outline: none; | |
| } | |
| textarea { | |
| min-height: 104px; | |
| resize: vertical; | |
| } | |
| .metric-stack { | |
| display: grid; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .metric-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 14px; | |
| padding: 14px 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| .metric-row span { color: var(--muted); } | |
| .metric-row strong { text-align: right; } | |
| .chart-panel { | |
| padding: 22px; | |
| min-height: 410px; | |
| } | |
| .bars { | |
| display: grid; | |
| gap: 22px; | |
| margin-top: 20px; | |
| } | |
| .bar-row { | |
| display: grid; | |
| grid-template-columns: 150px minmax(0, 1fr) 90px; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .bar-label { | |
| color: var(--muted); | |
| font-weight: 700; | |
| font-size: 14px; | |
| } | |
| .bar-track { | |
| position: relative; | |
| height: 52px; | |
| border-radius: 8px; | |
| background: #edf4f9; | |
| overflow: hidden; | |
| } | |
| .bar-fill { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 0; | |
| border-radius: 8px; | |
| transition: width 700ms cubic-bezier(.2, .8, .2, 1); | |
| } | |
| .bar-fill.base { background: linear-gradient(90deg, #95a5b8, #6f8198); } | |
| .bar-fill.vkae { background: linear-gradient(90deg, var(--cyan), var(--green)); } | |
| .bar-value { | |
| font-weight: 820; | |
| text-align: right; | |
| } | |
| .gain-band { | |
| margin-top: 28px; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .gain-box { | |
| min-height: 108px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: #fbfdff; | |
| } | |
| .gain-box strong { | |
| display: block; | |
| font-size: clamp(24px, 4vw, 40px); | |
| line-height: 1; | |
| } | |
| .gain-box span { | |
| display: block; | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.35; | |
| } | |
| .model-matrix { | |
| margin-top: 22px; | |
| display: grid; | |
| grid-template-columns: repeat(5, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .model-card { | |
| min-height: 162px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 16px; | |
| background: #fbfdff; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| } | |
| .model-card.measured { | |
| border-color: rgba(47, 191, 113, 0.55); | |
| background: linear-gradient(180deg, rgba(47, 191, 113, 0.08), #fbfdff 45%); | |
| } | |
| .model-card h3 { | |
| margin: 12px 0 8px; | |
| font-size: 16px; | |
| line-height: 1.2; | |
| } | |
| .model-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.42; | |
| } | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 28px; | |
| padding: 0 10px; | |
| border-radius: 999px; | |
| color: #235a35; | |
| background: rgba(47, 191, 113, 0.12); | |
| font-size: 12px; | |
| font-weight: 780; | |
| } | |
| .status-pill.queued, | |
| .status-pill.feasibility { | |
| color: #6a5015; | |
| background: rgba(241, 182, 67, 0.2); | |
| } | |
| .model-spec { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--line); | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .catalog-summary { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-bottom: 18px; | |
| } | |
| .catalog-summary div { | |
| min-height: 110px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: #fbfdff; | |
| } | |
| .catalog-summary strong { | |
| display: block; | |
| font-size: 38px; | |
| line-height: 1; | |
| } | |
| .catalog-summary span { | |
| display: block; | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .catalog-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 14px; | |
| } | |
| .catalog-card { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: #fbfdff; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| } | |
| .catalog-card h3 { | |
| margin: 0 0 8px; | |
| font-size: 20px; | |
| } | |
| .catalog-card p { | |
| margin: 0 0 14px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .repo-list { | |
| display: grid; | |
| gap: 7px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .repo-list li { | |
| min-width: 0; | |
| padding: 8px 10px; | |
| border: 1px solid #e3edf6; | |
| border-radius: 8px; | |
| background: white; | |
| color: #38536d; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 12px; | |
| overflow-wrap: anywhere; | |
| } | |
| .gpu-layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); | |
| gap: 18px; | |
| align-items: start; | |
| } | |
| .speed-chart, | |
| .gpu-grid { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fbfdff; | |
| padding: 18px; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| } | |
| .speed-chart h3, | |
| .gpu-grid h3 { | |
| margin: 0 0 14px; | |
| font-size: 20px; | |
| } | |
| .speed-row { | |
| display: grid; | |
| grid-template-columns: 150px minmax(0, 1fr) 86px; | |
| gap: 12px; | |
| align-items: center; | |
| padding: 12px 0; | |
| border-top: 1px solid #e4edf6; | |
| } | |
| .speed-row:first-of-type { | |
| border-top: 0; | |
| } | |
| .speed-name { | |
| color: #38536d; | |
| font-weight: 780; | |
| font-size: 14px; | |
| } | |
| .speed-track { | |
| height: 38px; | |
| border-radius: 8px; | |
| background: #edf4f9; | |
| overflow: hidden; | |
| } | |
| .speed-fill { | |
| height: 100%; | |
| width: 0; | |
| border-radius: 8px; | |
| background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); | |
| transition: width 700ms cubic-bezier(.2, .8, .2, 1); | |
| } | |
| .speed-value { | |
| text-align: right; | |
| color: var(--muted); | |
| font-weight: 780; | |
| font-size: 13px; | |
| } | |
| .gpu-card { | |
| padding: 14px 0; | |
| border-top: 1px solid #e4edf6; | |
| } | |
| .gpu-card:first-of-type { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| .gpu-card strong { | |
| display: block; | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| } | |
| .gpu-card dl { | |
| display: grid; | |
| grid-template-columns: 86px minmax(0, 1fr); | |
| gap: 7px 10px; | |
| margin: 0; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .gpu-card dt { | |
| color: var(--muted); | |
| font-weight: 760; | |
| } | |
| .gpu-card dd { | |
| margin: 0; | |
| color: #344e68; | |
| } | |
| .measured-layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); | |
| gap: 18px; | |
| align-items: start; | |
| } | |
| .measured-panel, | |
| .measurement-summary { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fbfdff; | |
| padding: 18px; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| } | |
| .legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 16px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| margin-bottom: 14px; | |
| } | |
| .legend span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 10px; | |
| border-radius: 999px; | |
| display: inline-block; | |
| } | |
| .legend .baseline-key { background: linear-gradient(90deg, #95a5b8, #6f8198); } | |
| .legend .after-key { background: linear-gradient(90deg, var(--cyan), var(--green)); } | |
| .legend .showcase-key { background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); } | |
| .legend .preview-key { background: linear-gradient(90deg, var(--amber), var(--rose)); } | |
| .compare-chart { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .compare-row { | |
| display: grid; | |
| gap: 9px; | |
| padding-top: 14px; | |
| border-top: 1px solid #e4edf6; | |
| } | |
| .compare-row:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| .compare-head { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 14px; | |
| align-items: baseline; | |
| } | |
| .compare-head strong { | |
| font-size: 15px; | |
| } | |
| .compare-head span { | |
| color: var(--muted); | |
| font-size: 12px; | |
| text-align: right; | |
| } | |
| .scope-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 24px; | |
| margin-top: 6px; | |
| padding: 0 9px; | |
| border-radius: 999px; | |
| font-size: 11px; | |
| font-weight: 820; | |
| white-space: nowrap; | |
| } | |
| .scope-pill.showcase { | |
| color: #0b5666; | |
| background: rgba(19, 184, 200, 0.14); | |
| border: 1px solid rgba(19, 184, 200, 0.32); | |
| } | |
| .scope-pill.preview, | |
| .scope-pill.smoke { | |
| color: #735017; | |
| background: rgba(241, 182, 67, 0.18); | |
| border: 1px solid rgba(241, 182, 67, 0.36); | |
| } | |
| .scope-pill.regression { | |
| color: #843244; | |
| background: rgba(243, 107, 127, 0.14); | |
| border: 1px solid rgba(243, 107, 127, 0.32); | |
| } | |
| .compare-bars { | |
| display: grid; | |
| gap: 7px; | |
| } | |
| .compare-bar { | |
| display: grid; | |
| grid-template-columns: 84px minmax(0, 1fr) 88px; | |
| gap: 10px; | |
| align-items: center; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 760; | |
| } | |
| .compare-track { | |
| height: 28px; | |
| border-radius: 8px; | |
| background: #edf4f9; | |
| overflow: hidden; | |
| } | |
| .compare-fill { | |
| height: 100%; | |
| min-width: 0; | |
| border-radius: 8px; | |
| transition: width 700ms cubic-bezier(.2, .8, .2, 1); | |
| } | |
| .compare-fill.baseline { background: linear-gradient(90deg, #95a5b8, #6f8198); } | |
| .compare-fill.after { background: linear-gradient(90deg, var(--cyan), var(--green)); } | |
| .compare-value { | |
| text-align: right; | |
| color: #344e68; | |
| font-weight: 820; | |
| } | |
| .compare-row.pending .compare-track { | |
| background: repeating-linear-gradient(135deg, #edf4f9 0, #edf4f9 10px, #e1ebf4 10px, #e1ebf4 20px); | |
| } | |
| .compare-row.showcase { | |
| padding: 16px; | |
| border: 1px solid rgba(19, 184, 200, 0.36); | |
| border-radius: 8px; | |
| background: linear-gradient(180deg, rgba(19, 184, 200, 0.08), #fbfdff 50%); | |
| } | |
| .compare-row.preview, | |
| .compare-row.smoke, | |
| .compare-row.regression { | |
| padding: 16px; | |
| border: 1px solid #e4edf6; | |
| border-radius: 8px; | |
| background: white; | |
| } | |
| .scope-note { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .summary-card { | |
| padding: 14px 0; | |
| border-top: 1px solid #e4edf6; | |
| } | |
| .summary-card:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| .summary-card strong { | |
| display: block; | |
| font-size: 28px; | |
| line-height: 1; | |
| } | |
| .summary-card span { | |
| display: block; | |
| margin-top: 8px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .pipeline { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 14px; | |
| } | |
| .stage { | |
| position: relative; | |
| min-height: 190px; | |
| padding: 18px; | |
| border-radius: 8px; | |
| border: 1px solid var(--line); | |
| background: #fbfdff; | |
| overflow: hidden; | |
| } | |
| .stage::before { | |
| content: ""; | |
| position: absolute; | |
| left: 18px; | |
| right: 18px; | |
| top: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); | |
| transform: translateX(-110%); | |
| animation: scan 3.6s ease-in-out infinite; | |
| } | |
| .stage:nth-child(2)::before { animation-delay: .3s; } | |
| .stage:nth-child(3)::before { animation-delay: .6s; } | |
| .stage:nth-child(4)::before { animation-delay: .9s; } | |
| @keyframes scan { | |
| 0%, 20% { transform: translateX(-110%); } | |
| 55%, 75% { transform: translateX(0); } | |
| 100% { transform: translateX(110%); } | |
| } | |
| .stage h3 { | |
| margin: 0 0 12px; | |
| font-size: 19px; | |
| } | |
| .stage p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| font-size: 14px; | |
| } | |
| .product-status { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); | |
| gap: 18px; | |
| align-items: stretch; | |
| } | |
| .launch-panel, | |
| .roadmap-panel { | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fbfdff; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| padding: 20px; | |
| } | |
| .launch-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-top: 18px; | |
| } | |
| .launch-card { | |
| min-height: 132px; | |
| border: 1px solid #e3edf6; | |
| border-radius: 8px; | |
| background: white; | |
| padding: 16px; | |
| } | |
| .launch-card strong { | |
| display: block; | |
| font-size: 18px; | |
| line-height: 1.2; | |
| } | |
| .launch-card span { | |
| display: block; | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .package-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .package-card { | |
| min-height: 226px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 18px; | |
| background: #fbfdff; | |
| box-shadow: 0 12px 30px rgba(40, 77, 116, 0.06); | |
| } | |
| .package-card h3 { | |
| margin: 10px 0 8px; | |
| font-size: 20px; | |
| line-height: 1.15; | |
| } | |
| .package-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .package-card ul { | |
| margin: 14px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .package-card li { | |
| min-height: 28px; | |
| padding: 7px 9px; | |
| border-radius: 8px; | |
| background: white; | |
| border: 1px solid #e3edf6; | |
| color: #38536d; | |
| font-size: 12px; | |
| line-height: 1.3; | |
| } | |
| .stage-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 26px; | |
| padding: 0 10px; | |
| border-radius: 999px; | |
| color: #0b5666; | |
| background: rgba(19, 184, 200, 0.14); | |
| border: 1px solid rgba(19, 184, 200, 0.28); | |
| font-size: 12px; | |
| font-weight: 820; | |
| } | |
| .roadmap-list { | |
| display: grid; | |
| gap: 12px; | |
| margin-top: 14px; | |
| } | |
| .roadmap-item { | |
| padding: 14px 0; | |
| border-top: 1px solid #e3edf6; | |
| } | |
| .roadmap-item:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| .roadmap-item strong { | |
| display: block; | |
| font-size: 16px; | |
| } | |
| .roadmap-item span { | |
| display: inline-flex; | |
| margin-top: 8px; | |
| min-height: 24px; | |
| align-items: center; | |
| padding: 0 9px; | |
| border-radius: 999px; | |
| background: rgba(241, 182, 67, 0.18); | |
| color: #735017; | |
| font-size: 11px; | |
| font-weight: 820; | |
| } | |
| .roadmap-item p { | |
| margin: 8px 0 0; | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .form-wrap { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); | |
| gap: 22px; | |
| align-items: start; | |
| } | |
| .service-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .service-card { | |
| position: relative; | |
| min-height: 128px; | |
| padding: 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| background: #fbfdff; | |
| transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 14px 34px rgba(34, 88, 130, 0.1); | |
| } | |
| .service-card.active { | |
| border-color: var(--cyan); | |
| box-shadow: inset 0 0 0 1px var(--cyan), 0 18px 36px rgba(19, 184, 200, 0.12); | |
| } | |
| .service-card input { | |
| position: absolute; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .service-card strong { | |
| display: block; | |
| font-size: 15px; | |
| line-height: 1.25; | |
| } | |
| .service-card span { | |
| display: block; | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.42; | |
| } | |
| .lead-panel { | |
| padding: 20px; | |
| } | |
| .fields { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .field.full { grid-column: 1 / -1; } | |
| .field label { | |
| display: block; | |
| margin-bottom: 7px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| font-weight: 760; | |
| } | |
| .consent { | |
| display: grid; | |
| grid-template-columns: 20px 1fr; | |
| gap: 10px; | |
| align-items: start; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| margin: 14px 0; | |
| } | |
| .consent input { | |
| width: 18px; | |
| height: 18px; | |
| margin: 1px 0 0; | |
| } | |
| .status { | |
| min-height: 28px; | |
| margin-top: 12px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| footer { | |
| padding: 34px 22px 52px; | |
| color: var(--muted); | |
| text-align: center; | |
| background: #ffffff; | |
| border-top: 1px solid var(--line); | |
| } | |
| .notice { | |
| margin-top: 16px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| @media (max-width: 920px) { | |
| .hero, | |
| .benchmark-grid, | |
| .product-status, | |
| .gpu-layout, | |
| .measured-layout, | |
| .form-wrap { | |
| grid-template-columns: 1fr; | |
| } | |
| .scene { height: 420px; } | |
| .model-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .catalog-grid { grid-template-columns: 1fr; } | |
| .launch-grid { grid-template-columns: 1fr; } | |
| .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .section-head { align-items: start; flex-direction: column; } | |
| } | |
| @media (max-width: 620px) { | |
| .navlinks { display: none; } | |
| .hero { padding-top: 42px; } | |
| .scene-readout, | |
| .gain-band, | |
| .model-matrix, | |
| .catalog-summary, | |
| .package-grid, | |
| .pipeline, | |
| .service-grid, | |
| .fields { | |
| grid-template-columns: 1fr; | |
| } | |
| .bar-row { | |
| grid-template-columns: 1fr; | |
| gap: 8px; | |
| } | |
| .compare-bar { | |
| grid-template-columns: 1fr; | |
| gap: 6px; | |
| } | |
| .compare-value { text-align: left; } | |
| .bar-value { text-align: left; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="shell"> | |
| <header> | |
| <nav class="nav"> | |
| <div class="brand"><span class="mark"></span><span>VKAE-Gemma</span></div> | |
| <div class="navlinks"> | |
| <a href="#product">Product</a> | |
| <a href="#benchmarks">Benchmarks</a> | |
| <a href="#modelMatrix">Models</a> | |
| <a href="#catalog">Catalog</a> | |
| <a href="#gpuGuide">GPU Guide</a> | |
| <a href="#l40sResults">Measured</a> | |
| <a href="#pipeline">Pipeline</a> | |
| <a href="#access">Private Access</a> | |
| <a class="button secondary" href="#access">Request Preview</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <div> | |
| <div class="kicker"><span class="pulse-dot"></span>VIDRAFT Kernel Acceleration Engine for Gemma</div> | |
| <h1>VKAE-Gemma-E4B is the first productized engine.</h1> | |
| <p class="hero-copy"> | |
| VKAE turns VIDRAFT's verified Gemma E4B acceleration recipe into a private-preview serving product. E2B, 12B, 26B-A4B, 31B, and Qwen follow as separate model-specific engine ports. | |
| </p> | |
| <div class="hero-actions"> | |
| <a class="button" href="#product">View Product Packages</a> | |
| <a class="button secondary" href="#access">Request Private Access</a> | |
| <a class="button secondary" href="https://huggingface.co/spaces/FINAL-Bench/VKUE" target="_blank" rel="noopener">Sibling ↗ VKUE · Ubiquity</a> | |
| </div> | |
| <p class="notice"> | |
| Product claims are intentionally scoped: E4B is the launch lane; every additional model family gets its own benchmark gate. | |
| </p> | |
| </div> | |
| <div class="scene" aria-label="Animated VKAE kernel flow visualization"> | |
| <canvas id="flowCanvas"></canvas> | |
| <div class="scene-readout"> | |
| <div class="readout"><strong id="heroGain">5.32x</strong><span>Showcase acceleration view</span></div> | |
| <div class="readout"><strong>Gemma</strong><span>First model-specialized engine</span></div> | |
| <div class="readout"><strong>Guarded</strong><span>PPL and validity gates stay separate</span></div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <main> | |
| <section id="vkae-leaderboard"> | |
| <div class="section-head"> | |
| <h2>VKAE Acceleration Leaderboard</h2> | |
| </div> | |
| <p class="notice" style="margin:-4px 0 14px">Single-GPU serving throughput, ranked. Baseline reference vs VIDRAFT optimized serving. Click a column header to sort.</p> | |
| <div style="overflow-x:auto;border:1px solid rgba(128,128,128,0.22);border-radius:12px"> | |
| <table style="width:100%;border-collapse:collapse;font-size:14px"> | |
| <thead> | |
| <tr style="text-align:left;background:rgba(128,128,128,0.10)"> | |
| <th style="padding:11px 12px">#</th> | |
| <th style="padding:11px 12px">Model</th> | |
| <th style="padding:11px 12px">Size</th> | |
| <th style="padding:11px 12px">Hardware</th> | |
| <th data-sort="baseline_tps" style="padding:11px 12px;text-align:right;cursor:pointer">Baseline tok/s</th> | |
| <th data-sort="vkae_tps" style="padding:11px 12px;text-align:right;cursor:pointer">VIDRAFT optimized tok/s ▾</th> | |
| <th data-sort="speedup" style="padding:11px 12px;text-align:right;cursor:pointer">Speedup</th> | |
| <th style="padding:11px 12px">Links</th> | |
| </tr> | |
| </thead> | |
| <tbody id="lbBody"><tr><td colspan="8" style="padding:14px;opacity:.6">Loading…</td></tr></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section id="product"> | |
| <div class="section-head"> | |
| <h2>Productization Status</h2> | |
| <p>VKAE-Gemma is moving from challenge proof to controlled customer delivery. The first commercial surface is E4B private preview; other models are sold as explicit porting tracks.</p> | |
| </div> | |
| <div class="product-status"> | |
| <div class="launch-panel"> | |
| <span class="stage-pill" id="productStage">Private Preview</span> | |
| <h3 id="productName">VKAE-Gemma-E4B</h3> | |
| <p class="notice" id="productPositioning"></p> | |
| <div class="launch-grid"> | |
| <div class="launch-card"><strong>Proof</strong><span id="productClaim">Challenge-verified E4B speedup with quality guard.</span></div> | |
| <div class="launch-card"><strong>Boundary</strong><span id="productBoundary">Other models require separate ports.</span></div> | |
| <div class="launch-card"><strong>Control</strong><span id="productControl">L40S-managed qualification lane.</span></div> | |
| </div> | |
| </div> | |
| <div class="roadmap-panel"> | |
| <h3>Engine Roadmap</h3> | |
| <div class="roadmap-list" id="engineRoadmap"></div> | |
| </div> | |
| </div> | |
| <div class="package-grid" id="packageGrid" aria-label="VKAE delivery packages"></div> | |
| </section> | |
| <section id="benchmarks"> | |
| <div class="section-head"> | |
| <h2>Claim-Scoped Performance</h2> | |
| <p>Only claim-ready model profiles show before/after throughput. Packaged preview models remain visible, but their raw harness numbers are blocked from product-speed claims until a model-specific VKAE recipe is promoted.</p> | |
| </div> | |
| <div class="benchmark-grid"> | |
| <div class="panel selector-panel"> | |
| <label for="modelSelect">Model profile</label> | |
| <select id="modelSelect"></select> | |
| <div class="metric-stack"> | |
| <div class="metric-row"><span>Baseline</span><strong id="baseMetric">-</strong></div> | |
| <div class="metric-row"><span>VKAE</span><strong id="vkaeMetric">-</strong></div> | |
| <div class="metric-row"><span>Quality</span><strong id="qualityMetric">Guarded</strong></div> | |
| <div class="metric-row"><span>Status</span><strong id="tagMetric">-</strong></div> | |
| </div> | |
| </div> | |
| <div class="panel chart-panel"> | |
| <h3 id="chartTitle">Gemma 4 E4B</h3> | |
| <div class="bars"> | |
| <div class="bar-row"> | |
| <div class="bar-label" id="baseLabel">Baseline</div> | |
| <div class="bar-track"><div class="bar-fill base" id="baseBar"></div></div> | |
| <div class="bar-value" id="baseValue">0 TPS</div> | |
| </div> | |
| <div class="bar-row"> | |
| <div class="bar-label" id="vkaeLabel">VKAE</div> | |
| <div class="bar-track"><div class="bar-fill vkae" id="vkaeBar"></div></div> | |
| <div class="bar-value" id="vkaeValue">0 TPS</div> | |
| </div> | |
| </div> | |
| <div class="gain-band"> | |
| <div class="gain-box"><strong id="gainValue">0x</strong><span>Relative throughput lift</span></div> | |
| <div class="gain-box"><strong id="tokenDelta">0</strong><span>Additional tokens per second</span></div> | |
| <div class="gain-box"><strong id="costDrop">0%</strong><span>Approximate token-cost reduction at same GPU rate</span></div> | |
| </div> | |
| <p class="notice" id="qualityNote"></p> | |
| </div> | |
| </div> | |
| <div class="model-matrix" id="modelMatrix" aria-label="Gemma model measurement matrix"></div> | |
| </section> | |
| <section id="catalog"> | |
| <div class="section-head"> | |
| <h2>Gemma 4 Model Catalog</h2> | |
| <p>The acceleration plan tracks the official Google `gemma-4-*` BF16 serving surface: base, instruct, and assistant variants. QAT, GGUF, and mobile-specific packages are excluded from this benchmark scope.</p> | |
| </div> | |
| <div class="catalog-summary"> | |
| <div><strong id="repoCount">15</strong><span>Official Google `gemma-4-*` BF16 serving repos</span></div> | |
| <div><strong>5</strong><span>Primary serving families</span></div> | |
| <div><strong>1</strong><span>Adjacent DiffusionGemma lane</span></div> | |
| </div> | |
| <div class="catalog-grid" id="catalogGrid"></div> | |
| </section> | |
| <section id="gpuGuide"> | |
| <div class="section-head"> | |
| <h2>GPU Sizing And Family Speed</h2> | |
| <p>Each Gemma 4 family gets a minimum and recommended BF16 serving lane. Measured TPS is shown only when available; otherwise the chart uses a planning speed index until hardware-specific runs replace it.</p> | |
| </div> | |
| <div class="gpu-layout"> | |
| <div class="speed-chart"> | |
| <h3>Full-Family Speed View</h3> | |
| <div id="familySpeedChart"></div> | |
| <p class="notice" id="benchmarkPlanNote"></p> | |
| </div> | |
| <div class="gpu-grid"> | |
| <h3>Minimum / Recommended GPU</h3> | |
| <div id="gpuSizingGrid"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="l40sResults"> | |
| <div class="section-head"> | |
| <h2>Measured Benchmark Evidence</h2> | |
| <p>Measured rows are separated by claim level. E4B uses the challenge reference path as its before baseline. E2B, 12B, 26B-A4B, and 31B package rows are raw harness checks only, not public VKAE before/after speedups.</p> | |
| </div> | |
| <div class="measured-layout"> | |
| <div class="measured-panel"> | |
| <div class="legend"> | |
| <span><i class="baseline-key"></i>Declared baseline</span> | |
| <span><i class="after-key"></i>VKAE path</span> | |
| <span><i class="showcase-key"></i>Optimized showcase</span> | |
| <span><i class="preview-key"></i>Preview / smoke</span> | |
| </div> | |
| <div class="compare-chart" id="measuredComparisonChart"></div> | |
| <p class="notice" id="measurementNotice"></p> | |
| </div> | |
| <div class="measurement-summary" id="measurementSummary"></div> | |
| </div> | |
| </section> | |
| <section id="pipeline"> | |
| <div class="section-head"> | |
| <h2>Kernel-Led Engine Stack</h2> | |
| <p>VKAE is positioned as a model-specialized engine: kernels, recipes, serving, and verifier gates are treated as one product surface.</p> | |
| </div> | |
| <div class="pipeline"> | |
| <div class="stage"><h3>Model Profile</h3><p>Capture Gemma-specific serving assumptions, context windows, quality guardrails, and hardware lanes.</p></div> | |
| <div class="stage"><h3>Kernel Path</h3><p>Route hot decode work through custom kernel and runtime patches instead of generic defaults.</p></div> | |
| <div class="stage"><h3>Serving Recipe</h3><p>Bind model, memory, batching, scheduling, and verifier settings into repeatable deployment recipes.</p></div> | |
| <div class="stage"><h3>Verification</h3><p>Keep artifact, private benchmark, PPL, and dashboard-valid status in separate lanes.</p></div> | |
| </div> | |
| </section> | |
| <section id="access"> | |
| <div class="section-head"> | |
| <h2>Request Private Preview</h2> | |
| <p>Choose the service path that matches your deployment: report, managed endpoint, private Docker evaluation, enterprise on-prem, or custom engine build.</p> | |
| </div> | |
| <div class="form-wrap"> | |
| <div> | |
| <div class="service-grid" id="serviceGrid"></div> | |
| <p class="notice"> | |
| Early access is staged to protect kernel IP while giving customers measurable before/after results. | |
| </p> | |
| </div> | |
| <form class="panel lead-panel" id="leadForm"> | |
| <div class="fields"> | |
| <div class="field"><label for="full_name">Name</label><input id="full_name" name="full_name" autocomplete="name" required /></div> | |
| <div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" required /></div> | |
| <div class="field"><label for="contact">Phone / Contact</label><input id="contact" name="contact" autocomplete="tel" /></div> | |
| <div class="field"><label for="company">Company</label><input id="company" name="company" autocomplete="organization" /></div> | |
| <div class="field"><label for="role">Role</label><input id="role" name="role" /></div> | |
| <div class="field"><label for="model_family">Model Family</label><input id="model_family" name="model_family" placeholder="Gemma, Qwen, Llama" /></div> | |
| <div class="field"><label for="model_name">Model Name</label><input id="model_name" name="model_name" placeholder="gemma-4-E4B-it" /></div> | |
| <div class="field"><label for="gpu_target">GPU / Cloud</label><input id="gpu_target" name="gpu_target" placeholder="A10G, L40S, H100, B200" /></div> | |
| <div class="field"><label for="monthly_tokens">Monthly Tokens</label><input id="monthly_tokens" name="monthly_tokens" placeholder="10M, 1B, 20B+" /></div> | |
| <div class="field"><label for="current_stack">Current Serving Stack</label><input id="current_stack" name="current_stack" placeholder="your current serving stack" /></div> | |
| <div class="field full"><label for="notes">Notes</label><textarea id="notes" name="notes" placeholder="Latency target, model size, deployment constraints, or benchmark goals"></textarea></div> | |
| </div> | |
| <label class="consent"> | |
| <input id="consent" name="consent" type="checkbox" required /> | |
| <span>I agree to share this information with VIDRAFT for private preview and benchmark follow-up.</span> | |
| </label> | |
| <button class="button" type="submit">Submit Private Preview Request</button> | |
| <div class="status" id="formStatus"></div> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| VKAE-Gemma by VIDRAFT. Kernel-native, model-specialized inference acceleration. | |
| </footer> | |
| <script> | |
| const state = { | |
| metrics: [], | |
| services: [], | |
| catalog: null, | |
| product: null, | |
| sizing: [], | |
| benchmarkPlan: null, | |
| l40sBenchmarks: null, | |
| }; | |
| async function fetchJson(url) { | |
| const response = await fetch(url); | |
| if (!response.ok) throw new Error(`Request failed: ${url}`); | |
| return response.json(); | |
| } | |
| function fmt(num) { | |
| if (num === null || num === undefined) return "N/A"; | |
| return Number(num).toLocaleString(undefined, { maximumFractionDigits: 2 }); | |
| } | |
| function hasMeasurement(item) { | |
| return item.claim_ready === true | |
| && Number.isFinite(Number(item.baseline_tps)) | |
| && Number.isFinite(Number(item.vkae_tps)); | |
| } | |
| function rowMeasured(row) { | |
| return Number.isFinite(Number(row.baseline_tps)) && Number.isFinite(Number(row.after_tps)); | |
| } | |
| function rowClaimReady(row) { | |
| return row.public_before_after === true || row.claim_ready === true || row.public_claim_level === "verified_showcase"; | |
| } | |
| function rowScope(row) { | |
| const family = String(row.family || row.model_id || "").toLowerCase(); | |
| const status = String(row.status || "").toLowerCase(); | |
| const hardware = String(row.hardware || "").toLowerCase(); | |
| const speedup = rowMeasured(row) | |
| ? Number(row.speedup || Number(row.after_tps) / Number(row.baseline_tps)) | |
| : null; | |
| if (family.includes("e4b") && status.includes("existing_a10g")) { | |
| return { | |
| className: "showcase", | |
| label: "Optimized VKAE profile", | |
| note: "Challenge-verified acceleration recipe. Read this as the proven VKAE showcase lane, not as a generic server benchmark for every Gemma size.", | |
| }; | |
| } | |
| if (speedup !== null && speedup < 1) { | |
| return { | |
| className: "regression", | |
| label: "Package validation only", | |
| note: "The raw baseline-vs-reference check is slower here. This row exists to document packaging and the next kernel target; it is not a VKAE acceleration claim.", | |
| }; | |
| } | |
| if (hardware.includes("5060") || status.includes("local")) { | |
| return { | |
| className: "smoke", | |
| label: "Package validation only", | |
| note: "Local RTX 5060 multimodal path. Useful for fit and sanity, but not comparable to the E4B challenge throughput row.", | |
| }; | |
| } | |
| return { | |
| className: "preview", | |
| label: "Package validation only", | |
| note: "Transformers baseline vs reference raw check. Model-specific VKAE kernels are still pending for this family, so this is not a public before-after performance claim.", | |
| }; | |
| } | |
| function renderServices() { | |
| const grid = document.getElementById("serviceGrid"); | |
| grid.innerHTML = ""; | |
| state.services.forEach((service) => { | |
| const label = document.createElement("label"); | |
| label.className = "service-card" + (service.default ? " active" : ""); | |
| label.innerHTML = ` | |
| <input type="checkbox" value="${service.id}" ${service.default ? "checked" : ""} /> | |
| <strong>${service.title}</strong> | |
| <span>${service.summary}</span> | |
| `; | |
| label.addEventListener("click", () => { | |
| setTimeout(() => label.classList.toggle("active", label.querySelector("input").checked), 0); | |
| }); | |
| grid.appendChild(label); | |
| }); | |
| } | |
| function renderProductization() { | |
| if (!state.product) return; | |
| const status = state.product.status || {}; | |
| document.getElementById("productStage").textContent = status.stage || "Private Preview"; | |
| document.getElementById("productName").textContent = status.name || "VKAE-Gemma-E4B"; | |
| document.getElementById("productPositioning").textContent = status.positioning || ""; | |
| document.getElementById("productClaim").textContent = status.primary_claim || ""; | |
| document.getElementById("productBoundary").textContent = status.production_boundary || ""; | |
| document.getElementById("productControl").textContent = status.control_plane || ""; | |
| const packages = document.getElementById("packageGrid"); | |
| packages.innerHTML = ""; | |
| (state.product.delivery_packages || []).forEach((item) => { | |
| const card = document.createElement("article"); | |
| card.className = "package-card"; | |
| card.innerHTML = ` | |
| <span class="stage-pill">${item.stage}</span> | |
| <h3>${item.title}</h3> | |
| <p>${item.summary}</p> | |
| <p class="notice">${item.best_for}</p> | |
| <ul>${(item.customer_gets || []).map((value) => `<li>${value}</li>`).join("")}</ul> | |
| `; | |
| packages.appendChild(card); | |
| }); | |
| const roadmap = document.getElementById("engineRoadmap"); | |
| roadmap.innerHTML = ""; | |
| (state.product.engine_roadmap || []).forEach((item) => { | |
| const row = document.createElement("article"); | |
| row.className = "roadmap-item"; | |
| row.innerHTML = ` | |
| <strong>${item.engine}</strong> | |
| <span>${item.stage}</span> | |
| <p>${item.goal}</p> | |
| <p>${item.next_gate}</p> | |
| `; | |
| roadmap.appendChild(row); | |
| }); | |
| } | |
| function renderModelMatrix() { | |
| const matrix = document.getElementById("modelMatrix"); | |
| matrix.innerHTML = ""; | |
| state.metrics.forEach((item) => { | |
| const measured = hasMeasurement(item); | |
| const rawAvailable = Number.isFinite(Number(item.baseline_tps)) && Number.isFinite(Number(item.vkae_tps)); | |
| const card = document.createElement("article"); | |
| card.className = `model-card ${item.measurement_status}`; | |
| card.innerHTML = ` | |
| <span class="status-pill ${item.measurement_status}">${item.measurement_status.replace("-", " ")}</span> | |
| <h3>${item.model}</h3> | |
| <p>${item.quality}</p> | |
| <div class="model-spec"> | |
| <span>${item.size || "Model"}</span> | |
| <strong>${measured ? `${(item.vkae_tps / item.baseline_tps).toFixed(2)}x` : (rawAvailable ? "raw only" : item.package_status || "pending")}</strong> | |
| </div> | |
| `; | |
| matrix.appendChild(card); | |
| }); | |
| } | |
| function renderCatalog() { | |
| if (!state.catalog) return; | |
| document.getElementById("repoCount").textContent = state.catalog.official_repo_count; | |
| const grid = document.getElementById("catalogGrid"); | |
| grid.innerHTML = ""; | |
| state.catalog.families.forEach((family) => { | |
| const card = document.createElement("article"); | |
| card.className = "catalog-card"; | |
| card.innerHTML = ` | |
| <h3>${family.family}</h3> | |
| <p>${family.serving_priority}</p> | |
| <ul class="repo-list"> | |
| ${family.repos.map((repo) => `<li>${repo}</li>`).join("")} | |
| </ul> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| state.catalog.adjacent.forEach((family) => { | |
| const card = document.createElement("article"); | |
| card.className = "catalog-card"; | |
| card.innerHTML = ` | |
| <h3>${family.family}</h3> | |
| <p>${family.note}</p> | |
| <ul class="repo-list"> | |
| ${family.repos.map((repo) => `<li>${repo}</li>`).join("")} | |
| </ul> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| function renderGpuGuide() { | |
| const chart = document.getElementById("familySpeedChart"); | |
| const grid = document.getElementById("gpuSizingGrid"); | |
| const maxIndex = Math.max(...state.sizing.map((item) => item.speed_index || 0), 1); | |
| chart.innerHTML = ""; | |
| grid.innerHTML = ""; | |
| state.sizing.forEach((item) => { | |
| const row = document.createElement("div"); | |
| const measured = Number.isFinite(Number(item.measured_tps)); | |
| const width = Math.max(8, ((item.speed_index || 0) / maxIndex) * 100); | |
| row.className = "speed-row"; | |
| row.innerHTML = ` | |
| <div class="speed-name">${item.family}</div> | |
| <div class="speed-track"><div class="speed-fill" style="width:${width}%"></div></div> | |
| <div class="speed-value">${measured ? `${fmt(item.measured_tps)} TPS` : `idx ${item.speed_index}`}</div> | |
| `; | |
| chart.appendChild(row); | |
| const card = document.createElement("article"); | |
| card.className = "gpu-card"; | |
| card.innerHTML = ` | |
| <strong>${item.family}</strong> | |
| <dl> | |
| <dt>Min</dt><dd>${item.min_gpu}</dd> | |
| <dt>Rec</dt><dd>${item.recommended_gpu}</dd> | |
| <dt>Path</dt><dd>${item.precision_path}</dd> | |
| <dt>Status</dt><dd>${item.measurement_status}</dd> | |
| </dl> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| document.getElementById("benchmarkPlanNote").textContent = | |
| state.benchmarkPlan?.claim_boundary || "Planning index is not measured TPS."; | |
| } | |
| function renderMeasuredResults() { | |
| const data = state.l40sBenchmarks || {}; | |
| const rows = Array.isArray(data.rows) ? data.rows : []; | |
| const chart = document.getElementById("measuredComparisonChart"); | |
| const summary = document.getElementById("measurementSummary"); | |
| const notice = document.getElementById("measurementNotice"); | |
| const measuredRows = rows.filter(rowMeasured); | |
| const claimRows = measuredRows.filter(rowClaimReady); | |
| const rawRows = measuredRows.filter((row) => !rowClaimReady(row)); | |
| const maxTps = Math.max( | |
| ...claimRows.flatMap((row) => [Number(row.baseline_tps) || 0, Number(row.after_tps) || 0]), | |
| 1 | |
| ); | |
| chart.innerHTML = ""; | |
| rows.forEach((row) => { | |
| const measured = rowMeasured(row); | |
| const baseline = Number(row.baseline_tps); | |
| const after = Number(row.after_tps); | |
| const claimReady = rowClaimReady(row); | |
| const baselineWidth = measured && claimReady ? Math.max(6, (baseline / maxTps) * 100) : 0; | |
| const afterWidth = measured && claimReady ? Math.max(6, (after / maxTps) * 100) : 0; | |
| const speedup = measured ? (row.speedup || after / baseline) : null; | |
| const scope = rowScope(row); | |
| const rawLine = measured && !claimReady | |
| ? `<p class="scope-note"><strong>Raw harness check only:</strong> ${fmt(baseline)} TPS reference check / ${fmt(after)} TPS preview path / ${Number(speedup).toFixed(3)}x. This is package validation data, not a VKAE before-after claim.</p>` | |
| : ""; | |
| const packageLine = row.package_url | |
| ? `<p class="scope-note"><strong>Preview bundle:</strong> <a href="${row.package_url}">download package</a>${row.package_sha256 ? ` / SHA256 ${row.package_sha256.slice(0, 12)}...` : ""}</p>` | |
| : ""; | |
| const item = document.createElement("article"); | |
| item.className = `compare-row ${measured ? "measured" : "pending"} ${claimReady ? "claim-ready" : "raw-only"} ${scope.className}`; | |
| item.innerHTML = ` | |
| <div class="compare-head"> | |
| <div> | |
| <strong>${row.family || row.model_id || "Gemma model"}</strong> | |
| <div class="scope-pill ${scope.className}">${scope.label}</div> | |
| </div> | |
| <span>${row.hardware || data.hardware || "hardware TBD"} / ${row.status || data.status || "pending"}${measured && claimReady ? ` / ${Number(speedup).toFixed(2)}x` : ""}</span> | |
| </div> | |
| <div class="compare-bars" ${claimReady ? "" : 'aria-hidden="true"'}> | |
| <div class="compare-bar"> | |
| <span>${claimReady ? "Baseline" : "Raw baseline"}</span> | |
| <div class="compare-track"><div class="compare-fill baseline" style="width:${baselineWidth}%"></div></div> | |
| <span class="compare-value">${measured && claimReady ? `${fmt(baseline)} TPS` : (measured ? "raw only" : "Queued")}</span> | |
| </div> | |
| <div class="compare-bar"> | |
| <span>${claimReady ? "VKAE" : "Preview"}</span> | |
| <div class="compare-track"><div class="compare-fill after" style="width:${afterWidth}%"></div></div> | |
| <span class="compare-value">${measured && claimReady ? `${fmt(after)} TPS` : (measured ? "raw only" : "Queued")}</span> | |
| </div> | |
| </div> | |
| <p class="scope-note"><strong>Baseline:</strong> ${row.baseline_stack || "declared reference stack"} / <strong>VKAE:</strong> ${row.after_stack || "declared VKAE path"}</p> | |
| ${rawLine} | |
| ${packageLine} | |
| <p class="scope-note">${scope.note}</p> | |
| `; | |
| chart.appendChild(item); | |
| }); | |
| if (!rows.length) { | |
| chart.innerHTML = `<article class="compare-row pending"><div class="compare-head"><strong>L40S job</strong><span>not started</span></div><p class="notice">No benchmark artifact has been published yet.</p></article>`; | |
| } | |
| const fastest = measuredRows | |
| .slice() | |
| .sort((a, b) => Number(b.after_tps) - Number(a.after_tps))[0]; | |
| const optimizedRows = claimRows; | |
| const previewRows = rawRows; | |
| summary.innerHTML = ` | |
| <div class="summary-card"><strong>${data.status || "pending"}</strong><span>Benchmark artifact status</span></div> | |
| <div class="summary-card"><strong>${optimizedRows.length}/${rows.length || 5}</strong><span>Rows allowed as public before/after claims</span></div> | |
| <div class="summary-card"><strong>${previewRows.length}</strong><span>Raw package-validation rows excluded from performance claims</span></div> | |
| <div class="summary-card"><strong>${fastest ? fastest.family : data.hardware || "L40S"}</strong><span>${fastest && rowClaimReady(fastest) ? `${fmt(fastest.after_tps)} TPS fastest claim-ready row` : "No raw-only row is promoted by speed"}</span></div> | |
| `; | |
| notice.textContent = data.claim_boundary || "Only optimized showcase rows should be used as public VKAE performance claims; preview rows are engineering measurements."; | |
| } | |
| function updateChart(index) { | |
| const item = state.metrics[index]; | |
| const measured = hasMeasurement(item); | |
| const baselineTps = Number(item.baseline_tps); | |
| const vkaeTps = Number(item.vkae_tps); | |
| const max = measured ? Math.max(baselineTps, vkaeTps) : 1; | |
| const basePct = measured ? Math.max(8, (baselineTps / max) * 100) : 14; | |
| const vkaePct = measured ? Math.max(8, (vkaeTps / max) * 100) : 14; | |
| const gain = measured ? vkaeTps / baselineTps : null; | |
| const delta = measured ? vkaeTps - baselineTps : null; | |
| const cost = measured ? Math.max(0, (1 - (baselineTps / vkaeTps)) * 100) : null; | |
| document.getElementById("chartTitle").textContent = item.model; | |
| document.getElementById("baseLabel").textContent = item.baseline_label; | |
| document.getElementById("vkaeLabel").textContent = item.vkae_label; | |
| document.getElementById("baseValue").textContent = measured ? `${fmt(baselineTps)} TPS` : "Pending"; | |
| document.getElementById("vkaeValue").textContent = measured ? `${fmt(vkaeTps)} TPS` : "Pending"; | |
| document.getElementById("baseMetric").textContent = measured ? `${fmt(baselineTps)} TPS` : "Claim gate pending"; | |
| document.getElementById("vkaeMetric").textContent = measured ? `${fmt(vkaeTps)} TPS` : (item.package_status || "Package / benchmark pending"); | |
| document.getElementById("qualityMetric").textContent = item.ppl ? `PPL ${fmt(item.ppl)}` : "Workload-specific"; | |
| document.getElementById("tagMetric").textContent = item.tag; | |
| document.getElementById("gainValue").textContent = measured ? `${gain.toFixed(2)}x` : "Not claimed"; | |
| document.getElementById("heroGain").textContent = measured ? `${gain.toFixed(2)}x` : "Multi"; | |
| document.getElementById("tokenDelta").textContent = measured ? `+${fmt(delta)}` : "L40S"; | |
| document.getElementById("costDrop").textContent = measured ? `${Math.round(cost)}%` : "TBD"; | |
| document.getElementById("qualityNote").textContent = item.quality; | |
| requestAnimationFrame(() => { | |
| document.getElementById("baseBar").style.width = `${basePct}%`; | |
| document.getElementById("vkaeBar").style.width = `${vkaePct}%`; | |
| }); | |
| } | |
| function setupForm() { | |
| const form = document.getElementById("leadForm"); | |
| const status = document.getElementById("formStatus"); | |
| form.addEventListener("submit", async (event) => { | |
| event.preventDefault(); | |
| const formData = new FormData(form); | |
| const selected = [...document.querySelectorAll("#serviceGrid input:checked")].map((item) => item.value); | |
| const payload = Object.fromEntries(formData.entries()); | |
| payload.service_types = selected; | |
| payload.consent = document.getElementById("consent").checked; | |
| status.textContent = "Submitting request..."; | |
| try { | |
| const response = await fetch("/api/leads", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify(payload), | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok) throw new Error(data.detail || "Submit failed"); | |
| status.textContent = `Received. Request id: ${data.lead_id}`; | |
| form.reset(); | |
| document.querySelectorAll("#serviceGrid input").forEach((input) => { | |
| input.checked = state.services.find((service) => service.id === input.value)?.default || false; | |
| input.closest(".service-card").classList.toggle("active", input.checked); | |
| }); | |
| } catch (error) { | |
| status.textContent = error.message; | |
| } | |
| }); | |
| } | |
| function setupCanvas() { | |
| const canvas = document.getElementById("flowCanvas"); | |
| const ctx = canvas.getContext("2d"); | |
| const mouse = { x: 0.5, y: 0.5 }; | |
| const nodes = Array.from({ length: 42 }, (_, i) => ({ | |
| x: Math.random(), | |
| y: Math.random(), | |
| r: 2 + Math.random() * 4, | |
| speed: 0.0015 + Math.random() * 0.002, | |
| hue: i % 4, | |
| })); | |
| canvas.addEventListener("pointermove", (event) => { | |
| const rect = canvas.getBoundingClientRect(); | |
| mouse.x = (event.clientX - rect.left) / rect.width; | |
| mouse.y = (event.clientY - rect.top) / rect.height; | |
| }); | |
| function resize() { | |
| const rect = canvas.getBoundingClientRect(); | |
| canvas.width = Math.floor(rect.width * devicePixelRatio); | |
| canvas.height = Math.floor(rect.height * devicePixelRatio); | |
| ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); | |
| } | |
| function color(hue, alpha) { | |
| return [ | |
| `rgba(53,108,255,${alpha})`, | |
| `rgba(19,184,200,${alpha})`, | |
| `rgba(47,191,113,${alpha})`, | |
| `rgba(241,182,67,${alpha})`, | |
| ][hue]; | |
| } | |
| function frame(t) { | |
| const rect = canvas.getBoundingClientRect(); | |
| const w = rect.width; | |
| const h = rect.height; | |
| ctx.clearRect(0, 0, w, h); | |
| ctx.fillStyle = "rgba(255,255,255,0.62)"; | |
| ctx.fillRect(0, 0, w, h); | |
| nodes.forEach((node, i) => { | |
| node.x += node.speed; | |
| node.y += Math.sin(t * 0.001 + i) * 0.0006; | |
| if (node.x > 1.08) node.x = -0.08; | |
| const px = node.x * w; | |
| const py = node.y * h; | |
| const pull = Math.max(0, 1 - Math.hypot(node.x - mouse.x, node.y - mouse.y) * 2.5); | |
| ctx.beginPath(); | |
| ctx.arc(px, py, node.r + pull * 6, 0, Math.PI * 2); | |
| ctx.fillStyle = color(node.hue, 0.36 + pull * 0.22); | |
| ctx.fill(); | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| const other = nodes[j]; | |
| const dx = (node.x - other.x) * w; | |
| const dy = (node.y - other.y) * h; | |
| const dist = Math.hypot(dx, dy); | |
| if (dist < 110) { | |
| ctx.strokeStyle = color(node.hue, 0.16 * (1 - dist / 110)); | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| ctx.moveTo(px, py); | |
| ctx.lineTo(other.x * w, other.y * h); | |
| ctx.stroke(); | |
| } | |
| } | |
| }); | |
| const lanes = [0.25, 0.42, 0.59, 0.76]; | |
| lanes.forEach((lane, i) => { | |
| const y = lane * h + Math.sin(t * 0.002 + i) * 10; | |
| const grad = ctx.createLinearGradient(0, y, w, y); | |
| grad.addColorStop(0, "rgba(53,108,255,0)"); | |
| grad.addColorStop(0.5, color(i, 0.22)); | |
| grad.addColorStop(1, "rgba(47,191,113,0)"); | |
| ctx.strokeStyle = grad; | |
| ctx.lineWidth = 3; | |
| ctx.beginPath(); | |
| ctx.moveTo(0, y); | |
| for (let x = 0; x <= w; x += 18) { | |
| ctx.lineTo(x, y + Math.sin(x * 0.018 + t * 0.003 + i) * 16); | |
| } | |
| ctx.stroke(); | |
| }); | |
| requestAnimationFrame(frame); | |
| } | |
| resize(); | |
| addEventListener("resize", resize); | |
| requestAnimationFrame(frame); | |
| } | |
| async function init() { | |
| setupCanvas(); | |
| setupForm(); | |
| const [metrics, services, catalog, product] = await Promise.all([ | |
| fetchJson("/api/metrics"), | |
| fetchJson("/api/service-types"), | |
| fetchJson("/api/model-catalog"), | |
| fetchJson("/api/productization"), | |
| ]); | |
| state.metrics = metrics.series; | |
| state.services = services.service_types; | |
| state.sizing = metrics.gpu_sizing || []; | |
| state.benchmarkPlan = metrics.benchmark_plan || null; | |
| state.l40sBenchmarks = metrics.l40s_benchmarks || null; | |
| state.catalog = catalog; | |
| state.product = product; | |
| renderServices(); | |
| renderProductization(); | |
| renderModelMatrix(); | |
| renderCatalog(); | |
| renderGpuGuide(); | |
| renderMeasuredResults(); | |
| const select = document.getElementById("modelSelect"); | |
| state.metrics.forEach((item, index) => { | |
| const option = document.createElement("option"); | |
| option.value = index; | |
| option.textContent = `${item.model} - ${item.claim_ready ? "claim-ready" : item.measurement_status}`; | |
| select.appendChild(option); | |
| }); | |
| select.addEventListener("change", () => updateChart(Number(select.value))); | |
| const defaultIndex = Math.max(0, state.metrics.findIndex((item) => item.claim_ready === true)); | |
| select.value = defaultIndex; | |
| updateChart(defaultIndex); | |
| } | |
| init().catch((error) => { | |
| document.body.insertAdjacentHTML("afterbegin", `<div style="padding:16px;background:#fff3f3;color:#8a1f2d">${error.message}</div>`); | |
| }); | |
| </script> | |
| <script> | |
| (async function(){ | |
| try{ | |
| const res = await fetch("/api/metrics"); const d = await res.json(); | |
| let rows = (d.series||[]).filter(x=>Number.isFinite(Number(x.vkae_tps))&&Number.isFinite(Number(x.baseline_tps))&&Number(x.baseline_tps)>0); | |
| rows.forEach(x=>{ x.speedup = Number(x.vkae_tps)/Number(x.baseline_tps); }); | |
| let key="vkae_tps"; | |
| const body=document.getElementById("lbBody"); | |
| const num=(v)=>Number(v).toLocaleString(undefined,{maximumFractionDigits:1}); | |
| function render(){ | |
| rows.sort((a,b)=>Number(b[key])-Number(a[key])); | |
| body.innerHTML=""; | |
| rows.forEach((x,i)=>{ | |
| const top=i===0; | |
| const tr=document.createElement("tr"); | |
| tr.style.borderTop="1px solid rgba(128,128,128,0.20)"; | |
| if(top) tr.style.background="rgba(255,196,55,0.16)"; | |
| tr.innerHTML= | |
| `<td style="padding:10px 12px;font-weight:600">${top?'🥇 ':''}${i+1}</td>`+ | |
| `<td style="padding:10px 12px;font-weight:${top?600:500}">${x.model||x.model_id||'-'}</td>`+ | |
| `<td style="padding:10px 12px;opacity:.75">${x.size||'-'}</td>`+ | |
| `<td style="padding:10px 12px;opacity:.75">${x.hardware||'-'}</td>`+ | |
| `<td style="padding:10px 12px;text-align:right">${num(x.baseline_tps)}</td>`+ | |
| `<td style="padding:10px 12px;text-align:right;font-weight:600">${num(x.vkae_tps)}</td>`+ | |
| `<td style="padding:10px 12px;text-align:right"><span style="background:rgba(80,180,120,.20);padding:2px 9px;border-radius:20px;white-space:nowrap">${x.speedup.toFixed(1)}x</span></td>`+ | |
| `<td style="padding:10px 12px;white-space:nowrap;font-size:16px">`+ | |
| (x.docker_url?`<a href="${x.docker_url}" target="_blank" rel="noopener" title="Docker image" style="text-decoration:none;margin-right:8px">🐳</a>`:'')+ | |
| (x.hf_url?`<a href="${x.hf_url}" target="_blank" rel="noopener" title="Hugging Face model card" style="text-decoration:none">🤗</a>`:'')+ | |
| ((!x.docker_url&&!x.hf_url)?`<span style="opacity:.3">—</span>`:'')+ | |
| `</td>`; | |
| body.appendChild(tr); | |
| }); | |
| } | |
| document.querySelectorAll('#vkae-leaderboard th[data-sort]').forEach(th=>{ | |
| th.style.userSelect="none"; | |
| th.addEventListener('click',()=>{ key=th.getAttribute('data-sort'); render(); }); | |
| }); | |
| render(); | |
| }catch(e){ const b=document.getElementById("lbBody"); if(b) b.innerHTML='<tr><td colspan="8" style="padding:14px;opacity:.6">Leaderboard unavailable.</td></tr>'; } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |