Create app.py

app.py

@@ -0,0 +1,197 @@
+import gradio as gr
+import requests
+from datetime import datetime, timedelta
+import json
+
+def get_weather(city_name):
+    """Fetch weather data for a given city using the provided API key"""
+    if not city_name.strip():
+        city_name = "Dubai"  # Default city
+    
+    try:
+        # Use the provided API key and URL structure
+        api_key = "openweather"
+        url = f"https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid=79007029562c2ab46617d801d8018750&units=metric"
+        
+        response = requests.get(url)
+        data = response.json()
+        
+        if data["cod"] == 200:
+            # Extract weather information
+            city = data["name"]
+            country = data["sys"]["country"]
+            temperature = int(data["main"]["temp"])
+            feels_like = int(data["main"]["feels_like"])
+            humidity = data["main"]["humidity"]
+            pressure = data["main"]["pressure"]
+            description = data["weather"][0]["description"].title()
+            wind_speed = data["wind"]["speed"]
+            visibility = data.get("visibility", 10000) // 1000  # Convert to km
+            
+            # Mock some additional data for the UI
+            rain_chance = f"{humidity//3}%"  # Mock rain chance based on humidity
+            
+            return {
+                "city": city,
+                "country": country,
+                "temperature": temperature,
+                "feels_like": feels_like,
+                "description": description,
+                "humidity": humidity,
+                "pressure": pressure,
+                "wind_speed": wind_speed,
+                "visibility": visibility,
+                "rain_chance": rain_chance
+            }
+        else:
+            return None
+            
+    except Exception as e:
+        return None
+
+def format_weather_display(weather_data):
+    """Format weather data for display"""
+    if not weather_data:
+        return "Sorry, I couldn't find weather information for that city."
+    
+    # Create the main weather display
+    main_display = f"""
+    <div style="text-align: center; margin-bottom: 30px;">
+        <h1 style="font-size: 48px; margin: 0; color: #333; font-weight: 300;">{weather_data['city']}</h1>
+        <div style="display: flex; align-items: center; justify-content: center; margin: 20px 0;">
+            <span style="font-size: 72px; font-weight: 200; color: #333;">{weather_data['temperature']}°C</span>
+        </div>
+        <p style="color: #666; font-size: 18px; margin: 0;">{weather_data['description']}</p>
+    </div>
+    """
+    
+    # Create weather details grid
+    details_grid = f"""
+<div>
+    <h3 style="color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;">WEATHER DETAILS</h3>
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Chance of rain</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['rain_chance']}</div>
+            <div style="font-size: 16px; margin-top: 5px;">💧</div>
+        </div>
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Pressure</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['pressure']} mb</div>
+            <div style="font-size: 16px; margin-top: 5px;">📊</div>
+        </div>
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Wind</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['wind_speed']} km/h</div>
+            <div style="font-size: 16px; margin-top: 5px;">💨</div>
+        </div>
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Feels like</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['feels_like']}°C</div>
+            <div style="font-size: 16px; margin-top: 5px;">🌡️</div>
+        </div>
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Visibility</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['visibility']} km</div>
+            <div style="font-size: 16px; margin-top: 5px;">👁️</div>
+        </div>
+        <div style="text-align: center; padding: 15px; background: rgba(255,255,255,0.5); border-radius: 12px;">
+            <div style="color: #666; font-size: 12px; margin-bottom: 5px;">Humidity</div>
+            <div style="font-size: 18px; font-weight: 500; color: #333;">{weather_data['humidity']}%</div>
+            <div style="font-size: 16px; margin-top: 5px;">💧</div>
+        </div>
+    </div>
+</div>
+"""
+    
+    return main_display + details_grid
+
+def search_weather(city_name):
+    """Search for weather and format the display"""
+    weather_data = get_weather(city_name)
+    return format_weather_display(weather_data)
+
+# Custom CSS for the purple gradient background and card styling
+custom_css = """
+body, .gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    min-height: 100vh;
+}
+
+.main-container {
+    background: white !important;
+    border-radius: 24px !important;
+    padding: 40px !important;
+    margin: 40px auto !important;
+    max-width: 900px !important;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
+}
+
+.search-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    margin-bottom: 30px !important;
+}
+
+.app-title {
+    font-size: 20px !important;
+    font-weight: 600 !important;
+    color: #333 !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+.search-input {
+    flex: 1 !important;
+    margin: 0 20px !important;
+    border-radius: 12px !important;
+    border: 1px solid #e0e0e0 !important;
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+}
+
+#weather_display {
+    border: none !important;
+    background: transparent !important;
+}
+"""
+
+# Create the Gradio interface
+with gr.Blocks(css=custom_css, title="Shafaq's Weather App") as app:
+    with gr.Column(elem_classes=["main-container"]):
+        # Header
+        with gr.Row(elem_classes=["search-container"]):
+            gr.HTML('<div class="app-title">🌤️ Shafaq\'s Weather App</div>')
+            city_input = gr.Textbox(
+                placeholder="Search for cities",
+                show_label=False,
+                elem_classes=["search-input"],
+                value="Dubai"
+            )
+        
+        # Weather display
+        weather_display = gr.HTML(
+            value="",
+            elem_id="weather_display"
+        )
+    
+    # Load Dubai weather on startup
+    app.load(
+        fn=search_weather,
+        inputs=gr.Textbox(value="Dubai", visible=False),
+        outputs=weather_display
+    )
+    
+    # Search functionality
+    city_input.submit(
+        fn=search_weather,
+        inputs=city_input,
+        outputs=weather_display
+    )
+
+# Launch the app
+if __name__ == "__main__":
+    print("🌤️ Starting Shafaq's Weather App...")
+    print("🏙️ Default city: Dubai")
+    app.launch()