Update app.py

app.py

@@ -3,99 +3,127 @@ import pandas as pd
 import plotly.express as px
 import pydeck as pdk
 
-# Set page configuration
-st.set_page_config(page_title="Air Quality Dashboard", layout="wide")
+# Set page layout and title
+st.set_page_config(page_title="AI-Powered Air Quality Dashboard", layout="wide")
 
-# Custom CSS for improved aesthetics
+# CSS for custom styling
 st.markdown("""
     <style>
-        .container {
+        .card {
+            background-color: #ffffff;
             padding: 20px;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
-            margin: 10px;
+            border-radius: 15px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
         }
-        .header-text {
-            font-size: 28px;
+        .header {
+            font-size: 26px;
             font-weight: bold;
-            color: #333;
+            color: #333333;
             text-align: center;
+            margin-top: 10px;
             margin-bottom: 20px;
         }
-        .highlight-good {
-            color: #2ecc71;
-            font-weight: bold;
+        .subheader {
+            font-size: 20px;
+            color: #555555;
+            font-weight: 600;
+            margin-top: 10px;
+            margin-bottom: 15px;
         }
-        .highlight-bad {
-            color: #e74c3c;
+        .recommendation {
+            background-color: #f0f9ff;
+            padding: 15px;
+            border-radius: 10px;
+            border-left: 5px solid #007bff;
+            color: #007bff;
             font-weight: bold;
         }
     </style>
 """, unsafe_allow_html=True)
 
-# Sidebar for AQI station selection
+# Sidebar for user interaction
 st.sidebar.header("Air Quality Monitoring")
 station_list = ["Louisville", "Lexington", "Richmond", "Elizabethtown"]
 selected_station = st.sidebar.selectbox("Select AQI Station", station_list)
 
-# Mock data for demo purposes
+# Mock air quality data (can be replaced with real data)
 aqi_data = {
     "Louisville": {"AQI": 50, "Pollutant": "Carbon Monoxide", "CO_ppb": 572.21},
-    "Lexington": {"AQI": 35, "Pollutant": "Ozone", "O3_ppb": 60.00},
-    "Richmond": {"AQI": 500, "Pollutant": "PM2.5", "PM25_ug/m3": 150.00},
-    "Elizabethtown": {"AQI": 85, "Pollutant": "Sulfur Dioxide", "SO2_ppb": 10.00},
+    "Lexington": {"AQI": 150, "Pollutant": "Ozone", "O3_ppb": 70.00},
+    "Richmond": {"AQI": 400, "Pollutant": "PM2.5", "PM25_ug/m3": 180.00},
+    "Elizabethtown": {"AQI": 85, "Pollutant": "Sulfur Dioxide", "SO2_ppb": 15.00},
 }
 
-# Main title
-st.markdown("<div class='header-text'>Louisville Air Watch</div>", unsafe_allow_html=True)
+# Header
+st.markdown("<div class='header'>AI-Powered Air Quality Dashboard</div>", unsafe_allow_html=True)
 
-# Display cards for AQI overview and impact
+# Get selected station's data
 station_data = aqi_data[selected_station]
-col1, col2 = st.columns(2)
 
+# --- Cards Section ---
+col1, col2, col3 = st.columns(3)
+
+# Card 1: AQI Summary
 with col1:
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
     st.metric(label="Air Quality Index (AQI)", value=station_data["AQI"])
     st.write(f"**Top Pollutant:** {station_data['Pollutant']}")
     st.write(f"**Concentration:** {station_data.get('CO_ppb', station_data.get('PM25_ug/m3', 'N/A'))} ppb/µg/m³")
     st.markdown("</div>", unsafe_allow_html=True)
 
+# Card 2: AI Recommendation
 with col2:
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    st.write("<div class='subheader'>AI Recommendation</div>", unsafe_allow_html=True)
+    
+    # Generate recommendation based on AQI severity
     if station_data["AQI"] <= 50:
-        st.write("<div class='highlight-good'>That's Good!</div>", unsafe_allow_html=True)
+        recommendation = "The air quality is good. It's a great day to enjoy outdoor activities."
     elif station_data["AQI"] <= 100:
-        st.info("Not Bad!")
+        recommendation = "The air quality is moderate. Sensitive groups may need to limit prolonged outdoor activities."
     elif station_data["AQI"] <= 150:
-        st.warning("Low Air Quality")
+        recommendation = "Unhealthy for sensitive groups. Reduce outdoor exertion if you have heart or lung conditions."
     else:
-        st.write("<div class='highlight-bad'>Hazardous Air Quality</div>", unsafe_allow_html=True)
+        recommendation = "The air is hazardous. It's strongly recommended to stay indoors and use air purifiers."
+
+    st.markdown(f"<div class='recommendation'>{recommendation}</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
+
+# Card 3: Health Impact Insights
+with col3:
+    st.markdown("<div class='card'>", unsafe_allow_html=True)
+    st.write("<div class='subheader'>Health Impact</div>", unsafe_allow_html=True)
+    st.write("""
+    - **General Population:** No immediate danger at low AQI levels.
+    - **Sensitive Groups:** Individuals with heart or lung conditions may experience symptoms at higher AQI.
+    """)
     st.markdown("</div>", unsafe_allow_html=True)
 
-# Section to display a chart (mock AQI trend data)
-st.subheader("AQI Trend Over Time")
+# --- Trends Visualization ---
+st.subheader("AQI Trends Over Time")
 trend_data = pd.DataFrame({
     "Date": ["2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04"],
-    "AQI": [station_data["AQI"] - 10, station_data["AQI"], station_data["AQI"] + 10, station_data["AQI"] - 5]
+    "AQI": [station_data["AQI"] - 20, station_data["AQI"], station_data["AQI"] + 30, station_data["AQI"] - 10]
 })
 
-aqi_chart = px.line(trend_data, x="Date", y="AQI", title=f"AQI Trend for {selected_station}")
-aqi_chart.update_traces(line=dict(color="#007bff"))
-st.plotly_chart(aqi_chart, use_container_width=True)
+trend_chart = px.line(trend_data, x="Date", y="AQI", title=f"AQI Trend for {selected_station}")
+trend_chart.update_traces(line=dict(color="#007bff"))
+trend_chart.update_layout(plot_bgcolor="rgba(0,0,0,0)", paper_bgcolor="rgba(0,0,0,0)")
+st.plotly_chart(trend_chart, use_container_width=True)
 
-# Interactive map section
-st.subheader("Louisville's AQI Stations")
+# --- Map Section ---
+st.subheader("Air Quality Stations Map")
 map_data = pd.DataFrame(
     [
         {"lat": 38.2527, "lon": -85.7585, "AQI": 50},  # Louisville
-        {"lat": 38.0406, "lon": -84.5037, "AQI": 35},  # Lexington
-        {"lat": 37.7479, "lon": -84.2947, "AQI": 500}, # Richmond
-        {"lat": 37.6939, "lon": -85.8591, "AQI": 85},  # Elizabethtown
+        {"lat": 38.0406, "lon": -84.5037, "AQI": 150},  # Lexington
+        {"lat": 37.7479, "lon": -84.2947, "AQI": 400},  # Richmond
+        {"lat": 37.6939, "lon": -85.8591, "AQI": 85},   # Elizabethtown
     ]
 )
 
-# Render map with custom view and scatterplot markers
+# Render the map with AQI points
 aqi_map = pdk.Deck(
     map_style="mapbox://styles/mapbox/light-v9",
     initial_view_state=pdk.ViewState(
@@ -110,7 +138,7 @@ aqi_map = pdk.Deck(
             data=map_data,
             get_position="[lon, lat]",
             get_radius=5000,
-            get_fill_color="[255-AQI, AQI, AQI/2, 150]",
+            get_fill_color="[255-AQI, 100, AQI/2, 150]",
             pickable=True,
         )
     ],
@@ -118,6 +146,6 @@ aqi_map = pdk.Deck(
 
 st.pydeck_chart(aqi_map)
 
-# Footer
+# --- Footer ---
 st.write("---")
 st.write("Learn more about air quality and its impact [here](https://www.epa.gov/air-quality-index).")