live-feed-object-detection.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🤖 AI Object Scanner</title>
    
    <!-- These are the Brains (TensorFlow.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

    <style>
        /* CSS: The Future Lab Look */
        body {
            background-color: #0d1117; /* Deep space dark */
            color: #00f3ff; /* Cyber blue */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-shadow: 0 0 15px #00f3ff;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        p {
            color: #ccc;
            margin-bottom: 20px;
        }

        /* The container keeps the video and the boxes aligned */
        .cam-container {
            position: relative; /* This is crucial for positioning boxes */
            border: 3px solid #333;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
            background: #000;
            min-width: 640px;
            min-height: 480px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        video {
            display: block; /* Removes weird gaps */
            width: 640px;
            height: 480px;
        }

        /* The layer where we draw the boxes */
        #box-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Let clicks pass through */
        }

        /* The style of the detection boxes */
        .detection-box {
            position: absolute;
            border: 2px solid #00f3ff;
            background-color: rgba(0, 243, 255, 0.1); /* See-through blue */
            z-index: 10;
        }

        .detection-label {
            position: absolute;
            top: -25px;
            left: 0;
            background-color: #00f3ff;
            color: #000;
            padding: 2px 8px;
            font-size: 14px;
            font-weight: bold;
        }

        button {
            background-color: #00f3ff;
            color: #000;
            border: none;
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 50px;
            margin-top: 20px;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px #00f3ff;
        }

        button:disabled {
            background-color: #555;
            color: #888;
            cursor: wait;
            transform: none;
            box-shadow: none;
        }

        .status {
            font-family: monospace;
            font-size: 1.2rem;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1>🤖 AI Vision Lab</h1>
    <p>Hold objects up to the camera (cellphone, cup, book, person) to scan them.</p>

    <div class="cam-container">
        <!-- The video plays here -->
        <video id="webcam" autoplay muted playsinline></video>
        <!-- The colored boxes appear here -->
        <div id="box-overlay"></div>
    </div>

    <div class="status" id="statusText">⏳ Initializing Systems...</div>
    
    <button id="startBtn" onclick="enableCam()" disabled>Please Wait...</button>

    <script>
        // JAVASCRIPT: Where the AI lives

        const video = document.getElementById('webcam');
        const overlay = document.getElementById('box-overlay');
        const startBtn = document.getElementById('startBtn');
        const statusText = document.getElementById('statusText');
        
        let model = undefined;

        // 1. LOAD THE AI MODEL
        // We do this immediately so it's ready when the user clicks start
        cocoSsd.load().then(function (loadedModel) {
            model = loadedModel;
            statusText.innerText = "✅ System Ready";
            startBtn.disabled = false;
            startBtn.innerText = "🔴 Activate Scanner";
        });

        // 2. ENABLE WEBCAM
        function enableCam() {
            if (!model) {
                return; // Model isn't ready yet
            }

            // Hide the button after clicking
            startBtn.style.display = 'none';
            statusText.innerText = "👀 Scanning...";

            // Ask for camera permission
            const constraints = {
                video: { width: 640, height: 480 }
            };

            navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
                video.srcObject = stream;
                // When the video actually has data, start the prediction loop
                video.addEventListener('loadeddata', predictWebcam);
            });
        }

        // 3. THE PREDICTION LOOP
        function predictWebcam() {
            // Ask the model to look at the video frame
            model.detect(video).then(function (predictions) {
                
                // Clear the old boxes from the last frame
                overlay.innerHTML = '';

                // Loop through every object the AI found
                for (let n = 0; n < predictions.length; n++) {
                    
                    // Only show things if the AI is more than 66% sure
                    if (predictions[n].score > 0.66) {
                        
                        // Create the box formatting
                        const p = document.createElement('div');
                        p.classList.add('detection-box');
                        
                        // We need the coordinates: [x, y, width, height]
                        // These numbers come from the AI
                        const x = predictions[n].bbox[0];
                        const y = predictions[n].bbox[1];
                        const width = predictions[n].bbox[2];
                        const height = predictions[n].bbox[3];

                        // Apply the math to the CSS
                        p.style.left = x + 'px';
                        p.style.top = y + 'px';
                        p.style.width = width + 'px';
                        p.style.height = height + 'px';

                        // Create the text label (e.g., "cup 90%")
                        const label = document.createElement('span');
                        label.classList.add('detection-label');
                        label.innerText = predictions[n].class.toUpperCase() + ' ' + Math.round(parseFloat(predictions[n].score) * 100) + '%';
                        
                        // Add the label to the box, and the box to the screen
                        p.appendChild(label);
                        overlay.appendChild(p);
                    }
                }

                // Call this function again immediately to create a video loop
                window.requestAnimationFrame(predictWebcam);
            });
        }
    </script>
</body>
</html>