github/tinygrad
1
1
Fork 0
mirror of https://github.com/tinygrad/tinygrad.git synced 2026-01-23 05:48:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

viz: generic stuff from gpu counters ui (#11358)

Browse Source 
* viz: generic stuff from gpu counters ui

* move pointer

* pre fetch

* move timeout
This commit is contained in:
qazal
2025-07-24 20:29:24 +03:00
committed by GitHub
parent 3b3de8df61
commit 519f1d13cc
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
tinygrad/viz/index.html
View File

@@ -215,11 +215,10 @@
#device-list > div {
min-height: 32px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
display: flex;
cursor: pointer;
}
#device-list > div:hover {
background-color: rgba(20, 23, 35, 0.3);
@@ -238,10 +237,10 @@
</svg>
</button>
</div>
<div class="progress-message"></div>
<div class="container ctx-list-parent"><div class="ctx-list"></div></div>
<div class="view profiler"></div>
<div class="view graph">
<div class="progress-message">Rendering new layout...</div>
<svg id="graph-svg" preserveAspectRatio="xMidYMid meet">
<g id="render">
<g id="edges"></g>

9
tinygrad/viz/js/index.js
View File

@@ -25,6 +25,10 @@ function intersectRect(r1, r2) {
let [workerUrl, worker, timeout] = [null, null, null];
async function renderDag(graph, additions, recenter=false) {
// start calculating the new layout (non-blocking)
const progressMessage = document.querySelector(".progress-message");
progressMessage.innerText = "Rendering new graph...";
if (timeout != null) clearTimeout(timeout);
timeout = setTimeout(() => {progressMessage.style.display = "block"}, 2000);
if (worker == null) {
const resp = await Promise.all(["/assets/dagrejs.github.io/project/dagre/latest/dagre.min.js","/js/worker.js"].map(u => fetch(u)));
workerUrl = URL.createObjectURL(new Blob([(await Promise.all(resp.map((r) => r.text()))).join("\n")], { type: "application/javascript" }));
@@ -33,9 +37,6 @@ async function renderDag(graph, additions, recenter=false) {
worker.terminate();
worker = new Worker(workerUrl);
}
if (timeout != null) clearTimeout(timeout);
const progressMessage = document.querySelector(".progress-message");
timeout = setTimeout(() => {progressMessage.style.display = "block"}, 2000);
worker.postMessage({graph, additions, ctxs});
worker.onmessage = (e) => {
displayGraph("graph");
@@ -171,6 +172,7 @@ async function renderProfiler() {
const startY = offsetY+(levelHeight*timeline.maxDepth)+padding/2;
let area = mem.shapes.length === 0 ? 0 : areaScale(mem.peak);
if (area === 0) div.style.pointerEvents = "none";
else div.style.cursor = "pointer";
if (k === focusedDevice) {
// expand memory graph for the focused device
area = maxArea*4;
@@ -228,6 +230,7 @@ async function renderProfiler() {
ctx.fillRect(x, e.y, width, e.height);
rectLst.push({ y0:e.y, y1:e.y+e.height, x0:x, x1:x+width, arg:e.arg });
// add label
if (e.label == null) continue;
ctx.textAlign = "left";
ctx.textBaseline = "middle";
let [labelX, labelWidth] = [x+2, 0];