Skip to content

Commit 2aeb03e

Browse files
sinhaanshulsinhaanshul
committed
[dtensor][debug] hosting comm debug's browser visualizer on pytorch
1 parent 26b4844 commit 2aeb03e

File tree

1 file changed

+132
-0
lines changed

1 file changed

+132
-0
lines changed

‎comm_mode_browser_visual.html

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
</body>
5+
6+
7+
<!DOCTYPE html>
8+
<html lang ="en">
9+
<head>
10+
<meta charset="UTF-8">
11+
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
12+
<title>CommDebugMode Module Tree</title>
13+
<style>
14+
ul, #tree-container {
15+
list-style-type: none;
16+
margin: 0;
17+
padding: 0;
18+
}
19+
20+
.caret {
21+
cursor: pointer;
22+
user-select: none;
23+
}
24+
25+
.caret::before {
26+
content: "\25B6";
27+
color:black;
28+
display: inline-block;
29+
margin-right: 6px;
30+
}
31+
32+
.caret-down::before {
33+
transform: rotate(90deg);
34+
}
35+
36+
.tree {
37+
padding-left: 20px;
38+
}
39+
40+
.tree ul {
41+
padding-left: 20px;
42+
}
43+
44+
/* hide nested list when component is not active*/
45+
.nested {
46+
display: none;
47+
}
48+
49+
/* show nested list when pressed caret pointer makes component active*/
50+
.active {
51+
display: block;
52+
}
53+
54+
.forward-pass,
55+
.backward-pass {
56+
margin-left: 40px;
57+
}
58+
59+
.forward-pass table {
60+
margin-left: 40px;
61+
width: auto;
62+
}
63+
64+
.forward-pass table td, .forward-pass table th {
65+
padding: 8px;
66+
}
67+
68+
.forward-pass ul {
69+
display: none;
70+
}
71+
72+
table {
73+
font-family: arial, sans-serif;
74+
border-collapse: collapse;
75+
width: 100%;
76+
}
77+
78+
td, th {
79+
border: 1px solid #dddddd;
80+
text-align: left;
81+
padding: 8px;
82+
}
83+
84+
tr:nth-child(even) {
85+
background-color: #dddddd;
86+
}
87+
#drop-area {
88+
position: relative;
89+
width: 25%;
90+
height: 100px;
91+
border: 2px dashed #ccc;
92+
border-radius: 5px;
93+
padding: 0px;
94+
text-align: center;
95+
}
96+
97+
.drag-drop-block {
98+
display: inline-block;
99+
width: 200px; /* reduce the width */
100+
height: 50px; /* reduce the height */
101+
background-color: #f7f7f7;
102+
border: 1px solid #ccc;
103+
border-radius: 5px;
104+
padding: 10px; /* reduce the padding */
105+
font-size: 14px; /* reduce the font size */
106+
color: #666;
107+
cursor: pointer;
108+
}
109+
110+
#file-input {
111+
position: absolute;
112+
top: 0;
113+
left: 0;
114+
width: 100%;
115+
height: 100%;
116+
opacity: 0;
117+
}
118+
</style>
119+
</head>
120+
<body>
121+
122+
<div id="drop-area">
123+
<div class="drag-drop-block">
124+
<span>Drag file here</span>
125+
</div>
126+
<input type="file" id="file-input" accept=".json">
127+
</div>
128+
<div id="tree-container"></div>
129+
130+
<script type="module" src="https://cdn.jsdelivr.net/gh/pytorch/pytorch@main/torch/utils/viz/MemoryViz.js"></script>
131+
</body>
132+
</html>

0 commit comments

Comments
 (0)