Update app.py

app.py

@@ -8,14 +8,162 @@ genai.configure(api_key=GEMINI_KEY)
 model = genai.GenerativeModel('gemini-pro')
 
 CSS = """
-body { background: #f5f7fa; font-family: 'Arial', sans-serif; }
-.chat-container { max-width: 800px; margin: 0 auto; }
-.msg-user { background: #e3f2fd; padding: 15px; border-radius: 15px; margin: 10px; max-width: 70%; float: right; }
-.msg-bot { background: white; padding: 15px; border-radius: 15px; margin: 10px; max-width: 70%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-.card { border-left: 4px solid #2196F3; padding: 10px; margin: 10px 0; }
-.price { color: #2e7d32; font-weight: bold; }
-.link { color: #1565C0; text-decoration: underline; }
-.reset-btn { margin-top: 20px; }
+:root {
+    --primary: #2A5C82;
+    --secondary: #5BA4E6;
+    --accent: #FF7F50;
+    --background: #F8F9FA;
+    --text: #2C3E50;
+}
+
+body {
+    background: var(--background);
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+}
+
+.gradio-container {
+    max-width: 800px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+.header {
+    background: var(--primary);
+    padding: 40px 20px;
+    text-align: center;
+    color: white;
+}
+
+.header h1 {
+    margin: 0;
+    font-size: 2.2em;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.chat-container {
+    padding: 20px;
+    height: 60vh;
+    overflow-y: auto;
+}
+
+.msg-user {
+    background: var(--secondary);
+    color: white;
+    padding: 15px 20px;
+    border-radius: 15px 15px 0 15px;
+    margin: 10px 0 10px 30%;
+    position: relative;
+    animation: slideIn 0.3s ease;
+}
+
+.msg-bot {
+    background: white;
+    padding: 20px;
+    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: 20px;
+    border-radius: 12px;
+    margin: 15px 0;
+    border-left: 4px solid var(--accent);
+    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+    transition: transform 0.2s;
+}
+
+.card:hover {
+    transform: translateY(-3px);
+}
+
+.price {
+    color: var(--primary);
+    font-weight: 600;
+    margin: 8px 0;
+}
+
+.link {
+    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; }
+}
+
+@keyframes fadeIn {
+    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:
@@ -49,10 +197,12 @@ class ChatManager:
         for item in structured:
             html += f"""
             <div class='card'>
-                <h3>{item.get('nome', '')}</h3>
-                <p>{item.get('descrizione', '')}</p>
-                <p class='price'>{item.get('prezzo', '')}</p>
-                {f"<a href='{item['link']}' class='link' target='_blank'>Maggiori informazioni</a>" if 'link' in item else ''}
+                <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
@@ -67,19 +217,19 @@ def respond(message, chat_history):
         chat_manager.context["city"] = city
     
     if not chat_manager.context["city"]:
-        bot_response = "Per favore dimmi prima 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"]}. 
-    Rispondi in italiano strutturando ogni suggerimento con:
-    - **Nome**: [nome luogo]
-    - **Descrizione**: [breve descrizione 20-30 parole]
-    - **Prezzo**: [se applicabile]
-    - **Link**: [sito ufficiale se disponibile]
+    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)
     
-    Richiesta utente: {message}
+    Richiesta: {message}
     """
     
     try:
@@ -93,23 +243,45 @@ def respond(message, chat_history):
 
 def reset_context(chat_history):
     chat_manager.context = {"city": None}
-    new_history = chat_history + [[None, "Contesto resettato. Di quale città vuoi parlare ora? 🌆"]]
+    new_history = chat_history + [[None, "🔄 Contesto resettato! Di quale città vuoi parlare ora?"]]
     return new_history
 
 with gr.Blocks(css=CSS) as app:
-    gr.Markdown("# 🗺️ Assistente Turistico Chat")
-    
-    chatbot = gr.Chatbot(
-        label="Chat",
-        elem_classes="chat-container",
-        value=[[None, "Ciao! Dimmi di quale città vuoi informazioni 🌍"]]
-    )
-    msg = gr.Textbox(label="Scrivi il tuo messaggio...")
-    
-    with gr.Row():
-        send_btn = gr.Button("Invia")
-        reset_btn = gr.Button("Cambia Città", variant="secondary")
-    
+    with gr.Column():
+        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" 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 AI
+                </h1>
+                <p>La tua guida personale per scoprire il mondo</p>
+            </div>
+        """)
+        
+        chatbot = gr.Chatbot(
+            label="Chat",
+            elem_classes="chat-container",
+            show_label=False,
+            avatar_images=(
+                None, 
+                "https://i.ibb.co/8XJp0dN/bot-avatar.png"
+            )
+        )
+        
+        with gr.Row(elem_classes="controls"):
+            msg = gr.Textbox(
+                label="",
+                placeholder="Scrivi qui la tua richiesta...",
+                show_label=False,
+                container=False
+            )
+            with gr.Column(min_width=100):
+                send_btn = gr.Button("Invia ➔", variant="primary")
+                reset_btn = gr.Button("Nuova Ricerca", variant="secondary")
+
     send_btn.click(
         respond,
         [msg, chatbot],