| <!doctype html>
|
| <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>
|
|
|
