Update app.py

app.py

@@ -2,11 +2,8 @@ import gradio as gr
 import google.generativeai as genai
 import os
 import re
-import requests
 
-# Configurazione API
 GEMINI_KEY = os.getenv("GEMINI")
-UNSPLASH_KEY = os.getenv("UNSPLASH_ACCESS")
 genai.configure(api_key=GEMINI_KEY)
 model = genai.GenerativeModel('gemini-pro')
 
@@ -22,6 +19,7 @@ CSS = """
 body {
     background: var(--background);
     font-family: 'Segoe UI', system-ui, sans-serif;
+    min-height: 100vh;
     margin: 0;
     padding: 20px;
 }
@@ -64,6 +62,7 @@ body {
     padding: 15px 20px;
     border-radius: 15px 15px 0 15px;
     margin: 10px 0 10px 30%;
+    position: relative;
     animation: slideIn 0.3s ease;
 }
 
@@ -73,15 +72,25 @@ body {
     border-radius: 15px 15px 15px 0;
     margin: 10px 30% 10px 0;
     border: 1px solid #E0E0E0;
+    position: relative;
     animation: fadeIn 0.5s ease;
 }
 
+.msg-bot::before {
+    content: "✈️";
+    position: absolute;
+    left: -35px;
+    top: 15px;
+    font-size: 1.5em;
+}
+
 .card {
     background: white;
-    padding: 0;
+    padding: 20px;
     border-radius: 12px;
     margin: 15px 0;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+    border-left: 4px solid var(--accent);
+    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
     transition: transform 0.2s;
 }
 
@@ -89,37 +98,6 @@ body {
     transform: translateY(-3px);
 }
 
-.image-container {
-    width: 100%;
-    height: 200px;
-    border-radius: 12px 12px 0 0;
-    overflow: hidden;
-    position: relative;
-}
-
-.place-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.logo-badge {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    background: rgba(255,255,255,0.9);
-    padding: 5px 10px;
-    border-radius: 20px;
-    font-size: 0.8em;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.card-content {
-    padding: 20px;
-}
-
 .price {
     color: var(--primary);
     font-weight: 600;
@@ -127,13 +105,45 @@ body {
 }
 
 .link {
-    color: var(--secondary);
+    color: var(--secondary) !important;
     text-decoration: none;
+    font-weight: 500;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }
 
+.link:hover {
+    text-decoration: underline;
+}
+
+.controls {
+    padding: 20px;
+    background: #F8FAFD;
+    border-top: 1px solid #E0E0E0;
+}
+
+input[type="text"] {
+    border: 2px solid var(--secondary) !important;
+    border-radius: 12px !important;
+    padding: 15px !important;
+    font-size: 1em;
+}
+
+button {
+    background: var(--primary) !important;
+    color: white !important;
+    border: none !important;
+    padding: 12px 25px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s !important;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(42,92,130,0.2) !important;
+}
+
 @keyframes slideIn {
     from { transform: translateX(20px); opacity: 0; }
     to { transform: translateX(0); opacity: 1; }
@@ -143,6 +153,17 @@ body {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
 }
+
+@media (max-width: 600px) {
+    .gradio-container {
+        border-radius: 0;
+    }
+    
+    .msg-user, .msg-bot {
+        margin-left: 10%;
+        margin-right: 10%;
+    }
+}
 """
 
 class ChatManager:
@@ -153,64 +174,38 @@ class ChatManager:
         cities = re.findall(r'\b(?:a|in|su|per)\s+([A-Z][a-z]+(?:\s+[A-Z][a-z]+)*)\b', text, re.IGNORECASE)
         return cities[0] if cities else self.context["city"]
     
-    def get_place_image(self, place_name):
-        try:
-            url = "https://api.unsplash.com/search/photos"
-            headers = {"Authorization": f"Client-ID {UNSPLASH_KEY}"}
-            params = {
-                "query": f"{place_name} {self.context['city']}",
-                "per_page": 1,
-                "orientation": "squarish"
-            }
-            response = requests.get(url, headers=headers, params=params)
-            results = response.json().get('results', [])
-            if results:
-                return {
-                    "image": results[0]['urls']['regular'],
-                    "credit": results[0]['user']['name']
-                }
-            return None
-        except:
-            return None
-    
     def format_response(self, response):
-        html = ""
-        current_category = None
+        structured = []
+        current_item = {}
         
         lines = response.split('\n')
         for line in lines:
-            if line.startswith('## '):
-                current_category = line.replace('## ', '').strip()
-                html += f"<h2 style='color: var(--primary); margin-top: 30px;'>{current_category}</h2>"
-            elif line.startswith('- **'):
+            if line.startswith('- **'):
                 parts = re.split(r'\*\*:?|\*', line)
                 if len(parts) > 2:
-                    name = parts[1].strip()
-                    details = parts[2].split('•')
-                    
-                    price = next((d.replace('💰', '').strip() for d in details if '💰' in d), None)
-                    link = next((d.strip() for d in details if 'http' in d), None)
-                    desc = ' • '.join([d.strip() for d in details if '💰' not in d and 'http' not in d])
-                    
-                    image_data = self.get_place_image(name)
-                    
-                    html += f"""
-                    <div class='card'>
-                        <div class='image-container'>
-                            <img src='{image_data['image'] if image_data else 'https://via.placeholder.com/400x200?text=Immagine+non+disponibile'}' 
-                                 class='place-image'
-                                 alt='{name}'>
-                            {f"<div class='logo-badge'>📸 {image_data['credit']}</div>" if image_data else ''}
-                        </div>
-                        <div class='card-content'>
-                            <h3>{name}</h3>
-                            <p>{desc}</p>
-                            {f"<p class='price'>💰 {price}</p>" if price else ''}
-                            {f"<a href='{link}' class='link' target='_blank'>🌐 Sito Ufficiale</a>" if link else ''}
-                        </div>
-                    </div>
-                    """
-        return html
+                    key = parts[1].strip().lower()
+                    value = parts[2].strip()
+                    current_item[key] = value
+            elif line.strip() == '' and current_item:
+                structured.append(current_item)
+                current_item = {}
+        
+        if current_item:
+            structured.append(current_item)
+        
+        html = ""
+        for item in structured:
+            html += f"""
+            <div class='card'>
+                <h3 style="margin:0;color:var(--primary)">📍 {item.get('nome', '')}</h3>
+                <p style="margin:10px 0;color:var(--text)">{item.get('descrizione', '')}</p>
+                <div style="display:flex;gap:15px;align-items:center">
+                    {f"<div class='price'>💰 {item.get('prezzo', '')}</div>" if item.get('prezzo') else ''}
+                    {f"<a href='{item['link']}' class='link' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-external-link'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'></path><polyline points='15 3 21 3 21 9'></polyline><line x1='10' y1='14' x2='21' y2='3'></line></svg> Maggiori info</a>" if 'link' in item else ''}
+                </div>
+            </div>
+            """
+        return html if html else response
 
 chat_manager = ChatManager()
 
@@ -222,23 +217,19 @@ def respond(message, chat_history):
         chat_manager.context["city"] = city
     
     if not chat_manager.context["city"]:
-        bot_response = "🌍 Per favore dimmi di quale città vuoi informazioni!"
+        bot_response = "🌍 Per favore dimmi prima di quale città vuoi informazioni!"
         chat_history[-1] = (message, bot_response)
         return "", chat_history
     
     prompt = f"""
-    Sei un esperto guida turistica per {chat_manager.context["city"]}. 
-    Fornisci raccomandazioni in italiano con formato:
+    Sei un assistente turistico esperto di {chat_manager.context["city"]}. 
+    Fornisci informazioni strutturate in italiano con:
+    - Nome luogo
+    - Breve descrizione (max 30 parole)
+    - Prezzo (se applicabile)
+    - Link ufficiale (se disponibile)
     
-    ## Cose da Vedere
-    - **Nome Luogo** • Descrizione breve (max 30 parole) 💰 Prezzo • https://link.com
-    ## Dove Mangiare
-    - **Nome Ristorante** • Specialità 💰 Fascia prezzi • https://link.com
-    ## Dove Dormire
-    - **Nome Alloggio** • Servizi offerti 💰 Prezzo per notte • https://link.com
-    ## Itinerari
-    - **1 Giorno**: Attrazioni principali
-    - **2 Giorni**: Estensione itinerario
+    Richiesta: {message}
     """
     
     try:
@@ -260,30 +251,34 @@ with gr.Blocks(css=CSS) as app:
         gr.HTML("""
             <div class="header">
                 <h1>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
                         <circle cx="12" cy="10" r="3"/>
                     </svg>
-                    Travel Assistant PRO
+                    Travel Assistant AI
                 </h1>
-                <p>La tua guida turistica intelligente</p>
+                <p>La tua guida personale per scoprire il mondo</p>
             </div>
         """)
         
         chatbot = gr.Chatbot(
             label="Chat",
             elem_classes="chat-container",
-            avatar_images=(None, "https://i.ibb.co/8XJp0dN/bot-avatar.png"),
-            show_label=False
+            show_label=False,
+            avatar_images=(
+                None, 
+                "https://i.ibb.co/8XJp0dN/bot-avatar.png"
+            )
         )
         
-        with gr.Row():
+        with gr.Row(elem_classes="controls"):
             msg = gr.Textbox(
-                placeholder="✍️ Scrivi qui la tua richiesta...",
+                label="",
+                placeholder="Scrivi qui la tua richiesta...",
                 show_label=False,
                 container=False
             )
-            with gr.Column(min_width=120):
+            with gr.Column(min_width=100):
                 send_btn = gr.Button("Invia ➔", variant="primary")
                 reset_btn = gr.Button("Nuova Ricerca", variant="secondary")