Upload 20 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/images/bacterial_leaf_blight.jpg filter=lfs diff=lfs merge=lfs -text
+static/images/downy_mildew.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create directory structure
+RUN mkdir -p static/images
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the app
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

README.md

@@ -1,10 +1,26 @@
----
-title: PestPedia
-emoji: 💻
-colorFrom: purple
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Agricultural Pests & Diseases in India
+
+A multilingual web application that provides information about common agricultural pests and diseases in India, their lifecycle, symptoms, and management strategies.
+
+## Features
+
+- Information about common agricultural pests and diseases affecting crops in India
+- Multilingual support for 11 Indian languages
+- Search and filter functionality
+- Detailed information for each pest/disease
+- Responsive design for both desktop and mobile devices
+
+## How to Use
+
+1. Browse the catalog of pests and diseases
+2. Use the filter buttons to view only pests or only diseases
+3. Search by name or affected crop
+4. Click on any card to view detailed information
+5. Change the language using the dropdown at the top
+
+## Technologies Used
+
+- Flask (Python web framework)
+- Google's Gemini API for multilingual content generation
+- Bootstrap for responsive UI
+- JavaScript for interactive elements

app.py

@@ -0,0 +1,327 @@
+import os
+import json
+import re
+import time
+import logging
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, session
+from google import genai 
+from dotenv import load_dotenv
+from cachelib import SimpleCache
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Load environment variables
+load_dotenv()
+
+# Configure the Gemini API - get key from env or Hugging Face Spaces secrets
+api_key = os.getenv("GEMINI_API_KEY")
+if not api_key:
+    logger.warning("GEMINI_API_KEY not found in environment variables. Make sure to set it in Hugging Face Spaces secrets.")
+
+client = genai.Client(api_key=api_key)
+
+# Initialize cache (7 days timeout)
+cache = SimpleCache(threshold=50, default_timeout=60*60*24*7)
+
+app = Flask(__name__)
+# Use secret key from environment or a default for development
+app.secret_key = os.getenv("SECRET_KEY", "dev_secret_key")
+
+# Supported languages
+LANGUAGES = {
+    "en": "English",
+    "hi": "हिंदी (Hindi)",
+    "bn": "বাংলা (Bengali)",
+    "te": "తెలుగు (Telugu)",
+    "mr": "मराठी (Marathi)",
+    "ta": "தமிழ் (Tamil)",
+    "gu": "ગુજરાતી (Gujarati)",
+    "ur": "اردو (Urdu)",
+    "kn": "ಕನ್ನಡ (Kannada)",
+    "or": "ଓଡ଼ିଆ (Odia)",
+    "ml": "മലയാളം (Malayalam)"
+}
+
+# List of pests and diseases (truncated for brevity)
+PESTS_DISEASES = [
+    {
+        "id": 1,
+        "name": "Fall Armyworm",
+        "type": "pest",
+        "crop": "Maize, Sorghum",
+        "image_url": "static/images/fall_armyworm.jpg"
+    },
+    {
+        "id": 2,
+        "name": "Rice Blast",
+        "type": "disease",
+        "crop": "Rice",
+        "image_url": "static/images/rice_blast.jpg"
+    },
+    {
+        "id": 3,
+        "name": "Aphids",
+        "type": "pest",
+        "crop": "Various crops",
+        "image_url": "static/images/aphids.jpg"
+    },
+    {
+        "id": 4,
+        "name": "Powdery Mildew",
+        "type": "disease",
+        "crop": "Wheat, Vegetables",
+        "image_url": "static/images/powdery_mildew.jpg"
+    },
+    {
+        "id": 5,
+        "name": "Stem Borer",
+        "type": "pest",
+        "crop": "Rice, Sugarcane",
+        "image_url": "static/images/stem_borer.jpg"
+    },
+    {
+        "id": 6,
+        "name": "Yellow Mosaic Virus",
+        "type": "disease",
+        "crop": "Pulses",
+        "image_url": "static/images/yellow_mosaic.jpg"
+    },
+    {
+        "id": 7,
+        "name": "Brown Planthopper",
+        "type": "pest",
+        "crop": "Rice",
+        "image_url": "static/images/brown_planthopper.jpg"
+    },
+    {
+        "id": 8,
+        "name": "Bacterial Leaf Blight",
+        "type": "disease",
+        "crop": "Rice",
+        "image_url": "static/images/bacterial_leaf_blight.jpg"
+    },
+    {
+        "id": 9,
+        "name": "Jassids",
+        "type": "pest",
+        "crop": "Cotton, Maize",
+        "image_url": "static/images/jassids.jpg"
+    },
+    {
+        "id": 10,
+        "name": "Downy Mildew",
+        "type": "disease",
+        "crop": "Grapes, Onion",
+        "image_url": "static/images/downy_mildew.jpg"
+    },
+    {
+        "id": 11,
+        "name": "Whitefly",
+        "type": "pest",
+        "crop": "Tomato, Cotton",
+        "image_url": "static/images/whitefly.jpg"
+    },
+    {
+        "id": 12,
+        "name": "Fusarium Wilt",
+        "type": "disease",
+        "crop": "Banana, Tomato",
+        "image_url": "static/images/fusarium_wilt.jpg"
+    }
+]
+
+@app.route('/')
+def index():
+    # Set default language if not set
+    if 'language' not in session:
+        session['language'] = 'en'
+    
+    return render_template('index.html', 
+                          pests_diseases=PESTS_DISEASES,
+                          languages=LANGUAGES,
+                          current_language=session['language'])
+
+@app.route('/set_language', methods=['POST'])
+def set_language():
+    language = request.form.get('language')
+    if language in LANGUAGES:
+        session['language'] = language
+        # Clear cache when language changes
+        return jsonify({"success": True})
+    return jsonify({"success": False}), 400
+
+def extract_json_from_response(content):
+    """Extract and parse JSON from API response."""
+    try:
+        # Try direct JSON parsing first
+        return json.loads(content)
+    except json.JSONDecodeError:
+        # If direct parsing fails, try to extract JSON from markdown code blocks
+        json_match = re.search(r'```json(.*?)```', content, re.DOTALL)
+        if json_match:
+            json_str = json_match.group(1).strip()
+        else:
+            json_str = content
+
+        # Clean up any potential markdown or text
+        json_str = json_str.replace('```json', '').replace('```', '')
+        
+        try:
+            return json.loads(json_str)
+        except json.JSONDecodeError as e:
+            logger.error(f"JSON parsing error: {str(e)}")
+            raise ValueError(f"Failed to parse response")
+
+@app.route('/get_details/<int:pest_id>')
+def get_details(pest_id):
+    # Get current language
+    language = session.get('language', 'en')
+    
+    # Find the pest/disease by ID
+    pest_disease = next((item for item in PESTS_DISEASES if item["id"] == pest_id), None)
+    
+    if not pest_disease:
+        return jsonify({"error": "Not found"}), 404
+    
+    # Check cache first - cache key includes language
+    cache_key = f"pest_disease_{pest_id}_{language}"
+    cached_result = cache.get(cache_key)
+    
+    if cached_result:
+        logger.info(f"Cache hit for pest_id {pest_id} in {language}")
+        return jsonify(cached_result)
+    
+    logger.info(f"Cache miss for pest_id {pest_id} in {language}, fetching from API")
+    
+    # If no API key is set, return a fake response for testing
+    if not api_key:
+        logger.warning("No API key set, returning placeholder content")
+        return jsonify({
+            **pest_disease,
+            "details": {
+                "description": {"title": "Description", "text": "API key not configured. Please set GEMINI_API_KEY in Hugging Face Spaces secrets."},
+                "lifecycle": {"title": "Lifecycle", "text": "Information not available without API key."},
+                "symptoms": {"title": "Symptoms", "text": "Information not available without API key."},
+                "impact": {"title": "Impact", "text": "Information not available without API key."},
+                "management": {"title": "Management", "text": "Information not available without API key."},
+                "prevention": {"title": "Prevention", "text": "Information not available without API key."}
+            },
+            "language": language,
+            "cached_at": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        })
+    
+    # Generate prompt with language instruction
+    lang_instructions = {
+        "en": "Respond in English",
+        "hi": "हिंदी में जवाब दें (Respond in Hindi)",
+        "bn": "বাংলায় উত্তর দিন (Respond in Bengali)",
+        "te": "తెలుగులో సమాధానం ఇవ్వండి (Respond in Telugu)",
+        "mr": "मराठीत उत्तर द्या (Respond in Marathi)",
+        "ta": "தமிழில் பதிலளிக்கவும் (Respond in Tamil)",
+        "gu": "ગુજરાતીમાં જવાબ આપો (Respond in Gujarati)",
+        "ur": "اردو میں جواب دیں (Respond in Urdu)",
+        "kn": "ಕನ್ನಡದಲ್ಲಿ ಉತ್ತರಿಸಿ (Respond in Kannada)",
+        "or": "ଓଡ଼ିଆରେ ଉତ୍ତର ଦିଅନ୍ତୁ (Respond in Odia)",
+        "ml": "മലയാളത്തിൽ മറുപടി നൽകുക (Respond in Malayalam)"
+    }
+    
+    prompt = f"""
+    {lang_instructions.get(language, "Respond in English")}
+    
+    Provide detailed information about the agricultural {pest_disease['type']} known as {pest_disease['name']} 
+    in the context of Indian agriculture, especially affecting {pest_disease['crop']}.
+    
+    Include the following sections:
+    1. Description and identification
+    2. Lifecycle and spread
+    3. Damage symptoms
+    4. Economic impact
+    5. Management and control measures (both organic and chemical)
+    6. Preventive measures
+    
+    Format the response as JSON with these keys: "description", "lifecycle", "symptoms", 
+    "impact", "management", "prevention".
+    
+    Each key should contain an object with "title" and "text" fields.
+    
+    For example:
+    {{
+        "description": {{"title": "Description", "text": "Detailed description..."}},
+        "lifecycle": {{"title": "Lifecycle", "text": "Information about lifecycle..."}},
+        ...
+    }}
+    
+    Ensure the response is strictly valid JSON.
+    """
+    
+    try:
+        # Call AI API with retry logic
+        model = 'gemini-1.5-flash'
+        max_retries = 3
+        retry_delay = 2
+        
+        for attempt in range(max_retries):
+            try:
+                response = client.models.generate_content(model=model, contents=prompt)
+                break
+            except Exception as e:
+                if attempt < max_retries - 1:
+                    logger.warning(f"API call attempt {attempt+1} failed. Retrying...")
+                    time.sleep(retry_delay)
+                    retry_delay *= 2
+                else:
+                    logger.error(f"All API call attempts failed for pest_id {pest_id}")
+                    raise e
+        
+        # Parse the response
+        detailed_info = extract_json_from_response(response.text)
+        
+        # Validate the response structure
+        required_keys = ["description", "lifecycle", "symptoms", "impact", "management", "prevention"]
+        for key in required_keys:
+            if key not in detailed_info:
+                detailed_info[key] = {"title": f"{key.capitalize()}", "text": "Information not available."}
+            elif not isinstance(detailed_info[key], dict):
+                detailed_info[key] = {"title": f"{key.capitalize()}", "text": str(detailed_info[key])}
+            elif "text" not in detailed_info[key]:
+                detailed_info[key]["text"] = "Information not available."
+        
+        # Add timestamp and language info
+        result = {
+            **pest_disease, 
+            "details": detailed_info,
+            "language": language,
+            "cached_at": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        }
+        
+        # Cache the result
+        cache.set(cache_key, result)
+        logger.info(f"Successfully cached data for pest_id {pest_id} in {language}")
+        
+        return jsonify(result)
+    
+    except Exception as e:
+        logger.error(f"Error: {str(e)}")
+        return jsonify({
+            "error": "Failed to fetch information", 
+            "message": "Please try again later."
+        }), 500
+
+@app.route('/api/pests')
+def get_pests_list():
+    return jsonify(PESTS_DISEASES)
+
+@app.route('/api/clear-cache/<int:pest_id>', methods=['POST'])
+def clear_specific_cache(pest_id):
+    for lang in LANGUAGES.keys():
+        cache_key = f"pest_disease_{pest_id}_{lang}"
+        cache.delete(cache_key)
+    return jsonify({"success": True, "message": f"Cache cleared for pest ID {pest_id}"})
+
+if __name__ == '__main__':
+    # Use PORT environment variable if available (for Hugging Face Spaces)
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.0.1
+google-generativeai==0.3.1
+python-dotenv==0.19.0
+cachelib==0.1.1
+gunicorn==20.1.0

space.yml

@@ -0,0 +1,6 @@
+title: Agricultural Pests & Diseases in India
+emoji: 🌱
+colorFrom: green
+colorTo: blue
+sdk: docker
+pinned: false

templates/index.html

@@ -0,0 +1,509 @@
+<!-- templates/index.html -->
+<!DOCTYPE html>
+<html lang="{{ current_language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agricultural Pests & Diseases in India</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+    :root {
+        --primary-color: #38b000;
+        --secondary-color: #007bff;
+        --accent-color: #fb8500;
+        --light-bg: #f8f9fa;
+        --dark-text: #212529;
+        --pest-color: #dc3545;
+        --disease-color: #6f42c1;
+    }
+    
+    body {
+        background-color: var(--light-bg);
+        padding: 20px;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+        
+    .page-header {
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        padding: 2rem 0;
+        border-radius: 10px;
+        margin-bottom: 2rem;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    
+    .language-selector select {
+        background-color: rgba(255, 255, 255, 0.2);
+        color: white;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+    
+    .language-selector select option {
+        background-color: white;
+        color: var(--dark-text);
+    }
+    
+    .filter-buttons {
+        margin-bottom: 20px;
+    }
+    
+    .filter-btn {
+        margin-right: 10px;
+        border-radius: 20px;
+        font-weight: 500;
+        padding: 8px 16px;
+        transition: all 0.3s ease;
+    }
+    
+    .filter-btn:hover {
+        transform: translateY(-2px);
+    }
+    
+    .filter-btn.active {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+    
+    .card {
+        transition: all 0.3s ease;
+        height: 100%;
+        cursor: pointer;
+        border-radius: 10px;
+        border: none;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        overflow: hidden;
+    }
+    
+    .card:hover {
+        transform: translateY(-8px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+    }
+    
+    .card-img-top {
+        height: 200px;
+        object-fit: cover;
+        transition: all 0.5s ease;
+    }
+    
+    .card:hover .card-img-top {
+        transform: scale(1.05);
+    }
+    
+    .card-body {
+        padding: 1.5rem;
+    }
+    
+    .card-title {
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+    
+    .loading {
+        display: none;
+        text-align: center;
+        padding: 20px;
+    }
+    
+    .modal-body {
+        max-height: 70vh;
+        overflow-y: auto;
+    }
+    
+    .badge.pest {
+        background-color: var(--pest-color);
+        padding: 0.5em 0.8em;
+        font-size: 0.8rem;
+    }
+    
+    .badge.disease {
+        background-color: var(--disease-color);
+        padding: 0.5em 0.8em;
+        font-size: 0.8rem;
+    }
+    
+    .modal-content {
+        border-radius: 15px;
+        border: none;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    }
+    
+    .modal-header {
+        border-bottom: 1px solid rgba(0,0,0,0.1);
+        background-color: var(--light-bg);
+    }
+    
+    .modal-title {
+        font-weight: 600;
+    }
+    
+    .section-title {
+        margin-top: 1.5rem;
+        margin-bottom: 0.75rem;
+        font-weight: 600;
+        color: var(--dark-text);
+        border-bottom: 2px solid var(--primary-color);
+        padding-bottom: 0.5rem;
+        display: inline-block;
+    }
+    
+    #backToTop {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        display: none;
+        background-color: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        text-align: center;
+        font-size: 20px;
+        line-height: 50px;
+        cursor: pointer;
+        z-index: 99;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    }
+    
+    .crop-badge {
+        background-color: #17a2b8;
+        color: white;
+        font-size: 0.8rem;
+        font-weight: normal;
+        margin-right: 4px;
+    }
+    
+    .no-results {
+        text-align: center;
+        padding: 40px;
+        font-size: 1.2rem;
+        color: #6c757d;
+    }
+    
+    /* Spinner */
+    .spinner {
+        width: 40px;
+        height: 40px;
+        margin: 20px auto;
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        border-left-color: var(--primary-color);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="page-header text-center mb-4">
+            <h1 class="display-4">Agricultural Pests & Diseases in India</h1>
+            <p class="lead">Explore common agricultural threats and learn how to manage them</p>
+            
+            <!-- Language selector -->
+            <div class="language-selector mt-3">
+                <form id="languageForm" class="d-flex justify-content-center align-items-center">
+                    <label for="languageSelect" class="me-2">
+                        <i class="fas fa-language"></i> Language:
+                    </label>
+                    <select id="languageSelect" class="form-select form-select-sm" style="max-width: 200px;">
+                        {% for code, name in languages.items() %}
+                            <option value="{{ code }}" {% if code == current_language %}selected{% endif %}>{{ name }}</option>
+                        {% endfor %}
+                    </select>
+                </form>
+            </div>
+        </header>
+        
+        <!-- Filter buttons -->
+        <div class="filter-buttons text-center mb-4">
+            <button class="btn btn-outline-primary filter-btn active" data-filter="all">All Items</button>
+            <button class="btn btn-outline-danger filter-btn" data-filter="pest">Pests Only</button>
+            <button class="btn btn-outline-purple filter-btn" data-filter="disease" style="border-color: #6f42c1; color: #6f42c1;">Diseases Only</button>
+            <div class="input-group mt-3 w-50 mx-auto">
+                <span class="input-group-text"><i class="fas fa-search"></i></span>
+                <input type="text" class="form-control" id="searchInput" placeholder="Search by name or crop...">
+            </div>
+        </div>
+        
+        <div class="row row-cols-1 row-cols-md-3 g-4" id="itemsContainer">
+            {% for item in pests_diseases %}
+                <div class="col item-card" data-type="{{ item.type }}" data-name="{{ item.name.lower() }}" data-crop="{{ item.crop.lower() }}">
+                    <div class="card h-100" onclick="showDetails({{ item.id }})">
+                        <div class="position-relative overflow-hidden">
+                            <img data-src="{{ item.image_url }}" class="card-img-top lazy-load" alt="{{ item.name }}">
+                            <span class="position-absolute top-0 end-0 m-2 badge {{ item.type }}">
+                                {{ item.type|capitalize }}
+                            </span>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">{{ item.name }}</h5>
+                            <p class="card-text">
+                                <strong>Affects:</strong><br>
+                                {% for crop in item.crop.split(', ') %}
+                                    <span class="badge crop-badge">{{ crop }}</span>
+                                {% endfor %}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+        
+        <div id="noResults" class="no-results" style="display: none;">
+            <i class="fas fa-search fa-3x mb-3 text-muted"></i>
+            <p>No matching items found. Try another search term.</p>
+        </div>
+        
+        <!-- Loading indicator -->
+        <div id="loading" class="loading mt-4">
+            <div class="spinner"></div>
+            <p class="mt-2">Fetching detailed information...</p>
+        </div>
+        
+        <!-- Detail Modal -->
+        <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalTitle"></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body" id="modalBody">
+                        <!-- Content will be loaded here -->
+                        <div class="text-center p-5" id="modalLoading">
+                            <div class="spinner"></div>
+                            <p class="mt-3">Loading content...</p>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Back to top button -->
+        <button id="backToTop" title="Back to top">
+            <i class="fas fa-chevron-up"></i>
+        </button>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Initialize modal
+        const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
+        let loadedDetails = {};
+        
+        // Language selector
+        document.getElementById('languageSelect').addEventListener('change', function() {
+            const selectedLanguage = this.value;
+            
+            // Show loading spinner
+            const loadingElement = document.createElement('div');
+            loadingElement.id = 'pageLoading';
+            loadingElement.className = 'position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75';
+            loadingElement.style.zIndex = '9999';
+            loadingElement.innerHTML = '<div class="spinner"></div><p class="mt-3">Changing language...</p>';
+            document.body.appendChild(loadingElement);
+            
+            // Send request to change language
+            fetch('/set_language', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: `language=${selectedLanguage}`
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Clear loaded details cache
+                    loadedDetails = {};
+                    // Refresh the page
+                    window.location.reload();
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                document.body.removeChild(loadingElement);
+                alert('Error changing language. Please try again.');
+            });
+        });
+        
+        // Lazy load images
+        document.addEventListener("DOMContentLoaded", function() {
+            const lazyImages = document.querySelectorAll(".lazy-load");
+            
+            if ("IntersectionObserver" in window) {
+                const imageObserver = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        if (entry.isIntersecting) {
+                            const img = entry.target;
+                            img.src = img.dataset.src;
+                            img.classList.remove("lazy-load");
+                            imageObserver.unobserve(img);
+                        }
+                    });
+                });
+                
+                lazyImages.forEach(function(image) {
+                    imageObserver.observe(image);
+                });
+            } else {
+                // Fallback for browsers without intersection observer
+                lazyImages.forEach(function(img) {
+                    img.src = img.dataset.src;
+                });
+            }
+        });
+        
+        // Filter functionality
+        document.querySelectorAll('.filter-btn').forEach(button => {
+            button.addEventListener('click', function() {
+                document.querySelectorAll('.filter-btn').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                
+                this.classList.add('active');
+                
+                const filterValue = this.getAttribute('data-filter');
+                filterItems(filterValue, document.getElementById('searchInput').value);
+            });
+        });
+        
+        // Search functionality
+        document.getElementById('searchInput').addEventListener('input', function() {
+            const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');
+            filterItems(activeFilter, this.value);
+        });
+        
+        function filterItems(typeFilter, searchTerm) {
+            searchTerm = searchTerm.toLowerCase();
+            let visibleCount = 0;
+            
+            document.querySelectorAll('.item-card').forEach(item => {
+                const type = item.getAttribute('data-type');
+                const name = item.getAttribute('data-name');
+                const crop = item.getAttribute('data-crop');
+                
+                const typeMatch = typeFilter === 'all' || type === typeFilter;
+                const searchMatch = !searchTerm || 
+                                   name.includes(searchTerm) || 
+                                   crop.includes(searchTerm);
+                
+                if (typeMatch && searchMatch) {
+                    item.style.display = 'block';
+                    visibleCount++;
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+            
+            // Show/hide no results message
+            document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none';
+        }
+        
+        // Function to show details
+        function showDetails(id) {
+            // Clear previous content and show loading
+            document.getElementById('modalTitle').textContent = "";
+            document.getElementById('modalBody').innerHTML = `
+                <div class="text-center p-5" id="modalLoading">
+                    <div class="spinner"></div>
+                    <p class="mt-3">Loading content...</p>
+                </div>
+            `;
+            
+            // Show modal immediately with loading indicator
+            detailModal.show();
+            
+            // Check if we already have the details cached
+            if (loadedDetails[id]) {
+                displayDetails(loadedDetails[id]);
+                return;
+            }
+            
+            // Fetch details from the backend
+            fetch(`/get_details/${id}`)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Cache the result
+                    loadedDetails[id] = data;
+                    displayDetails(data);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    document.getElementById('modalBody').innerHTML = `
+                        <div class="alert alert-danger" role="alert">
+                            <i class="fas fa-exclamation-circle"></i> 
+                            Error loading information. Please try again.
+                        </div>
+                    `;
+                });
+        }
+        
+        function displayDetails(data) {
+            // Update modal title
+            document.getElementById('modalTitle').textContent = data.name;
+            
+            // Format the details
+            const details = data.details;
+            let content = `
+                <div class="text-center mb-4">
+                    <img src="${data.image_url}" alt="${data.name}" class="img-fluid rounded" style="max-height: 300px;">
+                    <div class="mt-2">
+                        <span class="badge ${data.type} mb-2">${data.type.charAt(0).toUpperCase() + data.type.slice(1)}</span>
+                        <div>
+                            <strong>Affects:</strong>
+                            ${data.crop.split(', ').map(crop => `<span class="badge crop-badge">${crop}</span>`).join(' ')}
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Add each section
+            const sections = [
+                {key: 'description', icon: 'info-circle', title: details.description.title || 'Description and Identification'},
+                {key: 'lifecycle', icon: 'sync', title: details.lifecycle.title || 'Lifecycle and Spread'},
+                {key: 'symptoms', icon: 'exclamation-triangle', title: details.symptoms.title || 'Damage Symptoms'},
+                {key: 'impact', icon: 'chart-line', title: details.impact.title || 'Economic Impact'},
+                {key: 'management', icon: 'tasks', title: details.management.title || 'Management and Control'},
+                {key: 'prevention', icon: 'shield-alt', title: details.prevention.title || 'Prevention'}
+            ];
+            
+            sections.forEach(section => {
+                if (details[section.key] && details[section.key].text) {
+                    content += `
+                        <h4 class="section-title"><i class="fas fa-${section.icon} me-2"></i>${section.title}</h4>
+                        <p>${details[section.key].text}</p>
+                    `;
+                }
+            });
+            
+            document.getElementById('modalBody').innerHTML = content;
+        }
+        
+        // Back to top button functionality
+        window.onscroll = function() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+                document.getElementById("backToTop").style.display = "block";
+            } else {
+                document.getElementById("backToTop").style.display = "none";
+            }
+        };
+        
+        document.getElementById("backToTop").addEventListener("click", function() {
+            window.scrollTo({top: 0, behavior: 'smooth'});
+        });
+    </script>
+</body>
+</html>

templates/results.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ market.market_name }} Market Details</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        #map-container {
+            height: 500px;
+            width: 100%;
+            margin-top: 20px;
+        }
+        .insights-container {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        .loader {
+            display: none;
+            text-align: center;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>{{ market.market_name }} Market Details</h1>
+        <p><strong>Market ID:</strong> {{ market.market_id }}</p>
+        <p><strong>Market Name:</strong> {{ market.market_name }}</p>
+        <p><strong>Address:</strong> {{ market.address }}</p>
+        <p><strong>City:</strong> {{ market.city }}</p>
+        <p><strong>State:</strong> {{ market.state }}</p>
+        <p><strong>Zip Code:</strong> {{ market.zip_code }}</p>
+        <p><strong>Phone Number:</strong> {{ market.phone_number }}</p>
+        <p><strong>Website:</strong> <a href="{{ market.website }}" target="_blank">{{ market.website }}</a></p>
+        <p><strong>Opening Hours:</strong> {{ market.opening_hours }}</p>
+        <p><strong>Latitude:</strong> {{ market.latitude }}</p>
+        <p><strong>Longitude:</strong> {{ market.longitude }}</p>
+        <p><strong>Top Commodities:</strong></p>
+        <ul>
+            {% for commodity in market.top_commodities %}
+                <li>{{ commodity.commodity }} - Avg Price: ₹{{ commodity.modal_price }}, Min Price: ₹{{ commodity.min_price }}, Max Price: ₹{{ commodity.max_price }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+</body>
+</html>

templates/style.css

@@ -0,0 +1,187 @@
+:root {
+    --primary-color: #38b000;
+    --secondary-color: #007bff;
+    --accent-color: #fb8500;
+    --light-bg: #f8f9fa;
+    --dark-text: #212529;
+    --pest-color: #dc3545;
+    --disease-color: #6f42c1;
+}
+
+body {
+    background-color: var(--light-bg);
+    padding: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+    
+.page-header {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    padding: 2rem 0;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.language-selector select {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.language-selector select option {
+    background-color: white;
+    color: var(--dark-text);
+}
+
+.filter-buttons {
+    margin-bottom: 20px;
+}
+
+.filter-btn {
+    margin-right: 10px;
+    border-radius: 20px;
+    font-weight: 500;
+    padding: 8px 16px;
+    transition: all 0.3s ease;
+}
+
+.filter-btn:hover {
+    transform: translateY(-2px);
+}
+
+.filter-btn.active {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.card {
+    transition: all 0.3s ease;
+    height: 100%;
+    cursor: pointer;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    overflow: hidden;
+}
+
+.card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+}
+
+.card-img-top {
+    height: 200px;
+    object-fit: cover;
+    transition: all 0.5s ease;
+}
+
+.card:hover .card-img-top {
+    transform: scale(1.05);
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-title {
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.loading {
+    display: none;
+    text-align: center;
+    padding: 20px;
+}
+
+.modal-body {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.badge.pest {
+    background-color: var(--pest-color);
+    padding: 0.5em 0.8em;
+    font-size: 0.8rem;
+}
+
+.badge.disease {
+    background-color: var(--disease-color);
+    padding: 0.5em 0.8em;
+    font-size: 0.8rem;
+}
+
+.modal-content {
+    border-radius: 15px;
+    border: none;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.modal-header {
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    background-color: var(--light-bg);
+}
+
+.modal-title {
+    font-weight: 600;
+}
+
+.section-title {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    color: var(--dark-text);
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 0.5rem;
+    display: inline-block;
+}
+
+#backToTop {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 50px;
+    cursor: pointer;
+    z-index: 99;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.crop-badge {
+    background-color: #17a2b8;
+    color: white;
+    font-size: 0.8rem;
+    font-weight: normal;
+    margin-right: 4px;
+}
+
+.no-results {
+    text-align: center;
+    padding: 40px;
+    font-size: 1.2rem;
+    color: #6c757d;
+}
+
+/* Spinner */
+.spinner {
+    width: 40px;
+    height: 40px;
+    margin: 20px auto;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}