Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>TensorBend — Shader Tests & Profiler</title> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { --bg: #0a0a10; --bg2: #12121e; --border: #222238; --text: #e0e0ee; --dim: #666680; --green: #4ade80; --red: #ef4444; --blue: #4a9eff; --orange: #f59e0b; } | |
| body { background: var(--bg); color: var(--text); font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; padding: 24px; } | |
| h1 { font-size: 1.2rem; margin-bottom: 4px; } | |
| h2 { font-size: 0.9rem; color: var(--blue); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; } | |
| .subtitle { color: var(--dim); font-size: 0.75rem; margin-bottom: 16px; } | |
| .tabs { display: flex; gap: 2px; margin-bottom: 16px; } | |
| .tab { padding: 8px 20px; background: var(--bg2); border: 1px solid var(--border); color: var(--dim); cursor: pointer; font-size: 0.8rem; font-weight: 600; } | |
| .tab:first-child { border-radius: 6px 0 0 6px; } | |
| .tab:last-child { border-radius: 0 6px 6px 0; } | |
| .tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } | |
| .panel { display: none; } | |
| .panel.active { display: block; } | |
| .test-row { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; } | |
| .test-icon { font-size: 1rem; width: 20px; text-align: center; } | |
| .test-name { flex: 1; } | |
| .test-err { color: var(--dim); font-size: 0.75rem; } | |
| .test-detail { color: var(--red); font-size: 0.7rem; margin-top: 2px; } | |
| .pass { color: var(--green); } | |
| .fail { color: var(--red); } | |
| .pending { color: var(--dim); } | |
| .summary { padding: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; } | |
| .summary-line { display: flex; justify-content: space-between; padding: 2px 0; } | |
| .bar-track { height: 14px; background: var(--bg); border-radius: 3px; overflow: hidden; position: relative; margin: 2px 0; } | |
| .bar-fill { height: 100%; border-radius: 3px; } | |
| .bar-label { position: absolute; right: 4px; top: 0; font-size: 0.65rem; line-height: 14px; color: var(--text); } | |
| .prof-row { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 2px; font-size: 0.75rem; } | |
| .prof-name { flex: 1; min-width: 200px; } | |
| .prof-time { width: 80px; text-align: right; color: var(--orange); } | |
| .prof-pct { width: 50px; text-align: right; color: var(--dim); } | |
| .prof-bar { flex: 1; max-width: 300px; } | |
| button.run-btn { padding: 10px 24px; background: var(--blue); color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 0.85rem; } | |
| button.run-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| button.run-btn:hover:not(:disabled) { filter: brightness(1.15); } | |
| #log { margin-top: 12px; padding: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; font-size: 0.7rem; color: var(--dim); } | |
| </style> | |
| <script type="module" crossorigin src="/assets/test-DQDfUwQY.js"></script> | |
| <link rel="modulepreload" crossorigin href="/assets/gpu-ops-flxI8RuZ.js"> | |
| </head> | |
| <body> | |
| <h1>TensorBend Shader Tests & Profiler</h1> | |
| <p class="subtitle">Validates every WGSL compute shader against CPU reference implementations</p> | |
| <div class="tabs"> | |
| <div class="tab active" data-panel="tests">Shader Tests</div> | |
| <div class="tab" data-panel="profiler">Profiler</div> | |
| <div class="tab" data-panel="benchmark">Benchmark</div> | |
| </div> | |
| <div id="tests" class="panel active"> | |
| <button class="run-btn" id="runTests">Run All Shader Tests</button> | |
| <div id="testResults" style="margin-top: 12px;"></div> | |
| <div id="testSummary"></div> | |
| </div> | |
| <div id="profiler" class="panel"> | |
| <p style="color: var(--dim); margin-bottom: 12px; font-size: 0.8rem;"> | |
| Profiles a single forward pass with per-operation timing. | |
| Requires a loaded model — enter repo below and load first. | |
| </p> | |
| <div style="display: flex; gap: 8px; margin-bottom: 12px; align-items: center;"> | |
| <input type="text" id="profRepo" value="Intel/Qwen3.5-2B-int4-AutoRound" | |
| style="flex:1; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: inherit;" /> | |
| <button class="run-btn" id="loadAndProfile">Load & Profile</button> | |
| </div> | |
| <div id="profStatus" style="color: var(--dim); margin-bottom: 8px;"></div> | |
| <div id="profCategories"></div> | |
| <h2 id="topOpsTitle" style="display:none;">Top Operations</h2> | |
| <div id="profTopOps"></div> | |
| </div> | |
| <div id="benchmark" class="panel"> | |
| <p style="color: var(--dim); margin-bottom: 12px; font-size: 0.8rem;"> | |
| Measures GPTQ matvec memory bandwidth at model-realistic sizes. | |
| Compares regular vs split-K dispatch strategies. | |
| </p> | |
| <button class="run-btn" id="runBenchmark">Run GPTQ Benchmark</button> | |
| <div id="bmResults" style="margin-top: 12px;"></div> | |
| </div> | |
| <div id="log"></div> | |
| </body> | |
| </html> | |