[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ChevronDown, ChevronRight, Database, Image, BarChart3, Globe, Layers, Brain } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function DasperPoster() { const [expandedSection, setExpandedSection] = useState(null) const toggleSection = (section: string) => { if (expandedSection === section) { setExpandedSection(null) } else { setExpandedSection(section) } } return (

{/* Header */}

DASPER Disaster Assessment and Cost Estimation System

National University of Computer and Emerging Sciences

Islamabad, Pakistan

January, 2025

NUCES

{/* Team Section */}

Project Team

Fahad Jameel (21i-0394)
Ataa Ur Rasool (21i-2987)
Bilal Mustafa (20i-0901)

Supervision

Supervised by: Mr. Majid Hussain
Co-Supervised by: Dr. Zeshan Khan
Department of Computer Science
Session: 2021 – 2025

{/* Introduction Section */}

{expandedSection === "introduction" && (

Problem Statement

In the wake of natural and man-made disasters, the rapid and accurate assessment of damage to infrastructure is critical. Traditional manual inspection methods are often slow, error-prone, and inadequate for the large-scale data needed during emergencies. Additionally, these conventional approaches typically lack mechanisms to reliably estimate the repair costs, hampering effective resource allocation and recovery planning.

Motivation

Accelerating Emergency Response: Quickly identifying damaged areas enables first responders to prioritize rescue and relief efforts.
Optimizing Resource Allocation: Accurate cost estimations help governmental agencies, insurance companies, and relief organizations allocate funds and resources more effectively.
Minimizing Human Error: Automating the assessment process reduces subjectivity and improves consistency across evaluations.
Enhancing Transparency: An integrated system that combines image analysis with economic data supports informed decisions in high-pressure scenarios.

Problem Solution

DASPER proposes an integrated, AI-driven solution composed of five key modules:

{[ { title: "Damage Confirmation Module", description: "Compares pre-disaster satellite images with post-disaster ground-level images using deep learning techniques to detect damage.", icon: , }, { title: "Cross-View and Geo-Validation Module", description: "Ensures that the compared images are of the same location by using cross-view matching techniques and validating GPS/geo-tag data.", icon: , }, { title: "Damage Level Assessment Module", description: "Utilizes semantic segmentation and CNN classifiers to quantify the severity of the detected damage.", icon: , }, { title: "Cost Estimation Module", description: "Employs regression models that integrate damage metrics with regional economic data to predict repair or reconstruction costs.", icon: , }, { title: "Web Application Interface", description: "Provides a user-friendly, interactive dashboard for stakeholders to view, analyze, and interact with the data and results.", icon: , }, ].map((module, index) => (

{module.icon}

{module.title}

{module.description}

))}

Stakeholders

Emergency Response Teams

Require real-time, accurate damage assessments for rapid deployment.

Insurance Companies

Depend on precise damage quantification for claims processing and risk management.

Urban Planners and Researchers

Use detailed assessments for developing long-term resilience and rebuilding strategies.

Affected Communities

Benefit from more efficient and transparent disaster recovery processes.

)}

{/* Project Description Section */}

{expandedSection === "project" && ( Scope Modules Tools Work Division Timeline

DASPER is an end-to-end solution designed to automate the assessment of disaster damage and provide accurate cost estimates for repairs. By integrating advanced image processing, deep learning, and geospatial analysis, DASPER:

Detects and confirms disaster-induced damage using multi-source imagery.
Validates the location correspondence of images using cross-view matching and GPS data.
Quantitatively assesses damage severity and categorizes it.
Provides cost estimates by fusing damage assessments with regional economic indicators.
Presents results via an interactive web application dashboard for quick and informed decision making.

{[ { title: "Damage Confirmation Module", objective: "Detect and confirm the presence of disaster-induced damage by comparing pre-disaster and post-disaster imagery.", approach: [ "Feature Extraction & Change Detection: Utilize Siamese or pseudo-Siamese networks with CNN backbones to extract deep features from both image sets.", "Segmentation-Based Analysis: Apply segmentation models (e.g., U-Net, DeepLab v3) to produce change maps that highlight damaged regions.", ], data: "Primarily uses datasets such as xBD, which provide satellite images along with annotated damage information.", }, { title: "Cross-View and Geo-Validation Module", objective: "Ensure that the pre-disaster and post-disaster images correspond to the same location and structure.", approach: [ "Cross-View Matching: Leverage Siamese networks augmented with methods like NetVLAD to align features from images captured from differing perspectives.", "Geo-Metadata Verification: Validate image correspondence using embedded GPS data and geo-tags.", ], data: "This module filters out false positives, ensuring subsequent modules analyze only matching image pairs.", }, { title: "Damage Level Assessment Module", objective: "Quantify the extent and severity of the damage detected in the images.", approach: [ "Semantic Segmentation: Employ models such as Mask R-CNN or transformer-based segmentation networks to isolate damaged regions.", "Damage Classification: Utilize CNN classifiers to categorize damage levels (e.g., 'no damage,' 'minor,' 'major,' 'destroyed').", ], data: "Generates detailed damage scores or categories for each structure, which feed into the cost estimation process.", }, { title: "Cost Estimation Module", objective: "Estimate the monetary cost required for repair or reconstruction based on the assessed damage.", approach: [ "Regression Modeling: Integrate damage metrics with regional economic data using regression techniques such as multilayer perceptron, random forests, or gradient boosting machines.", "Data Fusion: Merge outputs from vision models with local cost data sourced from government databases and industry reports.", ], data: "Delivers actionable cost estimates to assist in financial planning and resource allocation.", }, { title: "Web Application Interface", objective: "Provide an interactive dashboard that presents the integrated results of the system in an accessible, user-friendly manner.", approach: [ "Interactive Visualization: Display geospatial maps highlighting affected areas, damage severity, and estimated costs.", "Data Exploration: Enable users to filter results, drill down into specific locations or structures, and view detailed reports.", "User Management: Support role-based access to ensure that different stakeholders can access relevant information.", "Real-Time Updates: Integrate live data feeds to support dynamic monitoring during ongoing disaster recovery efforts.", ], data: "Built with modern web frameworks such as React or Angular, powered by Node.js or Django, using GIS libraries like Leaflet or Mapbox.", }, ].map((module, index) => (

{module.title}

Objective

{module.objective}

Approach

{item}

Outcome/Data

{module.data}

))}

Deep Learning

TensorFlow
PyTorch
ResNet50
DenseNet
Yolov11

Segmentation

U-Net
Mask R-CNN
DeepLab v3
Siamese Networks
NetVLAD

Web Development

React (frontend)
Node.js (backend)
Leaflet
Mapbox
GIS tools

Data Processing

OpenCV
scikit-image
Pandas
Git/GitHub
Economic Data Sources

{["Python", "TensorFlow", "PyTorch", "React", "Node.js", "OpenCV", "Pandas", "Git"].map( (tool, index) => (

{tool}

), )}

Work Division

Name	Registration	Responsibility / Module / Feature
Fahad Jameel	21i-0394	Damage Confirmation Module, Cross-View & Geo-Validation Module, Web Application Interface
Bilal Mustafa	20i-0901	Damage Level Assessment Module, Cost Estimation Module, Web Application Interface
Ataa Ur Rasool	21i-2987	Data Acquisition, Cross-View & Geo-Validation, Web Application Interface, System Testing

Project Timeline

{/* Timeline line */}

{/* Timeline items */}

Iteration 1: Feb – Mar

Data Acquisition, Preprocessing, and initial prototyping of the Damage Confirmation Module

Iteration 2: Apr – Jun

Development of Cross-View & Geo-Validation Module, Development of the Damage Level Assessment Module (segmentation and classification tasks)

Iteration 3: Aug – Oct

Integration of Cost Estimation Module and Web Application Interface; system-wide testing and optimization

Iteration 4: Nov – Dec

Final integration, documentation, and deployment preparations

)}

{/* Architecture Section */}

{expandedSection === "architecture" && (

System Flow

{/* Architecture Diagram */}

{/* Input Layer */}

Satellite Images

Ground Images

{/* Arrow */}

{/* Processing Layer */}

Damage Confirmation

Geo-Validation

{/* Arrow */}

{/* Middle Layer */}

Damage Level Assessment

{/* Arrow */}

{/* Output Layer */}

Cost Estimation

Web Interface

Technical Components

Deep Learning Models

Siamese networks, CNN backbones (ResNet, DenseNet), and segmentation models (U-Net, DeepLab v3) for feature extraction and change detection.

Geospatial Processing

Cross-view matching techniques (NetVLAD) and GPS/geo-tag validation to ensure location correspondence.

Damage Assessment

Semantic segmentation (Mask R-CNN) and CNN classifiers to quantify damage severity and categorize it.

Cost Estimation

Regression models that integrate damage metrics with regional economic data to predict repair costs.

Web Application

Interactive dashboard with geospatial maps, data exploration tools, and role-based access control.

)}

{/* Conclusion Section */}

{expandedSection === "conclusion" && (

DASPER represents a significant advancement in disaster management by combining advanced deep learning, geospatial analysis, and economic data integration into a single, automated system. The inclusion of a dedicated web application interface ensures that all stakeholders, from NGOs to private companies, can access, interpret, and act on the data quickly and effectively.

)}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "framer-motion": "^10.16.4", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } }