From 2aeb03ef19e8f7e5bd87b8a92ca80057a14b91b5 Mon Sep 17 00:00:00 2001
From: Anshul Sinha <50644008+sinhaanshul@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:49:07 -0700
Subject: [PATCH 1/2] [dtensor][debug] hosting comm debug's browser visualizer
 on pytorch

---
 comm_mode_browser_visual.html | 132 ++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 comm_mode_browser_visual.html
diff --git a/comm_mode_browser_visual.html b/comm_mode_browser_visual.html
new file mode 100644
index 000000000000..fa7694b48943
--- /dev/null
+++ b/comm_mode_browser_visual.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<body>
+</body>
+
+
+<!DOCTYPE html>
+<html lang ="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
+    <title>CommDebugMode Module Tree</title>
+    <style>
+        ul, #tree-container {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .caret {
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .caret::before {
+            content: "\25B6";
+            color:black;
+            display: inline-block;
+            margin-right: 6px;
+        }
+
+        .caret-down::before {
+            transform: rotate(90deg);
+        }
+
+        .tree {
+            padding-left: 20px;
+        }
+
+        .tree ul {
+            padding-left: 20px;
+        }
+
+        /* hide nested list when component is not active*/
+        .nested {
+            display: none;
+        }
+
+        /* show nested list when pressed caret pointer makes component active*/
+        .active {
+            display: block;
+        }
+
+        .forward-pass,
+        .backward-pass {
+            margin-left: 40px;
+        }
+
+        .forward-pass table {
+            margin-left: 40px;
+            width: auto;
+        }
+
+        .forward-pass table td, .forward-pass table th {
+            padding: 8px;
+        }
+
+        .forward-pass ul {
+            display: none;
+        }
+
+        table {
+            font-family: arial, sans-serif;
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        td, th {
+            border: 1px solid #dddddd;
+            text-align: left;
+            padding: 8px;
+        }
+
+        tr:nth-child(even) {
+            background-color: #dddddd;
+        }
+        #drop-area {
+            position: relative;
+            width: 25%;
+            height: 100px;
+            border: 2px dashed #ccc;
+            border-radius: 5px;
+            padding: 0px;
+            text-align: center;
+        }
+
+        .drag-drop-block {
+            display: inline-block;
+            width: 200px; /* reduce the width */
+            height: 50px; /* reduce the height */
+            background-color: #f7f7f7;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px; /* reduce the padding */
+            font-size: 14px; /* reduce the font size */
+            color: #666;
+            cursor: pointer;
+        }
+
+        #file-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+        }
+  </style>
+</head>
+<body>
+
+    <div id="drop-area">
+        <div class="drag-drop-block">
+          <span>Drag file here</span>
+        </div>
+        <input type="file" id="file-input" accept=".json">
+      </div>
+    <div id="tree-container"></div>
+
+    <script type="module" src="https://cdn.jsdelivr.net/gh/pytorch/pytorch@main/torch/utils/viz/MemoryViz.js"></script>
+</body>
+</html>

From 3d51ff22245b950a168a1ef43bd3102411279e4c Mon Sep 17 00:00:00 2001
From: Anshul Sinha <50644008+sinhaanshul@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:49:07 -0700
Subject: [PATCH 2/2] [dtensor][debug] hosting comm debug's browser visualizer
 on pytorch

---
 comm_mode_browser_visual.html | 132 ++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 comm_mode_browser_visual.html

diff --git a/comm_mode_browser_visual.html b/comm_mode_browser_visual.html
new file mode 100644
index 000000000000..20afac7a411e
--- /dev/null
+++ b/comm_mode_browser_visual.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<body>
+</body>
+
+
+<!DOCTYPE html>
+<html lang ="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
+    <title>CommDebugMode Module Tree</title>
+    <style>
+        ul, #tree-container {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .caret {
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .caret::before {
+            content: "\25B6";
+            color:black;
+            display: inline-block;
+            margin-right: 6px;
+        }
+
+        .caret-down::before {
+            transform: rotate(90deg);
+        }
+
+        .tree {
+            padding-left: 20px;
+        }
+
+        .tree ul {
+            padding-left: 20px;
+        }
+
+        /* hide nested list when component is not active*/
+        .nested {
+            display: none;
+        }
+
+        /* show nested list when pressed caret pointer makes component active*/
+        .active {
+            display: block;
+        }
+
+        .forward-pass,
+        .backward-pass {
+            margin-left: 40px;
+        }
+
+        .forward-pass table {
+            margin-left: 40px;
+            width: auto;
+        }
+
+        .forward-pass table td, .forward-pass table th {
+            padding: 8px;
+        }
+
+        .forward-pass ul {
+            display: none;
+        }
+
+        table {
+            font-family: arial, sans-serif;
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        td, th {
+            border: 1px solid #dddddd;
+            text-align: left;
+            padding: 8px;
+        }
+
+        tr:nth-child(even) {
+            background-color: #dddddd;
+        }
+        #drop-area {
+            position: relative;
+            width: 25%;
+            height: 100px;
+            border: 2px dashed #ccc;
+            border-radius: 5px;
+            padding: 0px;
+            text-align: center;
+        }
+
+        .drag-drop-block {
+            display: inline-block;
+            width: 200px; /* reduce the width */
+            height: 50px; /* reduce the height */
+            background-color: #f7f7f7;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px; /* reduce the padding */
+            font-size: 14px; /* reduce the font size */
+            color: #666;
+            cursor: pointer;
+        }
+
+        #file-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+        }
+  </style>
+</head>
+<body>
+
+    <div id="drop-area">
+        <div class="drag-drop-block">
+          <span>Drag file here</span>
+        </div>
+        <input type="file" id="file-input" accept=".json">
+      </div>
+    <div id="tree-container"></div>
+
+    <script type="module" src="https://cdn.jsdelivr.net/gh/pytorch/pytorch@main/torch/distributed/_tensor/debug/comm_mode_browser_visual.js"></script>
+</body>
+</html>
