Hugging Face's logo

Spaces:
Pushpak21
/
DCM_Viewer
Sleeping

App Files Community
Pushpak21 commited on
Commit
94220d7
·
verified ·
1 Parent(s): a85f459

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +16 -39
static/index.html CHANGED
@@ -1,10 +1,7 @@
1
-
2
-
3
  <!DOCTYPE html>
4
  <html lang="en">
5
  <head>
6
  <meta charset="UTF-8" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
  <title>DCM Assembly Visualizer</title>
9
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
10
  <style>
@@ -14,51 +11,27 @@
14
  </head>
15
  <body>
16
  <h1>DCM Assembly Visualizer</h1>
17
- <input type="file" id="file1" accept=".txt"> File A<br>
18
- <input type="file" id="file2" accept=".txt"> File B<br><br>
19
- <button onclick="uploadFiles()">Visualize</button>
20
  <div id="plot"></div>
21
 
22
  <script>
23
- async function uploadFiles() {
24
- const file1 = document.getElementById("file1").files[0];
25
- const file2 = document.getElementById("file2").files[0];
26
-
27
- if (!file1 && !file2) {
28
- alert("Please select at least one file.");
29
  return;
30
  }
31
 
32
- const traces = [];
33
-
34
- if (file1) {
35
- const data1 = await sendFile(file1);
36
- traces.push(...extractTraces(data1, 'File A', 'red', 'blue'));
37
- }
38
-
39
- if (file2) {
40
- const data2 = await sendFile(file2);
41
- traces.push(...extractTraces(data2, 'File B', 'purple', 'orange'));
42
- }
43
-
44
- Plotly.newPlot('plot', traces, {
45
- margin: { t: 30 },
46
- scene: { aspectmode: 'data' },
47
- title: '3D Assembly Viewer'
48
- });
49
- }
50
-
51
- async function sendFile(file) {
52
  const formData = new FormData();
53
  formData.append("file", file);
 
54
  const res = await fetch("/parse", {
55
  method: "POST",
56
  body: formData
57
  });
58
- return await res.json();
59
- }
60
 
61
- function extractTraces(data, prefix, baseColor, normalColor) {
62
  const traces = [];
63
 
64
  for (const [tag, g] of Object.entries(data.geometry)) {
@@ -69,8 +42,8 @@
69
  type: 'scatter3d',
70
  mode: 'markers+text',
71
  x: [x], y: [y], z: [z],
72
- marker: { color: baseColor, size: 5 },
73
- text: [`${prefix}: ${g.label || tag}`],
74
  textposition: 'top center'
75
  });
76
 
@@ -80,7 +53,7 @@
80
  x: [x, x + nx],
81
  y: [y, y + ny],
82
  z: [z, z + nz],
83
- line: { color: normalColor, width: 3 }
84
  });
85
  }
86
 
@@ -99,7 +72,11 @@
99
  }
100
  }
101
 
102
- return traces;
 
 
 
 
103
  }
104
  </script>
105
  </body>
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
 
5
  <title>DCM Assembly Visualizer</title>
6
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
7
  <style>
 
11
  </head>
12
  <body>
13
  <h1>DCM Assembly Visualizer</h1>
14
+ <input type="file" id="file1" accept=".txt"> File A<br><br>
15
+ <button onclick="uploadAndDraw()">Visualize</button>
 
16
  <div id="plot"></div>
17
 
18
  <script>
19
+ async function uploadAndDraw() {
20
+ const file = document.getElementById("file1").files[0];
21
+ if (!file) {
22
+ alert("Please upload a file.");
 
 
23
  return;
24
  }
25
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  const formData = new FormData();
27
  formData.append("file", file);
28
+
29
  const res = await fetch("/parse", {
30
  method: "POST",
31
  body: formData
32
  });
 
 
33
 
34
+ const data = await res.json();
35
  const traces = [];
36
 
37
  for (const [tag, g] of Object.entries(data.geometry)) {
 
42
  type: 'scatter3d',
43
  mode: 'markers+text',
44
  x: [x], y: [y], z: [z],
45
+ marker: { color: 'red', size: 5 },
46
+ text: [g.label || tag],
47
  textposition: 'top center'
48
  });
49
 
 
53
  x: [x, x + nx],
54
  y: [y, y + ny],
55
  z: [z, z + nz],
56
+ line: { color: 'blue', width: 3 }
57
  });
58
  }
59
 
 
72
  }
73
  }
74
 
75
+ Plotly.newPlot('plot', traces, {
76
+ margin: { t: 30 },
77
+ scene: { aspectmode: 'data' },
78
+ title: '3D Assembly Viewer'
79
+ });
80
  }
81
  </script>
82
  </body>