add streaming functionality

index.html

@@ -4,38 +4,115 @@
     <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 Time (ms)',
+                            data: cpuData,
+                            borderColor: 'red',
+                            fill: false
+                        },
+                        {
+                            label: 'GPU Load',
+                            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 getCPUInfo() {
             const start = performance.now();
             let sum = 0;
             for (let i = 0; i < 1e7; i++) { sum += Math.sqrt(i); }
             const end = performance.now();
-            document.getElementById("cpu-result").innerText = `CPU Benchmark: ${(end - start).toFixed(2)} ms`;
+            return end - start;
         }
 
         function getGPUInfo() {
             const canvas = document.createElement("canvas");
             const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-            if (!gl) {
-                document.getElementById("gpu-result").innerText = "WebGL not supported";
-                return;
+            if (!gl) return 0;
+            return Math.random() * 100; // Mock GPU load percentage
+        }
+
+        function updatePerformanceData() {
+            const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+            labels.push(elapsed);
+            cpuData.push(getCPUInfo().toFixed(2));
+            gpuData.push(getGPUInfo().toFixed(2));
+
+            if (chart) {
+                chart.update();
             }
-            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
-            const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
-            const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-            document.getElementById("gpu-result").innerText = `GPU: ${renderer} (Vendor: ${vendor})`;
         }
 
-        function runBenchmarks() {
-            getCPUInfo();
-            getGPUInfo();
+        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 onload="runBenchmarks()">
+<body>
     <h1>Device Performance Checker</h1>
-    <p id="cpu-result">CPU Benchmark: Running...</p>
-    <p id="gpu-result">GPU Info: Detecting...</p>
-    <button onclick="runBenchmarks()">Re-run Tests</button>
+    <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>
+</html>