Initial commit

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+.env
+.venv
+venv/
+ENV/ 

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.9-slim
+
+WORKDIR /code
+
+# Install system dependencies for WeasyPrint
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    python3-dev \
+    python3-pip \
+    python3-setuptools \
+    python3-wheel \
+    python3-cffi \
+    libcairo2 \
+    libpango-1.0-0 \
+    libpangocairo-1.0-0 \
+    libgdk-pixbuf2.0-0 \
+    libffi-dev \
+    shared-mime-info \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"] 

README.md

@@ -1,10 +1,41 @@
 ---
-title: Campus Inspection
-emoji: 🐨
-colorFrom: green
-colorTo: indigo
+title: Campus Inspection Report Generator
+emoji: 🏫
+colorFrom: blue
+colorTo: green
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Campus Inspection Report Generator
+
+This application generates detailed campus inspection reports using Google's Gemini AI model. Upload campus images and get comprehensive analysis including:
+
+- Infrastructure assessment
+- Safety evaluation
+- Environmental analysis
+- Detailed recommendations
+- PDF report generation
+
+## Setup
+
+1. Clone the repository
+2. Set up environment variables:
+   ```bash
+   GOOGLE_API_KEY=your_gemini_api_key
+   ```
+3. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+4. Run the application:
+   ```bash
+   python app.py
+   ```
+
+## Features
+
+- Multi-image analysis
+- Detailed report generation
+- PDF export functionality
+- Interactive web interface

app.py

@@ -0,0 +1,433 @@
+from flask import Flask, render_template, request, jsonify, send_file
+import google.generativeai as genai
+import base64
+import logging
+from weasyprint import HTML
+import os
+from datetime import datetime
+import tempfile
+from io import BytesIO
+import jinja2
+from dotenv import load_dotenv
+
+app = Flask(__name__)
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
+
+# Configure Gemini API
+load_dotenv()
+genai.configure(api_key=os.getenv('GOOGLE_API_KEY'))
+# Use gemini-pro-vision model for image processing
+model = genai.GenerativeModel("gemini-1.5-flash")
+
+# Updated prompt for dual-format report
+prompt = """You are a professional campus facility inspector with over 15 years of experience in infrastructure assessment in India. Analyze the campus with total area of ${college_area} acres. Generate two reports based on the provided campus images:
++ The campus includes ${ground_count} grounds with a total area of ${ground_area} acres.
+  
+  REPORT 1: EXECUTIVE SUMMARY TABLES
+  
+  Table 1: Campus Overview
+  | Aspect | Grade | Key Observations | Priority Level |
+  |--------|-------|-----------------|----------------|
+  | Overall Infrastructure | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Buildings | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Roads & Parking | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Sports Grounds (${ground_area} acres) | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Canteens | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Entry/Exit & Security | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+  | Environmental | (A+/A/B+/B/C) | • Key points | High/Medium/Low |
+
+Table 2: Critical Issues and Solutions
+| Area | Issue | Proposed Solution/Measures |
+|------|-------|---------------------------|
+| Area 1 | Description of issue | • Detailed solution steps |
+| Area 2 | Description of issue | • Detailed solution steps |
+
+REPORT 2: DETAILED ASSESSMENT
+
+1. Overall Campus Analysis
+   A. Infrastructure Overview
+      - General campus layout and planning
+      - Common areas and circulation
+      - Campus-wide systems (drainage, lighting)
+      - Shared facilities condition
+   
+   B. Safety & Security Assessment
+      - Boundary security
+      - Emergency systems
+      - Lighting and surveillance
+      - Fire safety measures
+   
+   C. Environmental Analysis
+      - Green spaces and landscaping
+      - Water management
+      - Waste management
+      - Natural lighting and ventilation
+   
+   D. Accessibility & Connectivity
+      - Internal roads and pathways
+      - Parking facilities
+      - Emergency access
+      - Campus connectivity
+
+2. Area-wise Assessment
+   A. Buildings
+      - Overall condition
+      - Key features
+      - Notable issues
+      - Maintenance status
+
+   B. Roads & Parking
+      - Surface condition
+      - Traffic flow
+      - Parking adequacy
+      - Safety features
+
+   C. Sports Facilities
+      - Ground conditions
+      - Equipment status
+      - Safety measures
+      - Maintenance level
+
+   D. Canteens
+      - Structure condition
+      - Hygiene standards
+      - Ventilation
+      - Seating capacity
+
+   E. Entry/Exit Points
+      - Security measures
+      - Traffic management
+      - Access control
+      - Emergency preparedness
+
+3. Campus Strengths
+   A. Infrastructure Strengths
+      - Notable features
+      - Well-maintained areas
+      - Effective systems
+      - Best practices observed
+
+   B. Enhancement Potential
+      - Areas showing excellence
+      - Opportunities for showcase
+      - Positive aspects to build upon
+      - Innovative features
+
+4. Areas of Concern & Recommendations
+   A. Critical Issues
+      - Infrastructure gaps
+      - Safety concerns
+      - Maintenance needs
+      - Operational challenges
+
+   B. Improvement Measures
+      - Specific solutions
+      - Practical steps
+      - Enhancement strategies
+      - Preventive measures
+
+5. Final Assessment
+   A. Overall Grade: [A+/A/B+/B/C]
+      Brief justification of the grade based on:
+      - Infrastructure quality
+      - Maintenance standards
+      - Safety measures
+      - Environmental aspects
+
+   B. Concluding Remarks
+      - Key takeaways
+      - Critical focus areas
+      - Positive highlights
+      - Path forward
+
+Please focus on significant issues only and ignore minor cosmetic concerns. Consider local weather patterns (monsoon, summer) and regional building practices. Present information in clear, concise formats."""
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+def calculate_grade(grades, weights):
+    total_weight = sum(weights.values())
+    weighted_score = sum(grades[aspect] * weights[aspect] for aspect in grades)
+    average_score = weighted_score / total_weight
+    # Convert average score to a grade
+    if average_score >= 90:
+        return 'A+'
+    elif average_score >= 80:
+        return 'A'
+    elif average_score >= 70:
+        return 'B+'
+    elif average_score >= 60:
+        return 'B'
+    else:
+        return 'C'
+
+def extract_grades(report_text):
+    # Dummy implementation for extracting grades from report text
+    # This should be replaced with actual logic to parse the report
+    return {
+        'Overall Infrastructure': 85,
+        'Buildings': 80,
+        'Roads & Parking': 75,
+        'Sports Facilities': 70,
+        'Canteens': 65,
+        'Entry/Exit & Security': 80,
+        'Environmental': 90
+    }
+
+def extract_priority_distribution(report_text):
+    """Extract priority distribution from the report text"""
+    try:
+        # Count priority levels from the Overview table
+        priorities = {
+            'High': 0,
+            'Medium': 0,
+            'Low': 0
+        }
+        
+        # Look for priority levels in the Overview table
+        lines = report_text.split('\n')
+        for line in lines:
+            if '|' in line:  # Table row
+                if 'High' in line:
+                    priorities['High'] += 1
+                elif 'Medium' in line:
+                    priorities['Medium'] += 1
+                elif 'Low' in line:
+                    priorities['Low'] += 1
+                    
+        return [priorities['High'], priorities['Medium'], priorities['Low']]
+    except Exception as e:
+        logger.error(f"Error extracting priority distribution: {str(e)}")
+        return [30, 45, 25]  # Default values if extraction fails
+
+def extract_area_performance(report_text):
+    """Extract performance scores for different areas"""
+    try:
+        # Extract scores from the Overview table
+        areas = {
+            'Buildings': 0,
+            'Roads & Parking': 0,
+            'Sports Facilities': 0,
+            'Canteens': 0,
+            'Security': 0,
+            'Environmental': 0
+        }
+        
+        lines = report_text.split('\n')
+        for line in lines:
+            if '|' in line:  # Table row
+                parts = line.split('|')
+                if len(parts) >= 2:
+                    area = parts[1].strip()
+                    if area in areas:
+                        # Convert grade to numeric score
+                        grade = parts[2].strip() if len(parts) > 2 else ''
+                        score = {
+                            'A+': 95,
+                            'A': 85,
+                            'B+': 75,
+                            'B': 65,
+                            'C': 55
+                        }.get(grade, 70)
+                        areas[area] = score
+                        
+        return list(areas.values())
+    except Exception as e:
+        logger.error(f"Error extracting area performance: {str(e)}")
+        return [85, 75, 70, 80, 90, 85]  # Default values if extraction fails
+
+def extract_maintenance_status(report_text):
+    """Extract maintenance status distribution"""
+    try:
+        status = {
+            'Well Maintained': 0,
+            'Needs Attention': 0,
+            'Critical': 0
+        }
+        
+        # Count maintenance status mentions in the report
+        well_maintained = report_text.lower().count('well maintained')
+        needs_attention = report_text.lower().count('needs attention') + report_text.lower().count('requires attention')
+        critical = report_text.lower().count('critical') + report_text.lower().count('urgent')
+        
+        total = well_maintained + needs_attention + critical or 1  # Avoid division by zero
+        
+        return [
+            int(well_maintained * 100 / total),
+            int(needs_attention * 100 / total),
+            int(critical * 100 / total)
+        ]
+    except Exception as e:
+        logger.error(f"Error extracting maintenance status: {str(e)}")
+        return [60, 30, 10]  # Default values if extraction fails
+
+@app.route('/generate_report', methods=['POST'])
+def generate_report():
+    try:
+        data = request.json
+        images = data.get('images', [])
+        basic_info = data.get('basicInfo', {})
+        
+        # Add file size validation
+        MAX_FILE_SIZE = 4 * 1024 * 1024  # 4MB
+        for image_data in images:
+            if len(base64.b64decode(image_data['data'].split(',')[1])) > MAX_FILE_SIZE:
+                return jsonify({'error': 'Image file size exceeds 4MB limit'}), 400
+        
+        # Create image context with numbering
+        image_contexts = []
+        all_images = []
+        image_count = 1
+        
+        for image_data in images:
+            if image_data['data'].startswith('data:image'):
+                image_data['data'] = image_data['data'].split(',')[1]
+            image_bytes = base64.b64decode(image_data['data'])
+            
+            # Store image data for the report
+            image_context = {
+                'number': image_count,
+                'category': image_data['category'],
+                'data': image_bytes,
+                'mime_type': 'image/jpeg'
+            }
+            image_contexts.append(image_context)
+            
+            # Add to list for API
+            all_images.append({
+                "mime_type": "image/jpeg",
+                "data": image_bytes
+            })
+            
+            image_count += 1
+
+        # Update prompt with actual values
+        contextualized_prompt = prompt.replace('${college_area}', str(basic_info.get('collegeArea', '')))
+        contextualized_prompt = contextualized_prompt.replace('${building_count}', str(basic_info.get('buildingCount', '')))
+        contextualized_prompt = contextualized_prompt.replace('${parking_area}', str(basic_info.get('parkingCount', '')))
+        contextualized_prompt = contextualized_prompt.replace('${canteen_count}', str(basic_info.get('canteenCount', '')))
+        contextualized_prompt = contextualized_prompt.replace('${ground_count}', str(basic_info.get('groundCount', '')))
+        contextualized_prompt = contextualized_prompt.replace('${ground_area}', str(basic_info.get('groundArea', '')))
+        contextualized_prompt = contextualized_prompt.replace('${gate_count}', str(basic_info.get('gateCount', '')))
+        
+        # Generate report with image references
+        response = model.generate_content([contextualized_prompt] + all_images)
+        report_text = response.text
+        
+        # Extract all metrics
+        grades = extract_grades(report_text)
+        priority_distribution = extract_priority_distribution(report_text)
+        area_performance = extract_area_performance(report_text)
+        maintenance_status = extract_maintenance_status(report_text)
+        
+        # Calculate overall grade
+        weights = {
+            'Overall Infrastructure': 0.2,
+            'Buildings': 0.2,
+            'Roads & Parking': 0.15,
+            'Sports Facilities': 0.1,
+            'Canteens': 0.1,
+            'Entry/Exit & Security': 0.15,
+            'Environmental': 0.1
+        }
+        overall_grade = calculate_grade(grades, weights)
+
+        # Add metrics to the response
+        return jsonify({
+            'report': report_text,
+            'overallGrade': overall_grade,
+            'metrics': {
+                'priorityDistribution': priority_distribution,
+                'areaPerformance': area_performance,
+                'maintenanceStatus': maintenance_status
+            },
+            'images': [{
+                'number': img['number'],
+                'category': img['category'],
+                'data': base64.b64encode(img['data']).decode('utf-8')
+            } for img in image_contexts]
+        })
+        
+    except Exception as e:
+        logger.error(f"Error generating report: {str(e)}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/download_pdf', methods=['POST'])
+def download_pdf():
+    pdf_buffer = None
+    try:
+        logger.debug("Received PDF download request")
+        html_content = request.json.get('html')
+        
+        if not html_content:
+            raise ValueError("No HTML content provided")
+
+        logger.debug("Converting HTML to PDF")
+        # Create PDF in memory
+        pdf_buffer = BytesIO()
+        HTML(string=html_content).write_pdf(pdf_buffer)
+        pdf_buffer.seek(0)
+        
+        logger.debug("Sending PDF file")
+        # Create a copy of the buffer contents
+        pdf_data = pdf_buffer.getvalue()
+        
+        # Close the original buffer
+        if pdf_buffer:
+            pdf_buffer.close()
+            
+        # Create a new buffer with the copied data
+        return_buffer = BytesIO(pdf_data)
+        
+        return send_file(
+            return_buffer,
+            mimetype='application/pdf',
+            as_attachment=True,
+            download_name=f'campus-inspection-report-{datetime.now().strftime("%Y%m%d")}.pdf'
+        )
+
+    except Exception as e:
+        logger.error(f"Error generating PDF: {str(e)}")
+        return jsonify({'error': str(e)}), 500
+    finally:
+        # Clean up the original buffer if it exists
+        if pdf_buffer:
+            pdf_buffer.close()
+
+def generate_report(findings, inspector_name, location, weather):
+    # Format timestamp
+    timestamp = datetime.now().strftime("%B %d, %Y at %I:%M %p")
+    
+    # Ensure findings have all required fields and proper formatting
+    formatted_findings = []
+    for finding in findings:
+        formatted_finding = {
+            'title': finding.get('title', 'Untitled Finding'),
+            'description': finding.get('description', 'No description provided'),
+            'severity': finding.get('severity', 'Medium').capitalize(),
+            'recommendation': finding.get('recommendation', 'No recommendation provided'),
+            'image_path': finding.get('image_path', None)
+        }
+        formatted_findings.append(formatted_finding)
+
+    # Load and render template
+    template_loader = jinja2.FileSystemLoader('.')
+    template_env = jinja2.Environment(loader=template_loader)
+    template = template_env.get_template('campus-inspection-report.html')
+    
+    html_content = template.render(
+        timestamp=timestamp,
+        inspector_name=inspector_name,
+        location=location,
+        weather=weather,
+        findings=formatted_findings
+    )
+    
+    return html_content
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,5 @@
+flask==2.0.1
+google-generativeai==0.3.2
+weasyprint==60.1
+Jinja2==3.0.1
+gunicorn==21.2.0 

templates/index.html

@@ -0,0 +1,1584 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Campus Inspection Report Generator</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+    --bs-primary: #2563eb;
+    --bs-primary-rgb: 37, 99, 235;
+    --transition: all 0.3s ease;
+}
+
+body {
+    background-color: #f8fafc;
+    color: #1e293b;
+}
+
+.navbar {
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    padding: 1rem 0;
+}
+
+.navbar-brand {
+    color: var(--bs-primary);
+    font-weight: 600;
+}
+
+.card {
+    background: white;
+    border-radius: 1rem;
+    transition: var(--transition);
+}
+
+.card:hover {
+    transform: translateY(-2px);
+}
+
+.form-floating > .form-control {
+    border-radius: 0.75rem;
+    border: 1px solid #e2e8f0;
+    padding: 1rem;
+}
+
+.form-floating > .form-control:focus {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
+}
+
+.upload-area {
+    padding: 3rem;
+    border: 2px dashed #e2e8f0;
+    background-color: #f8fafc;
+    transition: var(--transition);
+}
+
+.upload-area.dragover {
+    border-color: var(--bs-primary);
+    background-color: rgba(var(--bs-primary-rgb), 0.05);
+}
+
+.btn-primary {
+    background-color: var(--bs-primary);
+    border: none;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.btn-primary:hover {
+    background-color: #1d4ed8;
+    transform: translateY(-1px);
+}
+
+.image-preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 1rem;
+}
+
+.image-container {
+    position: relative;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    aspect-ratio: 1;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: var(--transition);
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.remove-image {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ef4444;
+    transition: var(--transition);
+}
+
+.remove-image:hover {
+    background: #ef4444;
+    color: white;
+}
+
+.alert-container {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1050;
+    min-width: 300px;
+    max-width: 600px;
+}
+
+.alert {
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.loading-animation {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.report-content {
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .upload-area {
+        padding: 2rem 1rem;
+    }
+}
+
+/* Add styles for image labels */
+.image-container {
+    position: relative;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    aspect-ratio: 1;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: var(--transition);
+}
+
+.image-label {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.5rem;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--bs-primary);
+}
+
+.image-container:hover .image-label {
+    background: var(--bs-primary);
+    color: white;
+}
+
+.chart-container {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
+.charts-section {
+    margin-bottom: 2rem;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -15px;
+}
+
+.col-md-6 {
+    width: 50%;
+    padding: 15px;
+}
+
+.col-md-12 {
+    width: 100%;
+    padding: 15px;
+}
+
+@media (max-width: 768px) {
+    .col-md-6 {
+        width: 100%;
+    }
+} 
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-light">
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand d-flex align-items-center" href="#">
+                <i class="fas fa-building-columns me-2"></i>
+                Campus Inspector AI
+            </a>
+        </div>
+    </nav>
+
+    <div class="alert-container" id="alertContainer"></div>
+
+    <div class="container py-4">
+        <!-- Header Section -->
+        <div class="text-center mb-5">
+            <h1 class="display-5 fw-bold text-primary mb-3">Campus Inspection Report Generator</h1>
+            <p class="lead text-muted">Generate comprehensive inspection reports using AI analysis of campus images</p>
+        </div>
+
+        <div class="row g-4">
+            <!-- Upload Section -->
+            <div class="col-lg-6">
+                <div class="card shadow-sm border-0 h-100">
+                    <div class="card-body p-4">
+                        <!-- Basic Information -->
+                        <div class="basic-info mb-4">
+                            <h5 class="card-title mb-4">
+                                <i class="fas fa-info-circle text-primary me-2"></i>
+                                Basic Information
+                            </h5>
+                            <div class="row g-3">
+                                <div class="col-md-12">
+                                    <div class="form-floating">
+                                        <input type="text" class="form-control" id="collegeName" placeholder="College Name">
+                                        <label for="collegeName">College Name</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="text" class="form-control" id="location" placeholder="Location">
+                                        <label for="location">Location</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="date" class="form-control" id="inspectionDate">
+                                        <label for="inspectionDate">Inspection Date</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Campus Metrics -->
+                        <div class="campus-metrics mb-4">
+                            <h5 class="card-title mb-4">
+                                <i class="fas fa-ruler-combined text-primary me-2"></i>
+                                Campus Metrics
+                            </h5>
+                            <div class="row g-3">
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="collegeArea" min="1" step="0.1" required>
+                                        <label for="collegeArea">Total Campus Area (acres)</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="buildingCount" min="1" required>
+                                        <label for="buildingCount">Number of Buildings</label>
+                                        <small class="text-muted">Minimum 5 external images per building required</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="parkingCount" min="1" required>
+                                        <label for="parkingCount">Number of Parking Areas</label>
+                                        <small class="text-muted">Minimum 3 images per parking area required</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="canteenCount" min="0" required>
+                                        <label for="canteenCount">Number of Canteens</label>
+                                        <small class="text-muted">Minimum 2 images per canteen required</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="groundCount" min="0" required>
+                                        <label for="groundCount">Number of Grounds</label>
+                                        <small class="text-muted">Minimum 3 images per ground required</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="groundArea" min="0" step="0.1" required>
+                                        <label for="groundArea">Total Ground Area (acres)</label>
+                                        <small class="text-muted">Combined area of all grounds</small>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-floating">
+                                        <input type="number" class="form-control" id="gateCount" min="1" required>
+                                        <label for="gateCount">Number of Entry/Exit Gates</label>
+                                        <small class="text-muted">Minimum 2 images per gate required</small>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Buildings -->
+                        <div class="upload-sections mb-4">
+                            <h5 class="card-title mb-4">
+                                <i class="fas fa-images text-primary me-2"></i>
+                                Upload Images
+                            </h5>
+
+                            <!-- Buildings Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Building Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 5 external images per building required</small>
+                                <div class="upload-area rounded-4" id="building-drop-zone">
+                                    <input type="file" id="building-images" class="building-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-building display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('building-images').click()">
+                                            Upload Building Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="building-preview" class="image-preview mt-3"></div>
+                            </div>
+
+                            <!-- Parking Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Parking Area Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 3 images per parking area required</small>
+                                <div class="upload-area rounded-4" id="parking-drop-zone">
+                                    <input type="file" id="parking-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-parking display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('parking-images').click()">
+                                            Upload Parking Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="parking-preview" class="image-preview mt-3"></div>
+                            </div>
+
+                            <!-- Roads Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Road Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 7 road images required</small>
+                                <div class="upload-area rounded-4" id="road-drop-zone">
+                                    <input type="file" id="road-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-road display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('road-images').click()">
+                                            Upload Road Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="road-preview" class="image-preview mt-3"></div>
+                            </div>
+
+                            <!-- Canteen Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Canteen Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 2 images per canteen required</small>
+                                <div class="upload-area rounded-4" id="canteen-drop-zone">
+                                    <input type="file" id="canteen-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-utensils display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('canteen-images').click()">
+                                            Upload Canteen Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="canteen-preview" class="image-preview mt-3"></div>
+                            </div>
+
+                            <!-- Ground Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Ground Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 3 images per ground required</small>
+                                <div class="upload-area rounded-4" id="ground-drop-zone">
+                                    <input type="file" id="ground-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-futbol display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('ground-images').click()">
+                                            Upload Ground Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="ground-preview" class="image-preview mt-3"></div>
+                            </div>
+
+                            <!-- Gates Upload -->
+                            <div class="upload-category mb-4">
+                                <h6 class="mb-3">Entry/Exit Gate Images</h6>
+                                <small class="text-muted d-block mb-2">Minimum 2 images per gate required</small>
+                                <div class="upload-area rounded-4" id="gate-drop-zone">
+                                    <input type="file" id="gate-images" accept="image/*" multiple hidden>
+                                    <div class="upload-content">
+                                        <i class="fas fa-door-open display-4 text-primary mb-3"></i>
+                                        <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('gate-images').click()">
+                                            Upload Gate Images
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="gate-preview" class="image-preview mt-3"></div>
+                            </div>
+                        </div>
+
+                        <div class="mt-4">
+                            <button class="btn btn-primary w-100 py-3 rounded-pill" onclick="generateReport()">
+                                <i class="fas fa-wand-magic-sparkles me-2"></i>
+                                Generate Comprehensive Report
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Report Section -->
+            <div class="col-lg-6">
+                <div class="card shadow-sm border-0 h-100">
+                    <div class="card-body p-4">
+                        <div class="d-flex justify-content-between align-items-center mb-4">
+                            <h5 class="card-title mb-0">
+                                <i class="fas fa-file-lines text-primary me-2"></i>
+                                Generated Report
+                            </h5>
+                            <div id="downloadBtn" class="btn-group">
+                                <!-- Will be populated by JavaScript -->
+                            </div>
+                        </div>
+
+                        <div id="loading-indicator" class="text-center py-5 hidden">
+                            <div class="loading-animation mb-4">
+                                <div class="spinner-grow text-primary" role="status">
+                                    <span class="visually-hidden">Loading...</span>
+                                </div>
+                            </div>
+                            <h5 class="text-primary mb-3">Analyzing Campus Images</h5>
+                            <p class="text-muted">Our AI is examining your campus images and generating a detailed report...</p>
+                            <div class="progress" style="height: 4px;">
+                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
+                            </div>
+                        </div>
+
+                        <div id="report-output" class="report-content"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        let buildingCounter = 1;
+let reportData = null;
+
+function addNewBuilding() {
+    buildingCounter++;
+    const buildingsContainer = document.getElementById('buildings-list');
+    
+    const buildingSection = document.createElement('div');
+    buildingSection.className = 'building-section mb-4';
+    buildingSection.dataset.buildingId = buildingCounter;
+    
+    buildingSection.innerHTML = `
+        <div class="building-header d-flex justify-content-between align-items-center bg-light p-3 rounded-3 mb-3">
+            <h6 class="mb-0">Building #${buildingCounter}</h6>
+            <div class="building-actions d-flex gap-2">
+                <input type="text" class="form-control form-control-sm building-name" 
+                       placeholder="Building Name" style="width: 200px;">
+                <button class="btn btn-outline-danger btn-sm" onclick="removeBuilding(${buildingCounter})">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+        </div>
+        
+        <div class="upload-section">
+            <div class="upload-area rounded-4" id="drop-zone-${buildingCounter}">
+                <input type="file" id="building-images-${buildingCounter}" class="building-images" accept="image/*" multiple hidden>
+                <div class="upload-content">
+                    <i class="fas fa-cloud-upload-alt display-4 text-primary mb-3"></i>
+                    <p class="mb-3">Drag and drop images here or</p>
+                    <button class="btn btn-primary px-4 rounded-pill" onclick="document.getElementById('building-images-${buildingCounter}').click()">
+                        Choose Files
+                    </button>
+                    <p class="text-muted small mt-3">Upload up to 5 images (max 4MB each)</p>
+                </div>
+            </div>
+            <div id="image-preview-${buildingCounter}" class="image-preview mt-4"></div>
+        </div>
+    `;
+    
+    buildingsContainer.appendChild(buildingSection);
+    
+    // Initialize drag and drop for new building
+    initializeDragAndDrop(buildingCounter);
+    // Initialize file input handler for new building
+    initializeFileInput(buildingCounter);
+}
+
+function removeBuilding(buildingId) {
+    const buildingSection = document.querySelector(`[data-building-id="${buildingId}"]`);
+    buildingSection.remove();
+    updateGenerateButton();
+}
+
+function showAlert(message, type = 'info', duration = 5000) {
+    const alertContainer = document.getElementById('alertContainer');
+    const alert = document.createElement('div');
+    alert.className = `alert alert-${type} alert-dismissible fade show`;
+    alert.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    
+    alertContainer.appendChild(alert);
+    
+    if (duration) {
+        setTimeout(() => {
+            alert.classList.remove('show');
+            setTimeout(() => alert.remove(), 150);
+        }, duration);
+    }
+}
+
+function formatReportForDownload(reportHtml, basicInfo, images, chartImages) {
+    const [summaryTables, detailedReport] = reportHtml.split('REPORT 2:');
+    
+    return `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Campus Inspection Report - ${basicInfo.collegeName}</title>
+        <style>
+            @page {
+                margin: 2.5cm;
+                @top-center {
+                    content: "Campus Inspection Report - ${basicInfo.collegeName}";
+                    font-family: Arial, sans-serif;
+                    font-size: 10pt;
+                }
+                @bottom-right {
+                    content: counter(page) " of " counter(pages);
+                    font-size: 10pt;
+                }
+            }
+            
+            body {
+                font-family: Arial, sans-serif;
+                line-height: 1.6;
+                color: #333;
+                font-size: 11pt;
+            }
+            
+            .cover-page {
+                text-align: center;
+                height: 100vh;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                page-break-after: always;
+            }
+            
+            .cover-page h1 {
+                font-size: 32pt;
+                color: #0d6efd;
+                margin-bottom: 2em;
+            }
+            
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                margin: 1.5em 0;
+                background: white;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+            }
+            
+            th {
+                background: #0d6efd;
+                color: white;
+                font-weight: 600;
+                padding: 12px;
+                text-align: left;
+                font-size: 11pt;
+                border: 1px solid #0d6efd;
+            }
+            
+            td {
+                padding: 12px;
+                border: 1px solid #dee2e6;
+                font-size: 10pt;
+                vertical-align: top;
+            }
+            
+            tr:nth-child(even) {
+                background-color: #f8f9fa;
+            }
+            
+            tr:hover {
+                background-color: #f1f3f5;
+            }
+            
+            .grade {
+                display: inline-block;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-weight: bold;
+                text-align: center;
+                min-width: 40px;
+            }
+            
+            .grade-A-plus { background-color: #198754; color: white; }
+            .grade-A { background-color: #28a745; color: white; }
+            .grade-B-plus { background-color: #ffc107; }
+            .grade-B { background-color: #fd7e14; color: white; }
+            .grade-C { background-color: #dc3545; color: white; }
+            
+            .priority {
+                display: inline-block;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-weight: bold;
+                text-align: center;
+                min-width: 60px;
+            }
+            
+            .priority-high { background-color: #dc3545; color: white; }
+            .priority-medium { background-color: #fd7e14; color: white; }
+            .priority-low { background-color: #198754; color: white; }
+            
+            ul {
+                margin: 0;
+                padding-left: 20px;
+            }
+            
+            li {
+                margin-bottom: 4px;
+            }
+            
+            .chart-image {
+                width: 100%;
+                max-width: 600px;
+                margin: 20px auto;
+                display: block;
+            }
+            
+            .page-break {
+                page-break-before: always;
+            }
+            
+            h2 {
+                color: #0d6efd;
+                font-size: 18pt;
+                margin-bottom: 1em;
+                border-bottom: 2px solid #0d6efd;
+                padding-bottom: 0.5em;
+            }
+            
+            h3 {
+                color: #495057;
+                font-size: 14pt;
+                margin: 1.5em 0 1em;
+            }
+            
+            .key-points {
+                margin: 0;
+                padding-left: 0;
+                list-style: none;
+            }
+            
+            .key-points li {
+                position: relative;
+                padding-left: 20px;
+                margin-bottom: 6px;
+            }
+            
+            .key-points li:before {
+                content: "•";
+                color: #0d6efd;
+                font-weight: bold;
+                position: absolute;
+                left: 0;
+            }
+            
+            .solutions {
+                margin: 0;
+                padding-left: 0;
+                list-style: none;
+            }
+            
+            .solutions li {
+                position: relative;
+                padding-left: 25px;
+                margin-bottom: 6px;
+            }
+            
+            .solutions li:before {
+                content: "→";
+                color: #28a745;
+                font-weight: bold;
+                position: absolute;
+                left: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <!-- Cover Page -->
+        <div class="cover-page">
+            <h1>Campus Inspection Report</h1>
+            <div class="info">
+                <p><strong>${basicInfo.collegeName}</strong></p>
+                <p>Location: ${basicInfo.location}</p>
+                <p>Inspection Date: ${basicInfo.inspectionDate}</p>
+                <p>Total Area: ${basicInfo.collegeArea} acres</p>
+            </div>
+            <div class="report-meta">
+                <p>Generated on: ${new Date().toLocaleDateString()}</p>
+            </div>
+        </div>
+        
+        <!-- Executive Summary -->
+        <div class="page-break executive-summary">
+            <h2>Executive Summary</h2>
+            ${summaryTables}
+        </div>
+        
+        <!-- Detailed Assessment -->
+        <div class="page-break detailed-assessment">
+            <h2>Detailed Assessment</h2>
+            REPORT 2:${detailedReport}
+        </div>
+        
+        <!-- Visual Analysis Section -->
+        <div class="page-break charts-section">
+            <h2>Visual Analysis</h2>
+            
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h3>Grade Distribution</h3>
+                        <img src="${chartImages.gradeChart}" class="chart-image" alt="Grade Distribution">
+                    </div>
+                </div>
+                
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h3>Priority Distribution</h3>
+                        <img src="${chartImages.priorityChart}" class="chart-image" alt="Priority Distribution">
+                    </div>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="chart-container">
+                        <h3>Area Performance Analysis</h3>
+                        <img src="${chartImages.areaPerformanceChart}" class="chart-image" alt="Area Performance">
+                    </div>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h3>Maintenance Status</h3>
+                        <img src="${chartImages.maintenanceChart}" class="chart-image" alt="Maintenance Status">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+    </html>`;
+}
+
+async function downloadReportAsPDF(reportHtml, basicInfo, images) {
+    console.debug('Preparing PDF report for download');
+    
+    // Get base64 images of all charts
+    const chartImages = {
+        gradeChart: getChartImage('gradeChart'),
+        priorityChart: getChartImage('priorityChart'),
+        areaPerformanceChart: getChartImage('areaPerformanceChart'),
+        maintenanceChart: getChartImage('maintenanceChart')
+    };
+    
+    // Create HTML with embedded chart images
+    const pdfHtml = formatReportForDownload(reportHtml, basicInfo, images, chartImages);
+    
+    try {
+        const response = await fetch('/download_pdf', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ 
+                html: pdfHtml 
+            })
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to generate PDF');
+        }
+        
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `campus-inspection-report-${new Date().toISOString().split('T')[0]}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+        
+        showAlert('PDF downloaded successfully!', 'success');
+        console.debug('PDF download completed');
+    } catch (error) {
+        console.error('Error downloading PDF:', error);
+        showAlert('Failed to generate PDF: ' + error.message, 'danger');
+    }
+}
+
+// Wait for DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeDragAndDrop(1);
+    initializeFileInput(1);
+});
+
+function initializeDragAndDrop(buildingId) {
+    const dropZone = document.getElementById(`drop-zone-${buildingId}`);
+    
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => highlight(buildingId), false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => unhighlight(buildingId), false);
+    });
+
+    dropZone.addEventListener('drop', (e) => handleDrop(e, buildingId), false);
+}
+
+function initializeFileInput(buildingId) {
+    document.getElementById(`building-images-${buildingId}`).addEventListener('change', function(event) {
+        handleFiles(event.target.files, buildingId);
+    });
+}
+
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+function highlight(buildingId) {
+    document.getElementById(`drop-zone-${buildingId}`).classList.add('dragover');
+}
+
+function unhighlight(buildingId) {
+    document.getElementById(`drop-zone-${buildingId}`).classList.remove('dragover');
+}
+
+function handleDrop(e, buildingId) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    handleFiles(files, buildingId);
+}
+
+function handleFiles(files, category) {
+    const preview = document.getElementById(`${category}-preview`);
+    
+    Array.from(files).forEach(file => {
+        const reader = new FileReader();
+        
+        reader.onerror = function() {
+            showAlert(`Error loading image: ${file.name}`, 'danger');
+        };
+        
+        reader.onload = function(e) {
+            try {
+                // Create image element to verify it loads properly
+                const img = new Image();
+                img.onerror = function() {
+                    showAlert(`Invalid image file: ${file.name}`, 'danger');
+                };
+                img.onload = function() {
+                    // Only add to preview if image loads successfully
+                    addImageToPreview(e.target.result, category, file.name);
+                };
+                img.src = e.target.result;
+            } catch (error) {
+                showAlert(`Error processing image: ${file.name}`, 'danger');
+                console.error(error);
+            }
+        };
+        
+        reader.readAsDataURL(file);
+    });
+}
+
+function addImageToPreview(imageData, category, filename) {
+    const preview = document.getElementById(`${category}-preview`);
+    const container = document.createElement('div');
+    container.className = 'image-container';
+    container.dataset.category = category;
+
+    const img = document.createElement('img');
+    img.src = imageData;
+    img.alt = filename;
+    
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'remove-image';
+    removeBtn.innerHTML = '<i class="fas fa-times"></i>';
+    removeBtn.onclick = function() {
+        container.remove();
+        updateImageCount(category);
+    };
+
+    container.appendChild(img);
+    container.appendChild(removeBtn);
+    preview.appendChild(container);
+    updateImageCount(category);
+}
+
+function updateImageLabels(buildingId) {
+    const preview = document.getElementById(`image-preview-${buildingId}`);
+    const labels = preview.querySelectorAll('.image-label');
+    labels.forEach((label, index) => {
+        label.textContent = `View ${index + 1}`;
+    });
+}
+
+function showError(message) {
+    const preview = document.getElementById('image-preview');
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'error-message';
+    errorDiv.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
+    preview.appendChild(errorDiv);
+    setTimeout(() => errorDiv.remove(), 3000);
+}
+
+function updateGenerateButton() {
+    const imageCount = document.querySelectorAll('.image-container').length;
+    generateBtn.disabled = imageCount === 0;
+}
+
+function validateImageRequirements() {
+    const requirements = {
+        building: { count: document.getElementById('buildingCount').value, minImages: 5 },
+        parking: { count: document.getElementById('parkingCount').value, minImages: 3 },
+        canteen: { count: document.getElementById('canteenCount').value, minImages: 2 },
+        ground: { count: document.getElementById('groundCount').value, minImages: 3 },
+        gate: { count: document.getElementById('gateCount').value, minImages: 2 },
+        road: { minImages: 7 }
+    };
+
+    // Calculate total required images
+    const totalRequired = 
+        (requirements.building.count * requirements.building.minImages) +
+        (requirements.parking.count * requirements.parking.minImages) +
+        (requirements.canteen.count * requirements.canteen.minImages) +
+        (requirements.ground.count * requirements.ground.minImages) +
+        (requirements.gate.count * requirements.gate.minImages) +
+        requirements.road.minImages;
+
+    // Get actual image count
+    const actualImages = document.querySelectorAll('.image-container').length;
+
+    if (actualImages < totalRequired) {
+        showAlert(`Please upload at least ${totalRequired} images to meet minimum requirements:
+            - ${requirements.building.count} buildings × 5 images each
+            - ${requirements.parking.count} parking areas × 3 images each
+            - ${requirements.canteen.count} canteens × 2 images each
+            - ${requirements.ground.count} grounds × 3 images each
+            - ${requirements.gate.count} gates × 2 images each
+            - At least 7 road images`, 'danger');
+        return false;
+    }
+    return true;
+}
+
+function validateForm() {
+    const requiredFields = {
+        'collegeName': 'College Name',
+        'location': 'Location',
+        'inspectionDate': 'Inspection Date',
+        'collegeArea': 'College Area',
+        'buildingCount': 'Building Count',
+        'parkingCount': 'Parking Count',
+        'groundArea': 'Ground Area',
+        'gateCount': 'Gate Count'
+    };
+
+    for (const [fieldId, fieldName] of Object.entries(requiredFields)) {
+        const field = document.getElementById(fieldId);
+        if (!field.value.trim()) {
+            showAlert(`Please enter ${fieldName}`, 'danger');
+            field.focus();
+            return false;
+        }
+    }
+    return true;
+}
+
+// Keep generateReport outside DOMContentLoaded since it's called from HTML
+async function generateReport() {
+    if (!validateForm()) {
+        return;
+    }
+
+    const button = document.querySelector('.btn-primary[onclick="generateReport()"]');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const reportOutput = document.getElementById('report-output');
+    const downloadBtn = document.getElementById('downloadBtn');
+
+    // Get basic info
+    const collegeName = document.getElementById('collegeName').value.trim();
+    const location = document.getElementById('location').value.trim();
+    const inspectionDate = document.getElementById('inspectionDate').value;
+
+    // Create basicInfo object
+    const basicInfo = {
+        collegeName,
+        location,
+        inspectionDate: new Date(inspectionDate).toLocaleDateString(),
+        collegeArea: document.getElementById('collegeArea').value,
+        buildingCount: document.getElementById('buildingCount').value,
+        parkingCount: document.getElementById('parkingCount').value,
+        canteenCount: document.getElementById('canteenCount').value,
+        groundCount: document.getElementById('groundCount').value,
+        groundArea: document.getElementById('groundArea').value,
+        gateCount: document.getElementById('gateCount').value
+    };
+
+    try {
+        if (!collegeName || !location || !inspectionDate) {
+            showAlert('Please fill in all the basic information', 'danger');
+            return;
+        }
+
+        // Collect images from all categories
+        const allImages = [];
+        const categories = ['building', 'parking', 'road', 'canteen', 'ground', 'gate'];
+
+        categories.forEach(category => {
+            const imageContainers = document.querySelectorAll(`#${category}-preview .image-container img`);
+            imageContainers.forEach(img => {
+                allImages.push({
+                    category: category,
+                    data: img.src
+                });
+            });
+        });
+
+        if (allImages.length === 0) {
+            showAlert('Please upload at least one image', 'danger');
+            return;
+        }
+
+        showAlert('Generating report, please wait...', 'info');
+        console.debug('Starting report generation');
+        button.disabled = true;
+        loadingIndicator.classList.remove('hidden');
+        reportOutput.innerHTML = '';
+
+        console.debug('Sending request to server');
+        const response = await fetch('/generate_report', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ 
+                images: allImages,
+                basicInfo
+            })
+        });
+
+        const data = await response.json();
+        if (data.error) {
+            throw new Error(data.error);
+        }
+
+        console.debug('Received report from server');
+        const reportHtml = marked.parse(data.report);
+
+        // Create report container with charts section
+        const reportContainer = `
+            <div class="report-header">
+                <h2>${basicInfo.collegeName}</h2>
+                <p>
+                    <strong>Location:</strong> ${basicInfo.location}<br>
+                    <strong>Inspection Date:</strong> ${basicInfo.inspectionDate}
+                </p>
+            </div>
+            <hr>
+            <div class="charts-section mb-4">
+                <h3>Visual Analysis</h3>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <canvas id="gradeChart"></canvas>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <canvas id="priorityChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="col-md-12">
+                        <div class="chart-container">
+                            <canvas id="areaPerformanceChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <canvas id="maintenanceChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            ${reportHtml}
+        `;
+
+        reportOutput.innerHTML = reportContainer;
+
+        // Initialize charts with actual data
+        new Chart(document.getElementById('gradeChart'), {
+            type: 'bar',
+            data: {
+                labels: ['A+', 'A', 'B+', 'B', 'C'],
+                datasets: [{
+                    label: 'Grade Distribution',
+                    data: data.metrics.gradeDistribution || [2, 3, 1, 1, 0],
+                    backgroundColor: ['#198754', '#28a745', '#ffc107', '#fd7e14', '#dc3545']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Grade Distribution Across Areas'
+                    }
+                }
+            }
+        });
+
+        new Chart(document.getElementById('priorityChart'), {
+            type: 'pie',
+            data: {
+                labels: ['High Priority', 'Medium Priority', 'Low Priority'],
+                datasets: [{
+                    data: data.metrics.priorityDistribution || [30, 45, 25],
+                    backgroundColor: ['#dc3545', '#ffc107', '#198754']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Issue Priority Distribution'
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+
+        new Chart(document.getElementById('areaPerformanceChart'), {
+            type: 'radar',
+            data: {
+                labels: ['Buildings', 'Roads & Parking', 'Sports Facilities', 'Canteens', 'Security', 'Environmental'],
+                datasets: [{
+                    label: 'Performance Score',
+                    data: data.metrics.areaPerformance || [85, 75, 70, 80, 90, 85],
+                    fill: true,
+                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
+                    borderColor: 'rgb(13, 110, 253)',
+                    pointBackgroundColor: 'rgb(13, 110, 253)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgb(13, 110, 253)'
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Area-wise Performance Analysis'
+                    }
+                },
+                scales: {
+                    r: {
+                        angleLines: {
+                            display: true
+                        },
+                        suggestedMin: 0,
+                        suggestedMax: 100
+                    }
+                }
+            }
+        });
+
+        new Chart(document.getElementById('maintenanceChart'), {
+            type: 'doughnut',
+            data: {
+                labels: ['Well Maintained', 'Needs Attention', 'Critical'],
+                datasets: [{
+                    data: data.metrics.maintenanceStatus || [60, 30, 10],
+                    backgroundColor: ['#198754', '#ffc107', '#dc3545']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Infrastructure Maintenance Status'
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+
+        // Store the report data in a global variable or data attribute
+        reportData = {
+            reportHtml: reportContainer,
+            basicInfo: basicInfo,
+            images: data.images
+        };
+
+        // Update the download buttons to use this data
+        downloadBtn.innerHTML = `
+            <div class="dropdown">
+                <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                    <i class="fas fa-download me-2"></i>Download Report
+                </button>
+                <ul class="dropdown-menu">
+                    <li>
+                        <button class="dropdown-item" type="button" onclick="downloadReport(reportData.reportHtml, reportData.basicInfo, reportData.images)">
+                            <i class="fas fa-file-code me-2"></i>Download as HTML
+                        </button>
+                    </li>
+                    <li>
+                        <button class="dropdown-item" type="button" onclick="downloadReportAsPDF(reportData.reportHtml, reportData.basicInfo, reportData.images)">
+                            <i class="fas fa-file-pdf me-2"></i>Download as PDF
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        `;
+
+        showAlert('Report generated successfully!', 'success');
+
+    } catch (error) {
+        showAlert(`Error: ${error.message}`, 'danger');
+        console.error('Error generating report:', error);
+        reportOutput.innerHTML = `
+            <div class="error-message">
+                <i class="fas fa-exclamation-circle"></i>
+                ${error.message}
+            </div>
+        `;
+        downloadBtn.innerHTML = '';
+    } finally {
+        button.disabled = false;
+        loadingIndicator.classList.add('hidden');
+    }
+} 
+
+function downloadReport(reportHtml, basicInfo, images) {
+    // Create a formatted report
+    const formattedReport = formatReportForDownload(reportHtml, basicInfo, images);
+    
+    // Create a blob and download it
+    const blob = new Blob([formattedReport], { type: 'text/html' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `campus-inspection-report-${new Date().toISOString().split('T')[0]}.html`;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+} 
+
+// Initialize all upload zones
+document.addEventListener('DOMContentLoaded', function() {
+    const categories = ['building', 'parking', 'road', 'canteen', 'ground', 'gate'];
+    
+    categories.forEach(category => {
+        initializeUploadZone(category);
+    });
+});
+
+function initializeUploadZone(category) {
+    const dropZone = document.getElementById(`${category}-drop-zone`);
+    const input = document.getElementById(`${category}-images`);
+    
+    // Handle drag and drop
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => highlight(category), false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, () => unhighlight(category), false);
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+        const dt = e.dataTransfer;
+        handleFiles(dt.files, category);
+    });
+
+    // Handle file input
+    input.addEventListener('change', (e) => {
+        handleFiles(e.target.files, category);
+    });
+}
+
+function handleFiles(files, category) {
+    const preview = document.getElementById(`${category}-preview`);
+    const requirements = {
+        building: 5,
+        parking: 3,
+        road: 7,
+        canteen: 2,
+        ground: 3,
+        gate: 2
+    };
+
+    // Validate file count based on category requirements
+    const requiredCount = requirements[category] * 
+        (category === 'road' ? 1 : document.getElementById(`${category}Count`).value);
+
+    Array.from(files).forEach(file => {
+        if (!file.type.startsWith('image/')) {
+            showAlert(`"${file.name}" is not an image file`, 'danger');
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const container = document.createElement('div');
+            container.className = 'image-container';
+            container.dataset.category = category;
+
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'remove-image';
+            removeBtn.innerHTML = '<i class="fas fa-times"></i>';
+            removeBtn.onclick = function() {
+                container.remove();
+                updateImageCount(category);
+            };
+
+            container.appendChild(img);
+            container.appendChild(removeBtn);
+            preview.appendChild(container);
+            updateImageCount(category);
+        };
+        reader.readAsDataURL(file);
+    });
+}
+
+function updateImageCount(category) {
+    const count = document.querySelectorAll(`#${category}-preview .image-container`).length;
+    const required = getRequiredImageCount(category);
+    
+    const uploadBtn = document.querySelector(`#${category}-drop-zone button`);
+    if (count >= required) {
+        uploadBtn.classList.remove('btn-primary');
+        uploadBtn.classList.add('btn-success');
+    } else {
+        uploadBtn.classList.remove('btn-success');
+        uploadBtn.classList.add('btn-primary');
+    }
+}
+
+function getRequiredImageCount(category) {
+    const requirements = {
+        building: 5,
+        parking: 3,
+        road: 7,
+        canteen: 2,
+        ground: 3,
+        gate: 2
+    };
+
+    const count = category === 'road' ? 1 : 
+        parseInt(document.getElementById(`${category}Count`).value) || 0;
+    return requirements[category] * count;
+} 
+
+// Helper functions to generate charts
+function generateGradeChart() {
+    return `
+        const gradeCtx = document.getElementById('gradeChart');
+        new Chart(gradeCtx, {
+            type: 'bar',
+            data: {
+                labels: ['A+', 'A', 'B+', 'B', 'C'],
+                datasets: [{
+                    label: 'Grade Distribution',
+                    data: [2, 3, 1, 1, 0], // Example data, replace with actual data
+                    backgroundColor: ['#198754', '#28a745', '#ffc107', '#fd7e14', '#dc3545']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Grade Distribution Across Areas'
+                    }
+                }
+            }
+        });
+    `;
+}
+
+function generatePriorityChart(data) {
+    return `
+        const priorityCtx = document.getElementById('priorityChart');
+        new Chart(priorityCtx, {
+            type: 'pie',
+            data: {
+                labels: ['High Priority', 'Medium Priority', 'Low Priority'],
+                datasets: [{
+                    data: ${JSON.stringify(data)},
+                    backgroundColor: ['#dc3545', '#ffc107', '#198754']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Issue Priority Distribution'
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+    `;
+}
+
+function generateAreaPerformanceChart() {
+    return `
+        const performanceCtx = document.getElementById('areaPerformanceChart');
+        new Chart(performanceCtx, {
+            type: 'radar',
+            data: {
+                labels: ['Buildings', 'Roads & Parking', 'Sports Facilities', 'Canteens', 'Security', 'Environmental'],
+                datasets: [{
+                    label: 'Performance Score',
+                    data: [85, 75, 70, 80, 90, 85], // Will be replaced with actual data
+                    fill: true,
+                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
+                    borderColor: 'rgb(13, 110, 253)',
+                    pointBackgroundColor: 'rgb(13, 110, 253)',
+                    pointBorderColor: '#fff',
+                    pointHoverBackgroundColor: '#fff',
+                    pointHoverBorderColor: 'rgb(13, 110, 253)'
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Area-wise Performance Analysis'
+                    }
+                },
+                scales: {
+                    r: {
+                        angleLines: {
+                            display: true
+                        },
+                        suggestedMin: 0,
+                        suggestedMax: 100
+                    }
+                }
+            }
+        });
+    `;
+}
+
+function generateMaintenanceStatusChart() {
+    return `
+        const maintenanceCtx = document.getElementById('maintenanceStatusChart');
+        new Chart(maintenanceCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Well Maintained', 'Needs Attention', 'Critical'],
+                datasets: [{
+                    data: [60, 30, 10], // Will be replaced with actual data
+                    backgroundColor: ['#198754', '#ffc107', '#dc3545']
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Infrastructure Maintenance Status'
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+    `;
+} 
+
+// Add this function to convert charts to base64 images
+function getChartImage(chartId) {
+    const canvas = document.getElementById(chartId);
+    return canvas.toDataURL('image/png');
+} 
+    </script>
+</body>
+</html>