gradio-ui/README.md

Gradio 6 UI for Disaster Risk Construction Planner

This is the web-based user interface for the Disaster Risk Construction Planner system, built with Gradio 6.

Features

• Interactive Input Form: Select building type, enter coordinates, and specify building area
• Tabbed Results Display:
  • Executive Summary
  • Risk Assessment
  • Detailed Hazards
  • Construction Recommendations
  • Material Costs
  • Critical Facilities Map
• Export Functionality: Export construction plans as JSON or PDF/HTML
• Progress Indicators: Real-time progress updates during plan generation
• Responsive Design: Clean, modern interface with color-coded risk levels

Requirements

• Python 3.8+
• Gradio 6.0+

Installation

1. Install dependencies:

pip install -r requirements.txt

Note: This application requires Gradio 6.0 or higher. weasyprint is optional for PDF export. If not installed, exports will be saved as HTML files.

2. Set environment variables (optional):

export ORCHESTRATOR_AGENT_URL=http://localhost:8000

Running the Application

Local Development

python app.py

The application will be available at http://localhost:7860

Production Deployment

For production deployment, configure the ORCHESTRATOR_AGENT_URL environment variable to point to your deployed Orchestrator Agent endpoint.

Project Structure

gradio-ui/
├── app.py                      # Main application entry point
├── orchestrator_client.py      # Client for Orchestrator Agent communication
├── export_utils.py             # Export functionality (JSON/PDF)
├── models.py                   # Data models (symlink to shared/models.py)
├── requirements.txt            # Python dependencies
├── components/                 # UI components
│   ├── __init__.py
│   ├── risk_display.py        # Risk assessment display
│   ├── recommendations_display.py  # Recommendations display
│   ├── costs_display.py       # Material costs display
│   └── facilities_map.py      # Facilities map display
└── README.md                   # This file

Components

Risk Display Component

Displays risk assessment results with:

• Color-coded overall risk level
• Hazard statistics
• Critical hazards highlighting
• Detailed seismic, volcanic, and hydrometeorological hazards

Recommendations Display Component

Shows construction recommendations with:

• General guidelines
• Priority actions
• Hazard-specific recommendations
• Building code references

Costs Display Component

Presents material cost analysis with:

• Total cost estimates (low/mid/high)
• Itemized materials by category
• Market conditions and timestamps

Facilities Map Component

Displays critical facilities information:

• Nearby schools and hospitals
• Emergency services
• Utilities
• Road networks
• Distances and travel times
• Directions to each facility

Usage

1. Select Building Type: Choose from residential, commercial, industrial, institutional, or mixed-use
2. Enter Coordinates: Provide latitude and longitude within Philippine bounds (4°N-21°N, 116°E-127°E)
3. Specify Building Area (optional): Enter estimated building area in square meters
4. Generate Plan: Click "Generate Construction Plan" button
5. Review Results: Navigate through tabs to view different aspects of the plan
6. Export: Use export buttons to save the plan as JSON or PDF

Example Locations

• Manila: 14.5995°N, 120.9842°E
• Cebu: 10.3157°N, 123.8854°E
• Davao: 7.1907°N, 125.4553°E

Notes

• The UI connects to the Orchestrator Agent which coordinates all specialized agents
• For local development, the orchestrator is called directly
• For production, HTTP requests are made to the deployed agent endpoint
• All coordinates must be within the Philippines
• Export functionality requires write permissions in the current directory

Quick Start

See QUICKSTART.md for a quick start guide.

Troubleshooting

Import Errors

If you see import errors, ensure all dependencies are installed:

pip install -r requirements.txt
python test_app.py  # Verify installation

Connection Errors

If the orchestrator agent connection fails:

1. Verify the ORCHESTRATOR_AGENT_URL is correct
2. Ensure the orchestrator agent is running and accessible
3. Check network connectivity

Export Errors

If PDF export fails:

• Install weasyprint: pip install weasyprint
• Or use the HTML fallback (automatically used if weasyprint is not available)

Development

To modify the UI:

1. Edit component files in components/ directory
2. Update app.py for layout changes
3. Modify orchestrator_client.py for agent communication changes
4. Update export_utils.py for export format changes

License

Part of the Disaster Risk Construction Planner system.