Update UI

README.md

@@ -1,12 +1,49 @@
 ---
-title: Building Planner With Drm
-emoji: 📊
-colorFrom: yellow
-colorTo: green
+title: Disaster Risk Construction Planner
+emoji: 🏗️
+colorFrom: blue
+colorTo: purple
 sdk: gradio
 sdk_version: 6.0.0
 app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🏗️ Disaster Risk Construction Planner
+
+Plan disaster-resistant construction in the Philippines with AI-powered risk assessment, recommendations, cost analysis, and facility mapping.
+
+## Features
+
+- **Risk Assessment**: Analyze seismic, volcanic, and hydrometeorological hazards
+- **Construction Recommendations**: Get building-specific guidance for disaster resistance
+- **Cost Analysis**: Estimate material costs for disaster-resistant construction
+- **Facility Mapping**: Locate nearby schools, hospitals, and emergency services
+- **Export Options**: Download plans as JSON or PDF
+
+## How to Use
+
+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
+
+## Example Locations
+
+- **Manila**: 14.5995°N, 120.9842°E
+- **Cebu**: 10.3157°N, 123.8854°E
+- **Davao**: 7.1907°N, 125.4553°E
+
+## Technology
+
+Built with:
+- Gradio 6 for the web interface
+- AI agents for orchestration and analysis
+- Philippines Disaster Risk data
+- Google Maps API for facility location
+
+## Disclaimer
+
+This tool provides guidance only. Always consult with licensed engineers, architects, and local authorities for actual construction projects.

app.py

@@ -1,7 +1,37 @@
+"""
+Disaster Risk Construction Planner - Hugging Face Deployment Entry Point
+This file serves as the entry point for Hugging Face Spaces deployment.
+"""
+
+import sys
+from pathlib import Path
+
+# Add gradio-ui and shared directories to Python path
+current_dir = Path(__file__).parent
+gradio_ui_path = current_dir / "gradio-ui"
+shared_path = current_dir / "shared"
+
+sys.path.insert(0, str(gradio_ui_path))
+sys.path.insert(0, str(shared_path))
+sys.path.insert(0, str(current_dir))
+
+# Import and launch the Gradio UI
 import gradio as gr
 
-def greet(name):
-    return "Hello " + name + "!!"
+# Import the create_interface function from gradio-ui/app.py
+import importlib.util
+spec = importlib.util.spec_from_file_location("gradio_app", gradio_ui_path / "app.py")
+gradio_app = importlib.util.module_from_spec(spec)
+spec.loader.exec_module(gradio_app)
+
+# Create the interface
+app = gradio_app.create_interface()
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+# Launch configuration for Hugging Face Spaces
+if __name__ == "__main__":
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        theme=gr.themes.Soft()
+    )

gradio-ui/app.py

@@ -170,7 +170,6 @@ def process_construction_plan(
         return (
             status_html,
             risk_html,
-            hazards_html,
             recommendations_html,
             costs_html,
             facilities_html
@@ -211,7 +210,7 @@ def _format_status(construction_plan) -> str:
     
     html = f"""
     <div style="padding: 20px;">
-        <h2 style="margin-top: 0; color: #0f172a; font-weight: 700;">📊 Construction Plan Summary</h2>
+        <h2 style="margin-top: 0; color: #ffffff !important; font-weight: 700;">📊 Construction Plan Summary</h2>
         
         <div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 1px solid #e2e8f0;">
             <h3 style="color: #1e40af !important; margin-top: 0; font-weight: 600;">📋 Project Information</h3>
@@ -382,11 +381,6 @@ def create_interface():
                             value="<p style='text-align: center; color: #6b7280; padding: 40px;'>Risk assessment will appear here</p>"
                         )
                     
-                    with gr.Tab("⚠️ Hazards"):
-                        hazards_output = gr.HTML(
-                            label="Detailed Hazards",
-                            value="<p style='text-align: center; color: #6b7280; padding: 40px;'>Detailed hazard information will appear here</p>"
-                        )
                     
                     with gr.Tab("📋 Recommendations"):
                         recommendations_output = gr.HTML(
@@ -447,7 +441,6 @@ def create_interface():
             outputs=[
                 status_output,
                 risk_output,
-                hazards_output,
                 recommendations_output,
                 costs_output,
                 facilities_output

gradio-ui/components/costs_display.py

@@ -33,7 +33,7 @@ def format_costs_display(cost_data) -> str:
     
     html = """
     <div style="padding: 20px;">
-        <h2 style="margin-top: 0; color: #0f172a; font-weight: 700;">💰 Material Cost Analysis</h2>
+        <h2 style="margin-top: 0; color: #ffffff !important; font-weight: 700;">💰 Material Cost Analysis</h2>
     """
     
     # Total Cost Estimate - handle both dict and object
@@ -77,13 +77,13 @@ def format_costs_display(cost_data) -> str:
     
     if market_conditions or last_updated:
         html += """
-        <div style="background: #fef3c7; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #f59e0b;">
-            <h4 style="margin-top: 0; color: #d97706;">📊 Market Information</h4>
+        <div style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
+            <h4 style="margin-top: 0; color: #d97706 !important;">📊 Market Information</h4>
         """
         if market_conditions:
-            html += f"<p style='margin: 5px 0;'><strong>Market Conditions:</strong> {market_conditions}</p>"
+            html += f"<p style='margin: 5px 0; color: #0f172a !important;'><strong style='color: #0f172a !important;'>Market Conditions:</strong> {market_conditions}</p>"
         if last_updated:
-            html += f"<p style='margin: 5px 0;'><strong>Last Updated:</strong> {last_updated}</p>"
+            html += f"<p style='margin: 5px 0; color: #0f172a !important;'><strong style='color: #0f172a !important;'>Last Updated:</strong> {last_updated}</p>"
         html += """
         </div>
         """
@@ -164,8 +164,8 @@ def format_costs_display(cost_data) -> str:
     
     # Disclaimer
     html += """
-    <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 0.9em; color: #6b7280;">
-        <p style="margin: 0;"><strong>Note:</strong> Cost estimates are based on current market conditions and may vary. 
+    <div style="background: white; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 0.9em; border: 1px solid #e2e8f0;">
+        <p style="margin: 0; color: #0f172a !important;"><strong style="color: #0f172a !important;">Note:</strong> Cost estimates are based on current market conditions and may vary. 
         Actual costs depend on supplier, location, quantity discounts, and market fluctuations. 
         Please consult with local suppliers for accurate quotes.</p>
     </div>

gradio-ui/components/facilities_map.py

@@ -34,7 +34,7 @@ def format_facilities_map(facility_data, site_coords = None) -> Tuple[str, str]:
     
     html = """
     <div style="padding: 20px;">
-        <h2 style="margin-top: 0; color: #0f172a; font-weight: 700;">📍 Critical Facilities</h2>
+        <h2 style="margin-top: 0; color: #ffffff !important; font-weight: 700;">📍 Critical Facilities</h2>
     """
     
     # Building site info - handle both dict and object
@@ -42,9 +42,9 @@ def format_facilities_map(facility_data, site_coords = None) -> Tuple[str, str]:
         lat = site_coords.get('latitude', 0) if isinstance(site_coords, dict) else getattr(site_coords, 'latitude', 0)
         lon = site_coords.get('longitude', 0) if isinstance(site_coords, dict) else getattr(site_coords, 'longitude', 0)
         html += f"""
-        <div style="background: #dbeafe; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #2563eb;">
-            <h4 style="margin-top: 0; color: #1e40af;">🏗️ Building Site</h4>
-            <p style="margin: 5px 0;">Coordinates: {lat:.4f}°N, {lon:.4f}°E</p>
+        <div style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
+            <h4 style="margin-top: 0; color: #1e40af !important;">🏗️ Building Site</h4>
+            <p style="margin: 5px 0; color: #0f172a !important;"><strong style="color: #0f172a !important;">Coordinates:</strong> {lat:.4f}°N, {lon:.4f}°E</p>
         </div>
         """
     
@@ -92,10 +92,10 @@ def format_facilities_map(facility_data, site_coords = None) -> Tuple[str, str]:
             <h3 style="color: #6b7280; margin-top: 0;">🛣️ Road Networks</h3>
             <table style="width: 100%; border-collapse: collapse;">
                 <thead>
-                    <tr style="background: #f3f4f6;">
-                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #e5e7eb;">Road Name</th>
-                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #e5e7eb;">Type</th>
-                        <th style="padding: 10px; text-align: right; border-bottom: 2px solid #e5e7eb;">Distance</th>
+                    <tr style="background: #f8fafc;">
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #cbd5e1; color: #0f172a !important; font-weight: 600;">Road Name</th>
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #cbd5e1; color: #0f172a !important; font-weight: 600;">Type</th>
+                        <th style="padding: 10px; text-align: right; border-bottom: 2px solid #cbd5e1; color: #0f172a !important; font-weight: 600;">Distance</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -107,14 +107,14 @@ def format_facilities_map(facility_data, site_coords = None) -> Tuple[str, str]:
             distance_meters = road.get('distance_meters', 0) if isinstance(road, dict) else getattr(road, 'distance_meters', 0)
             
             html += f"""
-                <tr style="border-bottom: 1px solid #e5e7eb;">
-                    <td style="padding: 10px;"><strong>{road_name}</strong></td>
+                <tr style="border-bottom: 1px solid #e2e8f0;">
+                    <td style="padding: 10px; color: #0f172a !important;"><strong style="color: #0f172a !important;">{road_name}</strong></td>
                     <td style="padding: 10px;">
-                        <span style="background: #e5e7eb; padding: 3px 8px; border-radius: 4px; font-size: 0.85em;">
+                        <span style="background: #e2e8f0; color: #0f172a !important; padding: 3px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600;">
                             {road_type.upper()}
                         </span>
                     </td>
-                    <td style="padding: 10px; text-align: right;">{distance_meters / 1000:.2f} km</td>
+                    <td style="padding: 10px; text-align: right; color: #0f172a !important;">{distance_meters / 1000:.2f} km</td>
                 </tr>
             """
         html += """
@@ -261,8 +261,8 @@ def _prepare_map_data(facility_data, site_coords = None) -> str:
                 📍 Open in Google Maps
             </a>
         </p>
-        <div style="margin-top: 15px; padding: 15px; background: #f3f4f6; border-radius: 6px;">
-            <p style="margin: 0; color: #6b7280; font-size: 0.9em;">
+        <div style="margin-top: 15px; padding: 15px; background: white; border-radius: 6px; border: 1px solid #e2e8f0;">
+            <p style="margin: 0; color: #0f172a !important; font-size: 0.9em;">
                 Map visualization shows the building site and nearby critical facilities. 
                 Click the link above to view an interactive map with all locations.
             </p>
@@ -311,11 +311,11 @@ def format_facilities_list(facility_data) -> str:
         travel_time_minutes = facility.get('travel_time_minutes', 0) if isinstance(facility, dict) else getattr(facility, 'travel_time_minutes', 0)
         
         html += f"""
-        <div style="margin-bottom: 10px; padding: 10px; background: #f9fafb; border-left: 3px solid {color}; border-radius: 4px;">
-            <strong>{name}</strong> 
-            <span style="color: {color};">({category})</span>
+        <div style="margin-bottom: 10px; padding: 10px; background: white; border-left: 3px solid {color}; border-radius: 4px; border: 1px solid #e2e8f0;">
+            <strong style="color: #0f172a !important;">{name}</strong> 
+            <span style="color: {color} !important;">({category})</span>
             <br>
-            <span style="font-size: 0.9em; color: #6b7280;">
+            <span style="font-size: 0.9em; color: #0f172a !important;">
                 {distance_meters / 1000:.2f} km • ~{travel_time_minutes:.0f} min
             </span>
         </div>

gradio-ui/components/recommendations_display.py

@@ -40,7 +40,7 @@ def format_recommendations_display(recommendations) -> str:
     
     html = """
     <div style="padding: 20px;">
-        <h2 style="margin-top: 0; color: #0f172a; font-weight: 700;">📋 Construction Recommendations</h2>
+        <h2 style="margin-top: 0; color: #ffffff !important; font-weight: 700;">📋 Construction Recommendations</h2>
     """
     
     # General Guidelines
@@ -128,10 +128,10 @@ def format_recommendations_display(recommendations) -> str:
     # If no sections were rendered, show a debug view
     if not has_content:
         html += """
-        <div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #d97706;">
-            <h3 style="color: #b45309; margin-top: 0;">⚠️ Raw Recommendations Data</h3>
-            <p style="color: #1e293b;">The recommendations data structure is unexpected. Here's the raw content:</p>
-            <pre style="background: white; padding: 15px; border-radius: 4px; overflow-x: auto; color: #334155; font-size: 0.9em;">
+        <div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #d97706; border: 1px solid #fde68a;">
+            <h3 style="color: #b45309 !important; margin-top: 0;">⚠️ Raw Recommendations Data</h3>
+            <p style="color: #0f172a !important;">The recommendations data structure is unexpected. Here's the raw content:</p>
+            <pre style="background: #f8fafc; padding: 15px; border-radius: 4px; overflow-x: auto; color: #0f172a !important; font-size: 0.9em; border: 1px solid #e2e8f0;">
         """
         import json
         try:

gradio-ui/components/risk_display.py

@@ -65,7 +65,7 @@ def format_risk_display(risk_data) -> str:
     # Build HTML output
     html = f"""
     <div style="padding: 20px;">
-        <h2 style="margin-top: 0; color: #0f172a; font-weight: 700;">🛡️ Risk Assessment Summary</h2>
+        <h2 style="margin-top: 0; color: #ffffff !important; font-weight: 700;">🛡️ Risk Assessment Summary</h2>
         
         <div style="background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid {risk_color}; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 1px solid #e2e8f0;">
             <h3 style="color: {risk_color} !important; margin-top: 0; font-weight: 600;">Overall Risk Level: {risk_level}</h3>
@@ -166,10 +166,10 @@ def format_risk_display(risk_data) -> str:
         cache_status = metadata.get('cache_status', 'Unknown') if isinstance(metadata, dict) else getattr(metadata, 'cache_status', 'Unknown')
         
         html += f"""
-        <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 0.9em;">
-            <p style="margin: 5px 0;"><strong>Data Source:</strong> {source}</p>
-            <p style="margin: 5px 0;"><strong>Last Updated:</strong> {timestamp}</p>
-            <p style="margin: 5px 0;"><strong>Cache Status:</strong> {cache_status}</p>
+        <div style="background: white; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 0.9em; border: 1px solid #e2e8f0;">
+            <p style="margin: 5px 0; color: #0f172a !important;"><strong style="color: #0f172a !important;">Data Source:</strong> {source}</p>
+            <p style="margin: 5px 0; color: #0f172a !important;"><strong style="color: #0f172a !important;">Last Updated:</strong> {timestamp}</p>
+            <p style="margin: 5px 0; color: #0f172a !important;"><strong style="color: #0f172a !important;">Cache Status:</strong> {cache_status}</p>
         </div>
         """
     

gradio-ui/export_utils.py

@@ -204,7 +204,7 @@ def _generate_pdf_content(construction_plan: Any) -> str:
         <div class="section">
             <h2>Project Information</h2>
             <p><strong>Building Type:</strong> {metadata.building_type.replace('_', ' ').title()}</p>
-            <p><strong>Location:</strong> {metadata.location.name}</p>
+            <p><strong>Location:</strong> {location.name}</p>
             <p><strong>Coordinates:</strong> {metadata.coordinates.latitude:.4f}°N, {metadata.coordinates.longitude:.4f}°E</p>
             {f"<p><strong>Building Area:</strong> {metadata.building_area:.2f} sq meters</p>" if metadata.building_area else ""}
             <p><strong>Generated:</strong> {metadata.generated_at}</p>

requirements.txt

@@ -0,0 +1,11 @@
+# Disaster Risk Construction Planner - Hugging Face Deployment Requirements
+
+# Gradio UI
+gradio>=6.0.0
+python-dotenv>=1.0.0
+requests>=2.31.0
+httpx>=0.27.0
+weasyprint>=60.0  # For PDF export (optional)
+
+# Data models and utilities
+pydantic>=2.0.0