added all files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/alarn_tune.mp3 filter=lfs diff=lfs merge=lfs -text
+static/images/img.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,21 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy only requirements first to leverage Docker caching
+COPY requirements.txt /app/
+
+# Install dependencies before copying the full application
+RUN pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application files
+COPY . /app
+
+# Expose the Flask port (Hugging Face Spaces uses port 7860 by default)
+EXPOSE 7860
+
+# Command to run the Flask app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,250 @@
+from flask import Flask, render_template, request, jsonify
+import joblib
+import pandas as pd
+import requests
+import json
+import plotly.graph_objects as go
+from twilio.rest import Client
+from twilio.twiml.messaging_response import MessagingResponse
+import threading
+import os
+
+app = Flask(__name__)
+
+# --- Global variable to store the latest irrigation parameters ---
+# This acts as a temporary session to hold data between the prediction and the WhatsApp confirmation.
+last_irrigation_params = {}
+
+# --- Load the pre-trained SVM model ---
+try:
+    svm_poly_model = joblib.load('svm_poly_model.pkl')
+except FileNotFoundError:
+    print("Error: svm_poly_model.pkl not found. Make sure the model file is in the correct directory.")
+    svm_poly_model = None
+
+# --- Data Mappings for the Model ---
+# These mappings convert categorical form inputs into numerical values for the SVM model.
+crop_type_mapping = {
+    'BANANA': 0, 'BEAN': 1, 'CABBAGE': 2, 'CITRUS': 3, 'COTTON': 4, 'MAIZE': 5, 
+    'MELON': 6, 'MUSTARD': 7, 'ONION': 8, 'OTHER': 9, 'POTATO': 10, 'RICE': 11, 
+    'SOYABEAN': 12, 'SUGARCANE': 13, 'TOMATO': 14, 'WHEAT': 15
+}
+soil_type_mapping = {'DRY': 0, 'HUMID': 1, 'WET': 2}
+weather_condition_mapping = {'NORMAL': 0, 'RAINY': 1, 'SUNNY': 2, 'WINDY': 3}
+
+# --- API Keys and Credentials ---
+# It's highly recommended to use environment variables for security.
+WEATHER_API_KEY = os.getenv('WEATHER_API', 'YOUR_DEFAULT_WEATHER_API_KEY')
+TWILIO_ACCOUNT_SID = os.getenv('TWILIO_ACCOUNT_SID', 'AC490e071f8d01bf0df2f03d086c788d87')
+TWILIO_AUTH_TOKEN = os.getenv('TWILIO_AUTH_TOKEN', '224b23b950ad5a4052aba15893fdf083')
+TWILIO_PHONE_NUMBER = 'whatsapp:+14155238886'
+USER_PHONE_NUMBER = 'whatsapp:+917559355282' # The farmer's WhatsApp number
+
+# Initialize Twilio Client
+twilio_client = Client(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN)
+
+def get_weather(city: str):
+    """Fetches weather data from OpenWeatherMap API."""
+    url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&appid={WEATHER_API_KEY}&units=metric"
+    try:
+        response = requests.get(url)
+        response.raise_for_status()  # Raises an HTTPError for bad responses (4xx or 5xx)
+        data = response.json()
+        
+        if data['cod'] == 200:
+            weather_description = data['weather'][0]['description']
+            temperature = data['main']['temp']
+            humidity = data['main']['humidity']
+            pressure = data['main']['pressure']
+            return temperature, humidity, weather_description, pressure
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching weather data: {e}")
+    except (KeyError, json.JSONDecodeError):
+        print("Error parsing weather data.")
+        
+    return None, None, None, None
+
+def send_whatsapp_message(to_number, body_text):
+    """General function to send WhatsApp messages via Twilio."""
+    try:
+        message = twilio_client.messages.create(
+            from_=TWILIO_PHONE_NUMBER,
+            body=body_text,
+            to=to_number
+        )
+        print(f"Twilio Message SID: {message.sid}")
+        return message.sid
+    except Exception as e:
+        print(f"Error sending WhatsApp message: {e}")
+        return None
+
+def trigger_irrigation_complete():
+    """Function called by the timer when irrigation is finished."""
+    global last_irrigation_params
+    if not last_irrigation_params:
+        print("No irrigation parameters found for completion message.")
+        return
+
+    crop_type = last_irrigation_params.get('crop_type', 'N/A')
+    city = last_irrigation_params.get('city', 'N/A')
+    estimated_time = last_irrigation_params.get('estimated_time_duration', 0)
+    time_unit = last_irrigation_params.get('time_unit', 'seconds')
+
+    message_text = (
+        f"✅ Irrigation Complete!\n\n"
+        f"Crop: {crop_type}\n"
+        f"Location: {city}\n"
+        f"Duration: {estimated_time:.2f} {time_unit}\n\n"
+        "The motor has been turned off automatically."
+    )
+    send_whatsapp_message(USER_PHONE_NUMBER, message_text)
+    print(f"Irrigation complete message sent after {estimated_time:.2f} {time_unit}.")
+
+# --- Flask Routes ---
+
+@app.route('/')
+def index():
+    """Renders the main input page."""
+    return render_template('index.html')
+
+@app.route('/fetch_weather', methods=['GET'])
+def fetch_weather():
+    """API endpoint to fetch weather data for the front-end."""
+    city = request.args.get('city')
+    if city:
+        temperature, humidity, description, pressure = get_weather(city)
+        if temperature is not None:
+            return jsonify({
+                'description': description.capitalize(),
+                'temperature': temperature,
+                'humidity': humidity,
+                'pressure': pressure
+            })
+    return jsonify(None), 404
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Handles form submission, runs prediction, and shows results."""
+    if svm_poly_model is None:
+        return "Model not loaded, cannot perform prediction.", 500
+        
+    global last_irrigation_params
+
+    # --- 1. Get Form Data ---
+    crop_type = request.form['crop_type']
+    soil_type = request.form['soil_type']
+    city = request.form['city']
+    motor_capacity = float(request.form['motor_capacity'])
+
+    # --- 2. Get Weather Data ---
+    temperature, humidity, description, pressure = get_weather(city)
+    if temperature is None: # Fallback if API fails
+        temperature, humidity, description, pressure = 32.0, 60, "Not Available", 1012
+        weather_condition = 'NORMAL'
+    else:
+        desc_lower = description.lower()
+        weather_condition = ('SUNNY' if 'clear' in desc_lower else
+                             'RAINY' if 'rain' in desc_lower else
+                             'WINDY' if 'wind' in desc_lower else
+                             'NORMAL')
+
+    # --- 3. Prepare Data for Model ---
+    user_data = pd.DataFrame({
+        'CROP TYPE': [crop_type_mapping.get(crop_type)],
+        'SOIL TYPE': [soil_type_mapping.get(soil_type)],
+        'TEMPERATURE': [temperature],
+        'WEATHER CONDITION': [weather_condition_mapping.get(weather_condition)]
+    })
+
+    # --- 4. Predict Water Requirement ---
+    water_requirement = svm_poly_model.predict(user_data)[0]
+
+    # --- 5. Calculate Motor On-Time ---
+    estimated_time_seconds = (water_requirement / motor_capacity) if motor_capacity > 0 else 0
+    if estimated_time_seconds < 120:
+        time_unit = "seconds"
+        display_time = estimated_time_seconds
+    else:
+        time_unit = "minutes"
+        display_time = estimated_time_seconds / 60
+
+    # --- 6. Store Parameters and Send WhatsApp ---
+    last_irrigation_params = {
+        "estimated_time_seconds": estimated_time_seconds,
+        "estimated_time_duration": display_time,
+        "time_unit": time_unit,
+        "crop_type": crop_type,
+        "city": city,
+    }
+
+    message_to_farmer = (
+        f"💧 Irrigation Prediction Ready 💧\n\n"
+        f"Crop: *{crop_type}*\n"
+        f"Location: *{city}*\n"
+        f"Weather: {description.capitalize()}, {temperature}°C\n"
+        f"Water Needed: *{water_requirement:.2f} m³/sq.m*\n"
+        f"Est. Motor Time: *{display_time:.2f} {time_unit}*\n\n"
+        "Reply *1* to START the motor.\n"
+        "Reply *0* to CANCEL."
+    )
+    send_whatsapp_message(USER_PHONE_NUMBER, message_to_farmer)
+
+    # --- 7. Create Gauge Charts for UI ---
+    water_gauge = go.Figure(go.Indicator(
+        mode="gauge+number", value=water_requirement, title={"text": "Water Req (m³/sq.m)"},
+        gauge={"axis": {"range": [None, 100]}, "bar": {"color": "royalblue"}}
+    ))
+    time_gauge = go.Figure(go.Indicator(
+        mode="gauge+number", value=round(display_time, 2), title={"text": f"Time ({time_unit})"},
+        gauge={"axis": {"range": [None, 60 if time_unit == 'seconds' else 120]}, "bar": {"color": "green"}}
+    ))
+
+    # --- 8. Render Results Page ---
+    return render_template('predict.html',
+                           water_requirement=round(water_requirement, 2),
+                           estimated_time_duration=round(display_time, 2),
+                           time_unit=time_unit,
+                           water_gauge=water_gauge.to_html(full_html=False),
+                           time_gauge=time_gauge.to_html(full_html=False),
+                           crop_type=crop_type, city=city)
+
+@app.route('/twilio_reply', methods=['POST'])
+def twilio_reply():
+    """Handles incoming WhatsApp replies to start or cancel the motor."""
+    global last_irrigation_params
+    message_body = request.values.get('Body', '').strip()
+    resp = MessagingResponse()
+
+    if message_body == "1":
+        if last_irrigation_params and 'estimated_time_seconds' in last_irrigation_params:
+            duration_sec = last_irrigation_params['estimated_time_seconds']
+            
+            # Start a background timer thread
+            timer = threading.Timer(duration_sec, trigger_irrigation_complete)
+            timer.daemon = True
+            timer.start()
+            
+            resp.message(f"✅ Motor started! Irrigation will run for {last_irrigation_params['estimated_time_duration']:.2f} {last_irrigation_params['time_unit']} and will stop automatically.")
+        else:
+            resp.message("❌ Error: No pending irrigation task found. Please submit a new prediction first.")
+    elif message_body == "0":
+        resp.message("👍 Motor start has been canceled.")
+        last_irrigation_params = {} # Clear params
+    else:
+        resp.message("Invalid reply. Please reply '1' to start the motor or '0' to cancel.")
+
+    return str(resp)
+
+# Dummy endpoints called from front-end JS, actual logic is handled via WhatsApp reply
+@app.route('/start_motor', methods=['POST'])
+def start_motor():
+    return jsonify({"status": "motor_start_request_logged"})
+
+@app.route('/irrigation_complete', methods=['POST'])
+def irrigation_complete():
+    return jsonify({"status": "irrigation_complete_request_logged"})
+
+
+if __name__ == "__main__":
+    # For development, use debug=True. For production, use a proper WSGI server like Gunicorn.
+    app.run(host="0.0.0.0", port=7860, debug=True)

requirements.txt

@@ -0,0 +1,10 @@
+gunicorn
+pandas
+numpy
+matplotlib
+joblib==1.4.2
+plotly
+scikit-learn==1.3.2
+flask
+requests
+twilio

static/alarn_tune.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:22fdba64b8d71c233e8659af532b588d7ee216bb4567c73ca87a7c71df97f293
+size 228700

svm_poly_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b60a7814f3e851178e888f92530d7a5dbdeb4a66557f43e0fe7e43d09335a276
+size 124910

templates/index.html

@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Smart Irrigation Predictor</title>
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+      body {
+          background-color: #f4f8f4;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+      .navbar {
+          background-color: #28a745;
+          color: white;
+      }
+      .navbar-brand {
+          font-weight: bold;
+      }
+      .container {
+          margin-top: 30px;
+          margin-bottom: 30px;
+      }
+      .card {
+          border: none;
+          border-radius: 15px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      }
+      .card-header {
+          background-color: #28a745;
+          color: white;
+          text-align: center;
+          font-weight: bold;
+          font-size: 1.5rem;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
+      }
+      #weather_info {
+          background-color: #e9f5e9;
+          border: 1px solid #28a745;
+          padding: 15px;
+          border-radius: 5px;
+          min-height: 100px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+      }
+      .form-control {
+          border-color: #28a745;
+          background-color: #fafffa;
+      }
+      .btn-green {
+          background-color: #28a745;
+          color: white;
+          font-weight: bold;
+          width: 100%;
+          padding: 10px;
+          border-radius: 5px;
+          transition: background-color 0.3s;
+      }
+      .btn-green:hover {
+          background-color: #218838;
+      }
+      .hero-image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 10px;
+          max-height: 450px; /* Control max height */
+      }
+      
+      /* --- Full Page Loader Styles --- */
+      #page-loader {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+          z-index: 9999;
+          display: none; /* Hidden by default */
+          justify-content: center;
+          align-items: center;
+      }
+      .loader-spinner {
+          width: 4rem;
+          height: 4rem;
+          border-width: .4em; /* Makes spinner thicker */
+      }
+  </style>
+</head>
+<body>
+
+<!-- Full Page Loader HTML -->
+<div id="page-loader">
+    <div class="spinner-border text-light loader-spinner" role="status">
+        <span class="sr-only">Loading...</span>
+    </div>
+</div>
+
+<nav class="navbar navbar-dark">
+  <span class="navbar-brand mb-0 h1 mx-auto">🌱 Smart Irrigation Water Predictor</span>
+</nav>
+
+<div class="container">
+  <div class="card">
+    <div class="card-header">
+      Predict Irrigation Water Requirement
+    </div>
+    <div class="card-body p-lg-5">
+      <form action="/predict" method="POST" id="prediction-form">
+        <div class="row align-items-center">
+          
+          <!-- Column 1: Form Inputs -->
+          <!-- order-2 makes it second on mobile, order-lg-1 makes it first on desktop -->
+          <div class="col-lg-6 order-2 order-lg-1">
+            <div class="form-group">
+              <label for="crop_type"><strong>Crop Type</strong></label>
+              <select class="form-control" id="crop_type" name="crop_type" required>
+                <option value="BANANA">Banana</option>
+                <option value="BEAN">Bean</option>
+                <!-- Add other crop options here -->
+                 <option value="CABBAGE">Cabbage</option>
+                <option value="CITRUS">Citrus</option>
+                <option value="COTTON">Cotton</option>
+                <option value="MAIZE">Maize</option>
+                <option value="MELON">Melon</option>
+                <option value="MUSTARD">Mustard</option>
+                <option value="ONION">Onion</option>
+                <option value="OTHER">Other</option>
+                <option value="POTATO">Potato</option>
+                <option value="RICE">Rice</option>
+                <option value="SOYABEAN">Soyabean</option>
+                <option value="SUGARCANE">Sugarcane</option>
+                <option value="TOMATO">Tomato</option>
+                <option value="WHEAT">Wheat</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="soil_type"><strong>Soil Type</strong></label>
+              <select class="form-control" id="soil_type" name="soil_type" required>
+                <option value="DRY">Dry</option>
+                <option value="HUMID">Humid</option>
+                <option value="WET">Wet</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="city"><strong>City / Location</strong></label>
+              <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather data" required>
+            </div>
+            
+            <button type="button" class="btn btn-secondary btn-block" id="fetch-weather-btn" onclick="fetchWeather()">Fetch Weather Data</button>
+            
+            <div id="weather_info" class="mt-3" style="display: none;">
+               <div id="weather_data"></div>
+            </div>
+            
+            <div class="form-group mt-3">
+              <label for="motor_capacity"><strong>Motor Capacity (liters/sec)</strong></label>
+              <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
+            </div>
+            
+            <button type="submit" class="btn btn-green mt-3" id="predict-btn">Predict Water Requirement</button>
+          </div>
+
+          <!-- Column 2: Image -->
+          <!-- order-1 makes it first on mobile, order-lg-2 makes it second on desktop -->
+          <div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
+            <img src="/static/images/img.png" alt="Smart Irrigation" class="hero-image">
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script>
+    function fetchWeather() {
+        // This function remains the same as before
+        const city = document.getElementById('city').value;
+        if (!city) {
+            alert('Please enter a city name first.');
+            return;
+        }
+
+        const weatherDiv = document.getElementById('weather_data');
+        const weatherInfoBox = document.getElementById('weather_info');
+        const fetchBtn = document.getElementById('fetch-weather-btn');
+
+        weatherInfoBox.style.display = 'flex';
+        weatherDiv.innerHTML = `<div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div>`;
+        fetchBtn.disabled = true;
+
+        fetch(`/fetch_weather?city=${city}`)
+            .then(response => {
+                if (!response.ok) throw new Error('City not found or server error.');
+                return response.json();
+            })
+            .then(data => {
+                if (data) {
+                    weatherDiv.innerHTML = `
+                        <div style="text-align: left; width: 100%;">
+                            <strong>Weather:</strong> ${data.description}<br>
+                            <strong>Temperature:</strong> ${data.temperature}°C<br>
+                            <strong>Humidity:</strong> ${data.humidity}%<br>
+                            <strong>Pressure:</strong> ${data.pressure} hPa
+                        </div>
+                    `;
+                } else {
+                     weatherDiv.innerHTML = 'Could not retrieve weather data.';
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching weather:', error);
+                weatherDiv.innerHTML = 'An error occurred. Please check the city name.';
+            })
+            .finally(() => {
+                fetchBtn.disabled = false;
+            });
+    }
+
+    // --- NEW: TRIGGER FULL PAGE LOADER ON FORM SUBMISSION ---
+    document.getElementById('prediction-form').addEventListener('submit', function(event) {
+        // Basic form validation check
+        if (!this.checkValidity()) {
+            // If form is invalid, let the browser handle the validation messages
+            return;
+        }
+        
+        // Show the full-page loader
+        document.getElementById('page-loader').style.display = 'flex';
+        
+        // Disable the predict button to prevent multiple submissions
+        document.getElementById('predict-btn').disabled = true;
+    });
+</script>
+
+</body>
+</html>

templates/predict.html

@@ -0,0 +1,206 @@
+<!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;
+      }
+      .info-card h4 {
+          color: #28a745;
+          font-weight: bold;
+      }
+      .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;
+      }
+      .btn-start-motor:hover {
+          background-color: #218838;
+      }
+      .camera-container {
+          margin-top: 20px;
+          text-align: center;
+          display: none;
+      }
+      .timer {
+          font-size: 2.5rem;
+          color: white;
+          background-color: #28a745;
+          font-weight: bold;
+          padding: 15px 30px;
+          border-radius: 10px;
+          display: inline-block;
+          margin-top: 15px;
+      }
+      video {
+          width: 100%;
+          max-width: 600px;
+          height: auto;
+          border-radius: 10px;
+          border: 2px solid #ddd;
+      }
+      .alert-message {
+          font-size: 1.5rem;
+          color: #dc3545;
+          font-weight: bold;
+          margin-top: 20px;
+          text-align: center;
+      }
+  </style>
+</head>
+<body>
+
+  <div class="header">
+    <h1>Water Requirement Prediction Results</h1>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <!-- Water Requirement -->
+      <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>
+
+      <!-- Motor On Time -->
+      <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>
+    </div>
+
+    <!-- AI Monitoring Section -->
+    <div class="info-card">
+      <h4>Want to automatically inspect your irrigation process?</h4>
+      <p class="mt-3">Use our AI-driven Irrigation Monitoring to watch the process from your phone. You will receive a WhatsApp message to start the motor. Once started, you can monitor it live here.</p>
+      <button id="startMonitoring" class="btn btn-start-motor">Start AI Monitoring</button>
+    </div>
+
+    <div class="camera-container" id="cameraContainer">
+      <h4 class="text-center mb-3">Live Irrigation Feed</h4>
+      <video id="videoElement" autoplay playsinline></video>
+      <div class="timer" id="timer"></div>
+    </div>
+    
+    <div class="alert-message" id="alertMessage"></div>
+  </div>
+
+  <script>
+    document.getElementById('startMonitoring').addEventListener('click', function() {
+      // Show camera container
+      document.getElementById('cameraContainer').style.display = 'block';
+
+      // Start video stream from camera
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+          .then(function(stream) {
+            document.getElementById('videoElement').srcObject = stream;
+          })
+          .catch(function(err) {
+            console.log("Camera Error: " + err);
+            alert("Could not access the camera. Please ensure you have given permission.");
+          });
+      }
+
+      // The prompt for starting the motor is now handled via WhatsApp.
+      // The timer will start based on the reply from WhatsApp.
+      // This front-end logic is now primarily for viewing the stream.
+      // For demonstration purposes, we will simulate the timer start here after a delay.
+      
+      // Calculate estimated time in seconds for the timer display
+      let estimatedTime = parseFloat("{{ estimated_time_duration }}");
+      let timeUnit = "{{ time_unit }}";
+      let estimatedTimeSeconds = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime;
+
+      let timerElem = document.getElementById('timer');
+      let timeRemaining = Math.floor(estimatedTimeSeconds);
+
+      // A message to inform user to check WhatsApp
+      alert("Check your WhatsApp to start the motor. The timer and monitoring will begin here once you confirm.");
+
+      // NOTE: The actual countdown should be triggered by a confirmation from the backend (e.g., via WebSocket).
+      // For this example, we'll just start it to demonstrate the UI.
+      
+      let countdown = setInterval(function() {
+        if (timeRemaining <= 0) {
+          clearInterval(countdown);
+          timerElem.textContent = "Finished";
+          // Play beep sound
+          let beep = new Audio('/static/alarn_tune.mp3');
+          beep.play();
+          document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off automatically.";
+        } else {
+          timerElem.textContent = timeRemaining + "s";
+        }
+        timeRemaining--;
+      }, 1000);
+
+      // Simulate sending a request to the backend (already done on page load via python)
+      fetch('/start_motor', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+            estimated_time_duration: estimatedTimeSeconds, 
+            time_unit: "seconds" 
+        })
+      })
+      .then(response => response.json())
+      .then(data => console.log("Monitoring started:", data))
+      .catch(error => console.error("Error starting monitoring:", error));
+    });
+  </script>
+</body>
+</html>