Hugging Face's logo

Spaces:
rabiyulfahim
/
python_master_visualize_UI
Sleeping

App Files Community
rabiyulfahim commited on
Commit
a713797
·
verified ·
1 Parent(s): a310d13

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +89 -28
templates/index.html CHANGED
@@ -1,35 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Python Visualizer</title>
6
- <link rel="stylesheet" href="/static/style.css">
 
7
  </head>
8
  <body>
9
- <h2>🧠 Python Visualizer</h2>
10
- <form method="post" action="/run">
11
- <textarea name="code" rows="10" cols="70" placeholder="Enter Python code here...">{{ code or '' }}</textarea><br>
12
- <button type="submit">Run Code</button>
13
- </form>
14
-
15
- {% if trace %}
16
- <h3>Execution Trace:</h3>
17
- <ol>
18
- {% for step in trace %}
19
- {% if step.error %}
20
- <li style="color:red;">Error: {{ step.error }}</li>
21
- {% else %}
22
- <li>
23
- <strong>Line {{ step.line }}</strong> → Locals: {{ step.locals }}
24
- </li>
25
- {% endif %}
26
- {% endfor %}
27
- </ol>
28
- {% endif %}
29
-
30
- {% if output %}
31
- <h3>Output:</h3>
32
- <pre>{{ output }}</pre>
33
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </body>
35
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>D3 Python Visualizer</title>
6
+ <link rel="stylesheet" href="/static/style.css">
7
+ <script src="/static/d3.v7.min.js"></script>
8
  </head>
9
  <body>
10
+ <h2>🐍 Python Visualizer with D3.js</h2>
11
+
12
+ <form method="post" action="/run">
13
+ <textarea name="code" rows="10" cols="70" placeholder="Enter Python code here...">{{ code or '' }}</textarea><br>
14
+ <button type="submit">Run Code</button>
15
+ </form>
16
+
17
+ {% if output %}
18
+ <h3>Output:</h3>
19
+ <pre>{{ output }}</pre>
20
+ {% endif %}
21
+
22
+ <div id="viz"></div>
23
+
24
+ <script>
25
+ const traceData = {{ trace_json | safe if trace_json else '[]' }};
26
+ if (traceData.length > 0) {
27
+ const width = 700, height = 400;
28
+ const svg = d3.select("#viz")
29
+ .append("svg")
30
+ .attr("width", width)
31
+ .attr("height", height)
32
+ .style("background", "#f8f8f8")
33
+ .style("border-radius", "10px");
34
+
35
+ let currentStep = 0;
36
+
37
+ const frameGroup = svg.append("g").attr("transform", "translate(50,80)");
38
+
39
+ function renderStep(step) {
40
+ frameGroup.selectAll("*").remove();
41
+
42
+ const stepData = traceData[step];
43
+ if (stepData.error) {
44
+ frameGroup.append("text")
45
+ .text("Error: " + stepData.error)
46
+ .attr("fill", "red")
47
+ .attr("x", 50)
48
+ .attr("y", 20);
49
+ return;
50
+ }
51
+
52
+ frameGroup.append("text")
53
+ .text("Line: " + stepData.line)
54
+ .attr("x", 0)
55
+ .attr("y", -30)
56
+ .attr("font-weight", "bold");
57
+
58
+ const vars = Object.entries(stepData.locals);
59
+ vars.forEach((v, i) => {
60
+ const [name, val] = v;
61
+ const boxY = i * 50;
62
+ frameGroup.append("rect")
63
+ .attr("x", 0)
64
+ .attr("y", boxY)
65
+ .attr("width", 200)
66
+ .attr("height", 40)
67
+ .attr("fill", "#fff")
68
+ .attr("stroke", "#000");
69
+
70
+ frameGroup.append("text")
71
+ .text(name + " = " + val)
72
+ .attr("x", 10)
73
+ .attr("y", boxY + 25)
74
+ .attr("font-family", "monospace");
75
+ });
76
+ }
77
+
78
+ function addButtons() {
79
+ const controls = d3.select("body").append("div").attr("id", "controls");
80
+ controls.append("button").text("◀ Prev").on("click", () => {
81
+ if (currentStep > 0) { currentStep--; renderStep(currentStep); }
82
+ });
83
+ controls.append("button").text("▶ Next").on("click", () => {
84
+ if (currentStep < traceData.length - 1) { currentStep++; renderStep(currentStep); }
85
+ });
86
+ controls.append("span")
87
+ .text(" Step " + (currentStep+1) + " of " + traceData.length)
88
+ .attr("id", "stepInfo");
89
+ }
90
+
91
+ addButtons();
92
+ renderStep(0);
93
+ }
94
+ </script>
95
  </body>
96
  </html>