Initial commit

.gitignore

@@ -0,0 +1,2 @@
+/venv
+.env

Dockerfile

@@ -0,0 +1,23 @@
+
+FROM python:3.12-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    git \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,62 @@
+import os
+import pandas as pd
+from fastapi import FastAPI, Request, Form
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from dotenv import load_dotenv
+from pathlib import Path
+
+from chatbot import WatershedChatbot
+
+load_dotenv()  
+
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+templates = Jinja2Templates(directory="templates")
+
+chatbot = WatershedChatbot()
+
+csv_path = Path(__file__).resolve().parent / "summary.csv"
+
+try:
+    summary_df = pd.read_csv(csv_path)
+except FileNotFoundError:
+    dummy_data = pd.DataFrame([
+        {
+            "district": "Example District",
+            "cropping_intensity": 100,
+            "soil_loss": 10,
+            "check_dams": 5,
+            "reforested_area": 200
+        }
+    ])
+    dummy_data.to_csv(csv_path, index=False)
+    summary_df = dummy_data
+    print(f"[INFO] Created dummy summary.csv at {csv_path}")
+
+summary_df.columns = summary_df.columns.str.lower().str.strip()
+
+@app.get("/", response_class=HTMLResponse)
+async def get_home(request: Request):
+    districts = ["All"] + sorted(summary_df["district"].unique().tolist())
+
+    summary_data = summary_df.to_dict(orient="records")
+
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "districts": districts,
+        "summary_data": summary_data
+    })
+
+
+@app.post("/api/chat")
+async def chat_endpoint(query: str = Form(...), district: str = Form(None)):
+    try:
+        response = chatbot.answer_query(query, district)
+        return JSONResponse(content=response)
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": str(e)})
+

chatbot.py

@@ -0,0 +1,48 @@
+# chatbot.py
+import os
+from langchain_community.vectorstores import FAISS
+from langchain_huggingface import HuggingFaceEmbeddings
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langchain.chains import RetrievalQA
+
+
+class WatershedChatbot:
+    def __init__(self):
+        # Load embeddings model (same as used during indexing)
+        self.embedding = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
+
+        # Load FAISS vectorstore from local folder
+        self.vectorstore = FAISS.load_local(
+            "dpr_vector_store_hf",
+            embeddings=self.embedding,
+            allow_dangerous_deserialization=True
+        )
+
+        # Load all districts from metadata for filtering
+        self.all_districts = sorted({doc.metadata.get("district", "") for doc in self.vectorstore.docstore._dict.values()})
+
+        # Set up Gemini LLM, expects GOOGLE_API_KEY in env variables
+        self.llm = ChatGoogleGenerativeAI(model="gemini-2.0-flash", temperature=0.3)
+
+    def get_districts(self):
+        return self.all_districts
+
+    def answer_query(self, query: str, district: str = None):
+        if district and district != "All":
+            retriever = self.vectorstore.as_retriever(search_kwargs={"filter": {"district": district}})
+        else:
+            retriever = self.vectorstore.as_retriever()
+
+        qa_chain = RetrievalQA.from_chain_type(llm=self.llm, retriever=retriever, return_source_documents=True)
+
+        result = qa_chain(query)
+        return {
+            "answer": result["result"],
+            "sources": [
+                {
+                    "source_file": doc.metadata.get("source_file", "Unknown"),
+                    "chunk_index": doc.metadata.get("chunk_index", "N/A")
+                }
+                for doc in result["source_documents"]
+            ]
+        }

procfile

@@ -0,0 +1 @@
+web: uvicorn app:app --host=0.0.0.0 --port=${PORT:-7860}

requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+pandas
+jinja2
+python-dotenv
+langchain
+langchain-community
+langchain-google-genai
+langchain-huggingface
+sentence-transformers
+faiss-cpu

static/script.js

@@ -0,0 +1,190 @@
+// ======= Tab Switching Logic =======
+const tabButtons = document.querySelectorAll('.tab-btn');
+const tabContents = document.querySelectorAll('.tab-content');
+
+tabButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    // Remove active class from all tabs and contents
+    tabButtons.forEach(btn => btn.classList.remove('active'));
+    tabContents.forEach(content => content.classList.remove('active'));
+
+    // Add active class to clicked tab and corresponding content
+    button.classList.add('active');
+    const targetId = button.id === 'tab-chat' ? 'chat-section' : 'dashboard-section';
+    document.getElementById(targetId).classList.add('active');
+
+    // If dashboard tab is activated, re-render chart & metrics
+    if (button.id === 'tab-dashboard') {
+      setTimeout(() => {
+        const selectedDistrict = dashboardDistrictSelect.value;
+        if (selectedDistrict === "All") {
+          renderChart(summaryData);
+          renderMetrics("All");
+        } else {
+          const filteredData = summaryData.filter(item => item.district === selectedDistrict);
+          renderChart(filteredData);
+          renderMetrics(selectedDistrict);
+        }
+      }, 100);
+    }
+  });
+});
+
+// ======= Chatbot Form Submission =======
+const chatForm = document.getElementById('chat-form');
+const queryInput = document.getElementById('query-input');
+const districtSelect = document.getElementById('district-select');
+const answerContainer = document.getElementById('answer-container');
+const sourcesContainer = document.getElementById('sources-container');
+
+chatForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  const query = queryInput.value.trim();
+  const district = districtSelect.value;
+
+  if (!query) return;
+
+  // Show loading state
+  answerContainer.textContent = "Fetching answer...";
+  sourcesContainer.textContent = "";
+
+  // Prepare form data
+  const formData = new FormData();
+  formData.append('query', query);
+  formData.append('district', district);
+
+  try {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      body: formData,
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      answerContainer.textContent = data.answer;
+
+      if (data.sources && data.sources.length > 0) {
+        sourcesContainer.innerHTML = `<strong>Sources:</strong><br>` +
+          data.sources.map(source =>
+            `📄 ${source.source_file} — Chunk ${source.chunk_index}`
+          ).join('<br>');
+      } else {
+        sourcesContainer.textContent = "No sources found.";
+      }
+    } else {
+      answerContainer.textContent = `Error: ${data.error || "Unknown error"}`;
+    }
+
+  } catch (error) {
+    answerContainer.textContent = `Request failed: ${error.message}`;
+  }
+});
+
+// ======= Dashboard Chart & Metrics =======
+// Ensure summaryData is injected into window before this script runs
+const summaryData = window.summaryData;
+
+console.log("summaryData loaded:", summaryData);
+if (!summaryData || !Array.isArray(summaryData)) {
+  console.error("summaryData is missing or invalid. Dashboard won't load.");
+}
+
+const dashboardDistrictSelect = document.getElementById('dashboard-district-select');
+const metricsContainer = document.getElementById('metrics-container');
+const chartCanvas = document.getElementById('summary-chart').getContext('2d');
+
+let summaryChart = null;
+
+// Function to render bar chart
+function renderChart(data) {
+  if (!data || data.length === 0) {
+    console.warn("No data provided to renderChart");
+    if (summaryChart) {
+      summaryChart.destroy();
+      summaryChart = null;
+    }
+    return;
+  }
+
+  const labels = data.map(item => item.district);
+  const croppingIntensity = data.map(item => Number(item.cropping_intensity || 0));
+  const soilLoss = data.map(item => Number(item.soil_loss || 0));
+
+  if (summaryChart) {
+    summaryChart.destroy();
+  }
+
+  summaryChart = new Chart(chartCanvas, {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: 'Cropping Intensity (%)',
+          data: croppingIntensity,
+          backgroundColor: 'rgba(11, 61, 145, 0.7)'
+        },
+        {
+          label: 'Soil Loss (tons/ha/year)',
+          data: soilLoss,
+          backgroundColor: 'rgba(204, 0, 0, 0.7)'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      scales: {
+        y: { beginAtZero: true }
+      }
+    }
+  });
+}
+
+// Function to render detailed metrics for a district
+function renderMetrics(district) {
+  metricsContainer.innerHTML = "";
+
+  if (district === "All") {
+    metricsContainer.innerHTML = "<p>Select a specific district to see detailed metrics.</p>";
+    return;
+  }
+
+  const districtData = summaryData.find(item => item.district === district);
+  if (!districtData) {
+    metricsContainer.innerHTML = "<p>No data available for the selected district.</p>";
+    return;
+  }
+
+  Object.entries(districtData).forEach(([key, value]) => {
+    if (key === "district") return;
+
+    const metricDiv = document.createElement('div');
+    metricDiv.classList.add('metric');
+    // Capitalize and replace underscores for better display
+    const label = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    metricDiv.textContent = `${label}: ${value}`;
+    metricsContainer.appendChild(metricDiv);
+  });
+}
+
+// Event listener for dashboard district selection
+dashboardDistrictSelect.addEventListener('change', () => {
+  const selectedDistrict = dashboardDistrictSelect.value;
+
+  if (selectedDistrict === "All") {
+    renderChart(summaryData);
+    renderMetrics("All");
+  } else {
+    const filteredData = summaryData.filter(item => item.district === selectedDistrict);
+    renderChart(filteredData);
+    renderMetrics(selectedDistrict);
+  }
+});
+
+// Initial render on page load - render chart & metrics for "All"
+if (summaryData && Array.isArray(summaryData)) {
+  renderChart(summaryData);
+  renderMetrics("All");
+}

static/styles.css

@@ -0,0 +1,46 @@
+body {
+      font-family: "Roboto", sans-serif;
+      background-color: #f0f9f4;
+      scroll-behavior: smooth;
+    }
+    .tab-btn {
+      @apply px-5 py-3 rounded-lg text-green-900 font-semibold transition-colors duration-300;
+    }
+    .tab-btn.active {
+      @apply bg-green-600 text-white shadow-lg;
+    }
+    .tab-btn:hover:not(.active) {
+      @apply bg-green-200;
+    }
+    .output {
+      @apply mt-4 p-5 bg-white rounded-lg shadow-md text-gray-800;
+      min-height: 4rem;
+    }
+    .metrics > div {
+      @apply bg-white rounded-lg shadow p-6 text-center text-green-900 font-semibold;
+      transition: transform 0.3s ease;
+    }
+    .metrics > div:hover {
+      transform: translateY(-6px);
+      box-shadow: 0 10px 15px rgba(34, 197, 94, 0.4);
+    }
+    /* Animate fade-in */
+    .fade-in {
+      animation: fadeInUp 0.8s ease forwards;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    @keyframes fadeInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Scrollbar for chat answer */
+    #answer-container::-webkit-scrollbar {
+      width: 8px;
+    }
+    #answer-container::-webkit-scrollbar-thumb {
+      background-color: #34d399;
+      border-radius: 10px;
+    }

summary.csv

@@ -0,0 +1,4 @@
+district,cropping_intensity,rainfall_mm,whs_total,shgs,income_increase
+Amethi,134,1100,88,512,25-50%
+Varanasi,120,900,76,420,30-45%
+Lucknow,154,1066,106,528,40-60%

templates/index.html

@@ -0,0 +1,230 @@
+<html lang="en">
+ <head>
+  <meta charset="utf-8"/>
+  <meta content="width=device-width, initial-scale=1" name="viewport"/>
+  <title>
+   Watershed DPR Chatbot
+  </title>
+  <script src="https://cdn.tailwindcss.com">
+  </script>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"/>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="/static/styles.css" />
+  
+ </head>
+ <body class="min-h-screen flex flex-col">
+  <!-- Hero Section -->
+  <header class="relative bg-green-800 text-white shadow-lg overflow-hidden">
+   <img alt="A lush green agriculture field with sunrise and a flowing water stream, symbolizing watershed and farming" class="absolute inset-0 w-full h-full object-cover opacity-30" height="400" loading="lazy" src="https://storage.googleapis.com/a1aa/image/3bd61a66-6bda-429f-11fb-39ce245411f2.jpg" width="1920"/>
+   <div class="relative container mx-auto px-6 py-20 flex flex-col md:flex-row items-center justify-between">
+    <div class="max-w-xl fade-in">
+     <h1 class="text-4xl md:text-5xl font-extrabold leading-tight drop-shadow-lg">
+      Watershed DPR Chatbot
+     </h1>
+     <p class="mt-4 text-lg md:text-xl max-w-md drop-shadow-md">
+      Your intelligent assistant for district watershed progress reports and insights.
+     </p>
+     <a class="inline-block mt-8 bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition transform hover:-translate-y-1" href="#chat-section">
+      Get Started
+      <i class="fas fa-arrow-right ml-2">
+      </i>
+     </a>
+    </div>
+    <img alt="Illustration of a friendly chatbot with agriculture elements like plants and water droplets" class="w-80 mt-12 md:mt-0 fade-in" height="300" loading="lazy" src="https://storage.googleapis.com/a1aa/image/d0c82752-217a-41c1-f4b6-532dabc58b91.jpg" width="400"/>
+   </div>
+  </header>
+  <!-- Navigation Tabs -->
+  <nav class="bg-white shadow sticky top-0 z-30">
+   <div class="container mx-auto px-6 py-3 flex justify-center space-x-6">
+    <button aria-controls="chat-section" aria-selected="true" class="tab-btn active flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-chat" role="tab">
+     <i class="fas fa-comments">
+     </i>
+     <span>
+      Chatbot
+     </span>
+    </button>
+    <button aria-controls="dashboard-section" aria-selected="false" class="tab-btn flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-dashboard" role="tab">
+     <i class="fas fa-chart-bar">
+     </i>
+     <span>
+      Dashboard
+     </span>
+    </button>
+    <button aria-controls="about-section" aria-selected="false" class="tab-btn flex items-center space-x-2 text-green-700 hover:text-green-900" id="tab-about" role="tab">
+     <i class="fas fa-info-circle">
+     </i>
+     <span>
+      About
+     </span>
+    </button>
+   </div>
+  </nav>
+  <main class="flex-grow container mx-auto px-6 py-10">
+   <!-- Chat Section -->
+   <section aria-labelledby="tab-chat" class="tab-content active max-w-4xl mx-auto bg-white rounded-xl shadow-lg p-8 fade-in" id="chat-section" role="tabpanel" tabindex="0">
+    <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2">
+     Ask the Watershed DPR Chatbot
+    </h2>
+    <form aria-label="Chatbot question form" class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0" id="chat-form">
+     <input aria-describedby="query-desc" aria-required="true" class="flex-grow border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500" id="query-input" name="query" placeholder="Ask a question about any DPR..." required="" type="text"/>
+     <span class="sr-only" id="query-desc">
+      Enter your question here
+     </span>
+     <select aria-label="Select district" class="border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500" id="district-select" name="district">
+      {% for d in districts %}
+      <option value="{{ d }}">
+       {{ d }}
+      </option>
+      {% endfor %}
+     </select>
+     <button aria-label="Submit question" class="bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md px-6 py-3 transition-colors duration-300 flex items-center justify-center" type="submit">
+      <i class="fas fa-paper-plane mr-2">
+      </i>
+      Ask
+     </button>
+    </form>
+    <div aria-atomic="true" aria-live="polite" class="output mt-8 rounded-lg border border-green-200 shadow-sm min-h-[6rem] max-h-64 overflow-y-auto" id="answer-container">
+    </div>
+    <div class="output mt-4 rounded-lg border border-green-200 shadow-sm min-h-[4rem]" id="sources-container">
+    </div>
+   </section>
+   <!-- Dashboard Section -->
+   <section aria-labelledby="tab-dashboard" class="tab-content max-w-6xl mx-auto bg-white rounded-xl shadow-lg p-8 hidden fade-in" id="dashboard-section" role="tabpanel" tabindex="0">
+    <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2">
+     District-Level Watershed Summary
+    </h2>
+    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:space-x-4">
+     <label class="sr-only" for="dashboard-district-select">
+      Select District
+     </label>
+     <select aria-label="Select district for dashboard" class="border border-green-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500 w-full sm:w-64" id="dashboard-district-select">
+      <option value="All">
+       All
+      </option>
+      {% for row in summary_data %}
+      <option value="{{ row['district'] }}">
+       {{ row['district'] }}
+      </option>
+      {% endfor %}
+     </select>
+    </div>
+    <div class="flex flex-col md:flex-row md:space-x-10">
+     <canvas aria-label="Summary chart" class="w-full md:w-2/3 max-w-4xl rounded-lg shadow-lg" id="summary-chart" role="img">
+     </canvas>
+     <div aria-atomic="true" aria-live="polite" class="metrics grid grid-cols-1 sm:grid-cols-2 gap-8 mt-8 md:mt-0 md:w-1/3" id="metrics-container">
+      <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2">
+       <p class="text-5xl font-extrabold text-green-700">
+        1200
+       </p>
+       <p class="text-green-800 mt-2 text-lg">
+        Total Watersheds
+       </p>
+      </div>
+      <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2">
+       <p class="text-5xl font-extrabold text-green-700">
+        850
+       </p>
+       <p class="text-green-800 mt-2 text-lg">
+        Active DPRs
+       </p>
+      </div>
+      <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2">
+       <p class="text-5xl font-extrabold text-green-700">
+        75%
+       </p>
+       <p class="text-green-800 mt-2 text-lg">
+        Completion Rate
+       </p>
+      </div>
+      <div class="p-6 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-transform transform hover:-translate-y-2">
+       <p class="text-5xl font-extrabold text-green-700">
+        45
+       </p>
+       <p class="text-green-800 mt-2 text-lg">
+        Districts Covered
+       </p>
+      </div>
+     </div>
+    </div>
+   </section>
+   <!-- About Section -->
+   <section aria-labelledby="tab-about" class="tab-content max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-10 hidden fade-in" id="about-section" role="tabpanel" tabindex="0">
+    <h2 class="text-3xl font-extrabold text-green-800 mb-6 border-b border-green-300 pb-2">
+     About Watershed DPR Chatbot
+    </h2>
+    <div class="flex flex-col md:flex-row md:space-x-10 items-center">
+     <img alt="Illustration showing watershed, agriculture fields, and water management" class="rounded-lg shadow-lg mb-6 md:mb-0 w-full md:w-1/2" height="300" loading="lazy" src="https://storage.googleapis.com/a1aa/image/6418e15d-9c5a-4145-e710-625e31e5b76d.jpg" width="400"/>
+     <div class="md:w-1/2 text-green-900 text-lg leading-relaxed">
+      <p class="mb-4">
+       The Watershed DPR Chatbot is designed to assist farmers, researchers, and policymakers by providing quick and accurate answers related to District Progress Reports (DPRs) on watershed management.
+      </p>
+      <p class="mb-4">
+       Using advanced AI technology, it helps you understand the progress, challenges, and achievements in watershed projects across various districts.
+      </p>
+      <p>
+       Our dashboard offers insightful visualizations and metrics to track watershed development and support data-driven decision making.
+      </p>
+     </div>
+    </div>
+   </section>
+  </main>
+  <footer class="bg-green-800 text-green-100 text-center py-6 mt-16">
+   <p>
+    © 2025  Developed by IIIT Lucknow
+   </p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js">
+  </script>
+  <script src="/static/script.js">
+  </script>
+  <script>
+   // Tab switching logic with ARIA updates
+    const tabs = {
+      chat: document.getElementById("tab-chat"),
+      dashboard: document.getElementById("tab-dashboard"),
+      about: document.getElementById("tab-about"),
+    };
+    const sections = {
+      chat: document.getElementById("chat-section"),
+      dashboard: document.getElementById("dashboard-section"),
+      about: document.getElementById("about-section"),
+    };
+
+    function activateTab(tabKey) {
+      Object.keys(tabs).forEach((key) => {
+        if (key === tabKey) {
+          tabs[key].classList.add("active");
+          tabs[key].setAttribute("aria-selected", "true");
+          sections[key].classList.remove("hidden");
+          sections[key].classList.add("active");
+          sections[key].focus();
+        } else {
+          tabs[key].classList.remove("active");
+          tabs[key].setAttribute("aria-selected", "false");
+          sections[key].classList.add("hidden");
+          sections[key].classList.remove("active");
+        }
+      });
+    }
+
+    tabs.chat.addEventListener("click", () => activateTab("chat"));
+    tabs.dashboard.addEventListener("click", () => activateTab("dashboard"));
+    tabs.about.addEventListener("click", () => activateTab("about"));
+
+    // Optional: Animate metrics on scroll (fade-in)
+    const metrics = document.querySelectorAll("#metrics-container > div");
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("fade-in");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.3 }
+    );
+    metrics.forEach((metric) => observer.observe(metric));
+  </script>
+ </body>
+</html>