Update static/script.js

static/script.js

@@ -1,52 +1,181 @@
+// /* ================================================================ 
+//    1. WELCOME VOICE & INITIALIZATION
+// ================================================================ */
+// window.onload = () => {
+//     if (sessionStorage.getItem('isShuttingDown') === 'true') {
+//         sessionStorage.removeItem('isShuttingDown');
+//         return;
+//     }
+    
+//     // Welcome sound & speech logic
+//     setTimeout(() => {
+//         const nameElement = document.getElementById('user-name-data');
+//         let actualName = (nameElement && nameElement.innerText.trim() !== "") ? nameElement.innerText.trim() : "User";
+        
+//         const message = `Welcome ${actualName} to the Voice Vision world.`;
+//         const speech = new SpeechSynthesisUtterance(message);
+//         speech.rate = 0.9;
+//         window.speechSynthesis.speak(speech);
+//     }, 1500);
+// };
+
+// /* ================================================================ 
+//    2. DASHBOARD DYNAMIC CONTROLS (POWER ON / OFF)
+// ================================================================ */
+// let cameraOn = false;
+// let isDetecting = false;
+
+// async function handlePowerOn() {
+//     const video = document.getElementById('video');
+//     const cameraBox = document.getElementById('cameraBox');
+//     const powerBtn = document.getElementById('powerBtn');
+    
+//     try {
+//         // Muted hona zaroori hai browser policy ke liye
+//         const stream = await navigator.mediaDevices.getUserMedia({ 
+//             video: { width: 640, height: 480 } 
+//         });
+//         video.srcObject = stream;
+//         cameraOn = true;
+        
+//         cameraBox.style.display = 'block';
+//         powerBtn.style.display = 'none';
+//         document.getElementById('startDetectBtn').style.display = 'inline-block';
+//         document.getElementById('powerOffBtn').style.display = 'inline-block';
+        
+//         window.speechSynthesis.speak(new SpeechSynthesisUtterance("System online."));
+//     } catch (err) {
+//         alert("Camera permission denied!");
+//         console.error(err);
+//     }
+// }
+
+// function handlePowerOff() {
+//     sessionStorage.setItem('isShuttingDown', 'true');
+//     window.location.reload(); 
+// }
+
+// /* ================================================================ 
+//    3. DETECTION LOGIC (Cloud Optimized)
+// ================================================================ */
+// function handleStartDetection() {
+//     isDetecting = true;
+//     document.getElementById('modeButtonsGroup').style.display = 'flex';
+//     document.getElementById('startDetectBtn').style.display = 'none';
+    
+//     window.speechSynthesis.speak(new SpeechSynthesisUtterance("Detection started."));
+    
+//     // Detection loop shuru karein
+//     captureAndSend();
+// }
+
+// async function captureAndSend() {
+//     if (!cameraOn || !isDetecting) return;
+
+//     const video = document.getElementById('video');
+//     const canvas = document.createElement('canvas'); // Arzi canvas frame lene ke liye
+//     canvas.width = 640;
+//     canvas.height = 480;
+//     const ctx = canvas.getContext('2d');
+    
+//     ctx.drawImage(video, 0, 0, 640, 480);
+//     const dataUrl = canvas.toDataURL('image/jpeg', 0.6); // Quality kam taake fast transfer ho
+
+//     try {
+//         const response = await fetch('/process_frame', {
+//             method: 'POST',
+//             headers: { 'Content-Type': 'application/json' },
+//             body: JSON.stringify({ image: dataUrl })
+//         });
+
+//         const result = await response.json();
+        
+//         if (result.detections) {
+//             // Screen par boxes draw karne wala function
+//             drawDetections(result.detections);
+            
+//             // Agar koi object milay to bolein
+//             if (result.detections.length > 0) {
+//                 const labels = result.detections.map(d => d.label).join(", ");
+//                 // Sirf tab bolein jab naya object aaye (optional)
+//                 // window.speechSynthesis.speak(new SpeechSynthesisUtterance("I see " + labels));
+//             }
+//         }
+//     } catch (error) {
+//         console.log("Error sending frame:", error);
+//     }
+
+//     // Har 1 second baad agla frame bhejein (Cloud ke liye 1s safe hai)
+//     if (isDetecting) setTimeout(captureAndSend, 1000);
+// }
+
+// // Canvas par Boxes draw karne ka function
+// function drawDetections(detections) {
+//     const canvas = document.getElementById('detectionCanvas');
+//     if (!canvas) return;
+//     const ctx = canvas.getContext('2d');
+//     ctx.clearRect(0, 0, canvas.width, canvas.height); // Purane boxes saaf karein
+
+//     detections.forEach(det => {
+//         const [x1, y1, x2, y2] = det.box;
+        
+//         // Box style
+//         ctx.strokeStyle = "#00FF00";
+//         ctx.lineWidth = 3;
+//         ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+//         // Label style
+//         ctx.fillStyle = "#00FF00";
+//         ctx.font = "18px Arial";
+//         ctx.fillText(`${det.label} (${Math.round(det.confidence * 100)}%)`, x1, y1 > 20 ? y1 - 5 : y1 + 20);
+//     });
+// }
+
+// function logout() {
+//     window.location.href = "/logout";
+// }
+
+
+
 /* ================================================================ 
-   1. WELCOME VOICE & INITIALIZATION
+   1. INITIALIZATION & WELCOME
 ================================================================ */
 window.onload = () => {
-    if (sessionStorage.getItem('isShuttingDown') === 'true') {
-        sessionStorage.removeItem('isShuttingDown');
-        return;
-    }
+    const nameElement = document.getElementById('user-name-data');
+    let actualName = (nameElement && nameElement.innerText.trim() !== "") ? nameElement.innerText.trim() : "User";
     
-    // Welcome sound & speech logic
     setTimeout(() => {
-        const nameElement = document.getElementById('user-name-data');
-        let actualName = (nameElement && nameElement.innerText.trim() !== "") ? nameElement.innerText.trim() : "User";
-        
-        const message = `Welcome ${actualName} to the Voice Vision world.`;
-        const speech = new SpeechSynthesisUtterance(message);
-        speech.rate = 0.9;
-        window.speechSynthesis.speak(speech);
+        speak(`Welcome ${actualName} to the Voice Vision world.`);
     }, 1500);
 };
 
-/* ================================================================ 
-   2. DASHBOARD DYNAMIC CONTROLS (POWER ON / OFF)
-================================================================ */
 let cameraOn = false;
 let isDetecting = false;
+let isProcessing = false;
+let lastSpoken = "";
 
+/* ================================================================ 
+   2. POWER CONTROLS
+================================================================ */
 async function handlePowerOn() {
     const video = document.getElementById('video');
-    const cameraBox = document.getElementById('cameraBox');
     const powerBtn = document.getElementById('powerBtn');
     
     try {
-        // Muted hona zaroori hai browser policy ke liye
         const stream = await navigator.mediaDevices.getUserMedia({ 
             video: { width: 640, height: 480 } 
         });
         video.srcObject = stream;
         cameraOn = true;
         
-        cameraBox.style.display = 'block';
+        // UI Updates
         powerBtn.style.display = 'none';
         document.getElementById('startDetectBtn').style.display = 'inline-block';
         document.getElementById('powerOffBtn').style.display = 'inline-block';
         
-        window.speechSynthesis.speak(new SpeechSynthesisUtterance("System online."));
+        speak("System online. Camera activated.");
     } catch (err) {
-        alert("Camera permission denied!");
-        console.error(err);
+        alert("Camera access denied! Please allow camera from browser settings.");
     }
 }
 
@@ -56,30 +185,29 @@ function handlePowerOff() {
 }
 
 /* ================================================================ 
-   3. DETECTION LOGIC (Cloud Optimized)
+   3. DETECTION & REALITY-BASED VI LOGIC
 ================================================================ */
 function handleStartDetection() {
     isDetecting = true;
     document.getElementById('modeButtonsGroup').style.display = 'flex';
     document.getElementById('startDetectBtn').style.display = 'none';
     
-    window.speechSynthesis.speak(new SpeechSynthesisUtterance("Detection started."));
-    
-    // Detection loop shuru karein
+    speak("Detection started. Focusing on your path.");
     captureAndSend();
 }
 
 async function captureAndSend() {
-    if (!cameraOn || !isDetecting) return;
+    if (!cameraOn || !isDetecting || isProcessing) return;
 
     const video = document.getElementById('video');
-    const canvas = document.createElement('canvas'); // Arzi canvas frame lene ke liye
+    const canvas = document.createElement('canvas'); 
     canvas.width = 640;
     canvas.height = 480;
     const ctx = canvas.getContext('2d');
-    
     ctx.drawImage(video, 0, 0, 640, 480);
-    const dataUrl = canvas.toDataURL('image/jpeg', 0.6); // Quality kam taake fast transfer ho
+    
+    const dataUrl = canvas.toDataURL('image/jpeg', 0.4); 
+    isProcessing = true;
 
     try {
         const response = await fetch('/process_frame', {
@@ -89,48 +217,72 @@ async function captureAndSend() {
         });
 
         const result = await response.json();
-        
         if (result.detections) {
-            // Screen par boxes draw karne wala function
             drawDetections(result.detections);
-            
-            // Agar koi object milay to bolein
-            if (result.detections.length > 0) {
-                const labels = result.detections.map(d => d.label).join(", ");
-                // Sirf tab bolein jab naya object aaye (optional)
-                // window.speechSynthesis.speak(new SpeechSynthesisUtterance("I see " + labels));
-            }
+            processVIAwareness(result.detections);
         }
     } catch (error) {
-        console.log("Error sending frame:", error);
+        console.log("Network lag...");
+    } finally {
+        isProcessing = false;
+        // 500ms delay for stability on Hugging Face
+        if (isDetecting) setTimeout(captureAndSend, 500);
     }
-
-    // Har 1 second baad agla frame bhejein (Cloud ke liye 1s safe hai)
-    if (isDetecting) setTimeout(captureAndSend, 1000);
 }
 
-// Canvas par Boxes draw karne ka function
+// Draw Boxes on Canvas
 function drawDetections(detections) {
     const canvas = document.getElementById('detectionCanvas');
-    if (!canvas) return;
     const ctx = canvas.getContext('2d');
-    ctx.clearRect(0, 0, canvas.width, canvas.height); // Purane boxes saaf karein
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    detections.forEach(det => {
-        const [x1, y1, x2, y2] = det.box;
-        
-        // Box style
-        ctx.strokeStyle = "#00FF00";
+    detections.forEach((det, index) => {
+        // det object contains x, y, w, h from backend
+        ctx.strokeStyle = index === 0 ? "#00FF00" : "#ffcc00"; // Green for closest object
         ctx.lineWidth = 3;
-        ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+        ctx.strokeRect(det.x, det.y, det.w, det.h);
 
-        // Label style
-        ctx.fillStyle = "#00FF00";
-        ctx.font = "18px Arial";
-        ctx.fillText(`${det.label} (${Math.round(det.confidence * 100)}%)`, x1, y1 > 20 ? y1 - 5 : y1 + 20);
+        ctx.fillStyle = index === 0 ? "#00FF00" : "#ffcc00";
+        ctx.font = "bold 18px Arial";
+        ctx.fillText(det.label.toUpperCase(), det.x, det.y - 10);
     });
 }
 
+// REALITY-BASED LOGIC: Direction + Proximity
+function processVIAwareness(detections) {
+    if (detections.length === 0) return;
+
+    // Sorting backend pe ho chuki hai, detections[0] sabse bari cheez hai
+    let obj = detections[0];
+    let centerX = obj.x + (obj.w / 2);
+    let area = (obj.w * obj.h) / (640 * 480);
+
+    // 1. Direction Logic (Clock System)
+    let direction = "in front of you";
+    if (centerX < 213) direction = "on your left";
+    else if (centerX > 426) direction = "on your right";
+
+    // 2. Proximity Logic (Distance)
+    let warning = "";
+    if (area > 0.45) warning = "STOP! OBSTACLE VERY CLOSE. ";
+    else if (area > 0.2) warning = "Careful, ";
+
+    let finalMessage = `${warning}${obj.label} ${direction}`;
+
+    // Sirf tab bolein jab object ya direction badle
+    if (finalMessage !== lastSpoken) {
+        speak(finalMessage);
+        lastSpoken = finalMessage;
+    }
+}
+
+function speak(text) {
+    window.speechSynthesis.cancel(); // Backlog saaf karein
+    let msg = new SpeechSynthesisUtterance(text);
+    msg.rate = 1.2;
+    window.speechSynthesis.speak(msg);
+}
+
 function logout() {
     window.location.href = "/logout";
 }