Update app.py

app.py

@@ -1,15 +1,14 @@
 import os
 import gradio as gr
 import requests
-import openai
+from openai import OpenAI
 
-# 🔐 Load API keys from environment variables (set these in Hugging Face Secrets)
+# API keys
 weather_api_key = os.getenv("openweather")
-groq_api_key = os.getenv("GROQ_API_KEY")
-openai.api_key = os.getenv("OPENAI_API_KEY")
-serper_api_key = os.getenv("SERPER_API_KEY")
+openai_api_key = os.getenv("OPENAI_API_KEY")
+client = OpenAI(api_key=openai_api_key)
 
-# 🌤️ Weather Fetch
+# Fetch Weather
 def get_weather(city_name):
     if not city_name.strip():
         city_name = "Dubai"
@@ -44,13 +43,14 @@ def get_weather(city_name):
     except:
         return None
 
-# 🖼️ Format Weather Display
+
+# Format Weather
 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"
+    card_bg = "#e3f2fd"
     main_bg = "#ffffff"
 
     return f"""
@@ -60,7 +60,6 @@ def format_weather_display(data):
             <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>
@@ -96,114 +95,79 @@ def format_weather_display(data):
     </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."
-            }
-        ]
+# Chatbot using OpenAI
+def travel_chat(msg, history):
+    messages = [{"role": "system", "content": "You are a helpful travel assistant. Suggest tourist attractions, activities, and travel tips for any city."}]
+    for h in history:
+        messages.append({"role": h["role"], "content": h["content"]})
+    messages.append({"role": "user", "content": msg})
 
-        response = openai.chat.completions.create(
-            model="gpt-3.5-turbo",
-            messages=messages
+    try:
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=messages,
+            temperature=0.7
         )
+        reply = response.choices[0].message.content
+    except Exception:
+        reply = "⚠️ Unable to fetch suggestions right now. Try again later."
 
-        return response.choices[0].message.content.strip()
-
-    except Exception as e:
-        return f"<div style='color:red;'>⚠️ Error fetching crop info: {str(e)}</div>"
+    history.append({"role": "user", "content": msg})
+    history.append({"role": "assistant", "content": reply})
+    return history, history
 
 
-# 🌱 Fetch best crops based on region using OpenAI
-def get_best_crops_for_region(city, country, temp, humidity, description):
+# Fetch attractions for city
+def get_attractions(city, country, temp, weather_desc):
     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."
-                )
-            }
+            {"role": "system", "content": (
+                "You are a travel expert. Based on the city, country, and current weather, "
+                "suggest 6 to 9 top attractions. Return each as a Python tuple like: "
+                "(\"Burj Khalifa\", \"World's tallest building with stunning views.\")."
+            )},
+            {"role": "user", "content": (
+                f"Suggest attractions for {city}, {country} (Weather: {temp}°C, {weather_desc}). "
+                "Output as Python tuples only."
+            )}
         ]
 
-        response = openai.chat.completions.create(
-            model="gpt-3.5-turbo",
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",
             messages=messages
         )
 
         content = response.choices[0].message.content.strip()
 
-        crops = []
+        attractions = []
         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)
+                    attraction_tuple = eval(line)
+                    if isinstance(attraction_tuple, tuple) and len(attraction_tuple) == 2:
+                        attractions.append(attraction_tuple)
                 except:
                     continue
-        return crops if crops else [("⚠️ No Crops Found", "Try a different city or adjust your weather input.")]
+        return attractions if attractions else [("No attractions found", "Try another city.")]
+    except:
+        return [("Error", "Could not fetch attractions.")]
 
-    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):
+def format_attraction_card(name, details):
     return f"""
-    <div class='crop-card'>
-        <div class='crop-name'>{name.title()}</div>
-        <div class='crop-description'>{details}</div>
+    <div class='card'>
+        <div class='card-title'>{name}</div>
+        <div class='card-desc'>{details}</div>
     </div>
     """
 
 
-# Launch UI with layout from old code + crop cards and search
+# CSS
 custom_css = """
 body, .gradio-container {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #bbdefb 100%) !important;
     font-family: 'Segoe UI', 'Roboto', sans-serif;
     min-height: 100vh;
 }
@@ -212,18 +176,10 @@ body, .gradio-container {
     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;
+    color: #1565c0;
 }
 .section-header {
-    background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
+    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
     color: white;
     padding: 12px 20px;
     border-radius: 12px 12px 0 0;
@@ -231,7 +187,6 @@ body, .gradio-container {
     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;
@@ -239,87 +194,7 @@ body, .gradio-container {
     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;
+    border-top: 3px solid #1976d2;
 }
 .card-grid {
     display: grid;
@@ -327,208 +202,86 @@ button:hover {
     gap: 18px;
     margin-top: 25px;
 }
-
-.crop-card {
+.card {
     background: #ffffff;
-    border: 1px solid #c8e6c9;
+    border: 1px solid #bbdefb;
     border-radius: 16px;
     padding: 20px;
-    box-shadow: 0 4px 12px rgba(67, 160, 71, 0.1);
+    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
-.crop-card:hover {
+.card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(67, 160, 71, 0.2);
+    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.2);
 }
-.crop-name {
+.card-title {
     font-size: 20px;
     font-weight: 600;
-    color: #2e7d32;
+    color: #1565c0;
     margin-bottom: 12px;
     text-align: center;
 }
-.crop-description {
+.card-desc {
     font-size: 15px;
     color: #444;
     line-height: 1.5;
     text-align: center;
 }
-
 """
 
+# Generate attractions cards
+def generate_attraction_cards(city):
+    weather = get_weather(city)
+    if not weather:
+        return "<div style='padding:20px; color:red;'>⚠️ Couldn't fetch attractions due to missing weather data.</div>"
+
+    attractions = get_attractions(
+        city=weather["city"],
+        country=weather["country"],
+        temp=weather["temperature"],
+        weather_desc=weather["description"]
+    )
+    return "<div class='card-grid'>" + "".join(format_attraction_card(name, details) for name, details in attractions) + "</div>"
+
+
+# UI
 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>")
+    with gr.Blocks(css=custom_css, title="Travel Weather Guide") as demo:
+        gr.Markdown("<div id='main-title'>🌍 Travel Weather Guide</div>")
 
-        # Main Content
         with gr.Row(equal_height=True):
-            # Weather Section
+            # 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")
+                    city_input = gr.Textbox(label="🏙️ City Name", value="Dubai")
+                    update_btn = gr.Button("📍 Get Weather Data")
                     weather_html = gr.HTML()
 
-            # Chat Section
+            # Chatbot section
             with gr.Column(scale=1):
-                gr.Markdown("<div class='section-header'>🌾 AgriBot Assistant</div>")
+                gr.Markdown("<div class='section-header'>✈️ Travel 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=("👨‍🌾", "🤖")
-                    )
+                    chat = gr.Chatbot(height=350, type="messages")
                     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?"
-                    """)
-
+                        message = gr.Textbox(placeholder="Ask about places to visit, local attractions...", show_label=False, scale=4)
+                        ask_btn = gr.Button("Send", scale=1)
                     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()
-
-
-        # --- Coming Soon Plant Doc Feature Section ---
-        gr.Markdown("<div class='section-header'>🌿 Coming Soon: Plant Doctor Feature</div>")
-        with gr.Group(elem_classes="content-box"):
-            gr.HTML("""
-                <div style="text-align: center; padding: 50px; color: #555; font-size: 1.2rem;">
-                    <h3>Future Feature: Diagnose Plant Diseases!</h3>
-                    <p>Upload an image of your plant, and our AI-powered Plant Doctor will identify potential diseases and suggest treatments. Stay tuned!</p>
-                    <div style="margin-top: 30px;">
-                        <span style="font-size: 60px;">🌱</span>
-                        <span style="font-size: 60px; margin-left: 20px;">🔬</span>
-                        <span style="font-size: 60px; margin-left: 20px;">💡</span>
-                    </div>
-                </div>
-            """)
-
-        
-        # 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>
+        # Attractions section
+        gr.Markdown("<div class='section-header'>🏖️ Top Attractions You Can Visit</div>")
+        attractions_html = gr.HTML()
 
-            <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]
-        )
+        def update_all(city):
+            return format_weather_display(get_weather(city)), generate_attraction_cards(city)
 
-        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)
+        update_btn.click(fn=update_all, inputs=city_input, outputs=[weather_html, attractions_html])
+        city_input.submit(fn=update_all, inputs=city_input, outputs=[weather_html, attractions_html])
 
-        # 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])
+        ask_btn.click(fn=travel_chat, inputs=[message, state], outputs=[chat, state])
+        message.submit(fn=travel_chat, inputs=[message, state], outputs=[chat, state])
 
+        demo.load(fn=lambda: update_all("Dubai"), inputs=None, outputs=[weather_html, attractions_html])
 
     demo.launch()