initial commit

.gitattributes

@@ -0,0 +1,3 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,17 @@
+# Use an official lightweight Python image
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy project files
+COPY . .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Run the Flask app
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,142 @@
+
+# 🌾 Smart Farming: Crop Recommendation System for Popular Indian Crops
+
+> 🔬 A Machine Learning-based Web Application to Recommend Suitable Crops Based on Environmental Conditions  
+> 👨‍🌾 Built by [Saksham Pathak](https://github.com/parthmax2) | IIIT Lucknow | 94.3% Accuracy | Deployed using Flask
+
+---
+
+## 📌 Overview
+
+**Smart Farming** is a crop recommendation system that leverages machine learning to assist Indian farmers in selecting the most suitable crop for cultivation based on key environmental parameters. The system uses a **Random Forest Classifier** trained on soil and climatic data to suggest the best crop from a set of **22 popular Indian crops**.
+
+🌱 This project empowers sustainable agriculture, efficient resource utilization, and smarter farming decisions through AI.
+
+---
+
+## 🧠 Key Features
+
+- ✅ **ML-Powered Predictions** (94.3% Accuracy)
+- 🧪 Inputs: Nitrogen, Phosphorus, Potassium, Temperature, Humidity, pH, Rainfall
+- 🌾 Outputs: Rice, Maize, Banana, Cotton, Sugarcane, etc.
+- 📊 Model Used: **Random Forest Classifier**
+- 🌐 **Flask-based Web App** with real-time crop suggestions
+- 🎨 Clean and responsive UI (HTML + CSS + JS)
+
+---
+
+## 🚀 Live Demo
+
+[![Watch Demo](https://img.shields.io/badge/Click%20Here-Live%20App-green?style=for-the-badge&logo=github)](https://your-deployment-link.com)  
+*🔒 Link coming soon or hosted locally*
+
+---
+
+## 🖥️ Tech Stack
+
+| Component     | Technology                |
+|---------------|---------------------------|
+| 👨‍💻 Language      | Python, HTML, CSS, JS       |
+| 🔍 ML Model     | Random Forest Classifier |
+| ⚙️ Backend      | Flask (Python)           |
+| 🖼 Frontend     | HTML + CSS + JavaScript  |
+| 📦 Deployment   | Pickle Model Serialization |
+
+---
+
+## 📂 Project Structure
+
+```
+
+📁 crop-recommendation
+├── 📁 static/
+│   └── images
+├── 📁 templates/
+│   └── index.html
+├── 📄 app.py             # Flask backend
+├── 📄 crop\minmaxscaler.pkl,standscaler.pkl    # Trained ML model
+├── 📄 requirements.txt
+├── 📄 Dockerfile
+└── 📄 README.md
+````
+
+---
+
+## 📊 Model Performance
+
+| Model             | Accuracy | Precision | Recall | F1-Score |
+|------------------|----------|-----------|--------|----------|
+| 🌟 Random Forest     | 94.3%    | 92.7%     | 91.5%  | 92.1%    |
+| Gradient Boosting | 92.1%    | 90.5%     | 89.3%  | 89.9%    |
+| XGBoost           | 91.4%    | 88.9%     | 87.5%  | 88.2%    |
+| SVM               | 85.7%    | 83.2%     | 81.6%  | 82.4%    |
+
+📌 **Key Factors Influencing Prediction:**
+- Rainfall
+- Soil pH
+- Temperature
+- NPK (Nitrogen, Phosphorus, Potassium)
+
+---
+
+## 📥 How to Run Locally
+
+### 1️⃣ Clone the Repository
+```bash
+git clone https://github.com/parthmax2/crop-recommendation-system.git
+cd crop-recommendation-system
+````
+
+### 2️⃣ Install Dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+### 3️⃣ Run the Flask App
+
+```bash
+python app.py
+```
+
+### 4️⃣ Open in Browser
+
+Visit `http://localhost:5000/` to use the web app.
+
+---
+
+## 📈 Future Enhancements
+
+* [ ] 🌤 Real-time Weather API Integration
+* [ ] 📡 IoT-based Soil Sensor Integration
+* [ ] 🐛 Pest & Disease Prediction Module
+* [ ] 🌍 Satellite/GIS data for advanced insights
+* [ ] 🌐 Multilingual and Offline Support
+
+---
+
+## ✍️ Author
+
+**Saksham Pathak**
+M.Sc. AI & ML, IIIT Lucknow
+🔗 [GitHub](https://github.com/parthmax2) | [LinkedIn](https://linkedin.com/in/sakshampathak)
+
+---
+
+## 📄 License
+
+This project is licensed under the **MIT License** – see the [LICENSE](LICENSE) file for details.
+
+---
+
+## 📚 References
+
+* [IEEE Paper 1](https://ieeexplore.ieee.org/document/10575152)
+* [Crop Dataset - Kaggle](https://www.kaggle.com/datasets/atharvaingle/crop-recommendation-dataset)
+* Full list of academic references is included in the `paper.pdf`.
+
+---
+
+> 🌱 *"Empowering farmers through AI-driven decisions for a greener tomorrow."*
+
+```

app.py

@@ -0,0 +1,78 @@
+from flask import Flask, request, render_template, url_for
+import numpy as np
+import pickle
+
+# Load model and scalers
+model = pickle.load(open('models/model.pkl', 'rb'))
+sc = pickle.load(open('models/standscaler.pkl', 'rb'))
+ms = pickle.load(open('models/minmaxscaler.pkl', 'rb'))
+
+app = Flask(__name__)
+
+# List of all crops with details, pointing to images in the 'static' folder
+crops = [
+    {"name": "Rice", "image": "rice.jpg", "description": "Rice is a staple crop grown primarily in flooded fields. It thrives in hot, humid climates with regular rainfall."},
+    {"name": "Maize", "image": "maize.jpg", "description": "Maize (corn) is versatile, used for food, livestock feed, and industrial products, best grown in well-drained soil with moderate rainfall."},
+    {"name": "Jute", "image": "jute.jpg", "description": "Jute is a fiber crop used for burlap sacks, ropes, and mats, and it grows best in warm, wet conditions."},
+    {"name": "Cotton", "image": "cotton.jpg", "description": "Cotton is a cash crop grown in warm climates; its fibers make textiles, and seeds are processed for oil."},
+    {"name": "Coconut", "image": "coconut.jpg", "description": "Coconut is grown in tropical regions for coconuts, oil, and coir, best in sandy soil with sunlight and rainfall."},
+    {"name": "Papaya", "image": "papaya.jpg", "description": "Papaya is a tropical fruit thriving in warm climates, rich in vitamins, grown commercially and locally."},
+    {"name": "Orange", "image": "orange.jpg", "description": "Oranges are rich in vitamin C, growing best in warm climates with well-drained soil and moderate rainfall."},
+    {"name": "Apple", "image": "apple.jpg", "description": "Apple trees grow in temperate climates, require cold winters and well-drained, loamy soil to produce quality fruit."},
+    {"name": "Muskmelon", "image": "muskmelon.jpg", "description": "Muskmelon is a sweet fruit needing sunlight, moderate rainfall, and well-drained soil, popular for its refreshing taste."},
+    {"name": "Watermelon", "image": "watermelon.jpg", "description": "Watermelon thrives in warm seasons, needing high temperatures and plenty of water, grown for its juicy, sweet fruit."},
+    {"name": "Grapes", "image": "grapes.jpg", "description": "Grapes are grown for fresh consumption and wine, needing temperate climates with well-drained soil and moderate rainfall."},
+    {"name": "Mango", "image": "mango.jpg", "description": "Mango is a tropical fruit tree, thriving in hot, humid climates, needing well-drained, sandy loam soil with sun exposure."},
+    {"name": "Banana", "image": "banana.jpg", "description": "Bananas grow in tropical areas, thriving in hot, humid climates with regular rainfall and well-drained soil."},
+    {"name": "Pomegranate", "image": "pomegranate.jpg", "description": "Pomegranate grows best in dry climates, rich in antioxidants, cultivated for fresh consumption and juice production."},
+    {"name": "Lentil", "image": "lentil.jpg", "description": "Lentil is a protein-rich legume grown in temperate regions, important for crop rotation due to nitrogen fixation."},
+    {"name": "Blackgram", "image": "blackgram.jpg", "description": "Blackgram is a legume crop in tropical areas, an essential protein source in South Asia for curries and dals."},
+    {"name": "Mungbean", "image": "mungbean.jpg", "description": "Mungbean is grown for its small, green seeds, thriving in warm climates, commonly used in cooking."},
+    {"name": "Mothbeans", "image": "mothbeans.jpg", "description": "Mothbeans are drought-resistant legumes in arid areas, used in curries and soups."},
+    {"name": "Pigeonpeas", "image": "pigeonpeas.jpg", "description": "Pigeonpeas are legumes in tropical regions, important for food security due to their high protein content."},
+    {"name": "Kidneybeans", "image": "kidneybeans.jpg", "description": "Kidney beans are protein-rich, grown in warm seasons with fertile, well-drained soil."},
+    {"name": "Chickpea", "image": "chickpea.jpg", "description": "Chickpea is a pulse crop in semi-arid regions, a major source of plant protein, improving soil health in rotation."},
+    {"name": "Coffee", "image": "coffee.jpg", "description": "Coffee is a tropical crop grown in high-altitude areas for its seeds, used in the popular beverage."}
+]
+
+@app.route('/')
+def index():
+    return render_template("index.html")
+
+@app.route("/predict", methods=['POST'])
+def predict():
+    # Get form input values
+    N = request.form['Nitrogen']
+    P = request.form['Phosporus']
+    K = request.form['Potassium']
+    temp = request.form['Temperature']
+    humidity = request.form['Humidity']
+    ph = request.form['Ph']
+    rainfall = request.form['Rainfall']
+
+    # Prepare features for prediction
+    feature_list = [N, P, K, temp, humidity, ph, rainfall]
+    single_pred = np.array(feature_list).reshape(1, -1)
+    scaled_features = ms.transform(single_pred)
+    final_features = sc.transform(scaled_features)
+    prediction = model.predict(final_features)[0]  # Predict crop
+
+    # Map prediction result to crop details
+    crop_dict = {
+        1: "Rice", 2: "Maize", 3: "Jute", 4: "Cotton", 5: "Coconut", 
+        6: "Papaya", 7: "Orange", 8: "Apple", 9: "Muskmelon", 10: "Watermelon",
+        11: "Grapes", 12: "Mango", 13: "Banana", 14: "Pomegranate", 15: "Lentil",
+        16: "Blackgram", 17: "Mungbean", 18: "Mothbeans", 19: "Pigeonpeas",
+        20: "Kidneybeans", 21: "Chickpea", 22: "Coffee"
+    }
+
+    # Find crop details
+    crop_name = crop_dict.get(prediction, "Unknown Crop")
+    crop_info = next((crop for crop in crops if crop['name'] == crop_name), None)
+
+    return render_template('index.html', crop=crop_info)
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=7860, debug=False)
+
+        

models/minmaxscaler.pkl

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

models/model.pkl

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

models/standscaler.pkl

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

requirements.txt

@@ -0,0 +1,11 @@
+Flask==3.1.0
+gunicorn==23.0.0
+Jinja2==3.1.4
+Werkzeug==3.1.3
+
+numpy==2.1.3
+pandas==2.2.3
+scikit-learn==1.5.2
+scipy==1.14.1
+joblib==1.4.2
+threadpoolctl==3.5.0

templates/index.html

@@ -0,0 +1,737 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Crop Recommendation System</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+  <!-- Font Awesome CDN for social icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    html {
+      scroll-behavior: smooth;
+      /* Ensures smooth scrolling */
+    }
+
+    body {
+      background: url('/static/farm.jpg') no-repeat center center fixed;
+      background-size: cover;
+      font-family: 'Arial', sans-serif;
+      color: #fff;
+    }
+
+    .navbar {
+      position: fixed;
+      /* Make the navbar fixed at the top */
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: #0a7a35;
+      /* Dark green */
+      z-index: 1000;
+      /* Ensure the navbar is on top of other elements */
+      padding: 10px 0;
+    }
+
+    .navbar-brand {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #fff !important;
+    }
+
+    .nav-link {
+      color: #fff !important;
+    }
+
+    .navbar-nav a:hover {
+      color: #47e684 !important;
+      /* Light green on hover */
+    }
+
+    h1 {
+      font-size: 3.5rem;
+      /* Initial font size */
+      text-align: center;
+      color: #ffffff;
+      font-weight: bold;
+      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
+      /* Adding shadow for depth */
+      margin-top: 20vh;
+      /* Position it lower down for better visibility */
+    }
+
+    /* Logo Styling */
+    .logo-img {
+      width: 10%;
+      /* Initially 10% of the screen width */
+      height: auto;
+      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
+      vertical-align: middle;
+      margin-left: 10px;
+      /* Space between text and logo */
+      display: inline-block;
+    }
+
+    .card {
+      background-color: #ecf0f1;
+      border: none;
+      border-radius: 10px;
+      transition: transform 0.2s, box-shadow 0.2s;
+      margin: 20px 0;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .card-title {
+      color: #2c3e50;
+      font-weight: bold;
+    }
+
+
+    .form-container {
+      background-color: #b5f4cde4;
+      /* Light green background */
+      padding: 30px;
+      border-radius: 10px;
+      margin-top: 30px;
+      opacity: 0.9;
+    }
+
+    form label {
+      font-weight: bold;
+      color: #34495e;
+    }
+
+    .form-group {
+      position: relative;
+    }
+
+    .form-group i {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #34495e;
+    }
+
+    .form-control {
+      padding-left: 30px;
+      /* Space for icon */
+      border-radius: 10px;
+      border: 1px solid #b3c2c8;
+    }
+
+    .btn-primary {
+      background-color: #22a152;
+      border: none;
+      border-radius: 20px;
+      padding: 10px 20px;
+    }
+
+    .btn-primary:hover {
+      background-color: #47e684;
+    }
+
+    /* Crop Recommendation Card Styling */
+    .recommend-card {
+      background-color: #ffffff;
+      color: #2c3e50;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      width: 100%;
+      max-width: 300px;
+      margin: 20px auto;
+      text-align: center;
+    }
+
+    .recommend-card img {
+      width: 100%;
+      height: auto;
+      border-bottom: 1px solid #ddd;
+    }
+
+    .recommend-card .card-body {
+      padding: 15px;
+    }
+
+    .recommend-card .card-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #0a7a35;
+    }
+
+    .recommend-card .crop-name {
+      font-size: 1.25rem;
+      color: #0a7a35;
+      margin-top: 10px;
+      font-weight: 600;
+    }
+
+    .recommend-card .card-text {
+      font-size: 1rem;
+      color: #555;
+      margin-top: 10px;
+      line-height: 1.5;
+    }
+
+    .card {
+      background-color: #ecf0f1;
+      border: none;
+      border-radius: 10px;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .card-title {
+      color: #2c3e50;
+      font-weight: bold;
+    }
+
+    footer {
+      background-color: #0a7a35;
+      color: #ecf0f1;
+      text-align: center;
+      padding: 10px 0;
+      margin-top: 30px;
+    }
+
+    footer a {
+      color: #ecf0f1;
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Search bar styles */
+    .form-control,
+    .btn-outline-success {
+      border-radius: 25px;
+    }
+
+    .form-control {
+      border: 1px solid #fff;
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+
+    .btn-outline-success {
+      color: #fff;
+      border: 1px solid #fff;
+    }
+
+    .btn-outline-success:hover {
+      background-color: #47e684;
+    }
+
+    /* Navbar hamburger menu */
+    .navbar-toggler-icon {
+      background-color: #fff;
+    }
+
+    /* About Section */
+    .about-container {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-radius: 10px;
+      padding: 30px;
+      margin-top: 30px;
+    }
+
+    .about-section-header {
+      color: #2c6f2e;
+      /* Green */
+      text-align: center;
+      margin-bottom: 40px;
+      font-weight: bold;
+      font-size: 1.8rem;
+    }
+
+    .about-content {
+      color: #34495e;
+      font-size: 1.1rem;
+      line-height: 1.7;
+    }
+
+    .about-content ul {
+      list-style-type: none;
+      padding-left: 20px;
+    }
+
+    .about-content li {
+      margin-bottom: 15px;
+      font-size: 1.1rem;
+    }
+
+    .team-member {
+      background-color: #f4f4f9;
+      padding: 20px;
+      margin: 10px 0;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .team-member h5 {
+      color: #2c6f2e;
+      font-weight: bold;
+    }
+
+    .team-member p {
+      font-size: 1.1rem;
+      color: #555;
+    }
+
+    .team-member i {
+      color: #0a7a35;
+      font-size: 1.3rem;
+    }
+
+    .team-member-icon {
+      font-size: 2.5rem;
+      margin-bottom: 15px;
+    }
+
+    /* Footer Styling */
+    footer {
+      background-color: #0a7a35;
+      /* Dark green background */
+      color: #ecf0f1;
+      /* Light text color */
+      text-align: center;
+      padding: 30px 0;
+      margin-top: 40px;
+    }
+
+    footer .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    footer p {
+      margin: 10px 0;
+      font-size: 1rem;
+    }
+
+    footer p strong {
+      color: #fff;
+      /* Make team and institution names stand out */
+    }
+
+    footer ul {
+      list-style-type: none;
+      padding: 0;
+      font-size: 1rem;
+      line-height: 1.8;
+      margin-top: 10px;
+    }
+
+    footer ul li {
+      margin-bottom: 8px;
+    }
+
+    footer a {
+      color: #ecf0f1;
+      text-decoration: none;
+      font-weight: bold;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Add responsiveness for mobile devices */
+    @media (max-width: 768px) {
+      footer p {
+        font-size: 0.9rem;
+      }
+
+      footer ul li {
+        font-size: 0.9rem;
+      }
+
+      footer .container {
+        padding: 0 15px;
+      }
+    }
+
+    /* Make sure the hamburger only appears on mobile or smaller devices */
+    @media (max-width: 768px) {
+      .navbar-collapse {
+        background-color: #0a7a35;
+        /* Green background for mobile menu */
+      }
+
+      h1 {
+        font-size: 2.5rem;
+        margin-top: 10vh;
+      }
+
+      .logo-img {
+        width: 15%;
+      }
+
+    }
+
+    /* About and Contact Sections */
+    .section-title {
+      color: #2c6f2e;
+      /* Green text */
+      text-align: center;
+      margin-bottom: 30px;
+    }
+
+    .about-container,
+    .contact-container {
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 10px;
+      padding: 30px;
+      margin-top: 30px;
+    }
+
+    .contact-container form input,
+    .contact-container form textarea {
+      border-radius: 10px;
+      margin-bottom: 20px;
+      border: 1px solid #ccc;
+      padding: 10px;
+    }
+
+    .contact-container form button {
+      background-color: #22a152;
+      border: none;
+      border-radius: 20px;
+      padding: 10px 20px;
+      color: #fff;
+    }
+
+    .contact-container form button:hover {
+      background-color: #47e684;
+    }
+  </style>
+</head>
+
+<body>
+<!-- Navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-success shadow-sm sticky-top">
+  <div class="container-fluid">
+    <!-- Brand / Logo -->
+    <a class="navbar-brand fw-bold text-white" href="/">
+      🌾 Smart Farming
+    </a>
+
+    <!-- Toggler (for mobile view) -->
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <!-- Navbar content -->
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <!-- Left Nav Links -->
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link text-white" href="/#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" href="#about">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" href="#cropInfoSection">Crop Info</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" href="#contact">Contact</a>
+        </li>
+      </ul>
+
+      <!-- Right: Search bar + Theme toggle -->
+      <form class="d-flex me-3" role="search" onsubmit="event.preventDefault(); searchCrops();">
+        <input class="form-control me-2" type="search" placeholder="Search crops..." aria-label="Search" id="cropSearchInput">
+        <button class="btn btn-light" type="submit">Search</button>
+      </form>
+
+      <!-- Theme toggle button (optional JS needed to function) -->
+      <button class="btn btn-outline-light" onclick="toggleTheme()" title="Toggle dark/light mode">
+        <i class="fas fa-adjust"></i>
+      </button>
+    </div>
+  </div>
+</nav>
+
+  <!-- Main Content -->
+  <div class="container my-5">
+    <h1>Crop Recommendation System<img src="/static/logo.png" alt="Crop Recommendation Logo" class="logo-img"> </h1>
+
+    <!--      adding form-->
+    <form action="/predict" method="POST" class="form-container">
+      <div class="row">
+        <div class="col-md-4 form-group">
+          <label for="Nitrogen">
+            <i class="fas fa-leaf"></i> Nitrogen
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Nitrogen" name="Nitrogen" placeholder="Enter Nitrogen" class="form-control"
+              required step="0">
+          </div>
+        </div>
+        <div class="col-md-4 form-group">
+          <label for="Phosporus">
+            <i class="fas fa-flask"></i> Phosphorus
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Phosporus" name="Phosporus" placeholder="Enter Phosphorus" class="form-control"
+              required step="0">
+          </div>
+        </div>
+        <div class="col-md-4 form-group">
+          <label for="Potassium">
+            <i class="fas fa-atom"></i> Potassium
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Potassium" name="Potassium" placeholder="Enter Potassium" class="form-control"
+              required step="0">
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-4">
+        <div class="col-md-4 form-group">
+          <label for="Temperature">
+            <i class="fas fa-thermometer-half"></i> Temperature (°C)
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Temperature" name="Temperature" placeholder="Enter Temperature in °C"
+              class="form-control" required step="0.01">
+          </div>
+        </div>
+        <div class="col-md-4 form-group">
+          <label for="Humidity">
+            <i class="fas fa-tint"></i> Humidity (%)
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Humidity" name="Humidity" placeholder="Enter Humidity in %" class="form-control"
+              required step="0.01">
+          </div>
+        </div>
+        <div class="col-md-4 form-group">
+          <label for="Ph">
+            <i class="fas fa-vial"></i> pH
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Ph" name="Ph" placeholder="Enter pH value" class="form-control" required
+              step="0.01">
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-4">
+        <div class="col-md-4 form-group">
+          <label for="Rainfall">
+            <i class="fas fa-cloud-rain"></i> Rainfall (mm)
+          </label>
+          <div class="input-icon-wrapper">
+            <input type="number" id="Rainfall" name="Rainfall" placeholder="Enter Rainfall in mm" class="form-control"
+              required>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-4">
+        <div class="col-md-12 text-center">
+          <button type="submit" class="btn btn-primary btn-lg">
+            <i class="fas fa-search"></i> Get Recommendation
+          </button>
+        </div>
+      </div>
+    </form>
+
+
+    <!-- Crop Recommendation Display -->
+    {% if crop %}
+    <div class="recommend-card">
+      <img src="{{ url_for('static', filename=crop.image) }}" alt="{{ crop.name }}">
+      <div class="card-body">
+        <h5 class="card-title">Recommended Crop</h5>
+        <h6 class="crop-name">{{ crop.name }}</h6>
+        <p class="card-text">{{ crop.description }}</p>
+      </div>
+    </div>
+    {% endif %}
+
+  </div>
+
+
+<!-- About Section -->
+<div id="about" class="about-container">
+  <h2 class="about-section-header">About the Crop Recommendation System</h2>
+  <div class="about-content">
+    <p><strong>Overview:</strong></p>
+    <p>
+      The <strong>Smart Farming: Crop Recommendation System</strong> is an AI-driven agricultural decision-support tool that utilizes a Random Forest Classifier to recommend the most suitable crops for cultivation. By leveraging multi-dimensional environmental parameters including Nitrogen (N), Phosphorus (P), Potassium (K), soil pH, humidity, temperature, and rainfall, the system achieves an impressive <strong>94.3% accuracy</strong> in crop prediction. The model is trained on curated datasets of Indian agricultural conditions and is optimized for practical, real-world application.
+    </p>
+
+    <p>
+      Developed as part of an academic research project at <strong>IIIT Lucknow</strong>, this system aims to enhance sustainable farming practices, improve yield optimization, and support data-driven decision-making for Indian farmers.
+    </p>
+
+    <p><strong>Key Features:</strong></p>
+    <ul>
+      <li><i class="fas fa-seedling"></i> Intelligent crop recommendations based on soil macronutrients and agro-climatic data.</li>
+      <li><i class="fas fa-chart-line"></i> Model trained with hyperparameter tuning and k-fold cross-validation for robust performance.</li>
+      <li><i class="fas fa-brain"></i> Powered by a supervised learning pipeline using Random Forest Classifier with feature importance analysis.</li>
+      <li><i class="fas fa-laptop-code"></i> Deployed via Flask and Hugging Face Spaces with a responsive front-end built in HTML, CSS, and JavaScript.</li>
+    </ul>
+
+    <p><strong>Developer Spotlight:</strong></p>
+    <div class="team-member">
+      <div class="team-member-icon"><i class="fas fa-user-circle"></i></div>
+      <h5>Saksham Pathak</h5>
+      <p>
+        <strong>Project Lead | AI/ML Engineer | Full-Stack Developer</strong><br>
+        Saksham led the end-to-end development of the system — from data preprocessing and feature engineering to training the Random Forest model and designing the UI/UX. He integrated the backend using Flask, deployed the project on Hugging Face Spaces using Docker, and authored the associated academic research paper detailing the methodology, experimentation, and results. His focus was on building a scalable, accurate, and user-centric AI solution tailored to Indian agricultural conditions.
+      </p>
+    </div>
+  </div>
+</div>
+
+      <!-- Crop Cards Section -->
+      <div id="cropInfoSection" class="row">
+        <!-- Crop cards will be inserted dynamically here -->
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Contact Section -->
+  <div id="contact" class="contact-container">
+    <h2 class="section-title">Contact Us</h2>
+    <form action="/submit_contact" method="POST">
+      <input type="text" name="name" placeholder="Your Name" required class="form-control">
+      <input type="email" name="email" placeholder="Your Email" required class="form-control">
+      <textarea name="message" placeholder="Your Message" required class="form-control" rows="4"></textarea>
+      <button type="submit">Send Message</button>
+    </form>
+  </div>
+
+
+  <footer
+    style="background-color: #0a3c02; color: #eafbe0; padding: 2rem 1rem; font-family: 'Segoe UI', sans-serif; text-align: center;">
+    <div class="container" style="max-width: 960px; margin: auto;">
+      <p style="font-size: 1.1rem;">&copy; 2024 <strong>CropVista</strong> — Smart Farming for Smarter Yields</p>
+
+      <p style="font-size: 0.95rem;">
+        Cultivated with care by <strong>Saksham Pathak</strong><br>
+        M.Sc. Artificial Intelligence & Machine Learning<br>
+        <strong>Indian Institute of Information Technology, Lucknow</strong>
+      </p>
+
+
+      <div style="margin: 1rem 0; text-align: center;">
+        <a href="https://github.com/parthmax2" target="_blank"
+          style="color: #b4f7a1; margin: 0 15px; font-size: 1.2rem; text-decoration: none;">
+          <i class="fab fa-github"></i> GitHub
+        </a>
+        <a href="https://www.linkedin.com/in/sakshampathak/" target="_blank"
+          style="color: #b4f7a1; margin: 0 15px; font-size: 1.2rem; text-decoration: none;">
+          <i class="fab fa-linkedin"></i> LinkedIn
+        </a>
+        <a href="https://huggingface.co/parthmax" target="_blank"
+          style="color: #b4f7a1; margin: 0 15px; font-size: 1.2rem; text-decoration: none;">
+          <i class="fas fa-brain"></i> Hugging Face
+        </a>
+        <a href="mailto:pathaksaksham430@gmail.com"
+          style="color: #b4f7a1; margin: 0 15px; font-size: 1.2rem; text-decoration: none;">
+          <i class="fas fa-envelope"></i> Email
+        </a>
+        <a href="https://twitter.com/Parthmax__" target="_blank"
+          style="color: #b4f7a1; margin: 0 15px; font-size: 1.2rem; text-decoration: none;">
+          <i class="fab fa-twitter"></i> Twitter
+        </a>
+      </div>
+
+
+      <p>
+        <a href="#" style="color: #b4f7a1; text-decoration: none; margin: 0 10px;">Privacy Policy</a>
+      </p>
+
+      <hr style="border-color: #4caf50; margin: 1.5rem 0;" />
+
+      <p style="font-size: 0.85rem; color: #a6e8a6;">
+        🌾 Growing intelligence, one crop at a time — Powered by Flask & Machine Learning
+      </p>
+    </div>
+  </footer>
+
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+    crossorigin="anonymous"></script>
+
+  <script>
+    // Crop data (with 22 crops and detailed descriptions)
+    const crops = [
+      { name: 'Rice', image: 'rice.jpg', description: 'Rice is a staple crop grown primarily in flooded fields. It thrives in hot, humid climates with regular rainfall and is grown worldwide for its seeds which serve as a primary food source.' },
+      { name: 'Maize', image: 'maize.jpg', description: 'Maize (corn) is a versatile crop grown in temperate climates. It is used for food, livestock feed, and industrial products. It grows best in well-drained soil with moderate rainfall.' },
+      { name: 'Jute', image: 'jute.jpg', description: 'Jute is a fiber crop grown mainly in tropical regions. It is used for making burlap sacks, ropes, and mats. Jute grows best in warm, wet conditions with plenty of sunlight.' },
+      { name: 'Cotton', image: 'cotton.jpg', description: 'Cotton is a key cash crop grown in warm climates. The fibers of the cotton plant are used to make textiles, while the seeds are processed for oil. Cotton requires a long, hot growing season.' },
+      { name: 'Coconut', image: 'coconut.jpg', description: 'Coconut is grown in tropical regions and is a versatile crop providing coconuts, coconut oil, and coir. It grows best in sandy soil with plenty of sunlight and rainfall.' },
+      { name: 'Papaya', image: 'papaya.jpg', description: 'Papaya is a tropical fruit crop that thrives in warm climates. It is rich in vitamins and is grown for both commercial and local consumption. Papaya grows quickly and requires well-drained, fertile soil.' },
+      { name: 'Orange', image: 'orange.jpg', description: 'Oranges are one of the most widely cultivated fruits. They grow best in warm climates with well-drained soil and moderate rainfall. Oranges are rich in vitamin C and are consumed worldwide.' },
+      { name: 'Apple', image: 'apple.jpg', description: 'Apple trees are grown in temperate climates and are known for their crisp fruit. They thrive in areas with cold winters and require well-drained, loamy soil to produce quality fruit.' },
+      { name: 'Muskmelon', image: 'muskmelon.jpg', description: 'Muskmelon is a sweet, fleshy fruit that grows in warm climates. It requires plenty of sunlight, moderate rainfall, and well-drained soil. It is popular for its juicy texture and refreshing taste.' },
+      { name: 'Watermelon', image: 'watermelon.jpg', description: 'Watermelon is a warm-season crop that requires high temperatures and plenty of water. It thrives in sandy soil and is grown for its juicy, sweet fruit consumed during summer.' },
+      { name: 'Grapes', image: 'grapes.jpg', description: 'Grapes are grown for fresh consumption and wine production. They require temperate climates with well-drained soil and moderate rainfall. Grapes need a long growing season to develop their sweet flavor.' },
+      { name: 'Mango', image: 'mango.jpg', description: 'Mango is a tropical fruit tree known for its sweet, juicy fruit. It thrives in hot, humid climates and requires well-drained, sandy loam soil with full sun exposure.' },
+      { name: 'Banana', image: 'banana.jpg', description: 'Bananas are grown in tropical regions and thrive in hot, humid climates. The plant requires regular rainfall and well-drained soil. Bananas are a staple food in many countries.' },
+      { name: 'Pomegranate', image: 'pomegranate.jpg', description: 'Pomegranate is a drought-tolerant fruit crop that grows best in dry, arid climates. The fruit is rich in antioxidants and is cultivated for both fresh consumption and juice production.' },
+      { name: 'Lentil', image: 'lentil.jpg', description: 'Lentil is a legume grown in temperate regions for its protein-rich seeds. It requires well-drained soil and moderate rainfall. Lentils are important for crop rotation as they help fix nitrogen in the soil.' },
+      { name: 'Blackgram', image: 'blackgram.jpg', description: 'Blackgram is a legume crop commonly grown in tropical and subtropical climates. It is an important source of protein and is often used in curries and dals in South Asia.' },
+      { name: 'Mungbean', image: 'mungbean.jpg', description: 'Mungbean is a short-duration crop grown for its small, green seeds. It thrives in warm climates with moderate rainfall and is commonly used in cooking and traditional medicine.' },
+      { name: 'Mothbeans', image: 'mothbeans.jpg', description: 'Mothbeans are drought-resistant legumes grown in arid regions. They are a key source of protein and are grown for their edible seeds which are used in curries and soups.' },
+      { name: 'Pigeonpeas', image: 'pigeonpeas.jpg', description: 'Pigeonpeas are leguminous plants grown in tropical and subtropical regions. They are important for food security in many developing countries due to their high protein content.' },
+      { name: 'Kidneybeans', image: 'kidneybeans.jpg', description: 'Kidney beans are grown for their edible seeds, which are rich in protein. They require a warm growing season and well-drained, fertile soil. Kidney beans are a staple food in many cultures.' },
+      { name: 'Chickpea', image: 'chickpea.jpg', description: 'Chickpea, also known as garbanzo bean, is a pulse crop grown in semi-arid regions. It is a major source of plant-based protein and is grown in rotation to improve soil health.' },
+      { name: 'Coffee', image: 'coffee.jpg', description: 'Coffee is a tropical crop grown primarily in regions with high altitudes. It requires a steady climate with moderate rainfall and is grown for its seeds, which are processed into the popular beverage.' }
+    ];
+
+    // Function to render crop information cards
+    function renderCrops(filteredCrops) {
+      const cropSection = document.getElementById('cropInfoSection');
+      cropSection.innerHTML = ''; // Clear existing cards
+      filteredCrops.forEach(crop => {
+        const cropCard = `
+            <div class="col-md-4 mb-3">
+              <div class="card">
+                <img src="/static/${crop.image}" class="card-img-top" alt="${crop.name}">
+                <div class="card-body">
+                  <h5 class="card-title">${crop.name}</h5>
+                  <p class="card-text">${crop.description}</p>
+                </div>
+              </div>
+            </div>
+          `;
+        cropSection.innerHTML += cropCard;
+      });
+    }
+
+    // Function to handle crop search
+    function searchCrops() {
+      const searchQuery = document.getElementById('cropSearchInput').value.toLowerCase();
+      const filteredCrops = crops.filter(crop => crop.name.toLowerCase().includes(searchQuery));
+      renderCrops(filteredCrops);
+    }
+
+    // Initial render of all crops
+    renderCrops(crops);
+  </script>
+</body>
+
+</html>