Update app.py

app.py

@@ -14,7 +14,7 @@ class WeatherApp:
         self.selected_lon = -98.5795
         
     def create_map(self):
-        """Create interactive folium map with click-to-select functionality"""
+        """Create interactive folium map"""
         m = folium.Map(
             location=[self.selected_lat, self.selected_lon],
             zoom_start=4,
@@ -24,42 +24,11 @@ class WeatherApp:
         # 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}<br><i>Click on map to change location</i>",
+            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)
         
-        # Add click functionality with JavaScript
-        click_js = f"""
-        <script>
-        function onMapClick(e) {{
-            // Update the location inputs in Gradio
-            const lat = e.latlng.lat.toFixed(4);
-            const lon = e.latlng.lng.toFixed(4);
-            
-            // Try to find and update the Gradio inputs
-            const latInput = document.querySelector('input[data-testid*="number-input"]');
-            const lonInputs = document.querySelectorAll('input[data-testid*="number-input"]');
-            
-            if (latInput && lonInputs.length >= 2) {{
-                latInput.value = lat;
-                lonInputs[1].value = lon;
-                
-                // Dispatch input events to trigger Gradio updates
-                latInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                lonInputs[1].dispatchEvent(new Event('input', {{ bubbles: true }}));
-            }}
-        }}
-        
-        // Wait for map to be ready then add click listener
-        setTimeout(function() {{
-            if (typeof window.map_{id(m)} !== 'undefined') {{
-                window.map_{id(m)}.on('click', onMapClick);
-            }}
-        }}, 1000);
-        </script>
-        """
-        
-        return m._repr_html_() + click_js
+        return m._repr_html_()
     
     def update_location(self, lat, lon):
         """Update the selected location coordinates"""
@@ -293,19 +262,17 @@ class WeatherApp:
                 gridcolor='rgba(128,128,128,0.2)'
             ),
             yaxis=dict(
-                title="Temperature (°F)",
+                title=dict(text="Temperature (°F)", font=dict(color='#FF6B6B')),
                 side='left',
-                titlefont=dict(color='#FF6B6B'),
                 tickfont=dict(color='#FF6B6B'),
                 showgrid=True,
                 gridwidth=1,
                 gridcolor='rgba(255,107,107,0.2)'
             ),
             yaxis2=dict(
-                title="UV Index",
+                title=dict(text="UV Index", font=dict(color='#4A90E2')),
                 overlaying='y',
                 side='right',
-                titlefont=dict(color='#4A90E2'),
                 tickfont=dict(color='#4A90E2'),
                 range=[0, max(12, max(uv_values) * 1.1)]
             ),
@@ -382,8 +349,8 @@ with gr.Blocks(title="NOAA Weather & UV Index Map", theme=gr.themes.Soft()) as d
     **Interactive weather forecasting with professional-grade UV protection recommendations**
     
     ### 📍 How to Use:
-    1. **Click anywhere on the map** or enter coordinates for any US location
-    2. Click **"Get Weather Forecast"** for real-time NOAA data and UV analysis
+    1. **Enter coordinates** for any US location or try the examples below
+    2. Click **"Get Sunscreen Report"** for real-time NOAA data and UV analysis
     3. View the interactive 24-hour forecast with temperature trends and UV index
     4. Follow the science-based sunscreen recommendations below
     
@@ -397,18 +364,18 @@ with gr.Blocks(title="NOAA Weather & UV Index Map", theme=gr.themes.Soft()) as d
                 label="📍 Latitude", 
                 value=39.8283, 
                 precision=4,
-                info="Click on map or enter manually"
+                info="Enter latitude or try examples below"
             )
             lon_input = gr.Number(
                 label="📍 Longitude", 
                 value=-98.5795, 
                 precision=4,
-                info="Click on map or enter manually"
+                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 Weather Forecast", variant="primary", size="lg")
+                weather_btn = gr.Button("🧴 Get Sunscreen Report", variant="primary", size="lg")
                 
             gr.Markdown("""
             ### 📍 Popular Locations:
@@ -422,7 +389,6 @@ with gr.Blocks(title="NOAA Weather & UV Index Map", theme=gr.themes.Soft()) as d
         
         with gr.Column(scale=2):
             gr.Markdown("### 🗺️ Interactive Map")
-            gr.Markdown("*Click anywhere on the map to select a new location*")
             map_html = gr.HTML(
                 value=weather_app.create_map(),
                 label=""
@@ -441,7 +407,7 @@ with gr.Blocks(title="NOAA Weather & UV Index Map", theme=gr.themes.Soft()) as d
         with gr.Column(scale=2):
             gr.Markdown("### ☀️ UV Protection Recommendations")
             recommendations = gr.Markdown(
-                value="Click **'Get Weather Forecast'** to see detailed sunscreen recommendations based on current UV conditions.",
+                value="Click **'Get Sunscreen Report'** to see detailed UV protection recommendations based on current weather conditions.",
                 label=""
             )