Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scene Exam - Weapon Detection</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| font-size: 2.5em; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .upload-area { | |
| border: 3px dashed rgba(255, 255, 255, 0.5); | |
| border-radius: 15px; | |
| padding: 40px; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .upload-area:hover { | |
| border-color: rgba(255, 255, 255, 0.8); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .upload-area.dragover { | |
| border-color: #4CAF50; | |
| background: rgba(76, 175, 80, 0.1); | |
| } | |
| input[type="file"] { | |
| display: none; | |
| } | |
| .btn { | |
| background: linear-gradient(45deg, #FF6B6B, #4ECDC4); | |
| border: none; | |
| padding: 12px 30px; | |
| border-radius: 25px; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin: 10px; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
| } | |
| .result-area { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| display: none; | |
| } | |
| .preview-image { | |
| max-width: 100%; | |
| border-radius: 10px; | |
| margin: 20px 0; | |
| } | |
| .status { | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| padding: 10px; | |
| border-radius: 10px; | |
| margin: 10px 0; | |
| } | |
| .safe { background: rgba(76, 175, 80, 0.3); } | |
| .warning { background: rgba(255, 152, 0, 0.3); } | |
| .danger { background: rgba(244, 67, 54, 0.3); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🔍 Scene Exam</h1> | |
| <p style="text-align: center; font-size: 1.2em; margin-bottom: 30px;"> | |
| AI-Powered Weapon Detection System<br> | |
| <small>Upload an image to analyze for potential threats</small> | |
| </p> | |
| <div class="upload-area" onclick="document.getElementById('fileInput').click()"> | |
| <div id="uploadText"> | |
| <h3>📷 Click to Upload Image</h3> | |
| <p>Or drag and drop an image here</p> | |
| <p><small>Supports: JPG, PNG, GIF</small></p> | |
| </div> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/*"> | |
| <div style="text-align: center;"> | |
| <button class="btn" onclick="startCamera()">📹 Use Camera</button> | |
| <button class="btn" onclick="clearResults()">🗑️ Clear</button> | |
| </div> | |
| <div class="result-area" id="resultArea"> | |
| <h3>Analysis Results:</h3> | |
| <div id="statusDiv" class="status safe"> | |
| ✅ System Ready - No threats detected | |
| </div> | |
| <div id="detailsDiv"> | |
| Upload an image to begin analysis... | |
| </div> | |
| <canvas id="analysisCanvas" style="display: none;"></canvas> | |
| </div> | |
| </div> | |
| <script> | |
| const fileInput = document.getElementById('fileInput'); | |
| const uploadArea = document.querySelector('.upload-area'); | |
| const resultArea = document.getElementById('resultArea'); | |
| const statusDiv = document.getElementById('statusDiv'); | |
| const detailsDiv = document.getElementById('detailsDiv'); | |
| const canvas = document.getElementById('analysisCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Simple mock detection (since we can't run YOLO in browser) | |
| const weaponKeywords = ['knife', 'gun', 'weapon', 'blade', 'rifle', 'pistol']; | |
| const personKeywords = ['person', 'people', 'human', 'man', 'woman', 'face']; | |
| fileInput.addEventListener('change', handleFile); | |
| // Drag and drop functionality | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.add('dragover'); | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.classList.remove('dragover'); | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0) { | |
| handleFile({ target: { files } }); | |
| } | |
| }); | |
| function handleFile(event) { | |
| const file = event.target.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| displayImage(e.target.result, file.name); | |
| analyzeImage(file.name.toLowerCase()); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function displayImage(src, filename) { | |
| canvas.style.display = 'block'; | |
| const img = new Image(); | |
| img.onload = function() { | |
| canvas.width = Math.min(img.width, 600); | |
| canvas.height = (img.height * canvas.width) / img.width; | |
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | |
| // Add mock detection boxes | |
| addMockDetections(); | |
| }; | |
| img.src = src; | |
| resultArea.style.display = 'block'; | |
| } | |
| function addMockDetections() { | |
| // Add some mock detection boxes for demo | |
| ctx.strokeStyle = '#FF4444'; | |
| ctx.lineWidth = 3; | |
| ctx.font = '16px Arial'; | |
| ctx.fillStyle = '#FF4444'; | |
| // Mock detection box (you'd replace this with real AI results) | |
| if (Math.random() > 0.7) { | |
| const x = Math.random() * (canvas.width - 100); | |
| const y = Math.random() * (canvas.height - 100); | |
| ctx.strokeRect(x, y, 80, 60); | |
| ctx.fillText('Person', x, y - 5); | |
| } | |
| } | |
| function analyzeImage(filename) { | |
| // Mock analysis based on filename | |
| let threatLevel = 'safe'; | |
| let details = 'No suspicious objects detected.'; | |
| // Simple keyword detection (mock) | |
| const hasWeapon = weaponKeywords.some(keyword => filename.includes(keyword)); | |
| const hasPerson = personKeywords.some(keyword => filename.includes(keyword)); | |
| if (hasWeapon) { | |
| threatLevel = 'danger'; | |
| details = '⚠️ POTENTIAL WEAPON DETECTED!\nRecommend immediate review.'; | |
| } else if (hasPerson) { | |
| threatLevel = 'warning'; | |
| details = '👤 Person detected in scene.\nNo obvious threats identified.'; | |
| } | |
| updateStatus(threatLevel, details); | |
| } | |
| function updateStatus(level, details) { | |
| statusDiv.className = `status ${level}`; | |
| switch(level) { | |
| case 'safe': | |
| statusDiv.innerHTML = '✅ SCENE SAFE - No threats detected'; | |
| break; | |
| case 'warning': | |
| statusDiv.innerHTML = '⚠️ CAUTION - Review recommended'; | |
| break; | |
| case 'danger': | |
| statusDiv.innerHTML = '🚨 ALERT - Potential threat detected'; | |
| break; | |
| } | |
| detailsDiv.innerHTML = details; | |
| } | |
| function startCamera() { | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(function(stream) { | |
| // Create video element for camera | |
| const video = document.createElement('video'); | |
| video.srcObject = stream; | |
| video.play(); | |
| // Replace upload area with video | |
| uploadArea.innerHTML = ''; | |
| uploadArea.appendChild(video); | |
| video.style.width = '100%'; | |
| video.style.borderRadius = '10px'; | |
| // Add capture button | |
| const captureBtn = document.createElement('button'); | |
| captureBtn.className = 'btn'; | |
| captureBtn.innerHTML = '📸 Capture'; | |
| captureBtn.onclick = () => captureFrame(video, stream); | |
| uploadArea.appendChild(captureBtn); | |
| }) | |
| .catch(function(err) { | |
| alert('Camera access denied or not available'); | |
| }); | |
| } else { | |
| alert('Camera not supported by this browser'); | |
| } | |
| } | |
| function captureFrame(video, stream) { | |
| const captureCanvas = document.createElement('canvas'); | |
| captureCanvas.width = video.videoWidth; | |
| captureCanvas.height = video.videoHeight; | |
| captureCanvas.getContext('2d').drawImage(video, 0, 0); | |
| // Stop the camera | |
| stream.getTracks().forEach(track => track.stop()); | |
| // Display captured frame | |
| displayImage(captureCanvas.toDataURL(), 'camera_capture.jpg'); | |
| // Reset upload area | |
| uploadArea.innerHTML = ` | |
| <div id="uploadText"> | |
| <h3>📷 Click to Upload Image</h3> | |
| <p>Or drag and drop an image here</p> | |
| <p><small>Supports: JPG, PNG, GIF</small></p> | |
| </div> | |
| `; | |
| } | |
| function clearResults() { | |
| resultArea.style.display = 'none'; | |
| statusDiv.className = 'status safe'; | |
| statusDiv.innerHTML = '✅ System Ready - No threats detected'; | |
| detailsDiv.innerHTML = 'Upload an image to begin analysis...'; | |
| fileInput.value = ''; | |
| } | |
| // Show result area on load | |
| resultArea.style.display = 'block'; | |
| </script> | |
| </body> | |
| </html> | |