Update app.py

app.py

@@ -348,16 +348,85 @@ def fetch_local_weather():
         temp = current_conditions.get("temp", "N/A")
         condition = current_conditions.get("conditions", "N/A")
         humidity = current_conditions.get("humidity", "N/A")
-        
-        weather_html = f"<h2>Local Weather</h2>"
-        weather_html += f"<p>Temperature: {temp}°C</p>"
-        weather_html += f"<p>Condition: {condition}</p>"
-        weather_html += f"<p>Humidity: {humidity}%</p>"
-        
+
+        weather_html = f"""
+        <div class="weather-theme">
+            <h2 style="font-family: 'Georgia', serif; color: #4CAF50; background-color: #f8f8f8; padding: 10px; border-radius: 10px;">Local Weather</h2>
+            <div class="weather-content">
+                <div class="weather-icon">
+                    <img src="https://www.weatherbit.io/static/img/icons/{get_weather_icon(condition)}.png" alt="{condition}" style="width: 100px; height: 100px;">
+                </div>
+                <div class="weather-details">
+                    <p style="font-family: 'Verdana', sans-serif; color: #333; font-size: 1.2em;">Temperature: {temp}°C</p>
+                    <p style="font-family: 'Verdana', sans-serif; color: #333; font-size: 1.2em;">Condition: {condition}</p>
+                    <p style="font-family: 'Verdana', sans-serif; color: #333; font-size: 1.2em;">Humidity: {humidity}%</p>
+                </div>
+            </div>
+        </div>
+        <style>
+            .weather-theme {
+                animation: backgroundAnimation 10s infinite alternate;
+                border: 1px solid #ddd;
+                border-radius: 10px;
+                padding: 10px;
+                margin-bottom: 15px;
+                background: linear-gradient(45deg, #ffcc33, #ff6666, #ffcc33, #ff6666);
+                background-size: 400% 400%;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                transition: box-shadow 0.3s ease, background-color 0.3s ease;
+            }
+            .weather-theme:hover {
+                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+                background-position: 100% 100%;
+            }
+            @keyframes backgroundAnimation {
+                0% { background-position: 0% 50%; }
+                100% { background-position: 100% 50%; }
+            }
+            .weather-content {
+                display: flex;
+                align-items: center;
+            }
+            .weather-icon {
+                flex: 1;
+            }
+            .weather-details {
+                flex: 3;
+            }
+        </style>
+        """
         return weather_html
     except requests.exceptions.RequestException as e:
         return f"<p>Failed to fetch local weather: {e}</p>"
 
+def get_weather_icon(condition):
+    condition_map = {
+        "Clear": "c01d",
+        "Partly Cloudy": "c02d",
+        "Cloudy": "c03d",
+        "Overcast": "c04d",
+        "Mist": "a01d",
+        "Patchy rain possible": "r01d",
+        "Light rain": "r02d",
+        "Moderate rain": "r03d",
+        "Heavy rain": "r04d",
+        "Snow": "s01d",
+        "Thunderstorm": "t01d",
+        "Fog": "a05d",
+    }
+    return condition_map.get(condition, "c01d")
+
+
+        
+    #     weather_html = f"<h2>Local Weather</h2>"
+    #     weather_html += f"<p>Temperature: {temp}°C</p>"
+    #     weather_html += f"<p>Condition: {condition}</p>"
+    #     weather_html += f"<p>Humidity: {humidity}%</p>"
+        
+    #     return weather_html
+    # except requests.exceptions.RequestException as e:
+    #     return f"<p>Failed to fetch local weather: {e}</p>"
+
 # Voice Control
 import numpy as np
 import torch
@@ -462,8 +531,8 @@ with gr.Blocks(theme='rawrsor1/Everforest') as demo:
             ''')
             chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False)
         
-        # with gr.Column():
-        #     weather_output = gr.HTML(value=fetch_local_weather())
+        with gr.Column():
+            weather_output = gr.HTML(value=fetch_local_weather())
         
         with gr.Column():
             news_output = gr.HTML(value=fetch_local_news())