VISION-NIGHT

Running

App Files Files Community

kolaslab commited on Dec 23, 2024

Commit

7597618

verified ·

1 Parent(s): 8436455

Update index.html

Browse files

Files changed (1) hide show

index.html +250 -11

index.html CHANGED Viewed

@@ -1,28 +1,267 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stock Bot</title>
     <style>
-        body, html {
             margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
             overflow: hidden;
         }
-        iframe {
             width: 100%;
             height: 100%;
-            border: none;
             position: absolute;
             top: 0;
             left: 0;
         }
     </style>
 </head>
 <body>
-    <iframe src="https://fnkffp.vercel.app/" allowfullscreen></iframe>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>AI Night Vision Camera</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
     <style>
+        body {
             margin: 0;
+            background: #000;
+            color: #fff;
+            font-family: monospace;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .video-container {
+            position: relative;
+            width: 640px;
+            height: 480px;
+            border: 2px solid #0f0;
+            border-radius: 8px;
             overflow: hidden;
         }
+        #video {
             width: 100%;
             height: 100%;
+            object-fit: cover;
+            transform: scaleX(-1);
+        }
+        #canvas {
             position: absolute;
             top: 0;
             left: 0;
+            transform: scaleX(-1);
+        }
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            background: #0f0;
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: #0f0;
+            box-shadow: 0 0 10px #0f0;
+        }
+        .detection-info {
+            margin-top: 20px;
+            padding: 10px;
+            background: rgba(0, 255, 0, 0.1);
+            border: 1px solid #0f0;
+            border-radius: 4px;
+            width: 100%;
+            max-width: 620px;
+        }
+        .stats {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .night-vision {
+            filter: brightness(2) contrast(1.2) hue-rotate(120deg) grayscale(0.5);
+        }
+        .detection-box {
+            position: absolute;
+            border: 2px solid #0f0;
+            background: rgba(0, 255, 0, 0.1);
+        }
+        .detection-label {
+            position: absolute;
+            top: -25px;
+            left: 0;
+            background: #0f0;
+            color: #000;
+            padding: 2px 6px;
+            font-size: 12px;
+            border-radius: 2px;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="video-container">
+            <video id="video" autoplay playsinline></video>
+            <canvas id="canvas"></canvas>
+        </div>
+        <div class="controls">
+            <button onclick="toggleNightVision()">Toggle Night Vision</button>
+            <button onclick="toggleDetection()">Toggle Detection</button>
+        </div>
+        <div class="detection-info">
+            <div id="detections"></div>
+            <div class="stats">
+                <span id="fps">FPS: 0</span>
+                <span id="objects">Objects detected: 0</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        let video = document.getElementById('video');
+        let canvas = document.getElementById('canvas');
+        let ctx = canvas.getContext('2d');
+        let model;
+        let isNightVision = false;
+        let isDetecting = false;
+        let lastTime = performance.now();
+        let frameCount = 0;
+        // Initialize camera and AI model
+        async function init() {
+            // Load COCO-SSD model
+            model = await cocoSsd.load();
+            // Setup camera
+            const constraints = {
+                video: {
+                    width: 640,
+                    height: 480,
+                    facingMode: 'environment',
+                    advanced: [{
+                        exposureMode: 'manual',
+                        exposureCompensation: 2
+                    }]
+                }
+            };
+            const stream = await navigator.mediaDevices.getUserMedia(constraints);
+            video.srcObject = stream;
+            // Set canvas size
+            canvas.width = 640;
+            canvas.height = 480;
+            // Start detection loop
+            requestAnimationFrame(detect);
+        }
+        function toggleNightVision() {
+            isNightVision = !isNightVision;
+            video.className = isNightVision ? 'night-vision' : '';
+        }
+        function toggleDetection() {
+            isDetecting = !isDetecting;
+        }
+        async function detect() {
+            if (isDetecting) {
+                // Calculate FPS
+                const now = performance.now();
+                frameCount++;
+                if (now - lastTime >= 1000) {
+                    document.getElementById('fps').textContent = `FPS: ${frameCount}`;
+                    frameCount = 0;
+                    lastTime = now;
+                }
+                // Detect objects
+                const predictions = await model.detect(video);
+                // Clear previous detections
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw new detections
+                predictions.forEach(prediction => {
+                    // Draw bounding box
+                    ctx.strokeStyle = '#00ff00';
+                    ctx.lineWidth = 2;
+                    ctx.strokeRect(
+                        prediction.bbox[0],
+                        prediction.bbox[1],
+                        prediction.bbox[2],
+                        prediction.bbox[3]
+                    );
+                    // Draw label background
+                    ctx.fillStyle = '#00ff00';
+                    ctx.fillRect(
+                        prediction.bbox[0],
+                        prediction.bbox[1] - 20,
+                        prediction.bbox[2],
+                        20
+                    );
+                    // Draw label text
+                    ctx.fillStyle = '#000000';
+                    ctx.font = '16px monospace';
+                    ctx.fillText(
+                        `${prediction.class} ${Math.round(prediction.score * 100)}%`,
+                        prediction.bbox[0] + 5,
+                        prediction.bbox[1] - 5
+                    );
+                });
+                // Update detection info
+                document.getElementById('objects').textContent =
+                    `Objects detected: ${predictions.length}`;
+                document.getElementById('detections').innerHTML =
+                    predictions.map(p =>
+                        `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
+                    ).join('<br>');
+            }
+            requestAnimationFrame(detect);
+        }
+        // Start application
+        init().catch(err => {
+            console.error('Error initializing camera:', err);
+        });
+        // Add image processing for better night vision
+        const imageProcessor = new ImageCapture(video.srcObject.getVideoTracks()[0]);
+        async function enhanceNightVision() {
+            if (isNightVision) {
+                try {
+                    const photoCapabilities = await imageProcessor.getPhotoCapabilities();
+                    await imageProcessor.setOptions({
+                        brightness: photoCapabilities.brightness.max,
+                        contrast: photoCapabilities.contrast.max,
+                        saturation: 0,
+                        sharpness: photoCapabilities.sharpness.max,
+                        exposureMode: 'manual',
+                        exposureCompensation: 2,
+                        whiteBalanceMode: 'manual'
+                    });
+                } catch (err) {
+                    console.log('Night vision enhancement not supported');
+                }
+            }
+        }
+    </script>
 </body>
 </html>