Spaces:

trapezius60
/

scene_exam

Running

App Files Files Community

trapezius60 commited on Aug 13, 2025

Commit

9f94bfd

verified ·

1 Parent(s): 2341bc9

Update index.html

Browse files

Files changed (1) hide show

index.html +303 -18

index.html CHANGED Viewed

@@ -1,19 +1,304 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>