Hugging Face's logo

Spaces:
Ex0bit
/
tensorbend
Running

App Files Community
tensorbend
File size: 5,398 Bytes
21a8eeb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f265480
 
21a8eeb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!DOCTYPE html>
<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>