Hugging Face's logo

Spaces:
luxopes
/
lux-benchmark
Running

App Files Community
luxopes commited on
Commit
d6abdfc
·
verified ·
1 Parent(s): 946ec93

Zkus jeste zlepsit design. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +576 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lux Benchmark
3
- emoji: 🐢
4
- colorFrom: red
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: lux-benchmark
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,576 @@
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
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hardware Performance Analyzer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gauge {
11
+ --percentage: 0;
12
+ --fill: #4ade80;
13
+ position: relative;
14
+ width: 160px;
15
+ height: 80px;
16
+ margin: 0 auto;
17
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
18
+ }
19
+
20
+ .gauge::before {
21
+ content: "";
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ right: 0;
26
+ bottom: 0;
27
+ border-radius: 160px 160px 0 0;
28
+ background: conic-gradient(
29
+ from 0.25turn at 50% 100%,
30
+ var(--fill) calc(var(--percentage) * 1%),
31
+ #f3f4f6 calc(var(--percentage) * 1%)
32
+ );
33
+ mask-image: radial-gradient(
34
+ circle at 50% 100%,
35
+ transparent 25%,
36
+ #000 25.5%
37
+ );
38
+ transform: rotate(180deg);
39
+ transition: background 0.3s ease;
40
+ }
41
+
42
+ .gauge::after {
43
+ content: attr(data-value) "%";
44
+ position: absolute;
45
+ bottom: 10px;
46
+ left: 50%;
47
+ transform: translateX(-50%);
48
+ font-weight: bold;
49
+ color: var(--fill);
50
+ }
51
+
52
+ .progress-bar {
53
+ height: 8px;
54
+ border-radius: 4px;
55
+ background-color: #e5e7eb;
56
+ overflow: hidden;
57
+ }
58
+
59
+ .progress-bar-fill {
60
+ height: 100%;
61
+ background-color: #3b82f6;
62
+ transition: width 0.5s ease;
63
+ }
64
+
65
+ @keyframes pulse {
66
+ 0% { opacity: 1; }
67
+ 50% { opacity: 0.5; }
68
+ 100% { opacity: 1; }
69
+ }
70
+
71
+ .testing {
72
+ animation: pulse 1.5s infinite;
73
+ }
74
+
75
+ .flip-in {
76
+ animation: flipIn 0.5s ease-out forwards;
77
+ }
78
+
79
+ @keyframes flipIn {
80
+ from {
81
+ transform: rotateX(90deg);
82
+ opacity: 0;
83
+ }
84
+ to {
85
+ transform: rotateX(0);
86
+ opacity: 1;
87
+ }
88
+ }
89
+ </style>
90
+ </head>
91
+ <body class="bg-gray-100 min-h-screen">
92
+ <div class="container mx-auto px-4 py-8">
93
+ <header class="text-center mb-12">
94
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Hardware Performance Analyzer</h1>
95
+ <p class="text-gray-600 max-w-2xl mx-auto">Test your computer's performance and view detailed hardware specifications in real-time.</p>
96
+ </header>
97
+
98
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
99
+ <!-- Hardware Specifications -->
100
+ <div class="bg-white rounded-xl shadow-lg p-6">
101
+ <div class="flex items-center mb-4">
102
+ <i class="fas fa-microchip text-blue-500 text-2xl mr-3"></i>
103
+ <h2 class="text-xl font-semibold text-gray-800">Hardware Specifications</h2>
104
+ </div>
105
+
106
+ <div class="space-y-4">
107
+ <div>
108
+ <h3 class="text-sm font-medium text-gray-500">Processor</h3>
109
+ <p id="cpu-info" class="text-gray-800">Detecting...</p>
110
+ </div>
111
+
112
+ <div>
113
+ <h3 class="text-sm font-medium text-gray-500">Graphics</h3>
114
+ <p id="gpu-info" class="text-gray-800">Detecting...</p>
115
+ </div>
116
+
117
+ <div>
118
+ <h3 class="text-sm font-medium text-gray-500">Memory</h3>
119
+ <p id="ram-info" class="text-gray-800">Detecting...</p>
120
+ </div>
121
+
122
+ <div>
123
+ <h3 class="text-sm font-medium text-gray-500">Operating System</h3>
124
+ <p id="os-info" class="text-gray-800">Detecting...</p>
125
+ </div>
126
+
127
+ <div>
128
+ <h3 class="text-sm font-medium text-gray-500">Browser</h3>
129
+ <p id="browser-info" class="text-gray-800">Detecting...</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Performance Tests -->
135
+ <div class="bg-white rounded-xl shadow-lg p-6">
136
+ <div class="flex items-center mb-4">
137
+ <i class="fas fa-tachometer-alt text-purple-500 text-2xl mr-3"></i>
138
+ <h2 class="text-xl font-semibold text-gray-800">Performance Tests</h2>
139
+ </div>
140
+
141
+ <div class="space-y-6">
142
+ <div>
143
+ <div class="flex justify-between mb-1">
144
+ <span class="text-sm font-medium text-gray-700">CPU Benchmark</span>
145
+ <span id="cpu-score" class="text-sm font-medium">-</span>
146
+ </div>
147
+ <div class="progress-bar">
148
+ <div id="cpu-progress" class="progress-bar-fill" style="width: 0%"></div>
149
+ </div>
150
+ </div>
151
+
152
+ <div>
153
+ <div class="flex justify-between mb-1">
154
+ <span class="text-sm font-medium text-gray-700">GPU Benchmark</span>
155
+ <span id="gpu-score" class="text-sm font-medium">-</span>
156
+ </div>
157
+ <div class="progress-bar">
158
+ <div id="gpu-progress" class="progress-bar-fill" style="width: 0%"></div>
159
+ </div>
160
+ </div>
161
+
162
+ <div>
163
+ <div class="flex justify-between mb-1">
164
+ <span class="text-sm font-medium text-gray-700">Memory Benchmark</span>
165
+ <span id="ram-score" class="text-sm font-medium">-</span>
166
+ </div>
167
+ <div class="progress-bar">
168
+ <div id="ram-progress" class="progress-bar-fill" style="width: 0%"></div>
169
+ </div>
170
+ </div>
171
+
172
+ <div>
173
+ <div class="flex justify-between mb-1">
174
+ <span class="text-sm font-medium text-gray-700">Storage Benchmark</span>
175
+ <span id="storage-score" class="text-sm font-medium">-</span>
176
+ </div>
177
+ <div class="progress-bar">
178
+ <div id="storage-progress" class="progress-bar-fill" style="width: 0%"></div>
179
+ </div>
180
+ </div>
181
+
182
+ <button id="run-tests" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
183
+ <i class="fas fa-play mr-2"></i> Run All Tests
184
+ </button>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Real-time Monitoring -->
189
+ <div class="bg-white rounded-xl shadow-lg p-6">
190
+ <div class="flex items-center mb-4">
191
+ <i class="fas fa-chart-line text-green-500 text-2xl mr-3"></i>
192
+ <h2 class="text-xl font-semibold text-gray-800">Real-time Monitoring</h2>
193
+ </div>
194
+
195
+ <div class="grid grid-cols-2 gap-4">
196
+ <div class="text-center">
197
+ <h3 class="text-sm font-medium text-gray-500 mb-2">CPU Usage</h3>
198
+ <div class="gauge" id="cpu-gauge" data-value="0"></div>
199
+ </div>
200
+
201
+ <div class="text-center">
202
+ <h3 class="text-sm font-medium text-gray-500 mb-2">Memory Usage</h3>
203
+ <div class="gauge" id="ram-gauge" data-value="0"></div>
204
+ </div>
205
+
206
+ <div class="text-center">
207
+ <h3 class="text-sm font-medium text-gray-500 mb-2">GPU Usage</h3>
208
+ <div class="gauge" id="gpu-gauge" data-value="0"></div>
209
+ </div>
210
+
211
+ <div class="text-center">
212
+ <h3 class="text-sm font-medium text-gray-500 mb-2">Battery</h3>
213
+ <div class="gauge" id="battery-gauge" data-value="0"></div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="mt-6">
218
+ <h3 class="text-sm font-medium text-gray-500 mb-2">System Temperature</h3>
219
+ <div class="flex items-center">
220
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
221
+ <div id="temp-bar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
222
+ </div>
223
+ <span id="temp-value" class="ml-2 text-sm font-medium text-gray-700">0°C</span>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="mt-4">
228
+ <button id="start-monitoring" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center shadow-md hover:shadow-lg">
229
+ <i class="fas fa-sync-alt mr-2"></i> Start Monitoring
230
+ </button>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Test Results -->
236
+ <div id="test-results" class="bg-white rounded-xl shadow-lg p-6 mt-8 hidden flip-in">
237
+ <div class="flex items-center mb-4">
238
+ <i class="fas fa-medal text-yellow-500 text-2xl mr-3"></i>
239
+ <h2 class="text-xl font-semibold text-gray-800">Test Results</h2>
240
+ </div>
241
+
242
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
243
+ <div class="text-center p-4 bg-blue-50 rounded-lg">
244
+ <div class="text-4xl font-bold text-blue-600 mb-2" id="overall-score">0</div>
245
+ <div class="text-sm font-medium text-blue-800">OVERALL SCORE</div>
246
+ <div class="mt-2 text-xs text-gray-600">Higher is better</div>
247
+ </div>
248
+
249
+ <div class="text-center p-4 bg-purple-50 rounded-lg">
250
+ <div class="text-4xl font-bold text-purple-600 mb-2" id="cpu-result">0</div>
251
+ <div class="text-sm font-medium text-purple-800">CPU SCORE</div>
252
+ <div class="mt-2 text-xs text-gray-600">Calculations per second</div>
253
+ </div>
254
+
255
+ <div class="text-center p-4 bg-green-50 rounded-lg">
256
+ <div class="text-4xl font-bold text-green-600 mb-2" id="gpu-result">0</div>
257
+ <div class="text-sm font-medium text-green-800">GPU SCORE</div>
258
+ <div class="mt-2 text-xs text-gray-600">Rendering performance</div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="mt-6">
263
+ <h3 class="text-sm font-medium text-gray-500 mb-3">Performance Comparison</h3>
264
+ <div class="bg-gray-100 rounded-lg p-4">
265
+ <div class="flex items-center mb-2">
266
+ <div class="w-24 text-xs text-gray-500">Your System</div>
267
+ <div class="flex-1">
268
+ <div class="bg-blue-500 h-4 rounded-full" id="your-system-bar" style="width: 0%"></div>
269
+ </div>
270
+ <div class="w-16 text-right text-xs font-medium" id="your-system-percent">0%</div>
271
+ </div>
272
+
273
+ <div class="flex items-center mb-2">
274
+ <div class="w-24 text-xs text-gray-500">Average PC</div>
275
+ <div class="flex-1">
276
+ <div class="bg-gray-400 h-4 rounded-full" style="width: 50%"></div>
277
+ </div>
278
+ <div class="w-16 text-right text-xs font-medium">50%</div>
279
+ </div>
280
+
281
+ <div class="flex items-center">
282
+ <div class="w-24 text-xs text-gray-500">High-end PC</div>
283
+ <div class="flex-1">
284
+ <div class="bg-gray-400 h-4 rounded-full" style="width: 85%"></div>
285
+ </div>
286
+ <div class="w-16 text-right text-xs font-medium">85%</div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ </div>
292
+ </div>
293
+
294
+ <script>
295
+ // Detect hardware specifications
296
+ function detectHardware() {
297
+ // CPU info
298
+ const cpuCores = navigator.hardwareConcurrency || "Unknown";
299
+ document.getElementById('cpu-info').textContent = `${cpuCores} cores`;
300
+
301
+ // GPU info
302
+ const canvas = document.createElement('canvas');
303
+ const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
304
+ if (gl) {
305
+ const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
306
+ if (debugInfo) {
307
+ const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
308
+ document.getElementById('gpu-info').textContent = renderer;
309
+ } else {
310
+ document.getElementById('gpu-info').textContent = "WebGL detected (specifics unavailable)";
311
+ }
312
+ } else {
313
+ document.getElementById('gpu-info').textContent = "WebGL not supported";
314
+ }
315
+
316
+ // RAM info
317
+ const ram = performance.memory ?
318
+ `${Math.round(performance.memory.jsHeapSizeLimit / (1024 * 1024))} MB available` :
319
+ "Unknown (enable Chrome flags for precise measurement)";
320
+ document.getElementById('ram-info').textContent = ram;
321
+
322
+ // OS info
323
+ const platform = navigator.platform;
324
+ let os = "Unknown OS";
325
+ if (platform.indexOf("Win") !== -1) os = "Windows";
326
+ else if (platform.indexOf("Mac") !== -1) os = "MacOS";
327
+ else if (platform.indexOf("Linux") !== -1) os = "Linux";
328
+ document.getElementById('os-info').textContent = os;
329
+
330
+ // Browser info
331
+ document.getElementById('browser-info').textContent = `${navigator.userAgent.split(') ')[0].split('/')[0]})`;
332
+ }
333
+
334
+ // Run performance tests
335
+ function runPerformanceTests() {
336
+ const runTestsBtn = document.getElementById('run-tests');
337
+ runTestsBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Testing...';
338
+ runTestsBtn.classList.add('testing');
339
+ runTestsBtn.disabled = true;
340
+
341
+ // CPU test
342
+ setTimeout(() => {
343
+ const cpuStartTime = performance.now();
344
+ let sum = 0;
345
+ for (let i = 0; i < 10000000; i++) {
346
+ sum += Math.sqrt(i) * Math.random();
347
+ }
348
+ const cpuEndTime = performance.now();
349
+ const cpuTime = cpuEndTime - cpuStartTime;
350
+ const cpuScore = Math.round(10000 / cpuTime);
351
+
352
+ document.getElementById('cpu-score').textContent = cpuScore;
353
+ document.getElementById('cpu-progress').style.width = `${Math.min(100, cpuScore / 100)}%`;
354
+
355
+ // GPU test
356
+ setTimeout(() => {
357
+ const canvas = document.createElement('canvas');
358
+ canvas.width = 1000;
359
+ canvas.height = 1000;
360
+ const ctx = canvas.getContext('2d');
361
+
362
+ let frames = 0;
363
+ const testDuration = 2000; // 2 seconds test
364
+ const startTime = performance.now();
365
+
366
+ function renderFrame() {
367
+ // Clear canvas
368
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
369
+
370
+ // Draw 100 random rectangles
371
+ for (let i = 0; i < 100; i++) {
372
+ ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
373
+ ctx.fillRect(Math.random() * 800, Math.random() * 800, 200, 200);
374
+ }
375
+
376
+ frames++;
377
+
378
+ // Continue test if time remains
379
+ if (performance.now() - startTime < testDuration) {
380
+ requestAnimationFrame(renderFrame);
381
+ } else {
382
+ const fps = Math.round(frames / (testDuration / 1000));
383
+ const gpuScore = Math.min(1000, fps * 2); // Scale FPS to score
384
+
385
+ document.getElementById('gpu-score').textContent = gpuScore;
386
+ document.getElementById('gpu-progress').style.width = `${Math.min(100, gpuScore / 10)}%`;
387
+
388
+ // Continue with RAM test
389
+ setTimeout(() => {
390
+ const ramStartTime = performance.now();
391
+ const array = new Array(1000000);
392
+ for (let i = 0; i < array.length; i++) {
393
+ array[i] = new Array(100).fill(Math.random());
394
+ }
395
+ const ramEndTime = performance.now();
396
+ const ramTime = ramEndTime - ramStartTime;
397
+ const ramScore = Math.round(10000 / ramTime);
398
+
399
+ document.getElementById('ram-score').textContent = ramScore;
400
+ document.getElementById('ram-progress').style.width = `${Math.min(100, ramScore / 100)}%`;
401
+
402
+ // Storage test (simulated)
403
+ setTimeout(() => {
404
+ const storageScore = Math.round(Math.random() * 500 + 300);
405
+ document.getElementById('storage-score').textContent = storageScore;
406
+ document.getElementById('storage-progress').style.width = `${Math.min(100, storageScore / 10)}%`;
407
+
408
+ // Show results
409
+ showTestResults(cpuScore, gpuScore, ramScore, storageScore);
410
+
411
+ runTestsBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Run All Tests';
412
+ runTestsBtn.classList.remove('testing');
413
+ runTestsBtn.disabled = false;
414
+ }, 1000);
415
+ }, 1000);
416
+ }
417
+ }
418
+
419
+ // Start the FPS test
420
+ renderFrame();
421
+
422
+ document.getElementById('gpu-score').textContent = gpuScore;
423
+ document.getElementById('gpu-progress').style.width = `${Math.min(100, gpuScore / 100)}%`;
424
+
425
+ // RAM test
426
+ setTimeout(() => {
427
+ const ramStartTime = performance.now();
428
+ const array = new Array(1000000);
429
+ for (let i = 0; i < array.length; i++) {
430
+ array[i] = new Array(100).fill(Math.random());
431
+ }
432
+ const ramEndTime = performance.now();
433
+ const ramTime = ramEndTime - ramStartTime;
434
+ const ramScore = Math.round(10000 / ramTime);
435
+
436
+ document.getElementById('ram-score').textContent = ramScore;
437
+ document.getElementById('ram-progress').style.width = `${Math.min(100, ramScore / 100)}%`;
438
+
439
+ // Storage test (simulated)
440
+ setTimeout(() => {
441
+ const storageScore = Math.round(Math.random() * 500 + 300);
442
+ document.getElementById('storage-score').textContent = storageScore;
443
+ document.getElementById('storage-progress').style.width = `${Math.min(100, storageScore / 10)}%`;
444
+
445
+ // Show results
446
+ showTestResults(cpuScore, gpuScore, ramScore, storageScore);
447
+
448
+ runTestsBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Run All Tests';
449
+ runTestsBtn.classList.remove('testing');
450
+ runTestsBtn.disabled = false;
451
+ }, 1000);
452
+ }, 1000);
453
+ }, 1000);
454
+ }, 100);
455
+ }
456
+
457
+ // Show test results
458
+ function showTestResults(cpuScore, gpuScore, ramScore, storageScore) {
459
+ const overallScore = Math.round((cpuScore * 0.4 + gpuScore * 0.3 + ramScore * 0.2 + storageScore * 0.1) / 10);
460
+
461
+ document.getElementById('overall-score').textContent = overallScore;
462
+ document.getElementById('cpu-result').textContent = cpuScore;
463
+ document.getElementById('gpu-result').textContent = gpuScore;
464
+
465
+ const yourSystemPercent = Math.min(100, overallScore);
466
+ document.getElementById('your-system-bar').style.width = `${yourSystemPercent}%`;
467
+ document.getElementById('your-system-percent').textContent = `${yourSystemPercent}%`;
468
+
469
+ const resultsDiv = document.getElementById('test-results');
470
+ resultsDiv.classList.remove('hidden');
471
+ resultsDiv.classList.add('flip-in');
472
+ }
473
+
474
+ // Real-time monitoring
475
+ function startMonitoring() {
476
+ const startMonitoringBtn = document.getElementById('start-monitoring');
477
+ startMonitoringBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Monitoring...';
478
+ startMonitoringBtn.disabled = true;
479
+
480
+ // Simulate monitoring
481
+ let monitoringInterval = setInterval(() => {
482
+ // CPU usage
483
+ const cpuUsage = Math.min(100, Math.random() * 30 + 10);
484
+ const cpuGauge = document.getElementById('cpu-gauge');
485
+ cpuGauge.style.setProperty('--percentage', cpuUsage);
486
+ cpuGauge.style.setProperty('--fill', getColorForPercentage(cpuUsage));
487
+ cpuGauge.setAttribute('data-value', Math.round(cpuUsage));
488
+
489
+ // RAM usage
490
+ const ramUsage = Math.min(100, Math.random() * 40 + 20);
491
+ const ramGauge = document.getElementById('ram-gauge');
492
+ ramGauge.style.setProperty('--percentage', ramUsage);
493
+ ramGauge.style.setProperty('--fill', getColorForPercentage(ramUsage));
494
+ ramGauge.setAttribute('data-value', Math.round(ramUsage));
495
+
496
+ // GPU usage
497
+ const gpuUsage = Math.min(100, Math.random() * 25 + 5);
498
+ const gpuGauge = document.getElementById('gpu-gauge');
499
+ gpuGauge.style.setProperty('--percentage', gpuUsage);
500
+ gpuGauge.style.setProperty('--fill', getColorForPercentage(gpuUsage));
501
+ gpuGauge.setAttribute('data-value', Math.round(gpuUsage));
502
+
503
+ // Battery (if available)
504
+ if (navigator.getBattery) {
505
+ navigator.getBattery().then(battery => {
506
+ const batteryGauge = document.getElementById('battery-gauge');
507
+ batteryGauge.style.setProperty('--percentage', battery.level * 100);
508
+ batteryGauge.style.setProperty('--fill', getColorForPercentage(battery.level * 100, true));
509
+ batteryGauge.setAttribute('data-value', Math.round(battery.level * 100));
510
+ });
511
+ } else {
512
+ const batteryGauge = document.getElementById('battery-gauge');
513
+ batteryGauge.style.setProperty('--percentage', 100);
514
+ batteryGauge.style.setProperty('--fill', getColorForPercentage(100));
515
+ batteryGauge.setAttribute('data-value', "N/A");
516
+ }
517
+
518
+ // Temperature (simulated)
519
+ const temp = Math.round(Math.random() * 30 + 40);
520
+ document.getElementById('temp-bar').style.width = `${Math.min(100, temp)}%`;
521
+ document.getElementById('temp-value').textContent = `${temp}°C`;
522
+
523
+ // Change color based on temperature
524
+ const tempBar = document.getElementById('temp-bar');
525
+ if (temp > 70) tempBar.style.backgroundColor = '#ef4444';
526
+ else if (temp > 50) tempBar.style.backgroundColor = '#f59e0b';
527
+ else tempBar.style.backgroundColor = '#10b981';
528
+ }, 1500);
529
+
530
+ // Change button to stop monitoring
531
+ startMonitoringBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Monitoring';
532
+ startMonitoringBtn.onclick = function() {
533
+ clearInterval(monitoringInterval);
534
+ startMonitoringBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Start Monitoring';
535
+ startMonitoringBtn.disabled = false;
536
+ startMonitoringBtn.onclick = startMonitoring;
537
+
538
+ // Reset gauges
539
+ document.getElementById('cpu-gauge').style.setProperty('--percentage', 0);
540
+ document.getElementById('ram-gauge').style.setProperty('--percentage', 0);
541
+ document.getElementById('gpu-gauge').style.setProperty('--percentage', 0);
542
+ document.getElementById('temp-bar').style.width = '0%';
543
+ document.getElementById('temp-value').textContent = '0°C';
544
+ };
545
+ }
546
+
547
+ // Helper function to get color based on percentage
548
+ function getColorForPercentage(percent, isBattery = false) {
549
+ if (isBattery) {
550
+ if (percent > 70) return '#4ade80'; // green when high
551
+ if (percent > 30) return '#fbbf24'; // yellow when medium
552
+ return '#ef4444'; // red when low
553
+ }
554
+ if (percent < 30) return '#4ade80'; // green
555
+ if (percent < 70) return '#fbbf24'; // yellow
556
+ return '#ef4444'; // red
557
+ }
558
+
559
+ // Event listeners
560
+ document.addEventListener('DOMContentLoaded', () => {
561
+ detectHardware();
562
+
563
+ document.getElementById('run-tests').addEventListener('click', runPerformanceTests);
564
+ document.getElementById('start-monitoring').addEventListener('click', startMonitoring);
565
+
566
+ document.getElementById('share-results').addEventListener('click', () => {
567
+ alert('Results shared! (This is a simulation)');
568
+ });
569
+
570
+ document.getElementById('save-results').addEventListener('click', () => {
571
+ alert('Report saved! (This is a simulation)');
572
+ });
573
+ });
574
+ </script>
575
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=luxopes/lux-benchmark" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
576
+ </html>