Update app.py

app.py

@@ -1,18 +1,18 @@
-
 import streamlit as st
 from huggingface_hub import InferenceClient
 import plotly.express as px
 from datetime import datetime
+import os
 
 # ------------------- CONFIG -------------------
-API_KEY = "YOUR_HUGGINGFACE_API_KEY"  # Replace with your Hugging Face token
+API_KEY = os.environ["HF_API_KEY"]  # Hugging Face secret
 MODEL_ID = "duongtruongbinh/smolagents-weather-agent"
 
 client = InferenceClient(API_KEY)
 
+# ------------------- STREAMLIT PAGE -------------------
 st.set_page_config(page_title="Weather Forecast App", page_icon="⛅", layout="wide")
 
-# ------------------- UI -------------------
 mode = st.sidebar.radio("Choose Theme", ["Light", "Dark"])
 if mode == "Dark":
     st.markdown('<style>body {background-color: #0e1117; color: white;}</style>', unsafe_allow_html=True)
@@ -21,15 +21,17 @@ st.title("⛅ Weather Forecasting App")
 st.markdown("Enter a city name to get current weather and a 5-day forecast")
 
 city = st.text_input("🌍 Enter city name", "London")
+
 if city:
     try:
-        response = client(MODEL_ID, {"location": city})  # Correct way
+        response = client(MODEL_ID, {"location": city})  # Correct API call
     except Exception as e:
         st.error(f"API Error: {e}")
     else:
         if "error" in response:
             st.error("City not found or API issue. Try again!")
         else:
+            # Current weather metrics
             st.subheader(f"Current Weather in {city.title()}")
             col1, col2, col3, col4 = st.columns(4)
             with col1:
@@ -43,15 +45,20 @@ if city:
 
             st.write(f"**Condition:** {response['condition']}")
 
+            # 5-day forecast chart
             forecast = response['forecast']
             dates = [datetime.fromisoformat(f['datetime']).strftime("%d %b") for f in forecast]
             temps = [f['temp'] for f in forecast]
 
-            fig = px.line(x=dates, y=temps, labels={"x": "Date", "y": "Temperature (°C)"},
-                          title=f"5-Day Temperature Forecast for {city.title()}")
-            fig.update_layout(plot_bgcolor='rgba(0,0,0,0)', 
-                              paper_bgcolor='rgba(0,0,0,0)' if mode=='Dark' else 'white',
-                              font_color='white' if mode=='Dark' else 'black')
+            fig = px.line(
+                x=dates,
+                y=temps,
+                labels={"x": "Date", "y": "Temperature (°C)"},
+                title=f"5-Day Temperature Forecast for {city.title()}"
+            )
+            fig.update_layout(
+                plot_bgcolor='rgba(0,0,0,0)',
+                paper_bgcolor='rgba(0,0,0,0)' if mode=='Dark' else 'white',
+                font_color='white' if mode=='Dark' else 'black'
+            )
             st.plotly_chart(fig, use_container_width=True)
-
-