object-detection_by_pk

Runtime error

App Files Files Community

Prathamesh1420 commited on Jun 20

Commit

b1da0c5

verified ·

1 Parent(s): 9503367

Update index.html

Browse files

Files changed (1) hide show

index.html +138 -332

index.html CHANGED Viewed

@@ -1,340 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Object Detection</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            background: linear-gradient(135deg, #2d2b52 0%, #191731 100%);
-            color: white;
-            margin: 0;
-            padding: 20px;
-            height: 100vh;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .container {
-            width: 100%;
-            max-width: 800px;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .video-container {
-            width: 100%;
-            max-width: 500px;
-            aspect-ratio: 1/1;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            margin: 10px 0;
-        }
-        #video-output {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        button {
-            background: white;
-            color: #2d2b52;
-            border: none;
-            padding: 12px 32px;
-            border-radius: 24px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
-        button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        }
-        h1 {
-            font-size: 2.5em;
-            margin-bottom: 0.3em;
-        }
-        p {
-            color: rgba(255, 255, 255, 0.8);
-            margin-bottom: 1em;
-        }
-        .controls {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            align-items: center;
-            margin-top: 10px;
-        }
-        .slider-container {
-            width: 100%;
-            max-width: 300px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .slider-container label {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 14px;
-        }
-        input[type="range"] {
-            width: 100%;
-            height: 6px;
-            -webkit-appearance: none;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-            outline: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
-            background: white;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        /* Add styles for toast notifications */
-        .toast {
-            position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 16px 24px;
-            border-radius: 4px;
-            font-size: 14px;
-            z-index: 1000;
-            display: none;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-        }
-        .toast.error {
-            background-color: #f44336;
-            color: white;
-        }
-        .toast.warning {
-            background-color: #ffd700;
-            color: black;
-        }
-    </style>
 </head>
 <body>
-    <!-- Add toast element after body opening tag -->
-    <div id="error-toast" class="toast"></div>
-    <div class="container">
-        <h1>Real-time Object Detection</h1>
-        <p>Using YOLOv10 to detect objects in your webcam feed</p>
-        <div class="video-container">
-            <video id="video-output" autoplay playsinline></video>
-        </div>
-        <div class="controls">
-            <div class="slider-container">
-                <label>Confidence Threshold: <span id="conf-value">0.3</span></label>
-                <input type="range" id="conf-threshold" min="0" max="1" step="0.01" value="0.3">
-            </div>
-            <button id="start-button">Start</button>
-        </div>
     </div>
-    <script>
-        let peerConnection;
-        let webrtc_id;
-        const startButton = document.getElementById('start-button');
-        const videoOutput = document.getElementById('video-output');
-        const confThreshold = document.getElementById('conf-threshold');
-        const confValue = document.getElementById('conf-value');
-        // Update confidence value display
-        confThreshold.addEventListener('input', (e) => {
-            confValue.textContent = e.target.value;
-            if (peerConnection) {
-                updateConfThreshold(e.target.value);
-            }
-        });
-        function updateConfThreshold(value) {
-            fetch('/input_hook', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    webrtc_id: webrtc_id,
-                    conf_threshold: parseFloat(value)
-                })
-            });
-        }
-        function showError(message) {
-            const toast = document.getElementById('error-toast');
-            toast.textContent = message;
-            toast.className = 'toast error';
-            toast.style.display = 'block';
-            // Hide toast after 5 seconds
-            setTimeout(() => {
-                toast.style.display = 'none';
-            }, 5000);
-        }
-        async function setupWebRTC() {
-            const config = __RTC_CONFIGURATION__;
-            peerConnection = new RTCPeerConnection(config);
-            const timeoutId = setTimeout(() => {
-                const toast = document.getElementById('error-toast');
-                toast.textContent = "Connection is taking longer than usual. Are you on a VPN?";
-                toast.className = 'toast warning';
-                toast.style.display = 'block';
-                // Hide warning after 5 seconds
-                setTimeout(() => {
-                    toast.style.display = 'none';
-                }, 5000);
-            }, 5000);
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({
-                    video: true
-                });
-                stream.getTracks().forEach(track => {
-                    peerConnection.addTrack(track, stream);
-                });
-                peerConnection.addEventListener('track', (evt) => {
-                    if (videoOutput && videoOutput.srcObject !== evt.streams[0]) {
-                        videoOutput.srcObject = evt.streams[0];
-                    }
-                });
-                const dataChannel = peerConnection.createDataChannel('text');
-                dataChannel.onmessage = (event) => {
-                    const eventJson = JSON.parse(event.data);
-                    if (eventJson.type === "error") {
-                        showError(eventJson.message);
-                    } else if (eventJson.type === "send_input") {
-                        updateConfThreshold(confThreshold.value);
-                    }
-                };
-                const offer = await peerConnection.createOffer();
-                await peerConnection.setLocalDescription(offer);
-                await new Promise((resolve) => {
-                    if (peerConnection.iceGatheringState === "complete") {
-                        resolve();
-                    } else {
-                        const checkState = () => {
-                            if (peerConnection.iceGatheringState === "complete") {
-                                peerConnection.removeEventListener("icegatheringstatechange", checkState);
-                                resolve();
-                            }
-                        };
-                        peerConnection.addEventListener("icegatheringstatechange", checkState);
-                    }
-                });
-                webrtc_id = Math.random().toString(36).substring(7);
-                const response = await fetch('/webrtc/offer', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        sdp: peerConnection.localDescription.sdp,
-                        type: peerConnection.localDescription.type,
-                        webrtc_id: webrtc_id
-                    })
-                });
-                const serverResponse = await response.json();
-                if (serverResponse.status === 'failed') {
-                    showError(serverResponse.meta.error === 'concurrency_limit_reached'
-                        ? `Too many connections. Maximum limit is ${serverResponse.meta.limit}`
-                        : serverResponse.meta.error);
-                    stop();
-                    startButton.textContent = 'Start';
-                    return;
-                }
-                await peerConnection.setRemoteDescription(serverResponse);
-                // Send initial confidence threshold
-                updateConfThreshold(confThreshold.value);
-                peerConnection.addEventListener('connectionstatechange', () => {
-                    if (peerConnection.connectionState === 'connected') {
-                        clearTimeout(timeoutId);
-                        const toast = document.getElementById('error-toast');
-                        toast.style.display = 'none';
-                    }
-                });
-            } catch (err) {
-                clearTimeout(timeoutId);
-                console.error('Error setting up WebRTC:', err);
-                showError('Failed to establish connection. Please try again.');
-                stop();
-                startButton.textContent = 'Start';
-            }
-        }
-        function stop() {
-            if (peerConnection) {
-                if (peerConnection.getTransceivers) {
-                    peerConnection.getTransceivers().forEach(transceiver => {
-                        if (transceiver.stop) {
-                            transceiver.stop();
-                        }
-                    });
-                }
-                if (peerConnection.getSenders) {
-                    peerConnection.getSenders().forEach(sender => {
-                        if (sender.track && sender.track.stop) sender.track.stop();
-                    });
-                }
-                setTimeout(() => {
-                    peerConnection.close();
-                }, 500);
-            }
-            videoOutput.srcObject = null;
-        }
-        startButton.addEventListener('click', () => {
-            if (startButton.textContent === 'Start') {
-                setupWebRTC();
-                startButton.textContent = 'Stop';
-            } else {
-                stop();
-                startButton.textContent = 'Start';
-            }
         });
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <title>LiveKit Object Detection</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: linear-gradient(135deg, #2d2b52 0%, #191731 100%);
+      color: white;
+      margin: 0;
+      padding: 20px;
+      height: 100vh;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .container {
+      max-width: 800px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .video-container {
+      max-width: 500px;
+      aspect-ratio: 1/1;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      margin: 10px 0;
+    }
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    button {
+      background: white;
+      color: #2d2b52;
+      border: none;
+      padding: 12px 32px;
+      border-radius: 24px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    }
+    .slider-container {
+      max-width: 300px;
+      margin-top: 16px;
+    }
+    input[type="range"] {
+      width: 100%;
+    }
+    label {
+      font-size: 14px;
+    }
+  </style>
 </head>
 <body>
+  <div class="container">
+    <h1>LiveKit Object Detection</h1>
+    <p>Stream webcam feed and detect objects using YOLOv10</p>
+    <div class="video-container">
+      <video id="video" autoplay muted playsinline></video>
     </div>
+    <div class="slider-container">
+      <label>Confidence Threshold: <span id="conf-value">0.3</span></label>
+      <input type="range" id="conf-threshold" min="0" max="1" step="0.01" value="0.3">
+    </div>
+    <button id="start-button">Start Streaming</button>
+  </div>
+  <script type="module">
+    import { connect } from "https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.esm.js";
+    const startBtn = document.getElementById("start-button");
+    const video = document.getElementById("video");
+    const confSlider = document.getElementById("conf-threshold");
+    const confVal = document.getElementById("conf-value");
+    let room;
+    let intervalId;
+    confSlider.addEventListener("input", () => {
+      confVal.textContent = confSlider.value;
+    });
+    async function startStream() {
+      const livekitURL = "wss://myvoiceassistant-h4f2cbzj.livekit.cloud"; // Replace this
+      const token = "APIVcbcyNpkNcsL";           // Replace this
+      room = await connect(livekitURL, token, {
+        video: true,
+        audio: false,
+      });
+      const pubTrack = room.localParticipant.getTrackPublications().find((pub) => pub.kind === "video");
+      const stream = new MediaStream([pubTrack.track.mediaStreamTrack]);
+      video.srcObject = stream;
+      // Send image frames to backend every 1 second
+      intervalId = setInterval(() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(video, 0, 0);
+        const imageData = canvas.toDataURL("image/jpeg");
+        fetch("http://localhost:8000/detect", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            image: imageData,
+            conf_threshold: parseFloat(confSlider.value)
+          })
         });
+      }, 1000);
+    }
+    startBtn.addEventListener("click", async () => {
+      if (startBtn.textContent === "Start Streaming") {
+        await startStream();
+        startBtn.textContent = "Stop Streaming";
+      } else {
+        if (room) room.disconnect();
+        if (intervalId) clearInterval(intervalId);
+        video.srcObject = null;
+        startBtn.textContent = "Start Streaming";
+      }
+    });
+  </script>
 </body>
+</html>