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

viz: new canvas on first render (#11016)

Browse Source
This commit is contained in:
qazal
2025-06-28 16:04:51 +03:00
committed by GitHub
parent c14c9a8eff
commit fc3e509822
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tinygrad/viz/index.html
View File

@@ -227,10 +227,7 @@
</button>
</div>
<div class="container ctx-list-parent"><div class="ctx-list"></div></div>
<div class="view profiler">
<div id="device-list"></div>
<canvas id="timeline"></canvas>
</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">

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

@@ -240,24 +240,25 @@ function formatTime(ts, dur=ts) {
const colors = ["#1D1F2A", "#2A2D3D", "#373B4F", "#444862", "#12131A", "#2F3244", "#3B3F54", "#4A4E65", "#181A23", "#232532", "#313548", "#404459"];
var data, canvasZoom, zoomLevel = d3.zoomIdentity;
var profileRet, canvasZoom, zoomLevel = d3.zoomIdentity;
async function renderProfiler() {
displayGraph("profiler");
d3.select(".metadata").html("");
if (data != null) return;
const { layout, st, et } = await (await fetch("/get_profile")).json();
const profiler = d3.select(".profiler").html("");
const deviceList = profiler.append("div").attr("id", "device-list").node();
const canvas = profiler.append("canvas").attr("id", "timeline").node();
if (profileRet == null) profileRet = await (await fetch("/get_profile")).json()
const { layout, st, et } = profileRet;
const kernelMap = new Map();
for (const [i, c] of ctxs.entries()) kernelMap.set(c.function_name, { name:c.name, i });
// place devices on the y axis and set vertical positions
const [tickSize, padding] = [10, 8];
const deviceList = document.getElementById("device-list");
deviceList.style.paddingTop = `${tickSize+padding}px`;
const canvas = document.getElementById("timeline");
const ctx = canvas.getContext("2d");
const canvasTop = rect(canvas).top;
// color by name
const nameMap = new Map();
data = [];
const data = [];
for (const [k, { timeline }] of Object.entries(layout)) {
if (timeline.shapes.length === 0) continue;
const div = deviceList.appendChild(document.createElement("div"));
@@ -274,7 +275,7 @@ async function renderProfiler() {
nameMap.set(e.name, { fillColor:colors[i%colors.length], label });
}
// offset y by depth
data.push({ x:e.st-st, dur:e.dur, name:e.name, height:levelHeight, y:offsetY+levelHeight*e.depth, kernel, ...nameMap.get(e.name) });
data.push({ x:e.st-st, dur:e.dur, name:e.name, height:levelHeight, y:offsetY+levelHeight*e.depth, kernel, ...nameMap.get(e.name) });
}
// lastly, adjust device rect by number of levels
div.style.height = `${levelHeight*timeline.maxDepth+padding}px`;