Hugging Face's logo

Spaces:
Pushpak21
/
DCM_Viewer
Sleeping

App Files Community
Pushpak21 commited on
Commit
354747c
·
verified ·
1 Parent(s): 8103429

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +39 -21
index.html CHANGED
@@ -1,5 +1,4 @@
1
 
2
-
3
  <!DOCTYPE html>
4
  <html lang="en">
5
  <head>
@@ -8,42 +7,62 @@
8
  <title>DCM Assembly Visualizer</title>
9
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
10
  <style>
11
- body { font-family: sans-serif; padding: 20px; }
12
- #plot { width: 100%; height: 700px; }
 
13
  </style>
14
  </head>
15
  <body>
16
  <h1>DCM Assembly Visualizer</h1>
17
- <p>This visualizer is now intended to be used with a Streamlit frontend for file upload.</p>
 
 
 
 
18
  <div id="plot"></div>
19
 
20
  <script>
21
- let allTraces = [];
22
- let normalTraces = [];
 
23
 
24
- async function drawFromServer() {
25
- const res = await fetch("/parsed_data.json");
26
- const payload = await res.json();
27
- allTraces = [];
28
- normalTraces = [];
29
 
30
- for (const [color, label, data] of payload.files) {
31
- extractTraces(data, color, label);
 
32
  }
33
 
34
- Plotly.newPlot('plot', [...allTraces, ...normalTraces.filter(t => t.visible)], {
 
 
 
 
 
35
  margin: { t: 30 },
36
  scene: { aspectmode: 'data' },
37
  title: '3D Assembly Viewer'
38
  });
39
  }
40
 
 
 
 
 
 
 
 
 
 
 
41
  function extractTraces(data, baseColor, normalColor) {
 
 
42
  for (const [tag, g] of Object.entries(data.geometry)) {
43
  const [x, y, z] = g.base_point;
44
  const [nx, ny, nz] = g.normal;
45
 
46
- allTraces.push({
47
  type: 'scatter3d',
48
  mode: 'markers+text',
49
  x: [x], y: [y], z: [z],
@@ -52,14 +71,13 @@
52
  textposition: 'top center'
53
  });
54
 
55
- normalTraces.push({
56
  type: 'scatter3d',
57
  mode: 'lines',
58
  x: [x, x + nx],
59
  y: [y, y + ny],
60
  z: [z, z + nz],
61
- line: { color: normalColor, width: 2 },
62
- visible: true
63
  });
64
  }
65
 
@@ -69,7 +87,7 @@
69
  if (g1 && g2) {
70
  const [x1, y1, z1] = g1.base_point;
71
  const [x2, y2, z2] = g2.base_point;
72
- allTraces.push({
73
  type: 'scatter3d',
74
  mode: 'lines',
75
  x: [x1, x2], y: [y1, y2], z: [z1, z2],
@@ -77,9 +95,9 @@
77
  });
78
  }
79
  }
80
- }
81
 
82
- drawFromServer();
 
83
  </script>
84
  </body>
85
  </html>
 
1
 
 
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
7
  <title>DCM Assembly Visualizer</title>
8
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
  <style>
10
+ body { font-family: sans-serif; padding: 20px; background-color: #111; color: white; }
11
+ #plot { width: 100%; height: 700px; margin-top: 20px; }
12
+ input, button { margin: 10px 0; padding: 8px; }
13
  </style>
14
  </head>
15
  <body>
16
  <h1>DCM Assembly Visualizer</h1>
17
+
18
+ <label>Upload File A: <input type="file" id="file1" accept=".txt" /></label><br />
19
+ <label>Upload File B: <input type="file" id="file2" accept=".txt" /></label><br />
20
+ <button onclick="uploadFiles()">Visualize</button>
21
+
22
  <div id="plot"></div>
23
 
24
  <script>
25
+ async function uploadFiles() {
26
+ const file1 = document.getElementById("file1").files[0];
27
+ const file2 = document.getElementById("file2").files[0];
28
 
29
+ const traces = [];
 
 
 
 
30
 
31
+ if (file1) {
32
+ const data1 = await sendFile(file1);
33
+ traces.push(...extractTraces(data1, 'red', 'blue'));
34
  }
35
 
36
+ if (file2) {
37
+ const data2 = await sendFile(file2);
38
+ traces.push(...extractTraces(data2, 'orange', 'purple'));
39
+ }
40
+
41
+ Plotly.newPlot('plot', traces, {
42
  margin: { t: 30 },
43
  scene: { aspectmode: 'data' },
44
  title: '3D Assembly Viewer'
45
  });
46
  }
47
 
48
+ async function sendFile(file) {
49
+ const formData = new FormData();
50
+ formData.append("file", file);
51
+ const res = await fetch("/parse", {
52
+ method: "POST",
53
+ body: formData
54
+ });
55
+ return await res.json();
56
+ }
57
+
58
  function extractTraces(data, baseColor, normalColor) {
59
+ const traces = [];
60
+
61
  for (const [tag, g] of Object.entries(data.geometry)) {
62
  const [x, y, z] = g.base_point;
63
  const [nx, ny, nz] = g.normal;
64
 
65
+ traces.push({
66
  type: 'scatter3d',
67
  mode: 'markers+text',
68
  x: [x], y: [y], z: [z],
 
71
  textposition: 'top center'
72
  });
73
 
74
+ traces.push({
75
  type: 'scatter3d',
76
  mode: 'lines',
77
  x: [x, x + nx],
78
  y: [y, y + ny],
79
  z: [z, z + nz],
80
+ line: { color: normalColor, width: 2 }
 
81
  });
82
  }
83
 
 
87
  if (g1 && g2) {
88
  const [x1, y1, z1] = g1.base_point;
89
  const [x2, y2, z2] = g2.base_point;
90
+ traces.push({
91
  type: 'scatter3d',
92
  mode: 'lines',
93
  x: [x1, x2], y: [y1, y2], z: [z1, z2],
 
95
  });
96
  }
97
  }
 
98
 
99
+ return traces;
100
+ }
101
  </script>
102
  </body>
103
  </html>