start detection button work and provide report

body-detection.html

@@ -36,7 +36,11 @@
                     Stop Detection
                 </button>
             </div>
-        </div>
+            <div class="mt-4 p-4 bg-gray-50 rounded-lg">
+                <h3 class="font-medium mb-2">Detection Report</h3>
+                <p class="text-sm text-gray-600">Click "Generate Report" after detection to save your results.</p>
+            </div>
+</div>
 
         <div class="bg-white rounded-lg shadow-md p-6">
             <h2 class="text-xl font-semibold mb-4">Detection Results</h2>
@@ -52,7 +56,8 @@
             </div>
         </div>
     </main>
-
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
     <script>
         // Camera and canvas setup
         const video = document.getElementById('video');
@@ -62,6 +67,11 @@
         const stopBtn = document.getElementById('stopBtn');
         const keypointsEl = document.getElementById('keypoints');
         const postureEl = document.getElementById('posture');
+        
+        let detector;
+        let isDetecting = false;
+        let detectionInterval;
+        let lastReport = {};
 
         // Camera access
         if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
@@ -71,18 +81,106 @@
                 });
         }
 
-        // Detection logic would go here (would need additional JS libraries)
-        startBtn.addEventListener('click', () => {
-            // In a real implementation, this would start the body detection
-            keypointsEl.textContent = "Detection started - loading model...";
-            postureEl.textContent = "Analyzing posture...";
+        async function setupDetector() {
+            await tf.ready();
+            const model = poseDetection.SupportedModels.MoveNet;
+            detector = await poseDetection.createDetector(model);
+        }
+
+        function drawKeypoints(keypoints) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            
+            keypoints.forEach(keypoint => {
+                if (keypoint.score > 0.3) {
+                    ctx.beginPath();
+                    ctx.arc(keypoint.x, keypoint.y, 5, 0, 2 * Math.PI);
+                    ctx.fillStyle = 'red';
+                    ctx.fill();
+                }
+            });
+        }
+
+        function analyzePosture(keypoints) {
+            // Simple posture analysis
+            const nose = keypoints.find(k => k.name === 'nose');
+            const leftShoulder = keypoints.find(k => k.name === 'left_shoulder');
+            const rightShoulder = keypoints.find(k => k.name === 'right_shoulder');
+            
+            if (!nose || !leftShoulder || !rightShoulder) return "Incomplete data";
+            
+            const shoulderSlope = (rightShoulder.y - leftShoulder.y) / 
+                                 (rightShoulder.x - leftShoulder.x);
+            
+            if (Math.abs(shoulderSlope) > 0.2) {
+                return shoulderSlope > 0 ? "Leaning to the left" : "Leaning to the right";
+            }
+            return "Good posture";
+        }
+
+        async function detectPose() {
+            if (!detector) return;
+            
+            const poses = await detector.estimatePoses(video);
+            if (poses.length > 0) {
+                const keypoints = poses[0].keypoints;
+                drawKeypoints(keypoints);
+                
+                // Update report
+                lastReport = {
+                    keypoints: keypoints.map(k => `${k.name} (${k.score.toFixed(2)})`).join(', '),
+                    posture: analyzePosture(keypoints),
+                    timestamp: new Date().toLocaleTimeString()
+                };
+                
+                keypointsEl.textContent = `Detected: ${lastReport.keypoints}`;
+                postureEl.textContent = `Posture: ${lastReport.posture}`;
+            }
+        }
+
+        startBtn.addEventListener('click', async () => {
+            if (!detector) await setupDetector();
+            isDetecting = true;
+            detectionInterval = setInterval(detectPose, 100);
+            keypointsEl.textContent = "Detection started - processing...";
         });
 
         stopBtn.addEventListener('click', () => {
-            keypointsEl.textContent = "Detection stopped";
-            postureEl.textContent = "No data available";
+            isDetecting = false;
+            clearInterval(detectionInterval);
+            keypointsEl.textContent = lastReport.keypoints || "Detection stopped";
+            postureEl.textContent = lastReport.posture ? `Posture: ${lastReport.posture}` : "No data available";
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
         });
 
+        // Generate report button
+        const reportBtn = document.createElement('button');
+        reportBtn.textContent = 'Generate Report';
+        reportBtn.className = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
+        reportBtn.addEventListener('click', () => {
+            if (!lastReport.keypoints) {
+                alert('No detection data available. Start detection first.');
+                return;
+            }
+            
+            const reportWindow = window.open('', '_blank');
+            reportWindow.document.write(`
+                <html><head><title>Body Detection Report</title></head>
+                <body style="font-family: Arial, sans-serif; padding: 20px;">
+                    <h1>Body Detection Report</h1>
+                    <p><strong>Timestamp:</strong> ${lastReport.timestamp}</p>
+                    <h2>Keypoints Detected</h2>
+                    <p>${lastReport.keypoints.replace(/, /g, '<br>')}</p>
+                    <h2>Posture Analysis</h2>
+                    <p>${lastReport.posture}</p>
+                    <h2>Visualization</h2>
+                    <img src="${canvas.toDataURL()}" width="640" style="border: 1px solid #ddd;">
+                </body></html>
+            `);
+            reportWindow.document.close();
+        });
+        
+        document.querySelector('.flex.space-x-4').appendChild(reportBtn);
         feather.replace();
     </script>
 </body>