Spaces:

RushiMane2003
/

irrigation_trial

Sleeping

App Files Files Community

RushiMane2003 commited on Sep 24, 2025

Commit

77d5f23

verified ·

1 Parent(s): 14cd95a

Update templates/predict.html

Browse files

Files changed (1) hide show

templates/predict.html +66 -101

templates/predict.html CHANGED Viewed

@@ -1,25 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Prediction Results</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
   <style>
-    /* (same styles as before, trimmed here for brevity) */
-    body { background-color: #f4f8f4; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-    .header { background-color: #28a745; color: white; padding: 20px; text-align: center; font-weight: bold; }
-    .container { margin-top: 30px; padding: 20px; background-color: white; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.5s ease-in-out; }
-    .form-control[readonly] { font-size: 1.2rem; text-align: center; font-weight: bold; color: #28a745; background-color: #e9f5e9; border: 2px solid #28a745; }
-    .btn-start-motor { background-color: #28a745; color: white; font-size: 1.2rem; padding: 12px 25px; font-weight: bold; border-radius: 8px; transition: background-color 0.3s; }
-    .camera-container { margin-top: 20px; display: none; flex-direction: column; align-items: center; gap: 20px; }
-    video { width: 100%; max-width: 720px; height: auto; border-radius: 10px; border: 2px solid #ddd; background-color: #000; }
-    .timer { font-size: 2rem; color: white; background-color: #28a745; font-weight: bold; padding: 10px 25px; border-radius: 10px; display: inline-block; min-width: 120px; text-align: center; }
-    .timer-finished { font-size: 1.5rem; padding: 15px 40px; background-color: #28a745; }
-    .alert-message { font-size: 1.2rem; font-weight: bold; margin-top: 10px; text-align: center; }
   </style>
 </head>
 <body>
   <div class="header">
     <h1>Water Requirement Prediction Results</h1>
   </div>
@@ -39,9 +42,8 @@
     </div>
     <div class="info-card">
-      <h4>Want to automatically inspect your irrigation process?</h4>
-      <p class="mt-3">We will start the camera & monitoring when you reply <strong>1</strong> on WhatsApp. Reply <strong>0</strong> to cancel.</p>
-      <p>Make sure to reply to the WhatsApp message we sent earlier. (If you didn't receive it, check your phone number or resubmit prediction.)</p>
     </div>
     <div class="camera-container" id="cameraContainer">
@@ -49,119 +51,83 @@
       <video id="videoElement" autoplay playsinline></video>
       <div class="timer" id="timer"></div>
     </div>
-    <div class="alert-message" id="alertMessage"></div>
   </div>
-  <!-- Modal that appears after prediction, instructing the user to reply '1' on WhatsApp -->
-  <div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="whatsappModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header" style="background-color:#28a745;color:white;">
-          <h5 class="modal-title" id="whatsappModalLabel">Start Monitoring</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <p>To start live monitoring (camera + motor), please reply <strong>1</strong> on WhatsApp to the message we just sent you. Reply <strong>0</strong> to cancel.</p>
-          <p class="mb-0">This page will start the camera automatically when your WhatsApp reply is received.</p>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ok, got it</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
   <script>
-    // Variables
-    const estimatedTime = parseFloat("{{ estimated_time_duration }}");
-    const timeUnit = "{{ time_unit }}";
-    const estimatedTimeSecondsFromServer = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime;
     let clientTimerInterval = null;
     let cameraStream = null;
-    let pollingInterval = null;
-    let currentlyMonitoring = false;
-    // Show container and modal on load
     window.onload = function() {
-      document.querySelector('.container').style.opacity = 1;
-      // Show the WhatsApp instruction modal
-      var whatsappModalEl = document.getElementById('whatsappModal');
-      var bsModal = new bootstrap.Modal(whatsappModalEl, { backdrop: 'static', keyboard: false });
-      bsModal.show();
-      // start polling for monitor status
-      pollingInterval = setInterval(checkMonitorStatus, 2000);
-      // check once immediately
-      checkMonitorStatus();
     };
     function checkMonitorStatus() {
-      fetch('/monitor_status')
         .then(resp => resp.json())
         .then(data => {
-          const isMon = data.monitoring === true;
-          if (isMon && !currentlyMonitoring) {
-            // transition to monitoring ON
-            currentlyMonitoring = true;
-            startCameraAndTimer(data.time_remaining ?? Math.floor(estimatedTimeSecondsFromServer));
-            document.getElementById('alertMessage').textContent = "Monitoring started (triggered by WhatsApp).";
-          } else if (!isMon && currentlyMonitoring) {
-            // transition to monitoring OFF
-            currentlyMonitoring = false;
             stopCameraAndTimer();
-            document.getElementById('alertMessage').textContent = "Monitoring stopped.";
-          } else {
-            // no change - optionally update time remaining
-            if (isMon && data.time_remaining != null) {
-              // update timer display if running
-              const t = data.time_remaining;
-              document.getElementById('timer').textContent = t + "s";
-            }
           }
         })
         .catch(err => {
-          console.error('monitor_status error', err);
         });
     }
-    function startCameraAndTimer(timeRemainingSec) {
-      // Start camera
-      const cameraContainer = document.getElementById('cameraContainer');
-      cameraContainer.style.display = 'flex';
-      const videoElem = document.getElementById('videoElement');
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
           .then(function(stream) {
             cameraStream = stream;
-            videoElem.srcObject = stream;
           })
           .catch(function(err) {
-            console.error("Camera Error: " + err);
             alert("Could not access the camera. Please ensure you have given permission.");
           });
       } else {
         alert("Camera API not supported in this browser.");
       }
-      // Client countdown (best-effort; server controls final stop)
-      clearInterval(clientTimerInterval);
-      let timeRemaining = Math.max(0, Math.floor(timeRemainingSec));
-      const timerElem = document.getElementById('timer');
       timerElem.classList.remove('timer-finished');
       clientTimerInterval = setInterval(function() {
         if (timeRemaining <= 0) {
           clearInterval(clientTimerInterval);
           timerElem.textContent = "Finished";
           timerElem.classList.add('timer-finished');
-          try {
-            const beep = new Audio('/static/alarn_tune.mp3');
-            beep.play().catch(()=>{});
-          } catch(e) {}
-          document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off automatically.";
         } else {
           timerElem.textContent = timeRemaining + "s";
         }
@@ -169,20 +135,19 @@
       }, 1000);
     }
     function stopCameraAndTimer() {
-      // Stop client timer
       clearInterval(clientTimerInterval);
-      const timerElem = document.getElementById('timer');
-      timerElem.textContent = "";
-      timerElem.classList.remove('timer-finished');
-      // Stop camera stream
       if (cameraStream) {
         cameraStream.getTracks().forEach(track => track.stop());
         cameraStream = null;
       }
-      document.getElementById('cameraContainer').style.display = 'none';
     }
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Prediction Results</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
+      body { background-color: #f4f8f4; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+      .header { background-color: #28a745; color: white; padding: 20px; text-align: center; font-weight: bold; }
+      .container { margin-top: 30px; padding: 20px; background-color: white; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+      .result-label { font-weight: bold; color: #555; }
+      .form-control[readonly] { font-size: 1.2rem; text-align: center; font-weight: bold; color: #28a745; background-color: #e9f5e9; border: 2px solid #28a745; }
+      .gauge-container { margin-top: 20px; text-align: center; }
+      .info-card { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 25px; margin-top: 40px; text-align: center; }
+      .camera-container { margin-top: 20px; display: none; flex-direction: column; align-items: center; gap: 20px; }
+      video { width: 100%; max-width: 720px; height: auto; border-radius: 10px; border: 2px solid #ddd; background-color: #000; }
+      .timer { font-size: 2rem; color: white; background-color: #28a745; font-weight: bold; padding: 10px 25px; border-radius: 10px; display: inline-block; min-width: 120px; text-align: center; }
+      .timer-finished { font-size: 1.5rem; padding: 15px 40px; background-color: #dc3545; }
+      .alert-message { font-size: 1.2rem; font-weight: bold; margin-top: 20px; text-align: center; }
+      .modal-header { background-color: #28a745; color: white; }
   </style>
 </head>
 <body>
   <div class="header">
     <h1>Water Requirement Prediction Results</h1>
   </div>
     </div>
     <div class="info-card">
+      <h4>AI-Driven Irrigation Monitoring</h4>
+      <p class="mt-3">A message has been sent to your WhatsApp. Please reply <strong>1</strong> to start the motor and activate live monitoring here, or reply <strong>0</strong> to cancel the operation.</p>
     </div>
     <div class="camera-container" id="cameraContainer">
       <video id="videoElement" autoplay playsinline></video>
       <div class="timer" id="timer"></div>
     </div>
+    <div class="alert-message text-success" id="alertMessage">Waiting for WhatsApp confirmation...</div>
   </div>
   <script>
+    // --- GLOBAL VARIABLES ---
+    let pollingInterval = null;
     let clientTimerInterval = null;
     let cameraStream = null;
+    let isMonitoringActive = false;
+    // --- MAIN FUNCTION TO START POLLING ---
     window.onload = function() {
+      // Start polling the server for status updates every 3 seconds
+      pollingInterval = setInterval(checkMonitorStatus, 3000);
+      checkMonitorStatus(); // Check immediately on load
     };
+    // --- FUNCTION TO CHECK STATUS WITH THE SERVER ---
     function checkMonitorStatus() {
+      fetch('/monitoring_status')
         .then(resp => resp.json())
         .then(data => {
+          if (data.monitoring && !isMonitoringActive) {
+            // --- START MONITORING ---
+            isMonitoringActive = true;
+            console.log("Server indicated to start monitoring.");
+            document.getElementById('alertMessage').textContent = "✅ Monitoring started via WhatsApp confirmation!";
+            startCameraAndTimer(data.time_remaining);
+          } else if (!data.monitoring && isMonitoringActive) {
+            // --- STOP MONITORING (e.g., if task is canceled or completed on server) ---
+            isMonitoringActive = false;
+            console.log("Server indicated to stop monitoring.");
+            document.getElementById('alertMessage').textContent = "Monitoring has been stopped or completed.";
             stopCameraAndTimer();
           }
         })
         .catch(err => {
+          console.error('Error polling for status:', err);
+          // Stop polling if there is an error to avoid spamming the console
+          clearInterval(pollingInterval);
         });
     }
+    // --- FUNCTION TO ACTIVATE CAMERA AND VISUAL TIMER ---
+    function startCameraAndTimer(timeRemainingSeconds) {
+      // Show camera container
+      document.getElementById('cameraContainer').style.display = 'flex';
+      // Start Camera
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
           .then(function(stream) {
             cameraStream = stream;
+            document.getElementById('videoElement').srcObject = stream;
           })
           .catch(function(err) {
+            console.error("Camera Error: ", err);
             alert("Could not access the camera. Please ensure you have given permission.");
           });
       } else {
         alert("Camera API not supported in this browser.");
       }
+      // Start client-side visual countdown timer
+      let timeRemaining = Math.floor(timeRemainingSeconds);
+      let timerElem = document.getElementById('timer');
       timerElem.classList.remove('timer-finished');
+      clearInterval(clientTimerInterval); // Clear any existing timer
       clientTimerInterval = setInterval(function() {
         if (timeRemaining <= 0) {
           clearInterval(clientTimerInterval);
           timerElem.textContent = "Finished";
           timerElem.classList.add('timer-finished');
+          document.getElementById('alertMessage').textContent = "Irrigation time is over. The motor has stopped automatically.";
+          stopCameraAndTimer(); // Also stop camera stream
         } else {
           timerElem.textContent = timeRemaining + "s";
         }
       }, 1000);
     }
+    // --- FUNCTION TO STOP CAMERA AND TIMER ---
     function stopCameraAndTimer() {
       clearInterval(clientTimerInterval);
+      clearInterval(pollingInterval); // Stop polling once task is over
       if (cameraStream) {
         cameraStream.getTracks().forEach(track => track.stop());
         cameraStream = null;
       }
+      // We can hide the camera container or leave it visible with a "Finished" message
+      // document.getElementById('cameraContainer').style.display = 'none';
     }
   </script>
 </body>
+</html>