Create ui_components.py

ui_components.py

@@ -0,0 +1,263 @@
+
+import pandas as pd
+from datetime import datetime
+
+AQI_BANDS = [
+    (0, 50, "Good", "#10b981", "#ecfdf5"),
+    (51, 100, "Moderate", "#f59e0b", "#fffbeb"),
+    (101, 150, "Unhealthy for Sensitive Groups", "#f97316", "#fff7ed"),
+    (151, 200, "Unhealthy", "#ef4444", "#fef2f2"),
+    (201, 300, "Very Unhealthy", "#8b5cf6", "#f5f3ff"),
+    (301, 999, "Hazardous", "#7f1d1d", "#fef2f2"),
+]
+
+AQI_TIPS = {
+    "Good": "Great day to be outdoors!",
+    "Moderate": "Sensitive groups should reduce prolonged outdoor exertion.",
+    "Unhealthy for Sensitive Groups": "Limit outdoor activity if you have asthma or heart conditions.",
+    "Unhealthy": "Wear a mask outdoors and keep windows closed.",
+    "Very Unhealthy": "Avoid going outside; use an air purifier indoors.",
+    "Hazardous": "Stay indoors — this is a health emergency level.",
+}
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+.gradio-container {
+    background: #f0fdfa !important;
+    background-image: linear-gradient(180deg, #99f6e4 0%, #f0fdfa 40%, #ffffff 100%) !important;
+    font-family: 'Inter', sans-serif !important;
+    max-width: 1200px !important;
+}
+
+/* Header Styles */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+}
+.location-info h2 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #0f172a;
+}
+.location-info p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #64748b;
+}
+
+/* Card Styles */
+.mobile-card {
+    background: white !important;
+    border-radius: 24px !important;
+    border: none !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
+    padding: 20px !important;
+    overflow: hidden;
+}
+
+/* Status Card */
+.status-hero {
+    position: relative;
+    border-radius: 24px;
+    padding: 24px;
+    color: white;
+    text-align: left;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+.status-hero h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin: 0;
+}
+.status-hero p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 4px 0 0 0;
+}
+
+/* Metric Grid */
+.metric-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+.metric-item {
+    background: #f8fafc;
+    border-radius: 20px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.metric-top {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.metric-icon-bg {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+}
+.metric-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #64748b;
+}
+.metric-value {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+/* Forecast Grid */
+.forecast-scroll {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 8px;
+    scrollbar-width: none;
+}
+.forecast-scroll::-webkit-scrollbar { display: none; }
+.forecast-item {
+    min-width: 80px;
+    text-align: center;
+    padding: 12px;
+    border-radius: 16px;
+    background: #f8fafc;
+}
+.forecast-day {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #64748b;
+    margin-bottom: 8px;
+}
+.forecast-icon {
+    font-size: 1.5rem;
+    margin-bottom: 8px;
+}
+.forecast-temp {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+/* Buttons */
+#predict-btn {
+    background: #0f172a !important;
+    color: white !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    padding: 12px !important;
+}
+
+/* Tabs */
+.tabs {
+    border: none !important;
+}
+.tab-nav {
+    border-bottom: none !important;
+    justify-content: center !important;
+    gap: 20px !important;
+}
+"""
+
+def get_header_html():
+    now = datetime.now()
+    date_str = now.strftime("%d %B %Y")
+    return f"""
+    <div class="app-header">
+        <div class="location-info">
+            <h2>Karachi, Pakistan ⌵</h2>
+            <p>{date_str}</p>
+        </div>
+        <div class="user-avatar">
+            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Skyloom" style="width: 40px; height: 40px; border-radius: 50%; background: #99f6e4;">
+        </div>
+    </div>
+    """
+
+def make_metric_cards(pm25, fc):
+    n = len(fc)
+    idx_24 = min(23, n - 1)
+    idx_48 = min(47, n - 1)
+    
+    metrics = [
+        ("💨", "PM2.5", f"{pm25:.1f} µg/m³", "#ecfdf5", "#10b981"),
+        ("🌡️", "Temp", "28°C", "#fffbeb", "#f59e0b"), # Static for demo or fetch
+        ("💧", "Humidity", "65%", "#eff6ff", "#3b82f6"),
+        ("🌬️", "Wind", "4.2 km/h", "#f5f3ff", "#8b5cf6")
+    ]
+    
+    html = '<div class="metric-grid">'
+    for icon, label, value, bg, color in metrics:
+        html += f"""
+        <div class="metric-item">
+            <div class="metric-top">
+                <div class="metric-icon-bg" style="background: {bg}; color: {color};">{icon}</div>
+                <div class="metric-label">{label}</div>
+            </div>
+            <div class="metric-value">{value}</div>
+        </div>
+        """
+    html += '</div>'
+    return html
+
+def make_day_cards(fc):
+    n_days = max(1, len(fc) // 24)
+    day_names = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+    now = datetime.now()
+    start_day = now.weekday()
+    
+    html = '<div class="forecast-scroll">'
+    for d in range(min(n_days, 7)):
+        start = d * 24
+        end = min(start + 24, len(fc))
+        chunk = fc[start:end]
+        if len(chunk) == 0: break
+        avg = sum(chunk) / len(chunk)
+        
+        # Determine icon based on AQI
+        if avg < 50: icon = "☀️"
+        elif avg < 100: icon = "🌤️"
+        elif avg < 150: icon = "🌥️"
+        else: icon = "🌫️"
+        
+        day_name = day_names[(start_day + d) % 7]
+        if d == 0: day_name = "Today"
+        
+        html += f"""
+        <div class="forecast-item">
+            <div class="forecast-day">{day_name}</div>
+            <div class="forecast-icon">{icon}</div>
+            <div class="forecast-temp">{avg:.0f}</div>
+        </div>
+        """
+    html += '</div>'
+    return html
+
+def get_status_hero(aqi):
+    cat = "Good"
+    color = "#10b981"
+    bg = "#10b981" # Solid for now, or gradient
+    for lo, hi, c, col, b in AQI_BANDS:
+        if aqi <= hi:
+            cat, color, bg = c, col, col
+            break
+            
+    return f"""
+    <div class="status-hero" style="background: {bg};">
+        <p>Current Observation</p>
+        <h1>{aqi:.0f}</h1>
+        <p>Air Quality Index: <b>{cat}</b></p>
+    </div>
+    """