Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import requests | |
| import os | |
| from datetime import datetime | |
| API_KEY = os.getenv("OPENWEATHER_API_KEYY") | |
| BASE_URL = "http://api.openweathermap.org/data/2.5/weather" | |
| def get_weather(city): | |
| try: | |
| if not API_KEY: | |
| raise ValueError("API key not configured") | |
| params = { | |
| "q": city, | |
| "appid": API_KEY, | |
| "units": "metric" | |
| } | |
| res = requests.get(BASE_URL, params=params, timeout=10) | |
| res.raise_for_status() | |
| data = res.json() | |
| temp = data["main"]["temp"] | |
| condition = data["weather"][0]["description"].capitalize() | |
| humidity = data["main"]["humidity"] | |
| wind_speed = data.get("wind", {}).get("speed", 0) | |
| # Weather icon mapping | |
| weather_id = data["weather"][0]["icon"] | |
| icon_map = { | |
| "01d": "☀️", "01n": "🌙", "02d": "⛅", "02n": "⛅", | |
| "03d": "☁️", "03n": "☁️", "04d": "☁️", "04n": "☁️", | |
| "09d": "🌧️", "09n": "🌧️", "10d": "🌦️", "10n": "🌦️", | |
| "11d": "⛈️", "11n": "⛈️", "13d": "🌨️", "13n": "🌨️", | |
| "50d": "🌫️", "50n": "🌫️" | |
| } | |
| icon = icon_map.get(weather_id, "🌤️") | |
| # Generate hourly forecast (text only) | |
| hourly = [ | |
| f"{datetime.now().strftime('%H:%M')} → {round(temp + (i - 2))}°C" | |
| for i in range(6) | |
| ] | |
| return temp, condition, humidity, wind_speed, icon, hourly, city | |
| except Exception as e: | |
| return f"Error: {str(e)}", "", "", "", "❌", [], city | |
| def create_weather_display(temp, condition, humidity, wind_speed, icon, hourly, city): | |
| """Create beautiful weather display HTML with added classes for responsiveness""" | |
| if isinstance(temp, str) and "Error" in temp: | |
| # Error case | |
| return f""" | |
| <div class="weather-main" style=" | |
| background: linear-gradient(135deg, #2b2b2b 0%, #3a3a3a 100%); | |
| padding: 40px; | |
| border-radius: 24px; | |
| box-shadow: 0 0 40px rgba(203,77,11,0.2); | |
| color: white; | |
| font-family: 'Inter', 'SF Pro Display', sans-serif; | |
| text-align: center; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| "> | |
| <div style="font-size: 80px; margin-bottom: 20px;">❌</div> | |
| <h2 style="color: rgb(203,77,11); margin: 0;">{temp}</h2> | |
| <p style="color: #ccc; margin-top: 10px;">Please check your city name and API key</p> | |
| </div> | |
| """ | |
| # Format temperature | |
| temp_display = f"{round(temp)}" if isinstance(temp, (int, float)) else temp | |
| # Create main weather display with classes | |
| main_display = f""" | |
| <div class="weather-main" style=" | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); | |
| padding: 48px; | |
| border-radius: 24px; | |
| box-shadow: 0 0 50px rgba(203,77,11,0.15), 0 20px 40px rgba(0,0,0,0.3); | |
| color: white; | |
| font-family: 'Inter', 'SF Pro Display', sans-serif; | |
| margin: 24px 0; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| backdrop-filter: blur(20px); | |
| "> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px;"> | |
| <h2 style="color: rgb(203,77,11); font-size: 32px; margin: 0; font-weight: 700; letter-spacing: -0.5px;"> | |
| 🌦 Weather Wizard | |
| </h2> | |
| <div style=" | |
| color: white; | |
| font-size: 28px; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, rgba(203,77,11,0.2) 0%, rgba(255,140,60,0.1) 100%); | |
| padding: 12px 24px; | |
| border-radius: 16px; | |
| border: 1px solid rgba(203,77,11,0.3); | |
| "> | |
| 📍 {city.title()} | |
| </div> | |
| </div> | |
| <div class="weather-flex" style="display: flex; justify-content: space-between; align-items: center;"> | |
| <div style="flex: 1;"> | |
| <h1 style=" | |
| font-size: 84px; | |
| margin: 0; | |
| font-weight: 200; | |
| background: linear-gradient(135deg, white 0%, rgba(203,77,11,0.8) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -2px; | |
| ">{temp_display}°C</h1> | |
| <p style="font-size: 28px; margin: 12px 0 0 0; color: #e0e0e0; font-weight: 500;">{condition}</p> | |
| <div style="margin-top: 32px; display: flex; gap: 48px; font-size: 20px;"> | |
| <div style=" | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: rgba(203,77,11,0.1); | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| "> | |
| <span style="font-size: 24px;">💨</span> | |
| <span style="font-weight: 600;">{wind_speed} m/s</span> | |
| </div> | |
| <div style=" | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: rgba(203,77,11,0.1); | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| "> | |
| <span style="font-size: 24px;">💧</span> | |
| <span style="font-weight: 600;">{humidity}%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="flex: 1; text-align: center;"> | |
| <div class="weather-icon" style=" | |
| font-size: 140px; | |
| margin: 20px 0; | |
| filter: drop-shadow(0 0 20px rgba(203,77,11,0.3)); | |
| ">{icon}</div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| # Create hourly forecast with classes | |
| hourly_html = "" | |
| if hourly: | |
| hourly_items = "" | |
| for forecast in hourly: | |
| # Extract temp and time from the format "HH:MM → XXX°C" | |
| parts = forecast.split(' → ') | |
| time_part = parts[0] if len(parts) > 0 else "" | |
| temp_part = parts[1].replace('°C', '°') if len(parts) > 1 else "" | |
| hourly_items += f""" | |
| <div style=" | |
| text-align: center; | |
| flex: 1; | |
| padding: 20px 10px; | |
| background: linear-gradient(135deg, rgba(203,77,11,0.1) 0%, rgba(255,140,60,0.05) 100%); | |
| border-radius: 16px; | |
| margin: 0 4px; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| "> | |
| <div style=" | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| color: white; | |
| background: linear-gradient(135deg, white 0%, rgb(203,77,11) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| "> | |
| {temp_part} | |
| </div> | |
| <div style="font-size: 16px; color: #ccc; font-weight: 500;"> | |
| {time_part} | |
| </div> | |
| </div> | |
| """ | |
| hourly_html = f""" | |
| <div class="hourly-forecast" style=" | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); | |
| padding: 36px; | |
| border-radius: 24px; | |
| box-shadow: 0 0 50px rgba(203,77,11,0.15), 0 20px 40px rgba(0,0,0,0.3); | |
| color: white; | |
| font-family: 'Inter', 'SF Pro Display', sans-serif; | |
| margin-top: 24px; | |
| border: 1px solid rgba(203,77,11,0.2); | |
| backdrop-filter: blur(20px); | |
| "> | |
| <h3 style=" | |
| margin: 0 0 24px 0; | |
| color: rgb(203,77,11); | |
| font-size: 24px; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| ">📊 Hourly Forecast</h3> | |
| <div class="hourly-items" style="display: flex; gap: 8px; justify-content: space-between;"> | |
| {hourly_items} | |
| </div> | |
| </div> | |
| """ | |
| return main_display + hourly_html | |
| # Custom CSS with media queries for responsiveness | |
| custom_css = """ | |
| body, .gradio-container { | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important; | |
| color: white !important; | |
| font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important; | |
| } | |
| /* Modern search bar styling */ | |
| .search-container input { | |
| background: linear-gradient(135deg, rgba(203,77,11,0.1) 0%, rgba(255,140,60,0.05) 100%) !important; | |
| color: white !important; | |
| border: 2px solid rgba(203,77,11,0.3) !important; | |
| border-radius: 16px !important; | |
| padding: 16px 24px !important; | |
| font-size: 18px !important; | |
| font-weight: 500 !important; | |
| backdrop-filter: blur(10px) !important; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| box-shadow: 0 8px 32px rgba(203,77,11,0.1) !important; | |
| } | |
| .search-container input:focus { | |
| border-color: rgb(203,77,11) !important; | |
| box-shadow: 0 0 0 4px rgba(203,77,11,0.2), 0 12px 40px rgba(203,77,11,0.15) !important; | |
| background: linear-gradient(135deg, rgba(203,77,11,0.15) 0%, rgba(255,140,60,0.08) 100%) !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| .search-container input::placeholder { | |
| color: rgba(255,255,255,0.6) !important; | |
| font-weight: 400 !important; | |
| } | |
| /* 2025 Modern Button */ | |
| .modern-button { | |
| background: linear-gradient(135deg, rgb(203,77,11) 0%, #ff6b35 100%) !important; | |
| border: none !important; | |
| padding: 16px 32px !important; | |
| border-radius: 16px !important; | |
| font-weight: 600 !important; | |
| font-size: 16px !important; | |
| letter-spacing: 0.5px !important; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| box-shadow: 0 8px 32px rgba(203,77,11,0.25) !important; | |
| position: relative !important; | |
| overflow: hidden !important; | |
| color: white !important; | |
| } | |
| .modern-button:hover { | |
| transform: translateY(-3px) !important; | |
| box-shadow: 0 16px 40px rgba(203,77,11,0.4) !important; | |
| background: linear-gradient(135deg, #e8550d 0%, #ff7c47 100%) !important; | |
| } | |
| .modern-button:active { | |
| transform: translateY(-1px) !important; | |
| } | |
| .gradio-html { | |
| background: transparent !important; | |
| } | |
| /* Enhanced container styling */ | |
| .gradio-container { | |
| background: radial-gradient(ellipse at top, rgba(203,77,11,0.1) 0%, transparent 70%) !important; | |
| } | |
| /* Media queries for mobile responsiveness */ | |
| @media (max-width: 768px) { | |
| .header { | |
| padding: 16px !important; | |
| } | |
| .header h1 { | |
| font-size: 28px !important; | |
| } | |
| .header p { | |
| font-size: 16px !important; | |
| } | |
| .search-container input { | |
| padding: 12px 16px !important; | |
| font-size: 16px !important; | |
| } | |
| .modern-button { | |
| padding: 12px 24px !important; | |
| font-size: 14px !important; | |
| } | |
| .weather-main { | |
| padding: 24px !important; | |
| } | |
| .weather-flex { | |
| flex-direction: column !important; | |
| } | |
| .weather-flex > div { | |
| width: 100% !important; | |
| text-align: center !important; | |
| } | |
| .weather-main h1 { | |
| font-size: 48px !important; | |
| } | |
| .weather-main p { | |
| font-size: 20px !important; | |
| } | |
| .weather-icon { | |
| font-size: 100px !important; | |
| margin: 20px 0 !important; | |
| } | |
| .hourly-forecast { | |
| padding: 24px !important; | |
| } | |
| .hourly-items { | |
| overflow-x: auto !important; | |
| flex-wrap: nowrap !important; | |
| } | |
| .hourly-items > div { | |
| min-width: 100px !important; | |
| margin: 0 4px !important; | |
| } | |
| } | |
| """ | |
| # Create Gradio interface | |
| with gr.Blocks(css=custom_css, title="Weather Wizard", theme=gr.themes.Glass()) as app: | |
| gr.HTML(""" | |
| <div class="header" style=" | |
| text-align: center; | |
| padding: 32px; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); | |
| border-bottom: 1px solid rgba(203,77,11,0.2); | |
| "> | |
| <h1 style=" | |
| color: rgb(203,77,11); | |
| font-size: 42px; | |
| margin: 0; | |
| font-family: 'Inter', 'SF Pro Display', sans-serif; | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| background: linear-gradient(135deg, rgb(203,77,11) 0%, #ff8c3c 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| "> | |
| 🌦️ Weather Wizard | |
| </h1> | |
| <p style=" | |
| color: rgba(255,255,255,0.7); | |
| font-size: 20px; | |
| margin: 12px 0 0 0; | |
| font-weight: 400; | |
| letter-spacing: 0.5px; | |
| "> | |
| AI-powered weather forecasts for the modern world | |
| </p> | |
| </div> | |
| """) | |
| with gr.Column(elem_classes=["search-section"]): | |
| city = gr.Textbox( | |
| label="", | |
| placeholder="Search any city worldwide... (e.g. New York, Tokyo, London)", | |
| container=False, | |
| elem_classes=["search-container"], | |
| show_label=False | |
| ) | |
| btn = gr.Button( | |
| "✨ Discover Weather", | |
| variant="primary", | |
| size="lg", | |
| elem_classes=["modern-button"] | |
| ) | |
| # Weather Display | |
| weather_display = gr.HTML() | |
| def update_weather_display(city): | |
| if not city.strip(): | |
| city = "London" # Default city | |
| temp, condition, humidity, wind_speed, icon, hourly, city_name = get_weather(city.strip()) | |
| weather_html = create_weather_display(temp, condition, humidity, wind_speed, icon, hourly, city_name) | |
| return weather_html | |
| # Event handlers | |
| btn.click( | |
| fn=update_weather_display, | |
| inputs=city, | |
| outputs=weather_display | |
| ) | |
| city.submit( | |
| fn=update_weather_display, | |
| inputs=city, | |
| outputs=weather_display | |
| ) | |
| # Load default weather on startup | |
| app.load( | |
| fn=lambda: update_weather_display("London"), | |
| outputs=weather_display | |
| ) | |
| if __name__ == "__main__": | |
| app.launch() |