Create app.py

app.py

@@ -0,0 +1,520 @@
+import os
+import gradio as gr
+import requests
+import openai
+
+# 🔐 Load API keys from environment variables (set these in Hugging Face Secrets)
+weather_api_key = os.getenv("OPENWEATHER_API_KEY")
+groq_api_key = os.getenv("GROQ_API_KEY")
+openai.api_key = os.getenv("OPENAI_API_KEY")
+serper_api_key = os.getenv("SERPER_API_KEY")
+
+# 🌤️ Weather Fetch
+def get_weather(city_name):
+    if not city_name.strip():
+        city_name = "Dubai"
+    try:
+        url = f"https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={weather_api_key}&units=metric"
+        data = requests.get(url).json()
+
+        if data["cod"] == 200:
+            rain = data.get("rain", {}).get("1h", 0)
+            condition = data["weather"][0]["main"]
+            emoji_map = {
+                "Clear": "☀️", "Clouds": "☁️", "Rain": "🌧️",
+                "Snow": "❄️", "Thunderstorm": "⛈️", "Drizzle": "🌦️",
+                "Mist": "🌫️", "Haze": "🌁", "Fog": "🌫️"
+            }
+            emoji = emoji_map.get(condition, "🌈")
+
+            return {
+                "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": f"{data['weather'][0]['description'].title()} {emoji}",
+                "wind_speed": data["wind"]["speed"],
+                "visibility": data.get("visibility", 10000) // 1000,
+                "rain_chance": f"{rain} mm"
+            }
+        else:
+            return None
+    except:
+        return None
+
+# 🖼️ Format Weather Display
+def format_weather_display(data):
+    if not data:
+        return "<div style='text-align:center; color: #e74c3c; font-size: 18px; padding: 40px;'>❌ City not found. Please try again.</div>"
+
+    font_color = "#2d3436"
+    card_bg = "#e8f5e9"
+    main_bg = "#ffffff"
+
+    return f"""
+    <div style="background: {main_bg}; border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
+        <div style="text-align: center; margin-bottom: 25px;">
+            <h2 style="margin: 0; color: {font_color}; font-size: 24px; font-weight: 600;">📍 {data['city']}, {data['country']}</h2>
+            <h1 style="margin: 10px 0; font-size: 64px; color: {font_color}; font-weight: 300;">{data['temperature']}°C</h1>
+            <p style="margin: 5px 0; color: {font_color}; font-size: 18px; font-weight: 500;">{data['description']}</p>
+        </div>
+
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 25px;">
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">💧</div>
+                <strong style="font-size: 16px; display: block;">{data['rain_chance']}</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Precipitation</span>
+            </div>
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">📊</div>
+                <strong style="font-size: 16px; display: block;">{data['pressure']} mb</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Pressure</span>
+            </div>
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">💨</div>
+                <strong style="font-size: 16px; display: block;">{data['wind_speed']} km/h</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Wind Speed</span>
+            </div>
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">🌡️</div>
+                <strong style="font-size: 16px; display: block;">{data['feels_like']}°C</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Feels Like</span>
+            </div>
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">👁️</div>
+                <strong style="font-size: 16px; display: block;">{data['visibility']} km</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Visibility</span>
+            </div>
+            <div style="background: {card_bg}; border-radius: 12px; padding: 16px; text-align: center; color: {font_color};">
+                <div style="font-size: 24px; margin-bottom: 8px;">💦</div>
+                <strong style="font-size: 16px; display: block;">{data['humidity']}%</strong>
+                <span style="font-size: 12px; opacity: 0.8;">Humidity</span>
+            </div>
+        </div>
+    </div>
+    """
+
+# 🌾 Farming Assistant Chatbot (Groq API)
+def agri_chat(msg, history):
+    prompt = f"You're a smart farming assistant. Help the farmer clearly and briefly.\nUser: {msg}\nAssistant:"
+    url = "https://api.groq.com/openai/v1/chat/completions"
+    headers = {"Authorization": f"Bearer {groq_api_key}", "Content-Type": "application/json"}
+    body = {
+        "model": "llama3-8b-8192",
+        "messages": [{"role": "user", "content": prompt}],
+        "temperature": 0.7
+    }
+    try:
+        res = requests.post(url, headers=headers, json=body).json()
+        reply = res["choices"][0]["message"]["content"]
+    except:
+        reply = "⚠️ Unable to get response. Try again."
+    history.append({"role": "user", "content": msg})
+    history.append({"role": "assistant", "content": reply})
+    return history, history
+
+# 🌱 Crop Search (OpenAI)
+def search_crop(crop_name):
+    try:
+        messages = [
+            {
+                "role": "system",
+                "content": (
+                    "You are an expert agronomist. When asked about a crop, provide the following in well-structured HTML:\n\n"
+                    "1. A short paragraph (3–5 sentences) about the crop, including where it's commonly grown and its basic growing needs.\n"
+                    "2. A bullet list of 3–5 benefits of growing or consuming the crop.\n"
+                    "3. A numbered list (5–7 steps) explaining how to grow this crop from seed to harvest.\n\n"
+                    "Use proper HTML structure with <h3>, <p>, <ul>, <ol>, <li> tags."
+                )
+            },
+            {
+                "role": "user",
+                "content": f"Tell me about {crop_name}. Include a short paragraph, key benefits, and growing steps."
+            }
+        ]
+
+        response = openai.chat.completions.create(
+            model="gpt-3.5-turbo",
+            messages=messages
+        )
+
+        return response.choices[0].message.content.strip()
+
+    except Exception as e:
+        return f"<div style='color:red;'>⚠️ Error fetching crop info: {str(e)}</div>"
+
+
+# 🌱 Fetch best crops based on region using OpenAI
+def get_best_crops_for_region(city, country, temp, humidity, description):
+    try:
+        messages = [
+            {
+                "role": "system",
+                "content": (
+                    "You are an expert agronomist. Based on the region, temperature, humidity, and weather condition, "
+                    "suggest 6 to 9 crops that grow best in this region. Return each crop as a Python tuple like:\n"
+                    "(\"Tomato\", \"Needs warm weather, full sun, and well-drained soil.\")"
+                )
+            },
+            {
+                "role": "user",
+                "content": (
+                    f"Suggest best crops for {city}, {country} where the average temperature is {temp}°C, "
+                    f"humidity is {humidity}%, and the weather condition is '{description.lower()}'. "
+                    "Output the results as Python tuples."
+                )
+            }
+        ]
+
+        response = openai.chat.completions.create(
+            model="gpt-3.5-turbo",
+            messages=messages
+        )
+
+        content = response.choices[0].message.content.strip()
+
+        crops = []
+        for line in content.split('\n'):
+            line = line.strip().rstrip(',')
+            if line.startswith('(') and line.endswith(')'):
+                try:
+                    crop_tuple = eval(line)
+                    if isinstance(crop_tuple, tuple) and len(crop_tuple) == 2:
+                        crops.append(crop_tuple)
+                except:
+                    continue
+        return crops if crops else [("⚠️ No Crops Found", "Try a different city or adjust your weather input.")]
+
+    except Exception as e:
+        return [("⚠️ Error", f"Could not fetch crops: {str(e)}")]
+
+# 🎨 Format each crop card for the grid layout
+def format_crop_card(name, details):
+    return f"""
+    <div class='crop-card'>
+        <div class='crop-name'>{name.title()}</div>
+        <div class='crop-description'>{details}</div>
+    </div>
+    """
+
+
+# Launch UI with layout from old code + crop cards and search
+custom_css = """
+body, .gradio-container {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    font-family: 'Segoe UI', 'Roboto', sans-serif;
+    min-height: 100vh;
+}
+#main-title {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: #2e7d32;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+#subtitle {
+    text-align: center;
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 30px;
+    font-weight: 400;
+}
+.section-header {
+    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 12px 12px 0 0;
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3);
+}
+.content-box {
+    background-color: #ffffff;
+    border-radius: 0 0 16px 16px;
+    padding: 25px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    min-height: 520px;
+    border-top: 3px solid #43a047;
+}
+.weather-controls {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    border: 1px solid #e9ecef;
+}
+.footer {
+    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
+    color: white;
+    padding: 30px;
+    border-radius: 16px;
+    margin-top: 30px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+.footer h3 {
+    margin: 0 0 15px 0;
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #ffffff;
+}
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 25px;
+    margin-bottom: 20px;
+}
+.footer-section {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+}
+.footer-section h4 {
+    margin: 0 0 10px 0;
+    color: #a8e6cf;
+    font-size: 1.1rem;
+}
+.footer-section ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.footer-section li {
+    margin: 8px 0;
+    padding-left: 20px;
+    position: relative;
+}
+.footer-section li:before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: #a8e6cf;
+    font-weight: bold;
+}
+button {
+    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%) !important;
+    color: white !important;
+    border-radius: 10px !important;
+    border: none !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3) !important;
+}
+button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.4) !important;
+}
+.gradio-textbox input {
+    border-radius: 10px !important;
+    border: 2px solid #e9ecef !important;
+    padding: 12px 16px !important;
+    font-size: 16px !important;
+    transition: all 0.3s ease !important;
+}
+.gradio-textbox input:focus {
+    border-color: #43a047 !important;
+    box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.1) !important;
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 18px;
+    margin-top: 25px;
+}
+
+.crop-card {
+    background: #ffffff;
+    border: 1px solid #c8e6c9;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(67, 160, 71, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.crop-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(67, 160, 71, 0.2);
+}
+.crop-name {
+    font-size: 20px;
+    font-weight: 600;
+    color: #2e7d32;
+    margin-bottom: 12px;
+    text-align: center;
+}
+.crop-description {
+    font-size: 15px;
+    color: #444;
+    line-height: 1.5;
+    text-align: center;
+}
+
+"""
+
+def launch_ui():
+    with gr.Blocks(css=custom_css, title="Shafaq's AgriWeather") as demo:
+        # Header Section
+        gr.Markdown("<div id='main-title'>🌿 Shafaq's AgriWeather Hub</div>")
+        gr.Markdown("<div id='subtitle'>Real-time Weather Data & Smart Farming Assistant</div>")
+
+        # Main Content
+        with gr.Row(equal_height=True):
+            # Weather Section
+            with gr.Column(scale=1):
+                gr.Markdown("<div class='section-header'>🌤️ Weather Dashboard</div>")
+                with gr.Group(elem_classes="content-box"):
+                    with gr.Group(elem_classes="weather-controls"):
+                        city_input = gr.Textbox(
+                            label="🏙️ City Name",
+                            value="Dubai",
+                            placeholder="Enter city name (e.g., Dubai, London, Tokyo)",
+                            info="Get real-time weather data for any city worldwide"
+                        )
+                        update_btn = gr.Button("📍 Get Weather Data", variant="primary")
+                    weather_html = gr.HTML()
+
+            # Chat Section
+            with gr.Column(scale=1):
+                gr.Markdown("<div class='section-header'>🌾 AgriBot Assistant</div>")
+                with gr.Group(elem_classes="content-box"):
+                    chat = gr.Chatbot(
+                        height=350,
+                        type="messages",
+                        show_label=False,
+                        bubble_full_width=False,
+                        avatar_images=("👨‍🌾", "🤖")
+                    )
+                    with gr.Row():
+                        message = gr.Textbox(
+                            placeholder="Ask about crops, weather impact, farming tips...",
+                            show_label=False,
+                            scale=4
+                        )
+                        ask_btn = gr.Button("Send", variant="primary", scale=1)
+                    # Quick suggestions
+                    gr.Markdown("""
+                    **💡 Quick Questions:**
+                    - "What crops grow best in hot weather?"
+                    - "How does humidity affect plant growth?"
+                    - "Best irrigation practices for dry season?"
+                    """)
+
+                    state = gr.State([])
+
+        # --- Dynamic Crop Cards Section ---
+        gr.Markdown("<div class='section-header'>🌿 Crops That Grow Best in Your Region</div>")
+        crop_cards_html = gr.HTML()
+
+        def generate_crop_cards(city):
+            weather = get_weather(city)
+            if not weather:
+                return "<div style='padding:20px; color:red;'>⚠️ Couldn't fetch crops due to missing weather data.</div>"
+
+            crops = get_best_crops_for_region(
+                city=weather["city"],
+                country=weather["country"],
+                temp=weather["temperature"],
+                humidity=weather["humidity"],
+                description=weather["description"]
+            )
+            return "<div class='card-grid'>" + "".join(format_crop_card(name, details) for name, details in crops) + "</div>"
+
+
+        # --- Crop search section ---
+        gr.Markdown("<div class='section-header'>🔎 Search for Crop Growing Conditions</div>")
+        with gr.Group(elem_classes="content-box"):
+            with gr.Row():
+                crop_search_input = gr.Textbox(
+                    placeholder="Type a crop name (e.g., Tomato, Wheat)...",
+                    show_label=False,
+                    scale=5
+                )
+                crop_search_btn = gr.Button("🔍 Search", variant="primary", scale=1)
+            crop_search_output = gr.HTML()
+
+
+
+        # Footer Section (fixed)
+        gr.HTML("""
+        <div class='footer'>
+            <h3>🌱 About Shafaq's AgriWeather Hub</h3>
+            <div class='footer-content'>
+                <div class='footer-section'>
+                    <h4>🌤️ Weather Features</h4>
+                    <ul>
+                        <li>Real-time weather updates for any city</li>
+                        <li>Detailed forecasts: temperature, wind, humidity, etc.</li>
+                        <li>Smart visual indicators with icons</li>
+                        <li>Location-based crop recommendations</li>
+                    </ul>
+                </div>
+
+                <div class='footer-section'>
+                    <h4>🤖 AgriBot Capabilities</h4>
+                    <ul>
+                        <li>Ask farming-related questions interactively</li>
+                        <li>Get irrigation, soil & seasonal guidance</li>
+                        <li>Pest, disease & crop management tips</li>
+                        <li>Uses advanced AI (Groq + OpenAI)</li>
+                    </ul>
+                </div>
+
+                <div class='footer-section'>
+                    <h4>🔎 Crop Search Intelligence</h4>
+                    <ul>
+                        <li>Search growing conditions for any crop</li>
+                        <li>Uses trusted sources via Serper API</li>
+                        <li>Clean layout with links to learn more</li>
+                        <li>Get contextual crop care information</li>
+                    </ul>
+                </div>
+
+                <div class='footer-section'>
+                    <h4>🚀 Quick Usage Tips</h4>
+                    <ul>
+                        <li>Start by entering a city to get crop advice</li>
+                        <li>Ask specific crop or weather questions</li>
+                        <li>Use the crop search for deeper research</li>
+                        <li>Combine data for informed decisions</li>
+                    </ul>
+                </div>
+            </div>
+
+            <div style='text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); font-size: 14px;'>
+                <p>💚 Built by Shafaq Mandha | Powered by OpenWeather, Groq, OpenAI, and Serper APIs | All rights reserved © 2025</p>
+            </div>
+        </div>
+        """)
+
+
+        # Event bindings
+        update_btn.click(
+            fn=lambda city: (format_weather_display(get_weather(city)), generate_crop_cards(city)),
+            inputs=city_input,
+            outputs=[weather_html, crop_cards_html]
+        )
+
+        city_input.submit(
+            fn=lambda city: (format_weather_display(get_weather(city)), generate_crop_cards(city)),
+            inputs=city_input,
+            outputs=[weather_html, crop_cards_html]
+        )
+
+        ask_btn.click(fn=agri_chat, inputs=[message, state], outputs=[chat, state])
+        message.submit(fn=agri_chat, inputs=[message, state], outputs=[chat, state])
+        crop_search_btn.click(fn=search_crop, inputs=crop_search_input, outputs=crop_search_output)
+
+        # Load initial weather on launch
+        demo.load(fn=lambda: (format_weather_display(get_weather("Dubai")), generate_crop_cards("Dubai")),
+                  inputs=None,
+                  outputs=[weather_html, crop_cards_html])
+
+
+    demo.launch()
+
+launch_ui()