Hugging Face's logo

Spaces:
drbh
/
nvline
Running

App Files Community
drbh HF staff commited on
Commit
95dab94
•
1 Parent(s): b6980ee

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +249 -19
index.html CHANGED
@@ -1,19 +1,249 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>nvline</title>
8
+ <style>
9
+ body {
10
+ background-color: #121212;
11
+ color: #ffffff;
12
+ font-family: Arial, sans-serif;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ height: 100vh;
18
+ margin: 0;
19
+ padding: 20px;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ h1 {
24
+ margin-bottom: 10px;
25
+ font-size: 24px;
26
+ }
27
+
28
+ #chart-container {
29
+ width: 90%;
30
+ height: 80%;
31
+ }
32
+
33
+ #chart {
34
+ width: 100%;
35
+ height: 100%;
36
+ }
37
+
38
+ .axis-label {
39
+ fill: #ffffff;
40
+ }
41
+
42
+ .tooltip {
43
+ position: absolute;
44
+ background: rgba(0, 0, 0, 0.7);
45
+ color: #fff;
46
+ padding: 5px;
47
+ border-radius: 3px;
48
+ pointer-events: none;
49
+ font-size: 12px;
50
+ }
51
+
52
+ .grid line {
53
+ stroke: #444;
54
+ }
55
+
56
+ .grid path {
57
+ stroke: none;
58
+ }
59
+
60
+
61
+ input[type="file"] {
62
+ display: none;
63
+ }
64
+
65
+ .custom-file-upload {
66
+ border: 1px solid #ccc;
67
+ display: inline-block;
68
+ padding: 6px 12px;
69
+ cursor: pointer;
70
+ }
71
+ </style>
72
+ </head>
73
+
74
+ <body>
75
+ <h1>Import nvline JSONL File and Display Memory Usage</h1>
76
+
77
+
78
+ <label for="fileInput" class="custom-file-upload">
79
+ Add nvline JSONL File
80
+ </label>
81
+ <input type="file" id="fileInput" accept=".jsonl">
82
+
83
+ <div id="chart-container">
84
+ <svg id="chart"></svg>
85
+ </div>
86
+ <div id="tooltip" class="tooltip" style="display: none;"></div>
87
+
88
+ <script>
89
+ document.getElementById('fileInput').addEventListener('change', handleFile, false);
90
+
91
+ function handleFile(event) {
92
+ const file = event.target.files[0];
93
+ const reader = new FileReader();
94
+ reader.onload = function (event) {
95
+ const lines = event.target.result.split('\n').filter(line => line.trim() !== '');
96
+ const data = lines.map(line => JSON.parse(line));
97
+ drawChart(data);
98
+ };
99
+ reader.readAsText(file);
100
+ }
101
+
102
+ function drawChart(data) {
103
+ const svg = document.getElementById('chart');
104
+ svg.innerHTML = '';
105
+ const width = svg.clientWidth;
106
+ const height = svg.clientHeight;
107
+ const padding = 30;
108
+ const xScale = width / (data.length - 1);
109
+ const yMax = Math.max(...data.map(d => d.memory_total));
110
+ const yScale = (height - padding * 2) / yMax;
111
+
112
+ const line = (points) => points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' ');
113
+
114
+ const memoryUsedPoints = data.map((d, i) => [i * xScale, height - padding - d.memory_used * yScale]);
115
+ const memoryFreePoints = data.map((d, i) => [i * xScale, height - padding - d.memory_free * yScale]);
116
+ const memoryTotalPoints = data.map((d, i) => [i * xScale, height - padding - d.memory_total * yScale]);
117
+
118
+ const gridX = document.createElementNS('http://www.w3.org/2000/svg', 'g');
119
+ const gridY = document.createElementNS('http://www.w3.org/2000/svg', 'g');
120
+
121
+ for (let i = 0; i < data.length; i++) {
122
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
123
+ line.setAttribute('x1', i * xScale);
124
+ line.setAttribute('y1', height - padding);
125
+ line.setAttribute('x2', i * xScale);
126
+ line.setAttribute('y2', padding);
127
+ line.setAttribute('class', 'grid');
128
+ line.setAttribute('stroke', '#444');
129
+ gridX.appendChild(line);
130
+ }
131
+
132
+ for (let i = 0; i <= yMax; i += yMax / 10) {
133
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
134
+ line.setAttribute('x1', 0);
135
+ line.setAttribute('y1', height - padding - i * yScale);
136
+ line.setAttribute('x2', width);
137
+ line.setAttribute('y2', height - padding - i * yScale);
138
+ line.setAttribute('class', 'grid');
139
+ line.setAttribute('stroke', '#444');
140
+ gridY.appendChild(line);
141
+ }
142
+
143
+ svg.appendChild(gridX);
144
+ svg.appendChild(gridY);
145
+
146
+ const pathUsed = document.createElementNS('http://www.w3.org/2000/svg', 'path');
147
+ pathUsed.setAttribute('d', line(memoryUsedPoints));
148
+ pathUsed.setAttribute('stroke', 'red');
149
+ pathUsed.setAttribute('fill', 'none');
150
+ svg.appendChild(pathUsed);
151
+
152
+ const pathFree = document.createElementNS('http://www.w3.org/2000/svg', 'path');
153
+ pathFree.setAttribute('d', line(memoryFreePoints));
154
+ pathFree.setAttribute('stroke', 'green');
155
+ pathFree.setAttribute('fill', 'none');
156
+ svg.appendChild(pathFree);
157
+
158
+ const pathTotal = document.createElementNS('http://www.w3.org/2000/svg', 'path');
159
+ pathTotal.setAttribute('d', line(memoryTotalPoints));
160
+ pathTotal.setAttribute('stroke', 'blue');
161
+ pathTotal.setAttribute('fill', 'none');
162
+ svg.appendChild(pathTotal);
163
+
164
+ memoryUsedPoints.forEach((point, i) => {
165
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
166
+ circle.setAttribute('cx', point[0]);
167
+ circle.setAttribute('cy', point[1]);
168
+ circle.setAttribute('r', 3);
169
+ circle.setAttribute('fill', 'red');
170
+ circle.setAttribute('class', 'dot dot-used');
171
+ circle.setAttribute('data-index', i);
172
+ svg.appendChild(circle);
173
+ });
174
+
175
+ memoryFreePoints.forEach((point, i) => {
176
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
177
+ circle.setAttribute('cx', point[0]);
178
+ circle.setAttribute('cy', point[1]);
179
+ circle.setAttribute('r', 3);
180
+ circle.setAttribute('fill', 'green');
181
+ circle.setAttribute('class', 'dot dot-free');
182
+ circle.setAttribute('data-index', i);
183
+ svg.appendChild(circle);
184
+ });
185
+
186
+ memoryTotalPoints.forEach((point, i) => {
187
+ const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
188
+ circle.setAttribute('cx', point[0]);
189
+ circle.setAttribute('cy', point[1]);
190
+ circle.setAttribute('r', 3);
191
+ circle.setAttribute('fill', 'blue');
192
+ circle.setAttribute('class', 'dot dot-total');
193
+ circle.setAttribute('data-index', i);
194
+ svg.appendChild(circle);
195
+ });
196
+
197
+ const xAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
198
+ xAxisLabel.setAttribute('x', width / 2);
199
+ xAxisLabel.setAttribute('y', height - 10);
200
+ xAxisLabel.setAttribute('class', 'axis-label');
201
+ xAxisLabel.setAttribute('text-anchor', 'middle');
202
+ xAxisLabel.textContent = 'Data Points';
203
+ svg.appendChild(xAxisLabel);
204
+
205
+ const yAxisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
206
+ yAxisLabel.setAttribute('x', -height / 2);
207
+ yAxisLabel.setAttribute('y', 20);
208
+ yAxisLabel.setAttribute('class', 'axis-label');
209
+ yAxisLabel.setAttribute('text-anchor', 'middle');
210
+ yAxisLabel.setAttribute('transform', 'rotate(-90)');
211
+ yAxisLabel.textContent = 'Memory Usage';
212
+ svg.appendChild(yAxisLabel);
213
+
214
+ const tooltip = document.getElementById('tooltip');
215
+ svg.addEventListener('mousemove', (event) => {
216
+ const rect = svg.getBoundingClientRect();
217
+ const x = event.clientX - rect.left;
218
+ const index = Math.round(x / xScale);
219
+
220
+ document.querySelectorAll('.dot').forEach(dot => dot.style.display = 'none');
221
+
222
+ if (index >= 0 && index < data.length) {
223
+ const memoryUsed = data[index].memory_used;
224
+ const memoryFree = data[index].memory_free;
225
+ const memoryTotal = data[index].memory_total;
226
+ const timestamp = new Date(1000 * data[index].timestamp).toISOString();
227
+
228
+ tooltip.style.display = 'block';
229
+ tooltip.style.left = event.pageX + 10 + 'px';
230
+ tooltip.style.top = event.pageY - 10 + 'px';
231
+ tooltip.innerHTML = `Total: ${memoryTotal} Used: ${memoryUsed}<br>Free: ${memoryFree}<br> Timestamp: ${timestamp}`;
232
+
233
+ document.querySelector(`.dot-used[data-index='${index}']`).style.display = 'block';
234
+ document.querySelector(`.dot-free[data-index='${index}']`).style.display = 'block';
235
+ document.querySelector(`.dot-total[data-index='${index}']`).style.display = 'block';
236
+ } else {
237
+ tooltip.style.display = 'none';
238
+ }
239
+ });
240
+
241
+ svg.addEventListener('mouseout', () => {
242
+ tooltip.style.display = 'none';
243
+ document.querySelectorAll('.dot').forEach(dot => dot.style.display = 'none');
244
+ });
245
+ }
246
+ </script>
247
+ </body>
248
+
249
+ </html>