Update app.py

app.py

@@ -1,55 +1,62 @@
 import requests
 import gradio as gr
-from datetime import datetime
+import pandas as pd
 
 # OpenWeather API details
 BASE_URL = "http://api.openweathermap.org/data/2.5/forecast?"
 API_KEY = "2682f6801720ebeb43c93ad55c826c5c"
-DAYS = 5  # Free API allows only 5 days
 
 def get_weather(city):
     url = f"{BASE_URL}q={city}&appid={API_KEY}&units=metric"
     response = requests.get(url).json()
 
-    # Error handling
     if response.get("cod") != "200":
         return "❌ **Invalid city name! Please enter a correct city.**"
 
     weather_info = {}
 
-    # Extracting one data point per day
+    # Organizing data by date
     for entry in response["list"]:
-        date = entry["dt_txt"].split(" ")[0]  # Extract only the date part
-        if date not in weather_info:  # Store only one entry per day
-            weather_info[date] = {
-                "Temperature": f"{entry['main']['temp']}°C",
-                "Humidity": f"{entry['main']['humidity']}%",
-                "Pressure": f"{entry['main']['pressure']} hPa",
-                "Wind Speed": f"{entry['wind']['speed']} m/s",
-                "Rain": f"{entry.get('rain', {}).get('3h', 0)} mm",
-                "Cloud Cover": f"{entry['clouds']['all']}%"  # Extracting cloud data
-            }
+        date = entry["dt_txt"].split(" ")[0]  # Extract only the date
+        time = entry["dt_txt"].split(" ")[1]  # Extract only the time
+        if date not in weather_info:
+            weather_info[date] = []
+        
+        weather_info[date].append([
+            time,
+            f"{entry['main']['temp']}°C",
+            f"{entry['main']['humidity']}%",
+            f"{entry['main']['pressure']} hPa",
+            f"{entry['wind']['speed']} m/s",
+            f"{entry['rain']['3h']} mm" if "rain" in entry and "3h" in entry["rain"] else "0 mm",
+            f"{entry['clouds']['all']}%"
+        ])
 
-    # Format output as a Markdown table with bold values
-    markdown_output = "**📅 5-Day Weather Forecast**\n\n"
-    markdown_output += "<style>table { width: 100%; white-space: nowrap; }</style>\n"  # Prevent word wrap
-    markdown_output += "| **Date** | **Temperature** | **Humidity** | **Pressure** | **Wind Speed** | **Rain** | **Cloud Cover** |\n"
-    markdown_output += "|------------|------------|----------|----------|------------|------|-------------|\n"
+    # Formatting output as tables inside boxes
+    markdown_output = "<h2>📅 5-Day Weather Forecast</h2>"
 
     for date, details in weather_info.items():
-        markdown_output += f"| **{date}** | **{details['Temperature']}** | **{details['Humidity']}** | **{details['Pressure']}** | **{details['Wind Speed']}** | **{details['Rain']}** | **{details['Cloud Cover']}** |\n"
+        df = pd.DataFrame(details, columns=["Time", "Temperature", "Humidity", "Pressure", "Wind Speed", "Rain", "Cloud Cover"])
+        table_html = df.to_html(index=False)
+
+        markdown_output += f"""
+        <div class='weather-box'>
+            <h3>📆 {date}</h3>
+            {table_html}
+        </div>
+        """
 
     return markdown_output
 
-# **Adding Background Image**
+# **Adding Background Image and Box Styling**
 custom_css = """
 body {
     background: url('https://images.unsplash.com/photo-1548337138-e87d889cc369?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D.jpg') no-repeat center center fixed;
     background-size: cover;
-    color: black;  /* Set text to black */
+    color: black;
 }
 .gradio-container {
-    background: rgba(255, 255, 255, 0.6); /* Light overlay for readability */
+    background: rgba(255, 255, 255, 0.6);
     padding: 20px;
     border-radius: 10px;
 }
@@ -57,15 +64,36 @@ h1 {
     color: black;
     text-align: center;
 }
+.weather-box {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    padding: 15px;
+    margin-bottom: 10px;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+}
+th, td {
+    border: 1px solid black;
+    padding: 8px;
+    text-align: center;
+}
+th {
+    background: #4CAF50;
+    color: white;
+}
 """
 
 # Gradio Interface
 iface = gr.Interface(
     fn=get_weather,
     inputs=gr.Textbox(label="🌍 Enter City Name"),
-    outputs=gr.Markdown(),
-    title="🌤️Climate change model to forecast future weather patterns",
-    description="Enter a city name to get temperature, humidity, pressure, wind speed, rain, and cloud cover for the next **5 days**.",
+    outputs=gr.HTML(),
+    title="🌤️ Weather Forecast",
+    description="Enter a city name to get **temperature, humidity, wind speed, and cloud cover** for the next **5 days** (grouped by date).",
     theme="default",
     css=custom_css
 )