Update templates/predict.html

templates/predict.html

@@ -32,12 +32,24 @@
       <div class="col-md-6 mb-4">
         <label for="water_requirement" class="result-label">Predicted Water Requirement (m³/sq.m):</label>
         <input type="text" class="form-control" id="water_requirement" value="{{ water_requirement }}" readonly>
-        <div class="gauge-container">{{ water_gauge|safe }}</div>
+        <div class="gauge-container">
+          {% if water_img %}
+            <img src="{{ water_img }}" alt="Water gauge" class="img-fluid" style="max-height:360px;">
+          {% else %}
+            {{ water_gauge|safe }}
+          {% endif %}
+        </div>
       </div>
       <div class="col-md-6 mb-4">
         <label for="estimated_time" class="result-label">Estimated Motor On-Time:</label>
         <input type="text" class="form-control" id="estimated_time" value="{{ estimated_time_duration }} {{ time_unit }}" readonly>
-        <div class="gauge-container">{{ time_gauge|safe }}</div>
+        <div class="gauge-container">
+          {% if time_img %}
+            <img src="{{ time_img }}" alt="Time gauge" class="img-fluid" style="max-height:360px;">
+          {% else %}
+            {{ time_gauge|safe }}
+          {% endif %}
+        </div>
       </div>
     </div>
 
@@ -61,6 +73,7 @@
     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
@@ -93,6 +106,7 @@
           clearInterval(pollingInterval);
         });
     }
+
     // --- FUNCTION TO ACTIVATE CAMERA AND VISUAL TIMER ---
     function startCameraAndTimer(timeRemainingSeconds) {
       // Show camera container
@@ -112,10 +126,12 @@
       } 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) {
@@ -130,10 +146,12 @@
         timeRemaining--;
       }, 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;