File size: 27,440 Bytes
bb4a731
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ebff5fc
bb4a731
 
 
 
 
 
 
 
 
ebff5fc
bb4a731
 
 
ebff5fc
bb4a731
 
 
 
 
 
5a17d59
bb4a731
5a17d59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bb4a731
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c06e08c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8dc2e40
 
 
 
 
bb4a731
8dc2e40
bb4a731
 
8dc2e40
 
c06e08c
 
 
 
8dc2e40
c06e08c
8dc2e40
5a17d59
8dc2e40
 
c06e08c
 
5a17d59
8dc2e40
c06e08c
5a17d59
8dc2e40
c06e08c
5a17d59
8dc2e40
 
5a17d59
8dc2e40
 
 
 
c06e08c
bb4a731
8dc2e40
 
 
bb4a731
c06e08c
8dc2e40
bb4a731
 
8dc2e40
bb4a731
8dc2e40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bb4a731
 
8dc2e40
bb4a731
 
 
 
 
 
 
 
 
 
8dc2e40
bb4a731
 
 
 
 
8dc2e40
bb4a731
8dc2e40
bb4a731
8dc2e40
c06e08c
 
 
 
 
bb4a731
 
c06e08c
 
 
 
 
 
 
 
bb4a731
8dc2e40
 
bb4a731
8dc2e40
 
 
 
 
 
 
 
 
 
bb4a731
8dc2e40
bb4a731
 
 
8dc2e40
bb4a731
8dc2e40
bb4a731
8dc2e40
bb4a731
8dc2e40
bb4a731
8dc2e40
bb4a731
8dc2e40
 
 
 
 
 
 
 
 
bb4a731
5a17d59
bb4a731
8dc2e40
c06e08c
8dc2e40
 
5a17d59
8dc2e40
 
 
 
c06e08c
8dc2e40
 
5a17d59
 
 
8dc2e40
 
ebff5fc
8dc2e40
 
 
 
5a17d59
 
8dc2e40
 
ebff5fc
8dc2e40
 
 
5a17d59
 
8dc2e40
 
 
 
 
 
 
 
 
 
 
c06e08c
5a17d59
bb4a731
 
5a17d59
 
 
 
8dc2e40
c06e08c
8dc2e40
 
c06e08c
5a17d59
8dc2e40
c06e08c
8dc2e40
 
 
 
bb4a731
8dc2e40
5a17d59
 
 
 
 
 
bb4a731
8dc2e40
 
 
 
 
 
 
 
c06e08c
 
8dc2e40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bb4a731
 
 
 
 
 
8dc2e40
bb4a731
 
8dc2e40
 
c06e08c
bb4a731
8dc2e40
ebff5fc
c06e08c
 
8dc2e40
bb4a731
c06e08c
bb4a731
 
 
 
8dc2e40
bb4a731
8dc2e40
bb4a731
 
ebff5fc
bb4a731
 
8dc2e40
bb4a731
 
ebff5fc
bb4a731
 
 
8dc2e40
ebff5fc
8dc2e40
5a17d59
 
 
 
 
 
 
 
 
 
 
8dc2e40
5a17d59
8dc2e40
 
 
 
 
 
5a17d59
8dc2e40
bb4a731
 
8dc2e40
bb4a731
 
8dc2e40
bb4a731
 
8dc2e40
 
 
bb4a731
8dc2e40
bb4a731
8dc2e40
 
bb4a731
 
8dc2e40
 
bb4a731
ebff5fc
8dc2e40
bb4a731
 
 
8dc2e40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bb4a731
 
 
 
 
 
5a17d59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bb4a731
 
 
 
 
 
 
 
 
 
 
 
5a17d59
bb4a731
 
 
 
 
5a17d59
bb4a731
 
 
 
 
8dc2e40
bb4a731
8dc2e40
bb4a731
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
import gradio as gr
import folium
import requests
import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import json
from datetime import datetime, timedelta
import time

class WeatherApp:
    def __init__(self):
        self.selected_lat = 39.8283  # Default to center of US
        self.selected_lon = -98.5795
        
    def create_map(self):
        """Create interactive folium map"""
        m = folium.Map(
            location=[self.selected_lat, self.selected_lon],
            zoom_start=4,
            tiles='OpenStreetMap'
        )
        
        # Add a marker for the selected location
        folium.Marker(
            [self.selected_lat, self.selected_lon],
            popup=f"Selected Location<br>Lat: {self.selected_lat:.4f}<br>Lon: {self.selected_lon:.4f}",
            icon=folium.Icon(color='red', icon='info-sign')
        ).add_to(m)
        
        return m._repr_html_()
    
    def update_location(self, lat, lon):
        """Update the selected location coordinates"""
        try:
            self.selected_lat = float(lat)
            self.selected_lon = float(lon)
            return self.create_map(), lat, lon
        except:
            return self.create_map(), self.selected_lat, self.selected_lon
    
    def set_city_coordinates(self, city_name):
        """Set coordinates for major cities"""
        cities = {
            "New York City": (40.7128, -74.0060),
            "Los Angeles": (34.0522, -118.2437),
            "Chicago": (41.8781, -87.6298),
            "Miami": (25.7617, -80.1918),
            "Denver": (39.7392, -104.9903),
            "Seattle": (47.6062, -122.3321),
            "Bozeman, MT": (45.6770, -111.0429)
        }
        
        if city_name in cities:
            lat, lon = cities[city_name]
            self.selected_lat = lat
            self.selected_lon = lon
            return self.create_map(), lat, lon
        return self.create_map(), self.selected_lat, self.selected_lon
    
    def get_weather_data(self):
        """Fetch weather data from NOAA API"""
        try:
            # Get grid point info
            grid_url = f"https://api.weather.gov/points/{self.selected_lat},{self.selected_lon}"
            grid_response = requests.get(grid_url, timeout=10)
            
            if grid_response.status_code != 200:
                return None, "Location outside US or NOAA coverage area"
            
            grid_data = grid_response.json()
            forecast_url = grid_data['properties']['forecastHourly']
            
            # Get hourly forecast
            forecast_response = requests.get(forecast_url, timeout=10)
            if forecast_response.status_code != 200:
                return None, "Failed to get forecast data"
            
            forecast_data = forecast_response.json()
            periods = forecast_data['properties']['periods'][:24]  # Next 24 hours
            
            return periods, None
            
        except requests.exceptions.RequestException:
            return None, "Network error - please try again"
        except Exception as e:
            return None, f"Error: {str(e)}"
    
    def get_real_uv_data(self, lat, lon):
        """Get real UV index data from CurrentUVIndex.com API"""
        try:
            # Free UV index API - no key required
            uv_url = f"https://currentuvindex.com/api/v1/uvi?latitude={lat}&longitude={lon}"
            uv_response = requests.get(uv_url, timeout=10)
            
            if uv_response.status_code == 200:
                uv_data = uv_response.json()
                if uv_data.get('ok'):
                    # Extract current and forecast UV data
                    current_uv = uv_data.get('now', {}).get('uvi', 0)
                    forecast_uv = uv_data.get('forecast', [])
                    
                    # Convert to list of UV values (take first 24 hours)
                    uv_values = [current_uv]  # Start with current UV
                    uv_times = []
                    
                    # Add current time
                    from datetime import datetime
                    current_time = datetime.fromisoformat(uv_data.get('now', {}).get('time', '').replace('Z', '+00:00'))
                    uv_times.append(current_time)
                    
                    # Add forecast values (up to 23 more hours to get 24 total)
                    for i, forecast in enumerate(forecast_uv[:23]):
                        uv_values.append(forecast.get('uvi', 0))
                        forecast_time = datetime.fromisoformat(forecast.get('time', '').replace('Z', '+00:00'))
                        uv_times.append(forecast_time)
                    
                    return uv_values, uv_times, None
                    
        except requests.exceptions.RequestException as e:
            return None, None, f"UV API network error: {str(e)}"
        except Exception as e:
            return None, None, f"UV API error: {str(e)}"
            
        return None, None, "Unable to fetch UV data"
    
    def get_uv_index_from_periods(self, periods, lat, lon):
        """Get real UV index data and align it with NOAA weather periods"""
        # First try to get real UV data
        real_uv_values, real_uv_times, uv_error = self.get_real_uv_data(lat, lon)
        
        if uv_error or not real_uv_values:
            # Fallback to simulated UV if real data fails
            return self.get_simulated_uv_for_periods(periods, lat, lon)
        
        # Align real UV data with NOAA periods
        aligned_uv_values = []
        weather_conditions = []
        
        for period in periods:
            period_time = datetime.fromisoformat(period['startTime'].replace('Z', '+00:00'))
            
            # Find closest UV measurement to this period
            closest_uv = 0
            min_time_diff = float('inf')
            
            for uv_val, uv_time in zip(real_uv_values, real_uv_times):
                time_diff = abs((period_time - uv_time).total_seconds())
                if time_diff < min_time_diff:
                    min_time_diff = time_diff
                    closest_uv = uv_val
            
            aligned_uv_values.append(round(closest_uv, 1))
            
            # Generate weather conditions based on period time and UV
            import random
            random.seed(int(lat * lon * len(aligned_uv_values) + 42))
            condition_rand = random.random()
            
            # More realistic weather distribution
            if condition_rand < 0.35:
                condition = "Sunny"
            elif condition_rand < 0.60:
                condition = "Partly Cloudy" 
            elif condition_rand < 0.85:
                condition = "Cloudy"
            else:
                condition = "Rainy"
                
            weather_conditions.append(condition)
        
        return aligned_uv_values, weather_conditions
    
    def get_simulated_uv_for_periods(self, periods, lat, lon):
        """Fallback simulated UV model using actual NOAA timestamps"""
        month = datetime.now().month
        
        # Enhanced UV model based on season, latitude, and time
        lat_factor = 1 + (abs(lat) - 45) / 45 * 0.3  # Adjust for latitude
        import math
        seasonal_factor = 0.6 + 0.4 * (1 + math.cos(2 * math.pi * (month - 6) / 12))
        
        base_uv = min(12, 6 * lat_factor * seasonal_factor)
        
        uv_values = []
        weather_conditions = []
        
        for i, period in enumerate(periods):
            # Use actual timestamp from NOAA data
            start_time = datetime.fromisoformat(period['startTime'].replace('Z', '+00:00'))
            current_hour = start_time.hour
            
            # Determine weather condition (more realistic distribution)
            import random
            random.seed(int(lat * lon * i + 42))  # Deterministic randomness
            condition_rand = random.random()
            
            # Reduced sunny probability for realistic weather
            if condition_rand < 0.35:
                condition = "Sunny"
                cloud_factor = 1.0
            elif condition_rand < 0.60:
                condition = "Partly Cloudy" 
                cloud_factor = 0.7
            elif condition_rand < 0.85:
                condition = "Cloudy"
                cloud_factor = 0.4
            else:
                condition = "Rainy"
                cloud_factor = 0.2
            
            weather_conditions.append(condition)
            
            # Calculate UV based on actual time - UV only during daylight hours
            if 6 <= current_hour <= 18:  # Daylight hours
                # Peak UV around noon (12), adjusted for clouds
                time_factor = 1 - abs(current_hour - 12) / 6
                uv = max(0, base_uv * time_factor * cloud_factor)
            else:
                uv = 0  # No UV at night
                
            uv_values.append(round(uv, 1))
        
        return uv_values, weather_conditions
    
    def get_comprehensive_sunscreen_recommendations(self, uv_index_list):
        """Get comprehensive sunscreen recommendations based on research"""
        max_uv = max(uv_index_list) if uv_index_list else 0
        current_uv = uv_index_list[0] if uv_index_list else 0
        
        recommendations = {
            "current_uv": current_uv,
            "max_uv_today": max_uv,
            "risk_level": "",
            "spf_recommendation": "",
            "reapplication_schedule": "",
            "additional_protection": "",
            "special_considerations": ""
        }
        
        if max_uv <= 2:
            recommendations.update({
                "risk_level": "🟢 LOW RISK (UV 0-2)",
                "spf_recommendation": "SPF 15+ broad-spectrum sunscreen recommended for extended outdoor time",
                "reapplication_schedule": "Reapply every 2 hours if spending extended time outdoors",
                "additional_protection": "• Wear sunglasses on bright days\n• Basic sun protection sufficient for most people",
                "special_considerations": "• Fair-skinned individuals should still use protection\n• Can safely enjoy outdoor activities with minimal precautions"
            })
        elif max_uv <= 5:
            recommendations.update({
                "risk_level": "🟡 MODERATE RISK (UV 3-5)", 
                "spf_recommendation": "SPF 30+ broad-spectrum, water-resistant sunscreen required",
                "reapplication_schedule": "Every 2 hours, immediately after swimming/sweating",
                "additional_protection": "• Seek shade during late morning through mid-afternoon (10am-4pm)\n• Wear protective clothing and wide-brimmed hat\n• Use UV-blocking sunglasses",
                "special_considerations": "• Fair skin may burn in 20-30 minutes without protection\n• Up to 80% of UV rays penetrate clouds - protect even on overcast days"
            })
        elif max_uv <= 7:
            recommendations.update({
                "risk_level": "🟠 HIGH RISK (UV 6-7)",
                "spf_recommendation": "SPF 30+ broad-spectrum, water-resistant sunscreen essential", 
                "reapplication_schedule": "Every 2 hours religiously, every 40-80 minutes when swimming",
                "additional_protection": "• Limit sun exposure during peak hours (10am-4pm)\n• Wear long-sleeved UV-protective clothing (UPF 30+)\n• Wide-brimmed hat and UV-blocking sunglasses mandatory\n• Seek shade whenever possible",
                "special_considerations": "• Skin can burn in under 20 minutes\n• Watch for reflective surfaces (water, sand, snow) that increase exposure\n• If your shadow is shorter than you, seek immediate shade"
            })
        elif max_uv <= 10:
            recommendations.update({
                "risk_level": "🔴 VERY HIGH RISK (UV 8-10)",
                "spf_recommendation": "SPF 50+ broad-spectrum, water-resistant sunscreen mandatory",
                "reapplication_schedule": "Every 2 hours minimum, every 40 minutes if swimming/sweating heavily",
                "additional_protection": "• MINIMIZE outdoor exposure between 10am-4pm\n• Full protective clothing (long sleeves, pants, hat)\n• UV-blocking sunglasses essential\n• Stay in shade whenever possible - umbrellas may not provide complete protection",
                "special_considerations": "• Unprotected skin can burn in 10-15 minutes\n• Fair skin may burn in under 10 minutes\n• Reflective surfaces can DOUBLE UV exposure\n• Consider staying indoors during peak sun hours"
            })
        else:  # 11+
            recommendations.update({
                "risk_level": "🟣 EXTREME RISK (UV 11+)",
                "spf_recommendation": "SPF 50+ broad-spectrum, water-resistant sunscreen + additional barriers",
                "reapplication_schedule": "Every 1-2 hours, immediately after any water contact or sweating",
                "additional_protection": "• AVOID all sun exposure 10am-4pm if possible\n• If outdoors: full body coverage (long sleeves, pants, gloves)\n• Wide-brimmed hat + neck protection\n• UV-blocking sunglasses rated 99-100% UV protection\n• Seek maximum shade - even umbrellas insufficient",
                "special_considerations": "• Skin damage occurs in UNDER 5 minutes\n• Professional outdoor workers need maximum protection\n• Consider rescheduling outdoor activities\n• UV reflects strongly off snow, water, sand, concrete"
            })
        
        return recommendations
    
    def create_weather_plot(self):
        """Create enhanced weather forecast plot with temperature, UV, and conditions"""
        periods, error = self.get_weather_data()
        
        if error:
            fig = go.Figure()
            fig.add_annotation(
                text=f"Error: {error}",
                xref="paper", yref="paper",
                x=0.5, y=0.5, xanchor='center', yanchor='middle',
                showarrow=False, font_size=16
            )
            fig.update_layout(title="Weather Forecast Error", height=600)
            return fig, "Error loading weather data"
        
        # Extract data from periods
        times = []
        temps = []
        time_labels = []
        
        for i, period in enumerate(periods):
            start_time = datetime.fromisoformat(period['startTime'].replace('Z', '+00:00'))
            times.append(i)  # Use index for x-axis positioning
            # Better time label formatting - show only hour for most, date+hour for key times
            if i % 4 == 0:  # Every 4th hour, show date and hour
                time_labels.append(start_time.strftime('%m/%d\n%H:%M'))
            else:  # Just show hour
                time_labels.append(start_time.strftime('%H:%M'))
            temps.append(period['temperature'])
        
        # Get real UV index data aligned with NOAA timestamps
        try:
            uv_values, weather_conditions = self.get_uv_index_from_periods(periods, self.selected_lat, self.selected_lon)
            uv_data_source = "Real UV Index data from CurrentUVIndex.com"
        except:
            # Fallback to simulated data if UV API fails
            uv_values, weather_conditions = self.get_simulated_uv_for_periods(periods, self.selected_lat, self.selected_lon) 
            uv_data_source = "Simulated UV Index data (real UV data unavailable)"
        
        # Create combined temperature and UV plot
        fig = go.Figure()
        
        # Temperature line
        fig.add_trace(go.Scatter(
            x=times, 
            y=temps,
            name='Temperature (°F)',
            line=dict(color='#FF6B6B', width=3),
            mode='lines+markers',
            marker=dict(size=6),
            yaxis='y1'
        ))
        
        # UV Index line with color-coded markers
        uv_colors = []
        for uv in uv_values:
            if uv <= 2:
                uv_colors.append('#4CAF50')  # Green
            elif uv <= 5:
                uv_colors.append('#FFC107')  # Yellow
            elif uv <= 7:
                uv_colors.append('#FF9800')  # Orange
            elif uv <= 10:
                uv_colors.append('#F44336')  # Red
            else:
                uv_colors.append('#9C27B0')  # Purple
        
        fig.add_trace(go.Scatter(
            x=times,
            y=uv_values,
            name='UV Index',
            line=dict(color='#4A90E2', width=3),
            mode='lines+markers',
            marker=dict(size=8, color=uv_colors, line=dict(width=2, color='white')),
            yaxis='y2'
        ))
        
        # Update layout with dual y-axes and better spacing
        fig.update_layout(
            title=dict(
                text=f'24-Hour Weather Forecast: {self.selected_lat:.4f}°, {self.selected_lon:.4f}°<br><sub>{uv_data_source}</sub>',
                font=dict(size=18, color='#2C3E50')
            ),
            height=700,  # Increased height for more space
            xaxis=dict(
                title="Time",
                tickvals=times,
                ticktext=time_labels,
                tickangle=0,  # Keep labels horizontal for better readability
                showgrid=True,
                gridwidth=1,
                gridcolor='rgba(128,128,128,0.2)',
                range=[-1.5, len(times) + 0.5],  # More padding on sides to prevent squishing
                fixedrange=True  # Disable zooming/panning
            ),
            yaxis=dict(
                title=dict(text="Temperature (°F)", font=dict(color='#FF6B6B')),
                side='left',
                tickfont=dict(color='#FF6B6B'),
                showgrid=True,
                gridwidth=1,
                gridcolor='rgba(255,107,107,0.2)',
                fixedrange=True  # Disable zooming/panning
            ),
            yaxis2=dict(
                title=dict(text="UV Index", font=dict(color='#4A90E2')),
                overlaying='y',
                side='right',
                tickfont=dict(color='#4A90E2'),
                range=[0, max(12, max(uv_values) * 1.1) if uv_values else 12],
                fixedrange=True  # Disable zooming/panning
            ),
            plot_bgcolor='rgba(248,249,250,0.8)',
            paper_bgcolor='white',
            showlegend=True,
            legend=dict(
                orientation="h",
                yanchor="bottom",
                y=1.02,
                xanchor="right",
                x=1
            ),
            margin=dict(l=100, r=100, t=100, b=250),  # Increased bottom margin for weather conditions
            dragmode=False,  # Disable all dragging
        )
        
        # Disable hover interactions
        fig.update_traces(hoverinfo='none')
        
        # Add weather conditions as text annotations with better spacing and readability
        for i, (time_idx, condition) in enumerate(zip(times, weather_conditions)):
            if i % 4 == 0:  # Show every 4th condition to avoid overcrowding
                fig.add_annotation(
                    x=time_idx,
                    y=-0.32,  # Further below x-axis to avoid overlap
                    text=f"<b>{condition}</b>",
                    showarrow=False,
                    font=dict(size=11, color='#2C3E50'),
                    xref='x',
                    yref='paper',
                    xanchor='center'
                )
        
        # Add UV risk zones as background colors
        if uv_values:
            fig.add_hrect(y0=0, y1=2, fillcolor="rgba(76,175,80,0.1)", layer="below", line_width=0, yref='y2')
            fig.add_hrect(y0=3, y1=5, fillcolor="rgba(255,193,7,0.1)", layer="below", line_width=0, yref='y2')
            fig.add_hrect(y0=6, y1=7, fillcolor="rgba(255,152,0,0.1)", layer="below", line_width=0, yref='y2')
            fig.add_hrect(y0=8, y1=10, fillcolor="rgba(244,67,54,0.1)", layer="below", line_width=0, yref='y2')
            fig.add_hrect(y0=11, y1=15, fillcolor="rgba(156,39,176,0.1)", layer="below", line_width=0, yref='y2')
        
        # Get comprehensive recommendations
        recommendations = self.get_comprehensive_sunscreen_recommendations(uv_values)
        
        # Format recommendations text
        rec_text = f"""
## 🌤️ Current Conditions
**Current UV Index:** {recommendations['current_uv']} | **Max Today:** {recommendations['max_uv_today']}

*{uv_data_source}*

## {recommendations['risk_level']}

### 🧴 Sunscreen Requirements
{recommendations['spf_recommendation']}

### ⏰ Reapplication Schedule  
{recommendations['reapplication_schedule']}

### 🛡️ Additional Protection
{recommendations['additional_protection']}

### ⚠️ Special Considerations
{recommendations['special_considerations']}

---
*Recommendations based on EPA/WHO UV Index guidelines and dermatological research*
        """
        
        return fig, rec_text

# Initialize the weather app
weather_app = WeatherApp()

# Create Gradio interface with enhanced styling
with gr.Blocks(title="NOAA Weather & UV Index Map", theme=gr.themes.Soft()) as demo:
    gr.Markdown("""
    # 🌤️ NOAA Weather & UV Index Forecast Tool
    
    **Interactive weather forecasting with real-time UV index data and professional-grade protection recommendations**
    
    ### 📍 How to Use:
    1. **Enter coordinates** for any US location or try the examples below
    2. Click **"Get Sunscreen Report"** for real-time NOAA weather data and actual UV index measurements
    3. View the interactive 24-hour forecast with temperature trends and real UV index
    4. Follow the science-based sunscreen recommendations below
    
    *Features real UV index data from CurrentUVIndex.com and NOAA weather data. Weather conditions are displayed below the time axis.*
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("### 🗺️ Location Selection")
            lat_input = gr.Number(
                label="📍 Latitude", 
                value=39.8283, 
                precision=4,
                info="Enter latitude or try examples below"
            )
            lon_input = gr.Number(
                label="📍 Longitude", 
                value=-98.5795, 
                precision=4,
                info="Enter longitude or try examples below"
            )
            
            with gr.Row():
                update_btn = gr.Button("🗺️ Update Location", variant="secondary", size="sm")
                weather_btn = gr.Button("🧴 Get Sunscreen Report", variant="primary", size="lg")
                
            gr.Markdown("### 🏙️ Quick City Selection")
            with gr.Row():
                nyc_btn = gr.Button("🗽 NYC", size="sm")
                la_btn = gr.Button("🌴 LA", size="sm")
                chicago_btn = gr.Button("🏢 Chicago", size="sm")
            with gr.Row():
                miami_btn = gr.Button("🏖️ Miami", size="sm")
                denver_btn = gr.Button("⛰️ Denver", size="sm")
                seattle_btn = gr.Button("🌲 Seattle", size="sm")
            bozeman_btn = gr.Button("🏔️ Bozeman, MT", size="sm", variant="secondary")
                
            gr.Markdown("""
            ### 📍 Manual Coordinates:
            - **NYC**: 40.7128, -74.0060  
            - **LA**: 34.0522, -118.2437
            - **Chicago**: 41.8781, -87.6298  
            - **Miami**: 25.7617, -80.1918
            - **Denver**: 39.7392, -104.9903
            - **Seattle**: 47.6062, -122.3321
            - **Bozeman, MT**: 45.6770, -111.0429
            """)
        
        with gr.Column(scale=2):
            gr.Markdown("### 🗺️ Interactive Map")
            map_html = gr.HTML(
                value=weather_app.create_map(),
                label=""
            )
    
    # Enhanced weather visualization section
    gr.Markdown("## 📊 Weather Forecast & UV Analysis")
    
    with gr.Row():
        with gr.Column(scale=3):
            weather_plot = gr.Plot(
                label="24-Hour Temperature & UV Index Forecast",
                show_label=False
            )
        
        with gr.Column(scale=2):
            gr.Markdown("### ☀️ UV Protection Recommendations")
            recommendations = gr.Markdown(
                value="Click **'Get Sunscreen Report'** to see detailed UV protection recommendations based on current weather conditions.",
                label=""
            )
    
    gr.Markdown("""
    ### 📚 UV Index Reference Guide
    
    | UV Index | Risk Level | Time to Burn* | Action Required |
    |----------|------------|---------------|----------------|
    | 0-2 | 🟢 Low | 60+ min | Basic protection |
    | 3-5 | 🟡 Moderate | 30-45 min | SPF 30+, seek shade |
    | 6-7 | 🟠 High | 15-20 min | SPF 30+, protective clothing |
    | 8-10 | 🔴 Very High | 10-15 min | SPF 50+, minimize exposure |
    | 11+ | 🟣 Extreme | <10 min | SPF 50+, avoid sun 10am-4pm |
    
    *For fair skin types. Darker skin types have longer burn times but still need protection.
    
    **💡 Pro Tips:**
    - Apply sunscreen 15 minutes before sun exposure
    - Use 1 ounce (shot glass amount) for full body coverage  
    - Reapply immediately after swimming, sweating, or towel drying
    - UV rays penetrate clouds - protect even on overcast days
    - Water, sand, and snow reflect UV rays, increasing exposure
    """)
    
    # Event handlers
    update_btn.click(
        fn=weather_app.update_location,
        inputs=[lat_input, lon_input],
        outputs=[map_html, lat_input, lon_input]
    )
    
    # City button event handlers
    nyc_btn.click(
        fn=lambda: weather_app.set_city_coordinates("New York City"),
        outputs=[map_html, lat_input, lon_input]
    )
    la_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Los Angeles"),
        outputs=[map_html, lat_input, lon_input]
    )
    chicago_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Chicago"),
        outputs=[map_html, lat_input, lon_input]
    )
    miami_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Miami"),
        outputs=[map_html, lat_input, lon_input]
    )
    denver_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Denver"),
        outputs=[map_html, lat_input, lon_input]
    )
    seattle_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Seattle"),
        outputs=[map_html, lat_input, lon_input]
    )
    bozeman_btn.click(
        fn=lambda: weather_app.set_city_coordinates("Bozeman, MT"),
        outputs=[map_html, lat_input, lon_input]
    )
    
    weather_btn.click(
        fn=weather_app.create_weather_plot,
        inputs=[],
        outputs=[weather_plot, recommendations]
    )
    
    # Auto-update location when coordinates change
    lat_input.change(
        fn=weather_app.update_location,
        inputs=[lat_input, lon_input],
        outputs=[map_html, lat_input, lon_input]
    )
    
    lon_input.change(
        fn=weather_app.update_location,
        inputs=[lat_input, lon_input],
        outputs=[map_html, lat_input, lon_input]
    )

# Launch the app
if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0", 
        server_port=7860,
        share=True
    )