Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Device Performance Checker</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| let cpuData = []; | |
| let gpuData = []; | |
| let labels = []; | |
| let interval; | |
| let startTime; | |
| let chart; | |
| function generateChart() { | |
| const ctx = document.getElementById('performanceChart').getContext('2d'); | |
| chart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: labels, | |
| datasets: [ | |
| { | |
| label: 'CPU Usage (%)', | |
| data: cpuData, | |
| borderColor: 'red', | |
| fill: false | |
| }, | |
| { | |
| label: 'GPU Info', | |
| data: gpuData, | |
| borderColor: 'blue', | |
| fill: false | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Time (s)' | |
| } | |
| }, | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Performance' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function getCPUUsage() { | |
| if (window.performance.memory) { | |
| return (window.performance.memory.usedJSHeapSize / window.performance.memory.totalJSHeapSize) * 100; | |
| } else { | |
| return Math.random() * 100; // Fallback (mock data) | |
| } | |
| } | |
| function getGPUInfo() { | |
| const canvas = document.createElement("canvas"); | |
| const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); | |
| if (!gl) return 0; | |
| const debugInfo = gl.getExtension("WEBGL_debug_renderer_info"); | |
| return debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : "Unknown"; | |
| } | |
| function updatePerformanceData() { | |
| const elapsed = ((performance.now() - startTime) / 1000).toFixed(1); | |
| labels.push(elapsed); | |
| cpuData.push(getCPUUsage().toFixed(2)); | |
| gpuData.push(getGPUInfo()); | |
| if (chart) { | |
| chart.update(); | |
| } | |
| } | |
| function startBenchmark() { | |
| cpuData = []; | |
| gpuData = []; | |
| labels = []; | |
| startTime = performance.now(); | |
| if (!chart) { | |
| generateChart(); | |
| } | |
| interval = setInterval(updatePerformanceData, 1000); | |
| } | |
| function stopBenchmark() { | |
| clearInterval(interval); | |
| } | |
| </script> | |
| <style> | |
| #chart-container { | |
| width: 80%; | |
| height: 400px; | |
| margin: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Device Performance Checker</h1> | |
| <p>Click Start to begin performance tracking.</p> | |
| <button onclick="startBenchmark()">Start</button> | |
| <button onclick="stopBenchmark()">Stop</button> | |
| <div id="chart-container"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </body> | |
| </html> |