Update static/script.js

static/script.js

@@ -1,168 +1,136 @@
-/* ================================================================
-   1. WELCOME VOICE & INITIALIZATION
-================================================================ */
-window.onload = () => {
-    // FIX: Agar system shut down ho kar reload hua hai to welcome message na chalayen
-    if (sessionStorage.getItem('isShuttingDown') === 'true') {
-        sessionStorage.removeItem('isShuttingDown');
-        return;
-    }
-
-    const introSound = new Audio('/static/sounds/hitech-logo-intro-164339.mp3');
-    introSound.volume = 0.1;
-    introSound.play().catch(() => console.log("Sound blocked by browser"));
-
-    setTimeout(() => {
-        const nameElement = document.getElementById('user-name-data');
-        let actualName = "User"; 
-        if (nameElement && nameElement.innerText.trim() !== "") {
-            actualName = nameElement.innerText.trim();
-        }
-
-        const message = `Welcome ${actualName} to the Voice Vision world.`;
-        const speech = new SpeechSynthesisUtterance(message);
-
-        let voices = window.speechSynthesis.getVoices();
-        let selectedVoice = voices.find(voice => 
-            voice.name.includes('Google UK English Female') || 
-            voice.name.includes('Microsoft Zira') ||
-            voice.name.includes('Female')
-        );
-
-        if (selectedVoice) speech.voice = selectedVoice;
-        speech.rate = 0.85;
-        speech.pitch = 1.1;
-        
-        window.speechSynthesis.cancel();
-        window.speechSynthesis.speak(speech);
-    }, 1500);
-};
-
-window.speechSynthesis.onvoiceschanged = () => {
-    window.speechSynthesis.getVoices();
-};
-
-/* ================================================================
-   2. DASHBOARD DYNAMIC CONTROLS (POWER ON / OFF)
-================================================================ */
-let cameraOn = false;
-let detectionInterval;
-
-async function handlePowerOn() {
-    const card = document.getElementById('mainCard');
-    const welcome = document.getElementById('welcomeHeader');
-    const cameraBox = document.getElementById('cameraBox');
-    const powerBtn = document.getElementById('powerBtn');
-    const startDetectBtn = document.getElementById('startDetectBtn');
-    const powerOffBtn = document.getElementById('powerOffBtn');
-    const video = document.getElementById('video');
-
-    try {
-        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-        video.srcObject = stream;
-        cameraOn = true;
-
-        card.classList.add('card-expanded');
-        welcome.style.display = 'none';
-        cameraBox.style.display = 'block';
-
-        powerBtn.style.display = 'none';
-        startDetectBtn.style.display = 'block';
-        powerOffBtn.style.display = 'block';
-
-        const msg = new SpeechSynthesisUtterance("System online. Camera activated.");
-        window.speechSynthesis.speak(msg);
-
-    } catch (err) {
-        console.error("Camera access error:", err);
-        alert("Please allow camera access to use the dashboard.");
-    }
-}
-
-function handlePowerOff() {
-    // Flag set karein taake reload ke baad welcome na bole
-    sessionStorage.setItem('isShuttingDown', 'true');
-    
-    const msg = new SpeechSynthesisUtterance("System shutting down.");
-    window.speechSynthesis.cancel(); 
-    window.speechSynthesis.speak(msg);
-
-    // Reload se pehle thoda wait karein taake awaz puri ho
-    setTimeout(() => {
-        // location.reload() ki jagah hum simply home page par bhej dete hain
-        // taake camera aur interval clean ho jayein
-        window.location.href = "/dashboard"; 
-    }, 1500);
-}
-
-/* ================================================================
-   3. DETECTION & MODES HANDLING
-================================================================ */
-function handleStartDetection() {
-    const modeGroup = document.getElementById('modeButtonsGroup');
-    const startDetectBtn = document.getElementById('startDetectBtn');
-
-    modeGroup.style.display = 'flex';
-    startDetectBtn.style.display = 'none';
-
-    const msg = new SpeechSynthesisUtterance("Detection started. Select a mode.");
-    window.speechSynthesis.speak(msg);
-
-    detectionInterval = setInterval(sendFrameToBackend, 1500);
-}
-
-function activateMode(mode) {
-    const msg = new SpeechSynthesisUtterance(mode + " mode activated");
-    window.speechSynthesis.cancel();
-    window.speechSynthesis.speak(msg);
-}
-/* ================================================================
-   4. BACKEND COMMUNICATION (PROCESS FRAMES) Object_Detetion.py Script.js
-================================================================ */
-async function sendFrameToBackend() {
-    if (!cameraOn) return;
-
-    const canvas = document.getElementById('canvas');
-    const video = document.getElementById('video');
-    
-    if (!canvas || !video) return;
-
-    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.5); // Quality kam ki taake transfer fast ho
-
-    try {
-        // URL ko relative rakha hai taake browser block na kare
-        const response = await fetch('/process_frame', {
-            method: 'POST',
-            headers: { 
-                'Content-Type': 'application/json',
-                'Accept': 'application/json'
-            },
-            body: JSON.stringify({ image: dataUrl })
-        });
-
-        if (!response.ok) throw new Error('Network response was not ok');
-
-        const result = await response.json();
-        if (result.objects && result.objects.length > 0) {
-            speakResults(result.objects);
-        }
-    } catch (error) {
-        // Agar console me error aaye to yahan dikhega
-        console.log("Fetch Error: ", error.message);
-    }
-}
-
-function speakResults(objects) {
-    let message = "I can see " + objects.join(", ");
-    let speech = new SpeechSynthesisUtterance(message);
-    window.speechSynthesis.speak(speech);
-}
-
-function logout() {
-    window.location.href = "/logout";
+/* ================================================================ 
+   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";
 }