Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Body Detection</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <nav class="bg-gray-800 p-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="text-white font-bold text-xl">AI Body Detection</a> | |
| <div class="flex space-x-4"> | |
| <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2">Home</a> | |
| <a href="body-detection.html" class="text-gray-300 hover:text-white px-3 py-2">Body Detection</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="container mx-auto p-4"> | |
| <h1 class="text-3xl font-bold mb-6">Real-time Body Detection</h1> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold mb-4">Camera Feed</h2> | |
| <div class="relative"> | |
| <video id="video" width="640" height="480" autoplay class="border rounded-lg"></video> | |
| <canvas id="canvas" width="640" height="480" class="absolute top-0 left-0"></canvas> | |
| </div> | |
| <div class="mt-4 flex space-x-4"> | |
| <button id="startBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"> | |
| Start Detection | |
| </button> | |
| <button id="stopBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> | |
| Stop Detection | |
| </button> | |
| </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> | |
| <div id="results" class="space-y-4"> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <h3 class="font-medium">Body Keypoints Detected:</h3> | |
| <p id="keypoints" class="text-gray-600">Waiting for detection...</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <h3 class="font-medium">Posture Analysis:</h3> | |
| <p id="posture" class="text-gray-600">No data available yet.</p> | |
| </div> | |
| </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'); | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const startBtn = document.getElementById('startBtn'); | |
| 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) { | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(stream => { | |
| video.srcObject = stream; | |
| }); | |
| } | |
| 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', () => { | |
| 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> | |
| </html> |