Update app.py

app.py

@@ -5,7 +5,6 @@ import pandas as pd
 # OpenWeather API details
 BASE_URL = "http://api.openweathermap.org/data/2.5/forecast?"
 API_KEY = "2682f6801720ebeb43c93ad55c826c5c"
-ICON_URL = "http://openweathermap.org/img/wn/"
 
 def get_weather(city):
     url = f"{BASE_URL}q={city}&appid={API_KEY}&units=metric"
@@ -18,108 +17,86 @@ def get_weather(city):
 
     # Organizing data by date
     for entry in response["list"]:
-        date = entry["dt_txt"].split(" ")[0]
-        time = entry["dt_txt"].split(" ")[1]
-        temp = 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['rain']['3h']} mm" if "rain" in entry and "3h" in entry["rain"] else "0 mm"
-        cloud_cover = f"{entry['clouds']['all']}%"
-        icon = f"{ICON_URL}{entry['weather'][0]['icon']}@2x.png"  # Fetch weather icon
-
+        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, temp, humidity, pressure, wind_speed, rain, cloud_cover, icon])
+        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']}%"
+        ])
 
-    markdown_output = """
-    <h2 style="text-align:center; color: #fff; background: linear-gradient(to right, #667eea, #764ba2); padding: 10px; border-radius: 10px;">
-        📅 5-Day Weather Forecast
-    </h2>
-    """
+    # Formatting output as tables inside boxes
+    markdown_output = "<h2>📅 5-Day Weather Forecast</h2>"
 
     for date, details in weather_info.items():
-        df = pd.DataFrame(details, columns=["Time", "Temperature", "Humidity", "Pressure", "Wind Speed", "Rain", "Cloud Cover", "Icon"])
-        df_html = df.to_html(index=False, escape=False)  # Disable escaping for images
-
-        # Convert "Icon" column to actual images
-        df_html = df_html.replace("&lt;img", "<img").replace("&gt;", ">")  # Fix HTML escaping for images
+        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 class="date-header">📆 {date}</h3>
-            {df_html}
+            <h3>📆 {date}</h3>
+            {table_html}
         </div>
         """
 
     return markdown_output
 
-# **CSS for styling**
+# **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;
-    color: white;
-    font-family: 'Poppins', sans-serif;
+    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;
 }
 .gradio-container {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.6);
     padding: 20px;
     border-radius: 10px;
-    box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.2);
 }
-h1, h2, h3 {
+h1 {
+    color: black;
     text-align: center;
 }
 .weather-box {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.9);
     border-radius: 10px;
     padding: 15px;
     margin-bottom: 10px;
-    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.3);
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 }
-.styled-table {
+table {
     width: 100%;
     border-collapse: collapse;
-    background: #222;
-    color: white;
-    margin-top: 10px;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.2);
+    background: white;
 }
-.styled-table th, .styled-table td {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 10px;
+th, td {
+    border: 1px solid black;
+    padding: 8px;
     text-align: center;
 }
-.styled-table th {
-    background: #4a5568;
-    color: #fff;
-    font-weight: bold;
-}
-.styled-table tbody tr {
-    transition: all 0.3s ease-in-out;
-}
-.styled-table tbody tr:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-.styled-table img {
-    width: 50px;  /* Weather icons size */
-    height: 50px;
+th {
+    background: #4CAF50;
+    color: white;
 }
 """
 
-# **Gradio Interface**
+# Gradio Interface
 iface = gr.Interface(
     fn=get_weather,
     inputs=gr.Textbox(label="🌍 Enter City Name"),
     outputs=gr.HTML(),
-    title="🌤️ Weather Forecast",
+    title="🌤️Climate change model to forecast future weather patterns",
     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
 )
 
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch()