Upload 11 files

.gitattributes

@@ -33,3 +33,4 @@ 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

Dockerfile

@@ -0,0 +1,17 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the application files to the container
+COPY . /app
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 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,214 @@
+from flask import Flask, render_template, request, redirect, url_for, jsonify
+from tensorflow.keras.models import load_model
+import numpy as np
+import joblib
+import pandas as pd
+import io
+import requests
+import os
+import threading
+import time
+from PIL import Image  # Import for image processing
+
+app = Flask(__name__)
+
+# Load models
+pump_model = joblib.load('pump_status_dt_model.pkl')
+
+# Try to load soil model, but continue if it fails
+try:
+    soil_model = load_model('soil_classification_model.h5')
+    print("✓ Soil classification model loaded successfully")
+except Exception as e:
+    soil_model = None
+    print(f"⚠ Warning: Could not load soil classification model: {e}")
+    print("  The app will run without soil image classification feature.")
+
+# Dictionaries for crop types, regions, etc.
+crop_types = {'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_types = {'DRY': 0, 'HUMID': 1, 'WET': 2}
+regions = {'DESERT': 0, 'HUMID': 1, 'SEMI ARID': 2, 'SEMI HUMID': 3}
+weather_conditions = {'SUNNY': 0, 'RAINY': 1, 'WINDY': 2, 'NORMAL': 3}
+irrigation_types = {'Drip Irrigation': 0, 'Manual Irrigation': 1,
+                    'Sprinkler Irrigation': 2, 'Subsurface Irrigation': 3,
+                    'Surface Irrigation': 4}
+
+soil_labels = {1: 'Black Soil', 2: 'Clay Soil', 0: 'Alluvial Soil', 3: 'Red Soil'}
+
+# Global variables
+soil_moisture_data = []
+pump_status = "Off"
+previous_pump_status = "Off"
+graph_data = []
+
+
+# Function to fetch weather data
+def get_weather(city):
+    api_key = os.getenv('WEATHER_API')
+    url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&appid={api_key}&units=metric"
+    try:
+        response = requests.get(url)
+        response.raise_for_status()
+        data = response.json()
+        temp = data['main']['temp']
+        pressure = data['main']['pressure']
+        humidity = data['main']['humidity']
+        weather_desc = data['weather'][0]['main']
+        return temp, pressure, humidity, weather_desc
+    except requests.exceptions.HTTPError:
+        return None, None, None, None
+
+
+# Function to map soil type to pump model's expected format
+def map_soil_to_pump_model(soil_label):
+    if soil_label in ['Black Soil', 'Red Soil']:
+        return 'DRY'
+    elif soil_label == 'Clay Soil':
+        return 'WET'
+    elif soil_label == 'Alluvial Soil':
+        return 'HUMID'
+    return None
+
+
+# Function to run predictions for all soil moisture values
+# Function to run predictions for all soil moisture values
+def run_predictions(crop_type, soil_type_for_pump, region, temperature, pressure, humidity, crop_age, irrigation_type, auto_weather_condition):
+    global pump_status, graph_data, previous_pump_status
+    pump_status = "Off"
+    previous_pump_status = "Off"
+    graph_data = []
+
+    for soil_moisture in soil_moisture_data:
+        try:
+            soil_moisture_value = float(soil_moisture)  # Ensure this is a float
+        except ValueError:
+            print(f"Skipping invalid soil moisture value: {soil_moisture}")
+            continue
+
+        # Prepare features for pump prediction
+        features = np.array([crop_types[crop_type], soil_types[soil_type_for_pump],
+                             regions[region], temperature if temperature else 0,
+                             weather_conditions.get(auto_weather_condition, 0),
+                             pressure if pressure else 0, humidity if humidity else 0,
+                             int(crop_age), irrigation_types[irrigation_type],
+                             soil_moisture_value]).reshape(1, -1)
+
+        # Make the pump prediction
+        pump_prediction = pump_model.predict(features)
+        pump_status = 'On' if pump_prediction[0] == 1 else 'Off'
+        graph_data.append((soil_moisture_value, 1 if pump_status == 'On' else -1))  # Update status to -1 for Off
+
+        print(f"Predicted Pump Status: {pump_status} for Soil Moisture: {soil_moisture_value}")  # Debugging output
+
+        # Play sound if pump is Off and it wasn't Off previously
+        if pump_status == "Off" and previous_pump_status != "Off":
+            play_sound()
+
+        previous_pump_status = pump_status
+
+        # Wait for 1 second before next prediction
+        time.sleep(2)
+
+
+def play_sound():
+    # You can use any sound file here
+    print("Beep! Pump is Off.")  # Placeholder for actual sound functionality
+
+
+# Main route
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    global soil_moisture_data
+
+    city = crop_type = region = crop_age = irrigation_type = None
+    temperature = pressure = humidity = weather_desc = auto_weather_condition = None
+    soil_image_url = None
+
+    if request.method == 'POST':
+        city = request.form.get('city', '')
+        crop_type = request.form.get('crop_type', '')
+        region = request.form.get('region', '')
+        crop_age = request.form.get('crop_age', '')
+        irrigation_type = request.form.get('irrigation_type', '')
+
+        # Handle CSV file upload
+        if 'soil_moisture' in request.files:
+            soil_moisture_file = request.files['soil_moisture']
+            if soil_moisture_file:
+                # Read CSV file
+                df = pd.read_csv(soil_moisture_file)
+                soil_moisture_data = df['Soil Moisture'].tolist()
+
+        # Handle soil image upload
+        soil_image_file = request.files.get('soil_image')
+        if soil_image_file and soil_model is not None:
+            # Load and preprocess the image for prediction
+            image = Image.open(io.BytesIO(soil_image_file.read()))
+            image = image.resize((150, 150))
+            image = np.array(image) / 255.0
+            if image.shape[-1] == 4:
+                image = image[..., :3]
+            image = np.expand_dims(image, axis=0)
+
+            # Predict the soil type
+            soil_pred = soil_model.predict(image)
+            soil_label = soil_labels[np.argmax(soil_pred)]
+            soil_type_for_pump = map_soil_to_pump_model(soil_label)
+        elif soil_image_file and soil_model is None:
+            # Model not available, use default or form input
+            print("⚠ Soil image uploaded but model not available")
+            soil_type_for_pump = request.form.get('soil_type', 'HUMID')
+        else:
+            soil_type_for_pump = request.form.get('soil_type')
+
+        if city:
+            temperature, pressure, humidity, weather_desc = get_weather(city)
+            auto_weather_condition = "NORMAL"  # Default weather condition
+            if weather_desc:
+                if 'sunny' in weather_desc.lower():
+                    auto_weather_condition = 'SUNNY'
+                elif 'rain' in weather_desc.lower():
+                    auto_weather_condition = 'RAINY'
+                elif 'wind' in weather_desc.lower():
+                    auto_weather_condition = 'WINDY'
+
+        if 'predict' in request.form:
+            # Start a thread for predictions
+            threading.Thread(target=run_predictions, args=(
+                crop_type, soil_type_for_pump, region, temperature, pressure, humidity, crop_age, irrigation_type, auto_weather_condition)).start()
+            return redirect(url_for('predict'))
+
+    return render_template('index.html', temperature=temperature, pressure=pressure,
+                           humidity=humidity, weather_desc=weather_desc, crop_types=crop_types,
+                           regions=regions, irrigation_types=irrigation_types, soil_types=soil_types,
+                           crop_type=crop_type, region=region, crop_age=crop_age,
+                           irrigation_type=irrigation_type, city=city, soil_image_url=soil_image_url)
+
+
+# Prediction route
+@app.route('/predict', methods=['GET'])
+def predict():
+    global pump_status, graph_data
+    return render_template('predict.html', pump_status=pump_status, graph_data=graph_data)
+
+
+# Update graph data every second
+@app.route('/update_graph', methods=['GET'])
+def update_graph():
+    global graph_data
+    return jsonify(graph_data)
+
+
+# Update pump status every second
+@app.route('/update_pump_status', methods=['GET'])
+def update_pump_status():
+    global pump_status
+    return jsonify({'pump_status': pump_status})
+
+
+if __name__ == '__main__':
+    app.run(port=7860,host='0.0.0.0')

pump_status_dt_model.pkl

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

requirements.txt

@@ -0,0 +1,9 @@
+gunicorn
+flask
+scikit-learn==1.5.2
+tensorflow==2.17.0
+numpy
+requests
+pillow
+pandas
+joblib==1.4.2

soil_classification_model.h5

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

static/alarn_tune.mp3

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

templates/index.html

@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Irrigation System - Pump Monitor</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    
+    <style>
+        /* ===== CSS Variables (Color System) ===== */
+        :root {
+            --deep-green: #1a5d3a;
+            --accent-green: #198754;
+            --darker-accent: #143d2e;
+            --bg-light: #f8f9fa;
+            --surface-white: #ffffff;
+            --text-dark: #212529;
+            --text-muted: #6c757d;
+            --border-color: #dee2e6;
+        }
+
+        /* ===== Global Styles ===== */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg-light);
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+
+        /* ===== Curved Bottom Hero Header ===== */
+        .hero-header {
+            background: var(--deep-green);
+            color: white;
+            padding: 3rem 1rem 3rem;
+            text-align: center;
+       
+            margin-bottom: 30px;
+        }
+
+        .hero-header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .hero-header p {
+            font-size: 1.1rem;
+            font-weight: 300;
+            opacity: 0.95;
+        }
+
+        /* ===== 3-Step Process Visual ===== */
+        .process-steps {
+            max-width: 900px;
+            margin: 0 auto 2rem;
+            padding: 0 1rem;
+            position: relative;
+            z-index: 10;
+        }
+
+        .steps-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+        }
+
+        .step {
+            flex: 1;
+            text-align: center;
+            position: relative;
+        }
+
+        .step-icon {
+            width: 70px;
+            height: 70px;
+            background: var(--surface-white);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 0.75rem;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            font-size: 1.8rem;
+            color: var(--accent-green);
+        }
+
+        .step-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-dark);
+        }
+
+        .step-connector {
+            position: absolute;
+            top: 35px;
+            left: 50%;
+            width: 100%;
+            height: 2px;
+            background: var(--border-color);
+            z-index: -1;
+        }
+
+        .step:last-child .step-connector {
+            display: none;
+        }
+
+        /* ===== Floating Card ===== */
+        .main-card {
+            max-width: 1100px;
+            margin: 0 auto;
+            background: var(--surface-white);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+            padding: 3rem;
+            position: relative;
+            z-index: 5;
+            border: 5px dashed #1a5d3a;
+        }
+
+        /* ===== Form Elements ===== */
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            font-weight: 500;
+            font-size: 0.95rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-dark);
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: var(--bg-light);
+            border: 2px solid #1a5d3a;
+            border-radius: 8px;
+            font-family: 'Outfit', sans-serif;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-control:focus {
+            outline: none;
+            background: var(--surface-white);
+            border-color: var(--accent-green);
+            box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
+        }
+
+        /* ===== Upload Zone ===== */
+        .upload-zone {
+            border: 2px dashed #1a5d3a;
+            background: #fcfcfc;
+            border-radius: 12px;
+            padding: 2rem;
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .upload-zone:hover,
+        .upload-zone.active {
+            background: #f0fff4;
+            border-color: var(--accent-green);
+        }
+
+        .upload-zone i {
+            font-size: 2.5rem;
+            color: var(--accent-green);
+            margin-bottom: 0.75rem;
+        }
+
+        .upload-zone p {
+            margin: 0.5rem 0;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        .upload-zone input[type="file"] {
+            display: none;
+        }
+
+        /* ===== Image Preview ===== */
+        .image-preview {
+            margin-top: 1rem;
+            text-align: center;
+        }
+
+        .image-preview img {
+            max-width: 150px;
+            max-height: 150px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            object-fit: cover;
+        }
+
+        /* ===== Weather Box ===== */
+        .weather-box {
+            background: var(--surface-white);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 1rem;
+        }
+
+        .weather-box h3 {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--deep-green);
+        }
+
+        .weather-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1rem;
+        }
+
+        .weather-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .weather-item i {
+            color: var(--accent-green);
+            font-size: 1.2rem;
+        }
+
+        .weather-item span {
+            font-size: 0.9rem;
+            color: var(--text-dark);
+        }
+
+        .weather-item strong {
+            font-weight: 600;
+        }
+
+        /* ===== Buttons ===== */
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 0.875rem 2rem;
+            font-family: 'Outfit', sans-serif;
+            font-size: 1rem;
+            font-weight: 500;
+            border-radius: 8px;
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+
+        .btn-primary {
+            background: var(--deep-green);
+            color: white;
+            width: 100%;
+            margin-top: 1rem;
+        }
+
+        .btn-primary:hover {
+            background: var(--darker-accent);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(26, 93, 58, 0.3);
+        }
+
+        .btn-secondary {
+            background: var(--surface-white);
+            color: var(--accent-green);
+            border: 1px solid var(--accent-green);
+            padding: 0.625rem 1.5rem;
+            font-size: 0.9rem;
+        }
+
+        .btn-secondary:hover {
+            background: var(--accent-green);
+            color: white;
+        }
+
+        /* ===== Right Side Image ===== */
+        .decorative-section {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .decorative-image {
+            width: 100%;
+            height: 100%;
+            max-height: 500px;
+            object-fit: cover;
+            border-radius: 16px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+        }
+
+        /* ===== Responsive Design ===== */
+        @media (max-width: 768px) {
+            .hero-header h1 {
+                font-size: 2rem;
+            }
+
+            .form-row {
+                grid-template-columns: 1fr;
+                gap: 0;
+            }
+
+            .main-card {
+                padding: 2rem 1.5rem;
+            }
+
+            .steps-container {
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+
+            .step-connector {
+                display: none;
+            }
+
+            .decorative-section {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Curved Bottom Hero Header -->
+    <div class="hero-header">
+        
+        <h1><i class="bi bi-droplet"></i>
+ Smart Irrigation System</h1>
+        <p>AI-Powered Pump Monitoring & Control</p>
+    </div>
+
+    <!-- 3-Step Process Visual -->
+   
+
+    <!-- Main Floating Card -->
+    <div class="main-card">
+        <form method="POST" action="/" enctype="multipart/form-data">
+            <div class="form-row">
+                <!-- Left Column: Form Inputs -->
+                <div class="form-column">
+                    <!-- Crop Type -->
+                    <div class="form-group">
+                        <label for="crop_type"><i class="bi bi-flower1"></i> Crop Type</label>
+                        <select class="form-control" id="crop_type" name="crop_type" required>
+                            <option value="">--Select Crop Type--</option>
+                            {% for crop, value in crop_types.items() %}
+                                <option value="{{ crop }}" {% if crop == crop_type %}selected{% endif %}>{{ crop }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <!-- Crop Age -->
+                    <div class="form-group">
+                        <label for="crop_age"><i class="bi bi-calendar-event"></i> Crop Age (days)</label>
+                        <input type="number" class="form-control" id="crop_age" name="crop_age" value="{{ crop_age }}" placeholder="Enter crop age in days" required>
+                    </div>
+
+                    <!-- Region -->
+                    <div class="form-group">
+                        <label for="region"><i class="bi bi-geo-alt"></i> Region</label>
+                        <select class="form-control" id="region" name="region" required>
+                            <option value="">--Select Region--</option>
+                            {% for region, value in regions.items() %}
+                                <option value="{{ region }}" {% if region == region %}selected{% endif %}>{{ region }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <!-- Irrigation Type -->
+                    <div class="form-group">
+                        <label for="irrigation_type"><i class="bi bi-droplet"></i> Irrigation Type</label>
+                        <select class="form-control" id="irrigation_type" name="irrigation_type" required>
+                            <option value="">--Select Irrigation Type--</option>
+                            {% for irrigation, value in irrigation_types.items() %}
+                                <option value="{{ irrigation }}" {% if irrigation == irrigation_type %}selected{% endif %}>{{ irrigation }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <!-- City for Weather -->
+                    <div class="form-group">
+                        <label for="city"><i class="bi bi-cloud-sun"></i> City (for Weather Data)</label>
+                        <input type="text" class="form-control" id="city" name="city" value="{{ city }}" placeholder="Enter your city name">
+                        <button type="submit" name="fetch_weather" class="btn btn-secondary" style="margin-top: 0.75rem;">
+                            <i class="bi bi-download"></i> Fetch Weather
+                        </button>
+                    </div>
+
+                    <!-- Weather Display -->
+                    {% if temperature %}
+                    <div class="weather-box">
+                        <h3><i class="bi bi-cloud-sun"></i> Weather Information</h3>
+                        <div class="weather-grid">
+                            <div class="weather-item">
+                                <i class="bi bi-thermometer-half"></i>
+                                <span><strong>{{ temperature }}°C</strong></span>
+                            </div>
+                            <div class="weather-item">
+                                <i class="bi bi-moisture"></i>
+                                <span><strong>{{ humidity }}%</strong> Humidity</span>
+                            </div>
+                            <div class="weather-item">
+                                <i class="bi bi-speedometer"></i>
+                                <span><strong>{{ pressure }}</strong> hPa</span>
+                            </div>
+                            <div class="weather-item">
+                                <i class="bi bi-cloud"></i>
+                                <span><strong>{{ weather_desc }}</strong></span>
+                            </div>
+                        </div>
+                    </div>
+                    {% endif %}
+                </div>
+
+                <!-- Right Column: Uploads & Image -->
+                <div class="form-column">
+                    <!-- Decorative Image -->
+                    <div class="decorative-section" style="margin-bottom: 2rem;">
+                        <img src="static/images/irrigation_image.jpeg" alt="Irrigation System" class="decorative-image">
+                    </div>
+
+                    <!-- Soil Moisture CSV Upload -->
+                    <div class="form-group">
+                        <label for="soil_moisture"><i class="bi bi-file-earmark-spreadsheet"></i> Soil Moisture Data (CSV)</label>
+                        <div class="upload-zone" onclick="document.getElementById('soil_moisture').click()">
+                            <i class="bi bi-cloud-arrow-up"></i>
+                            <p><strong>Click to upload CSV file</strong></p>
+                            <p>Must contain "Soil Moisture" column</p>
+                            <input type="file" class="form-control-file" id="soil_moisture" name="soil_moisture" accept=".csv" required>
+                        </div>
+                    </div>
+
+                    <!-- Soil Image Upload -->
+                    <div class="form-group">
+                        <label for="soil_image"><i class="bi bi-image"></i> Soil Image (Optional)</label>
+                        <div class="upload-zone" onclick="document.getElementById('soil_image').click()">
+                            <i class="bi bi-camera"></i>
+                            <p><strong>Click to upload soil image</strong></p>
+                            <p>For automatic soil type detection</p>
+                            <input type="file" class="form-control-file" id="soil_image" name="soil_image" accept="image/*" onchange="previewImage(event)">
+                        </div>
+                        
+                        <!-- Image Preview -->
+                        <div class="image-preview" id="preview-container" style="display: none;">
+                            <img id="image-preview" src="" alt="Soil Image Preview">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Submit Button -->
+            <button type="submit" name="predict" class="btn btn-primary">
+                <i class="bi bi-play-circle"></i> Start Pump Analysis
+            </button>
+        </form>
+    </div>
+
+    <script>
+        // Preview uploaded image
+        function previewImage(event) {
+            const file = event.target.files[0];
+            const preview = document.getElementById('image-preview');
+            const container = document.getElementById('preview-container');
+            
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    container.style.display = 'block';
+                }
+                reader.readAsDataURL(file);
+            } else {
+                container.style.display = 'none';
+            }
+        }
+
+        // Add active state to upload zones
+        document.querySelectorAll('.upload-zone').forEach(zone => {
+            zone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                zone.classList.add('active');
+            });
+            
+            zone.addEventListener('dragleave', () => {
+                zone.classList.remove('active');
+            });
+            
+            zone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                zone.classList.remove('active');
+            });
+        });
+    </script>
+</body>
+</html>

templates/predict.html

@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pump Analysis Results - Smart Irrigation</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    
+    <!-- Plotly for Charts -->
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    
+    <style>
+        /* ===== CSS Variables (Color System) ===== */
+        :root {
+            --deep-green: #1a5d3a;
+            --accent-green: #198754;
+            --darker-accent: #143d2e;
+            --bg-light: #f8f9fa;
+            --surface-white: #ffffff;
+            --text-dark: #212529;
+            --text-muted: #6c757d;
+            --border-color: #dee2e6;
+        }
+
+        /* ===== Global Styles ===== */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg-light);
+            color: var(--text-dark);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        /* ===== Split-Screen Layout ===== */
+        .dashboard-container {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            min-height: 100vh;
+            gap: 0;
+        }
+
+        /* ===== Left Sidebar (Sticky) ===== */
+        .sidebar {
+            background: var(--surface-white);
+            border-right: 5px solid #1a5d3a;
+            padding: 2rem 1.5rem;
+            position: sticky;
+            top: 0;
+            height: 100vh;
+            overflow-y: auto;
+        }
+
+        .sidebar-header {
+            margin-bottom: 2rem;
+        }
+
+        .sidebar-header h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--deep-green);
+            margin-bottom: 0.5rem;
+        }
+
+        .sidebar-header p {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            font-weight: 300;
+        }
+
+        /* ===== Status Badge ===== */
+        .status-badge {
+            padding: 1.25rem;
+            border-radius: 12px;
+            text-align: center;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+            border: 2px solid #1a5d3a;
+        }
+
+        .status-badge.on {
+            background: var(--accent-green);
+            color: white;
+        }
+
+        .status-badge.off {
+            background: #dc3545;
+            color: white;
+        }
+
+        .status-badge i {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+
+        .status-badge .status-label {
+            font-size: 0.85rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            opacity: 0.9;
+        }
+
+        .status-badge .status-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-top: 0.25rem;
+        }
+
+        /* ===== Time Counter ===== */
+        .time-counter {
+            background: var(--bg-light);
+            padding: 1rem;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .time-counter i {
+            color: var(--accent-green);
+            font-size: 1.2rem;
+            margin-right: 0.5rem;
+        }
+
+        .time-counter span {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--text-dark);
+        }
+
+        /* ===== Gauge Container ===== */
+        .gauge-card {
+            background: var(--surface-white);
+            border: 2px solid #1a5d3a;
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .gauge-card h3 {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--deep-green);
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+
+        #gauge {
+            width: 100%;
+            height: 280px;
+        }
+
+        /* ===== Right Panel (Scrollable) ===== */
+        .content-panel {
+            padding: 2rem;
+            overflow-y: auto;
+        }
+
+        /* ===== Diagnostic Timeline (Exclusive to Results Page) ===== */
+        .diagnostic-timeline {
+            background: var(--surface-white);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+            padding: 2.5rem;
+            margin-bottom: 2rem;
+            border: 5px dashed #1a5d3a;
+        }
+
+        .timeline-header {
+            text-align: center;
+            margin-bottom: 2.5rem;
+        }
+
+        .timeline-header h2 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--deep-green);
+            margin-bottom: 0.5rem;
+        }
+
+        .timeline-header p {
+            color: var(--text-muted);
+            font-size: 0.95rem;
+        }
+
+        .timeline-steps {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+
+        .timeline-step {
+            flex: 1;
+            text-align: center;
+            position: relative;
+        }
+
+        .timeline-icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, var(--accent-green), var(--deep-green));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1rem;
+            box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
+            font-size: 2rem;
+            color: white;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        .timeline-label {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--text-dark);
+            margin-bottom: 0.25rem;
+        }
+
+        .timeline-desc {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+        }
+
+        .timeline-connector {
+            position: absolute;
+            top: 40px;
+            left: 50%;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-green), var(--deep-green));
+            z-index: -1;
+        }
+
+        .timeline-step:last-child .timeline-connector {
+            display: none;
+        }
+
+        /* ===== Chart Cards ===== */
+        .chart-card {
+            background: var(--surface-white);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+            padding: 2rem;
+            margin-bottom: 2rem;
+            border: 5px dashed #1a5d3a;
+        }
+
+        .chart-card h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--deep-green);
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .chart-card h3 i {
+            color: var(--accent-green);
+        }
+
+        .chart-container {
+            width: 100%;
+            height: 400px;
+        }
+
+        /* ===== Info Alert ===== */
+        .info-alert {
+            background: #e7f3ff;
+            border-left: 4px solid #0066cc;
+            padding: 1rem 1.25rem;
+            border-radius: 8px;
+            margin-bottom: 2rem;
+            display: flex;
+            align-items: start;
+            gap: 0.75rem;
+        }
+
+        .info-alert i {
+            color: #0066cc;
+            font-size: 1.25rem;
+            margin-top: 0.125rem;
+        }
+
+        .info-alert p {
+            margin: 0;
+            color: var(--text-dark);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        /* ===== Responsive Design ===== */
+        @media (max-width: 1024px) {
+            .dashboard-container {
+                grid-template-columns: 1fr;
+            }
+
+            .sidebar {
+                position: relative;
+                height: auto;
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .timeline-steps {
+                flex-direction: column;
+                gap: 2rem;
+            }
+
+            .timeline-connector {
+                display: none;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .content-panel {
+                padding: 1rem;
+            }
+
+            .diagnostic-timeline {
+                padding: 1.5rem;
+            }
+
+            .chart-card {
+                padding: 1.5rem;
+            }
+        }
+    </style>
+    
+    <script>
+        let alertSound = new Audio('{{ url_for("static", filename="alarn_tune.mp3") }}');
+
+        function playAlertSound() {
+            alertSound.currentTime = 0;
+            alertSound.play().catch(error => console.error("Error playing sound:", error));
+        }
+
+        function fetchPumpStatus() {
+            fetch('/update_pump_status')
+                .then(response => response.json())
+                .then(data => {
+                    const statusElement = document.getElementById('pumpStatus');
+                    const statusValue = document.getElementById('statusValue');
+                    const statusIcon = document.getElementById('statusIcon');
+                    
+                    statusValue.textContent = data.pump_status;
+                    statusElement.className = data.pump_status === 'On' ? 'status-badge on' : 'status-badge off';
+                    statusIcon.className = data.pump_status === 'On' ? 'bi bi-power' : 'bi bi-exclamation-triangle';
+
+                    if (data.pump_status === 'Off') {
+                        console.log("Pump status is Off. Playing alert sound.");
+                        playAlertSound();
+                    }
+                })
+                .catch(err => console.error("Error fetching pump status:", err));
+        }
+
+        function fetchGraphData() {
+            fetch('/update_graph')
+                .then(response => response.json())
+                .then(data => {
+                    const time = data.map((_, index) => index + 1);
+                    const soilMoisture = data.map(entry => entry[0]);
+                    const pumpStatus = data.map(entry => entry[1]);
+
+                    // Update Gauge chart with soil moisture
+                    const currentSoilMoisture = soilMoisture[soilMoisture.length - 1];
+                    updateGaugeChart(currentSoilMoisture);
+
+                    // Pump Status vs. Time
+                    const binaryPumpStatus = pumpStatus.map(status => status);
+                    const trace1 = {
+                        x: time,
+                        y: binaryPumpStatus,
+                        mode: 'lines+markers',
+                        type: 'scatter',
+                        name: 'Pump Status',
+                        line: { color: '#198754', width: 3 },
+                        marker: { size: 8 }
+                    };
+
+                    const layout1 = {
+                        title: '',
+                        xaxis: { title: 'Time (seconds)', gridcolor: '#e9ecef' },
+                        yaxis: { title: 'Pump Status', tickvals: [-1, 1], ticktext: ['Off', 'On'], range: [-1.5, 1.5], gridcolor: '#e9ecef' },
+                        showlegend: false,
+                        plot_bgcolor: '#f8f9fa',
+                        paper_bgcolor: 'white',
+                        font: { family: 'Outfit, sans-serif' }
+                    };
+
+                    Plotly.newPlot('graph1', [trace1], layout1, {responsive: true});
+
+                    // Soil Moisture vs. Time
+                    const trace2 = {
+                        x: time,
+                        y: soilMoisture,
+                        mode: 'lines+markers',
+                        type: 'scatter',
+                        name: 'Soil Moisture',
+                        line: { color: '#1a5d3a', width: 3 },
+                        marker: { size: 8 },
+                        fill: 'tozeroy',
+                        fillcolor: 'rgba(26, 93, 58, 0.1)'
+                    };
+
+                    const layout2 = {
+                        title: '',
+                        xaxis: { title: 'Time (seconds)', gridcolor: '#e9ecef' },
+                        yaxis: { title: 'Soil Moisture (%)', gridcolor: '#e9ecef' },
+                        showlegend: false,
+                        plot_bgcolor: '#f8f9fa',
+                        paper_bgcolor: 'white',
+                        font: { family: 'Outfit, sans-serif' }
+                    };
+
+                    Plotly.newPlot('graph2', [trace2], layout2, {responsive: true});
+
+                    // Combined Graph for Soil Moisture vs. Pump Status
+                    const trace3 = {
+                        x: soilMoisture,
+                        y: binaryPumpStatus,
+                        mode: 'markers+lines',
+                        type: 'scatter',
+                        name: 'Pump Status',
+                        line: { color: '#198754', width: 2 },
+                        marker: { size: 10, color: '#1a5d3a' }
+                    };
+
+                    const layout3 = {
+                        title: '',
+                        xaxis: { title: 'Soil Moisture (%)', gridcolor: '#e9ecef' },
+                        yaxis: { title: 'Pump Status', tickvals: [-1, 1], ticktext: ['Off', 'On'], range: [-1.5, 1.5], gridcolor: '#e9ecef' },
+                        showlegend: false,
+                        plot_bgcolor: '#f8f9fa',
+                        paper_bgcolor: 'white',
+                        font: { family: 'Outfit, sans-serif' }
+                    };
+
+                    Plotly.newPlot('graph3', [trace3], layout3, {responsive: true});
+
+                    // Histogram for Soil Moisture
+                    const trace4 = {
+                        x: soilMoisture,
+                        type: 'histogram',
+                        marker: { color: '#198754' },
+                        nbinsx: 20
+                    };
+
+                    const layout4 = {
+                        title: '',
+                        xaxis: { title: 'Soil Moisture (%)', gridcolor: '#e9ecef' },
+                        yaxis: { title: 'Frequency', gridcolor: '#e9ecef' },
+                        plot_bgcolor: '#f8f9fa',
+                        paper_bgcolor: 'white',
+                        font: { family: 'Outfit, sans-serif' }
+                    };
+
+                    Plotly.newPlot('graph4', [trace4], layout4, {responsive: true});
+                })
+                .catch(err => console.error("Error fetching graph data:", err));
+        }
+
+        // Function to update the gauge chart
+        function updateGaugeChart(value) {
+            const data = [
+                {
+                    type: "indicator",
+                    mode: "gauge+number",
+                    value: value,
+                    title: { text: "", font: { size: 16, family: 'Outfit, sans-serif' } },
+                    gauge: {
+                        axis: { range: [0, 100], tickfont: { family: 'Outfit, sans-serif' } },
+                        steps: [
+                            { range: [0, 30], color: "#ffebee" },
+                            { range: [30, 60], color: "#fff9e6" },
+                            { range: [60, 100], color: "#e8f5e9" }
+                        ],
+                        bar: { color: "#1a5d3a" },
+                        threshold: {
+                            line: { color: "#198754", width: 4 },
+                            thickness: 0.75,
+                            value: value
+                        }
+                    }
+                }
+            ];
+
+            const layout = {
+                margin: { t: 20, b: 20, l: 20, r: 20 },
+                paper_bgcolor: 'white',
+                font: { family: 'Outfit, sans-serif' }
+            };
+
+            Plotly.newPlot('gauge', data, layout, {responsive: true});
+        }
+
+        // Time counter functionality
+        let timeCounter = 0;
+        function updateTimeCounter() {
+            timeCounter++;
+            document.getElementById('time-counter').textContent = `${timeCounter}s`;
+        }
+
+        // Set intervals for data fetching and time counting
+        setInterval(fetchPumpStatus, 2000);
+        setInterval(fetchGraphData, 2000);
+        setInterval(updateTimeCounter, 1000);
+
+        document.addEventListener('click', () => {
+            alertSound.load();
+        });
+    </script>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Left Sidebar (Sticky) -->
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <h1><i class="bi bi-speedometer2"></i> Live Monitor</h1>
+                <p>Real-time pump analysis</p>
+            </div>
+
+            <!-- Pump Status Badge -->
+            <div id="pumpStatus" class="status-badge {{ 'on' if pump_status == 'On' else 'off' }}">
+                <i id="statusIcon" class="bi {{ 'bi-power' if pump_status == 'On' else 'bi-exclamation-triangle' }}"></i>
+                <div class="status-label">Pump Status</div>
+                <div class="status-value" id="statusValue">{{ pump_status }}</div>
+            </div>
+
+            <!-- Time Counter -->
+            <div class="time-counter">
+                <i class="bi bi-clock"></i>
+                <span>Elapsed: <strong id="time-counter">0s</strong></span>
+            </div>
+
+            <!-- Soil Moisture Gauge -->
+            <div class="gauge-card">
+                <h3><i class="bi bi-moisture"></i> Soil Moisture</h3>
+                <div id="gauge"></div>
+            </div>
+        </div>
+
+        <!-- Right Content Panel (Scrollable) -->
+        <div class="content-panel">
+            <!-- Diagnostic Timeline (Exclusive to Results Page) -->
+            <div class="diagnostic-timeline">
+                <div class="timeline-header">
+                    <h2>Diagnostic Timeline</h2>
+                    <p>AI-powered analysis workflow</p>
+                </div>
+                
+                <div class="timeline-steps">
+                    <div class="timeline-step">
+                        <div class="timeline-icon">
+                            <i class="bi bi-database"></i>
+                        </div>
+                        <div class="timeline-label">Collect Data</div>
+                        <div class="timeline-desc">Gathering sensor inputs</div>
+                        <div class="timeline-connector"></div>
+                    </div>
+                    <div class="timeline-step">
+                        <div class="timeline-icon">
+                            <i class="bi bi-cpu"></i>
+                        </div>
+                        <div class="timeline-label">Process Analysis</div>
+                        <div class="timeline-desc">AI model prediction</div>
+                        <div class="timeline-connector"></div>
+                    </div>
+                    <div class="timeline-step">
+                        <div class="timeline-icon">
+                            <i class="bi bi-graph-up"></i>
+                        </div>
+                        <div class="timeline-label">Monitor Results</div>
+                        <div class="timeline-desc">Live status tracking</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Info Alert -->
+            <div class="info-alert">
+                <i class="bi bi-info-circle-fill"></i>
+                <p><strong>Real-time Monitoring:</strong> Charts update every 2 seconds with new predictions. The pump status will automatically adjust based on soil moisture levels and environmental conditions.</p>
+            </div>
+
+            <!-- Chart: Pump Status vs Time -->
+            <div class="chart-card">
+                <h3><i class="bi bi-activity"></i> Pump Status Over Time</h3>
+                <div id="graph1" class="chart-container"></div>
+            </div>
+
+            <!-- Chart: Soil Moisture vs Time -->
+            <div class="chart-card">
+                <h3><i class="bi bi-moisture"></i> Soil Moisture Trends</h3>
+                <div id="graph2" class="chart-container"></div>
+            </div>
+
+            <!-- Chart: Pump Status vs Soil Moisture -->
+            <div class="chart-card">
+                <h3><i class="bi bi-diagram-3"></i> Correlation Analysis</h3>
+                <div id="graph3" class="chart-container"></div>
+            </div>
+
+            <!-- Chart: Soil Moisture Distribution -->
+            <div class="chart-card">
+                <h3><i class="bi bi-bar-chart"></i> Moisture Distribution</h3>
+                <div id="graph4" class="chart-container"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

templates/sample.html

@@ -0,0 +1,42 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Value Beep</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin-top: 50px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    <h1>Random Value Checker</h1>
+    <button id="generateButton">Generate Random Value</button>
+    <p id="result"></p>
+
+    <audio id="beepSound" src="/alarn_tune.mp3"></audio>
+
+    <script>
+        document.getElementById("generateButton").onclick = function() {
+            // Generate a random value between 0 and 20
+            var randomValue = Math.floor(Math.random() * 21);
+            document.getElementById("result").innerText = "Generated Value: " + randomValue;
+
+            // Check if the random value is greater than 10
+            if (randomValue > 10) {
+                document.getElementById("beepSound").play();
+            }
+        }
+    </script>
+</body>
+</html>