Update app.py

app.py

@@ -3,13 +3,14 @@ import os
 import json
 from datetime import datetime, timedelta
 import base64
+import pandas as pd
 from travel import (
     destination_research_task, accommodation_task, transportation_task,
-    activities_task, dining_task, itinerary_task, final_report_task,
+    activities_task, dining_task, itinerary_task,
     run_task
 )
 
-# Set page configuration
+# Set page configuration with modern theme
 st.set_page_config(
     page_title="BlockX Travel Itinerary Generator",
     page_icon="✈️",
@@ -17,107 +18,342 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for better styling
+# Modern CSS with refined color scheme and sleek animations
 st.markdown("""
 <style>
+    /* Sleek Color Palette */
+    :root {
+        --primary: #3a86ff;
+        --primary-light: #4895ef;
+        --primary-dark: #2667ff;
+        --secondary: #4cc9f0;
+        --accent: #4361ee;
+        --background: #f8f9fa;
+        --card-bg: #ffffff;
+        --text: #212529;
+        --text-light: #6c757d;
+        --text-muted: #adb5bd;
+        --border: #e9ecef;
+        --success: #2ecc71;
+        --warning: #f39c12;
+        --info: #3498db;
+    }
+    
+    /* Refined Animations */
+    @keyframes smoothFadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes slideInRight {
+        from { opacity: 0; transform: translateX(20px); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    
+    .animate-in {
+        animation: smoothFadeIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    
+    .slide-in {
+        animation: slideInRight 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    
+    /* Sleek Header Styles */
     .main-header {
         font-size: 2.5rem;
-        color: #1E88E5;
+        color: var(--primary-dark);
         text-align: center;
-        margin-bottom: 1rem;
+        margin-bottom: 0.8rem;
+        font-weight: 700;
+        letter-spacing: -0.5px;
     }
+    
     .sub-header {
-        font-size: 1.5rem;
-        color: #0D47A1;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+        font-size: 1.4rem;
+        color: var(--accent);
+        font-weight: 600;
+        margin-top: 1.8rem;
+        margin-bottom: 0.8rem;
+        border-bottom: 1px solid var(--border);
+        padding-bottom: 0.4rem;
     }
-    .info-box {
-        background-color: #E3F2FD;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 1rem;
+    
+    /* Sleek Card Styles */
+    .modern-card {
+        background-color: var(--card-bg);
+        border-radius: 10px;
+        padding: 1.2rem;
+        margin-bottom: 1.2rem;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        transition: all 0.25s ease;
+        border: 1px solid var(--border);
     }
-    .success-box {
-        background-color: #E8F5E9;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 1rem;
-        border-left: 5px solid #4CAF50;
+    
+    .modern-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     }
+    
+    /* Refined Form Styles */
+    .stTextInput > div > div > input, 
+    .stDateInput > div > div > input,
+    .stTextArea > div > div > textarea {
+        border-radius: 6px;
+        border: 1px solid var(--border);
+        padding: 10px 12px;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        box-shadow: none;
+    }
+    
+    .stTextInput > div > div > input:focus, 
+    .stDateInput > div > div > input:focus,
+    .stTextArea > div > div > textarea:focus {
+        border: 1px solid var(--primary);
+        box-shadow: 0 0 0 1px rgba(58, 134, 255, 0.15);
+    }
+    
+    /* Sleek Button Styles */
+    .stButton > button {
+        background-color: var(--primary);
+        color: white;
+        font-weight: 500;
+        padding: 0.5rem 1.2rem;
+        border-radius: 6px;
+        border: none;
+        transition: all 0.2s ease;
+        font-size: 14px;
+        letter-spacing: 0.3px;
+    }
+    
+    .stButton > button:hover {
+        background-color: var(--primary-dark);
+        transform: translateY(-1px);
+        box-shadow: 0 3px 8px rgba(58, 134, 255, 0.25);
+    }
+    
+    /* Sleek Tab Styles */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 2px;
+        background-color: var(--background);
+        border-radius: 8px;
+        padding: 2px;
+    }
+    
+    .stTabs [data-baseweb="tab"] {
+        border-radius: 6px;
+        padding: 8px 16px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+    
+    .stTabs [aria-selected="true"] {
+        background-color: var(--primary);
+        color: white !important;
+    }
+    
+    /* Progress Bar Styles */
+    .stProgress > div > div > div > div {
+        background-color: var(--primary);
+    }
+    
+    /* Progress Styles */
     .progress-container {
-        margin: 1rem 0;
+        margin: 1.2rem 0;
+        background-color: var(--background);
+        border-radius: 8px;
+        padding: 0.8rem;
+        border: 1px solid var(--border);
     }
+    
     .step-complete {
         color: #4CAF50;
-        font-weight: bold;
+        font-weight: 600;
     }
+    
     .step-pending {
         color: #9E9E9E;
     }
+    
     .step-active {
-        color: #1E88E5;
-        font-weight: bold;
-    }
-    .agent-log {
-        background-color: #F5F5F5;
-        border-left: 3px solid #1E88E5;
-        padding: 0.5rem;
-        margin-bottom: 0.5rem;
-        font-family: monospace;
+        color: var(--primary);
+        font-weight: 600;
     }
+    
+    /* Agent Output */
     .agent-output {
-        background-color: #E8F5E9;
-        border-left: 5px solid #4CAF50;
-        padding: 1rem;
+        background-color: #f8f9fa;
+        border-left: 5px solid var(--primary);
+        padding: 1.2rem;
         margin: 1rem 0;
-        border-radius: 0.5rem;
+        border-radius: 10px;
         max-height: 400px;
         overflow-y: auto;
     }
+    
+    /* Footer */
     .footer {
         text-align: center;
         margin-top: 3rem;
-        color: #757575;
-        font-size: 0.8rem;
+        color: var(--text-light);
+        font-size: 0.9rem;
+        padding: 1rem;
+        border-top: 1px solid #eaeaea;
+    }
+    
+    /* Agent Log */
+    .agent-log {
+        background-color: #F5F5F5;
+        border-left: 3px solid var(--primary);
+        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+        font-family: monospace;
+        border-radius: 4px;
     }
-    .stButton button {
-        background-color: #1E88E5;
+    
+    /* Info and Success Boxes */
+    .info-box {
+        background-color: var(--primary-light);
         color: white;
-        font-weight: bold;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+    }
+    
+    .success-box {
+        background-color: #E8F5E9;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-bottom: 1rem;
+        border-left: 5px solid #4CAF50;
     }
 </style>
 """, unsafe_allow_html=True)
 
 # Helper function to download HTML file
-def get_download_link(html_content, filename):
-    b64 = base64.b64encode(html_content.encode()).decode()
-    href = f'<a href="data:text/html;base64,{b64}" download="{filename}">Download Itinerary as HTML</a>'
+def get_download_link(text_content, filename):
+    b64 = base64.b64encode(text_content.encode()).decode()
+    href = f'<a class="download-link" href="data:text/plain;base64,{b64}" download="{filename}"><i>📥</i> Download Itinerary as Text</a>'
     return href
 
-# Helper function to display progress
-def display_progress(current_step, total_steps=7):
-    progress_html = '<div class="progress-container">'
-    steps = [
-        "Destination Research",
-        "Accommodation",
-        "Transportation",
-        "Activities",
-        "Dining",
-        "Itinerary Creation",
-        "Final Report"
-    ]
+# Updated helper function to display modern progress with a single UI element
+def display_modern_progress(current_step, total_steps=6):
+    if 'progress_steps' not in st.session_state:
+        st.session_state.progress_steps = {
+            0: {'status': 'pending', 'name': 'Destination Research'},
+            1: {'status': 'pending', 'name': 'Accommodation'},
+            2: {'status': 'pending', 'name': 'Transportation'},
+            3: {'status': 'pending', 'name': 'Activities'},
+            4: {'status': 'pending', 'name': 'Dining'},
+            5: {'status': 'pending', 'name': 'Itinerary Creation'}
+        }
     
-    for i, step in enumerate(steps):
+    # Update the current step status
+    for i in range(total_steps):
         if i < current_step:
-            progress_html += f'<p class="step-complete">✓ {step} - Complete</p>'
+            st.session_state.progress_steps[i]['status'] = 'complete'
         elif i == current_step:
-            progress_html += f'<p class="step-active">⟳ {step} - In Progress...</p>'
+            st.session_state.progress_steps[i]['status'] = 'active'
         else:
-            progress_html += f'<p class="step-pending">○ {step} - Pending</p>'
+            st.session_state.progress_steps[i]['status'] = 'pending'
     
-    progress_html += '</div>'
-    return progress_html
+    # Calculate overall progress percentage
+    progress_percentage = (current_step / total_steps) * 100
+    
+    # Show overall progress bar
+    st.progress(progress_percentage / 100)
+    
+    # Create a modern, compact, inline progress tracker
+    st.markdown('''
+    <style>
+    .compact-progress {
+        background: white;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        margin-bottom: 20px;
+    }
+    .progress-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        color: #333;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 10px;
+    }
+    .step-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 10px;
+    }
+    .step-item {
+        display: flex;
+        align-items: center;
+        padding: 8px 10px;
+        border-radius: 6px;
+        background: #f8f9fa;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .step-item.complete {
+        border-left: 3px solid #4CAF50;
+        background: #f1f8e9;
+    }
+    .step-item.active {
+        border-left: 3px solid #2196F3;
+        background: #e3f2fd;
+        font-weight: bold;
+    }
+    .step-item.pending {
+        border-left: 3px solid #9e9e9e;
+        opacity: 0.7;
+    }
+    .step-icon {
+        margin-right: 8px;
+        font-size: 14px;
+    }
+    .step-text {
+        font-size: 13px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    </style>
+    <div class="compact-progress">
+    ''', unsafe_allow_html=True)
+    
+    # Create grid layout
+    st.markdown('<div class="step-grid">', unsafe_allow_html=True)
+    
+    # Display each step in a compact grid
+    for i, step_info in st.session_state.progress_steps.items():
+        status = step_info['status']
+        name = step_info['name']
+        
+        if status == 'complete':
+            icon = "✅"
+            status_class = "complete"
+        elif status == 'active':
+            icon = "🔄"
+            status_class = "active"
+        else:
+            icon = "⭕"
+            status_class = "pending"
+        
+        st.markdown(f'''
+        <div class="step-item {status_class}">
+            <span class="step-icon">{icon}</span>
+            <span class="step-text">{name}</span>
+        </div>
+        ''', unsafe_allow_html=True)
+    
+    st.markdown('</div></div>', unsafe_allow_html=True)
+    
+    return progress_percentage
+
+# Function to update the status of a specific step
+def update_step_status(step_index, status):
+    if 'progress_steps' in st.session_state and step_index in st.session_state.progress_steps:
+        st.session_state.progress_steps[step_index]['status'] = status
 
 # Custom run_task function that updates the UI with logs and shows live agent outputs
 def run_task_with_logs(task, input_text, log_container, output_container, results_key=None):
@@ -176,100 +412,267 @@ if 'log_messages' not in st.session_state:
     st.session_state.log_messages = []
 if 'current_output' not in st.session_state:
     st.session_state.current_output = None
+if 'form_submitted' not in st.session_state:
+    st.session_state.form_submitted = False
+
+# Modern animated header
+st.markdown('''
+<div class="animate-in" style="text-align: center;">
+    <div style="margin-bottom: 20px;">
+        <img src="https://img.icons8.com/fluency/96/travel-card.png" width="90" 
+             style="filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));">
+    </div>
+    <h1 class="main-header">BlockX Travel Itinerary Generator</h1>
+    <p style="font-size: 1.2rem; color: #6c757d; margin-bottom: 25px;">
+        ✨ Create your personalized AI-powered travel itinerary in minutes! ✨
+    </p>
+</div>
+''', unsafe_allow_html=True)
 
-# Header
-st.markdown('<h1 class="main-header">BlockX Travel Itinerary Generator</h1>', unsafe_allow_html=True)
-st.markdown('<p style="text-align: center;">Create your personalized AI-powered travel itinerary in minutes!</p>', unsafe_allow_html=True)
+# Add a nice separator
+st.markdown('<hr style="height:3px;border:none;background-color:#f0f0f0;margin-bottom:25px;">', unsafe_allow_html=True)
 
-# Sidebar with information
+# Enhanced sidebar with modern design
 with st.sidebar:
-    st.image("https://img.icons8.com/fluency/96/travel-card.png", width=80)
-    st.markdown("### About")
+    # Add a profile/brand area at the top
+    st.markdown('''
+    <div style="text-align: center; padding: 20px 0; margin-bottom: 20px; 
+                border-bottom: 1px solid #eaeaea;">
+        <img src="https://img.icons8.com/fluency/96/travel-card.png" width="80" 
+             style="margin-bottom: 15px;">
+        <h3 style="margin-bottom: 5px; color: #4361ee;">BlockX Travel</h3>
+        <p style="color: #6c757d; font-size: 0.9rem;">AI-Powered Travel Planning</p>
+    </div>
+    ''', unsafe_allow_html=True)
+    
+    # About section with modern container
+    st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+    st.markdown("### 🌟 About")
     st.info(
         "This AI-powered tool creates a personalized travel itinerary based on your preferences. "
         "Fill in the form and let our specialized travel agents plan your perfect trip!"
     )
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.markdown("### How it works")
-    st.markdown(
-        "1. Enter your travel details\n"
-        "2. Our AI agents analyze your preferences\n"
-        "3. Receive a comprehensive itinerary\n"
-        "4. Download and enjoy your trip!"
-    )
+    # How it works with steps and icons
+    st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+    st.markdown("### 🔍 How it works")
+    st.markdown("""
+    <ol style="padding-left: 25px;">
+        <li><b>🖊️ Enter</b> your travel details</li>
+        <li><b>🧠 AI analysis</b> of your preferences</li>
+        <li><b>📋 Generate</b> comprehensive itinerary</li>
+        <li><b>📥 Download</b> and enjoy your trip!</li>
+    </ol>
+    """, unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.markdown("### Travel Agents")
-    st.markdown(
-        "- 🔍 Destination Research Agent\n"
-        "- 🏨 Accommodation Agent\n"
-        "- 🚗 Transportation Agent\n"
-        "- 🎭 Activities & Attractions Agent\n"
-        "- 🍽️ Dining & Culinary Agent\n"
-        "- 📅 Itinerary Integration Agent\n"
-        "- 📄 Final Report Generation Agent"
-    )
-
-# Input Form
+    # Travel Agents section with icons
+    st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+    st.markdown("### 🤖 Travel Agents")
+    agents = [
+        ("🔭 Research Specialist", "Finds the best destinations based on your preferences"),
+        ("🏨 Accommodation Expert", "Suggests suitable hotels and stays"),
+        ("🚆 Transportation Planner", "Plans efficient travel routes"),
+        ("🎯 Activities Curator", "Recommends activities tailored to your interests"),
+        ("🍽️ Dining Connoisseur", "Finds the best dining experiences"),
+        ("📅 Itinerary Creator", "Puts everything together in a daily plan")
+    ]
+    
+    for name, desc in agents:
+        st.markdown(f"**{name}**")
+        st.markdown(f"<small>{desc}</small>", unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+# Main content area
 if not st.session_state.generation_complete:
-    st.markdown('<h2 class="sub-header">Enter Your Travel Details</h2>', unsafe_allow_html=True)
+    # Sleek form with minimal design
+    st.markdown('<div class="modern-card animate-in">', unsafe_allow_html=True)
+    st.markdown("<h3 style='font-weight: 600; color: var(--primary-dark); display: flex; align-items: center; gap: 10px;'><span style='font-size: 20px;'>✈️</span> Create Your Itinerary</h3>", unsafe_allow_html=True)
     
-    col1, col2 = st.columns(2)
+    # Minimalist description
+    st.markdown("""
+    <p style="color: var(--text-light); margin-bottom: 16px; font-size: 14px; font-weight: 400;">Complete the form below for a personalized travel plan.</p>
+    """, unsafe_allow_html=True)
     
-    with col1:
-        origin = st.text_input("Origin City/Country", placeholder="e.g., New York, USA")
-        destination = st.text_input("Destination City/Country", placeholder="e.g., Paris, France")
-        duration = st.number_input("Trip Duration (days)", min_value=1, max_value=30, value=7)
+    # Form with improved layout and visual cues
+    with st.form("travel_form"):
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            st.markdown('<p style="font-weight: 500; color: var(--primary); font-size: 14px; margin-bottom: 12px;">Trip Details</p>', unsafe_allow_html=True)
+            origin = st.text_input("Origin", placeholder="e.g., New York, USA")
+            destination = st.text_input("Destination", placeholder="e.g., Paris, France")
+            
+            # Minimalist date picker
+            st.markdown('<p style="margin-bottom: 5px; font-size: 14px;">Travel Dates</p>', unsafe_allow_html=True)
+            start_date = st.date_input("Start Date", min_value=datetime.now(), label_visibility="collapsed")
+            end_date = start_date + timedelta(days=7)
+            duration = st.slider("Duration (days)", min_value=1, max_value=30, value=7)
+            end_date = start_date + timedelta(days=duration-1)
+            st.markdown(f'<p style="font-size: 13px; color: var(--text-muted); margin-top: 5px;">{start_date.strftime("%b %d")} - {end_date.strftime("%b %d, %Y")}</p>', unsafe_allow_html=True)
+        
+        with col2:
+            st.markdown('<p style="font-weight: 500; color: var(--primary); font-size: 14px; margin-bottom: 12px;">Preferences</p>', unsafe_allow_html=True)
+            travelers = st.number_input("Travelers", min_value=1, max_value=15, value=2)
+            budget_options = ["Budget", "Moderate", "Luxury"]
+            budget = st.selectbox("Budget", budget_options, 
+                                help="Budget: Economy options | Moderate: Mid-range | Luxury: High-end experiences")
+            
+            # Travel style with visual selection
+            travel_style = st.multiselect("🌈 Travel Style", 
+                                       options=["Culture", "Adventure", "Relaxation", "Food & Dining", 
+                                                "Nature", "Shopping", "Nightlife", "Family-friendly"],
+                                       default=["Culture", "Food & Dining"])
+        
+        # Additional information in an expander
+        with st.expander("🌟 Additional Preferences & Requirements", expanded=False):
+            preferences = st.text_area("Specific Interests", placeholder="e.g., I love history museums, local cuisine, hiking, contemporary art...")
+            special_requirements = st.text_area("Special Requirements", 
+                                            placeholder="e.g., dietary restrictions, accessibility needs, traveling with children...")
+        
+        # Submit button with enhanced styling
+        submit_button = st.form_submit_button("🚀 Create My Personal Travel Itinerary")
     
-    with col2:
-        budget_options = ["Budget", "Moderate", "Luxury"]
-        budget = st.selectbox("Budget Level", budget_options)
-        preferences = st.text_area("Travel Preferences & Interests", 
-                                 placeholder="e.g., museums, hiking, food, shopping, beaches, history, nightlife, family-friendly")
-        special_requirements = st.text_area("Special Requirements", 
-                                          placeholder="e.g., dietary restrictions, accessibility needs, etc.")
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    # Generate button
-    if st.button("Generate My Travel Itinerary"):
+    # Process form submission
+    if submit_button:
         if not origin or not destination:
             st.error("Please enter both origin and destination.")
         else:
+            st.session_state.form_submitted = True
             user_input = {
                 "origin": origin,
                 "destination": destination,
                 "duration": str(duration),
+                "travel_dates": f"{start_date.strftime('%Y-%m-%d')} to {end_date.strftime('%Y-%m-%d')}",
+                "travelers": str(travelers),
                 "budget": budget.lower(),
+                "travel_style": ", ".join(travel_style),
                 "preferences": preferences,
                 "special_requirements": special_requirements
             }
             
-            # Format the user input for tasks
+            # Format the user input for tasks with enhanced details
             input_context = f"""Travel Request Details:
 Origin: {user_input['origin']}
 Destination: {user_input['destination']}
 Duration: {user_input['duration']} days
+Travel Dates: {user_input['travel_dates']}
+Travelers: {user_input['travelers']}
 Budget Level: {user_input['budget']}
+Travel Style: {user_input['travel_style']}
 Preferences/Interests: {user_input['preferences']}
 Special Requirements: {user_input['special_requirements']}
 """
             
-            # Create containers for progress, logs, and live output
-            col1, col2 = st.columns([1, 2])
+            # Display a minimal, sleek processing animation
+            st.markdown("""
+            <div class="sleek-processing-container">
+              <div class="pulse-container">
+                <div class="pulse-ring"></div>
+                <div class="pulse-core"></div>
+              </div>
+            </div>
+            
+            <style>
+            .sleek-processing-container {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 20px 0;
+            }
+            .pulse-container {
+              position: relative;
+              width: 50px;
+              height: 50px;
+            }
+            .pulse-core {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              width: 12px;
+              height: 12px;
+              background-color: #4361ee;
+              border-radius: 50%;
+              box-shadow: 0 0 8px rgba(67, 97, 238, 0.6);
+            }
+            .pulse-ring {
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              border: 2px solid #4361ee;
+              border-radius: 50%;
+              animation: pulse 1.5s ease-out infinite;
+              opacity: 0;
+            }
+            @keyframes pulse {
+              0% {
+                transform: scale(0.1);
+                opacity: 0;
+              }
+              50% {
+                opacity: 0.5;
+              }
+              100% {
+                transform: scale(1);
+                opacity: 0;
+              }
+            }
+            </style>
+            """, unsafe_allow_html=True)
+            
+            # Create modern containers for progress, logs, and live output
+            st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+            
+            # Create tabs for better organization
+            progress_tab, logs_tab, details_tab = st.tabs(["📊 Progress", "🔄 Live Activity", "📋 Request Details"])
+            
+            # Show request details in the details tab
+            with details_tab:
+                st.markdown("#### Your Travel Request")
+                st.markdown(f"**Destination:** {user_input['destination']}")
+                st.markdown(f"**From:** {user_input['origin']}")
+                st.markdown(f"**When:** {user_input['travel_dates']} ({user_input['duration']} days)")
+                st.markdown(f"**Budget:** {user_input['budget'].title()}")
+                st.markdown(f"**Travel Style:** {user_input['travel_style']}")
+                if user_input['preferences']:
+                    st.markdown(f"**Interests:** {user_input['preferences']}")
+                if user_input['special_requirements']:
+                    st.markdown(f"**Special Requirements:** {user_input['special_requirements']}")
             
-            with col1:
-                progress_placeholder = st.empty()
-                progress_placeholder.markdown(display_progress(0), unsafe_allow_html=True)
+            with progress_tab:
+                    # Create a persistent placeholder for progress display to avoid duplication
+                if 'progress_placeholder' not in st.session_state:
+                    st.session_state.progress_placeholder = st.empty()
+                with st.session_state.progress_placeholder.container():
+                    display_modern_progress(0)
+            
+            with logs_tab:
                 log_container = st.container()
                 st.session_state.log_messages = []
             
-            with col2:
-                output_container = st.container()
-                with output_container:
-                    st.markdown("### Live Agent Outputs")
-                    st.info("Agent outputs will appear here as they are generated")
+            # Create a container for output that spans the full width
+            st.markdown('</div>', unsafe_allow_html=True) # Close the progress card
+            output_container = st.container()
+            with output_container:
+                st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+                st.markdown("### 🌟 Live Agent Outputs")
+                st.info("Our AI agents will show their work here as they create your itinerary")
+                st.markdown('</div>', unsafe_allow_html=True)
             
-            # Step 1: Destination Research
+            # Initialize progress tracking
             st.session_state.current_step = 0
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            
+            # Display initial progress - using the session state placeholder
+            
+            # Step 1: Destination Research
+            update_step_status(0, 'active')  # Mark step 1 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             destination_info = run_task_with_logs(
                 destination_research_task, 
@@ -282,8 +685,12 @@ Special Requirements: {user_input['special_requirements']}
                 "destination_info"
             )
             
+            # Update progress after step 1 completes
+            update_step_status(0, 'complete')  # Mark step 1 as complete
             st.session_state.current_step = 1
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            update_step_status(1, 'active')  # Mark step 2 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             # Step 2: Accommodation Recommendations
             accommodation_info = run_task_with_logs(
@@ -298,8 +705,12 @@ Special Requirements: {user_input['special_requirements']}
                 "accommodation_info"
             )
             
+            # Update progress after step 2 completes
+            update_step_status(1, 'complete')  # Mark step 2 as complete
             st.session_state.current_step = 2
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            update_step_status(2, 'active')  # Mark step 3 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             # Step 3: Transportation Planning
             transportation_info = run_task_with_logs(
@@ -313,8 +724,12 @@ Special Requirements: {user_input['special_requirements']}
                 "transportation_info"
             )
             
+            # Update progress after step 3 completes
+            update_step_status(2, 'complete')  # Mark step 3 as complete
             st.session_state.current_step = 3
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            update_step_status(3, 'active')  # Mark step 4 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             # Step 4: Activities & Attractions
             activities_info = run_task_with_logs(
@@ -328,8 +743,12 @@ Special Requirements: {user_input['special_requirements']}
                 "activities_info"
             )
             
+            # Update progress after step 4 completes
+            update_step_status(3, 'complete')  # Mark step 4 as complete
             st.session_state.current_step = 4
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            update_step_status(4, 'active')  # Mark step 5 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             # Step 5: Dining Recommendations
             dining_info = run_task_with_logs(
@@ -343,8 +762,12 @@ Special Requirements: {user_input['special_requirements']}
                 "dining_info"
             )
             
+            # Update progress after step 5 completes
+            update_step_status(4, 'complete')  # Mark step 5 as complete
             st.session_state.current_step = 5
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
+            update_step_status(5, 'active')  # Mark step 6 as active
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
             
             # Step 6: Create Day-by-Day Itinerary
             combined_info = f"""{input_context}
@@ -377,99 +800,211 @@ Dining Recommendations:
                 "itinerary"
             )
             
+            # Update final step status to complete
+            update_step_status(5, 'complete')  # Mark final step as complete
             st.session_state.current_step = 6
-            progress_placeholder.markdown(display_progress(st.session_state.current_step), unsafe_allow_html=True)
-            
-            # Step 7: Generate Final Report
-            final_context = f"""{combined_info}
-
-Day-by-Day Itinerary:
-{itinerary}
-"""
-            
-            final_itinerary = run_task_with_logs(
-                final_report_task, 
-                final_context.format(
-                    duration=user_input['duration'],
-                    origin=user_input['origin'],
-                    destination=user_input['destination']
-                ),
-                log_container,
-                output_container,
-                "final_itinerary"
-            )
-            
+            with st.session_state.progress_placeholder.container():
+                display_modern_progress(st.session_state.current_step)
+                
             # Save the generated itinerary to session state
-            st.session_state.generated_itinerary = final_itinerary
+            st.session_state.generated_itinerary = itinerary
             st.session_state.generation_complete = True
             
             # Create a filename based on the destination and date
             date_str = datetime.now().strftime("%Y-%m-%d")
-            st.session_state.filename = f"{user_input['destination'].replace(' ', '_')}_{date_str}_itinerary.html"
+            st.session_state.filename = f"{user_input['destination'].replace(' ', '_')}_{date_str}_itinerary.txt"
             
             # No need to rerun, we'll update the UI directly
 
 # Display results if generation is complete
 if st.session_state.generation_complete:
-    st.markdown('<h2 class="sub-header">Your Travel Itinerary is Ready! 🎉</h2>', unsafe_allow_html=True)
+    # Success animation and header
+    st.markdown("""
+    <div class="modern-card animate-in">
+      <div style="display: flex; justify-content: center; margin-bottom: 20px;">
+        <div class="success-animation">
+          <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+            <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
+            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+          </svg>
+        </div>
+      </div>
+      <h2 style="text-align: center; color: #4361ee;">Your Travel Itinerary is Ready! 🎉</h2>
+      <p style="text-align: center; color: #6c757d; margin-bottom: 20px;">We've created a personalized travel experience just for you. Explore your itinerary below.</p>
+    </div>
     
-    # Display download link
-    st.markdown(
-        get_download_link(st.session_state.generated_itinerary, st.session_state.filename),
-        unsafe_allow_html=True
-    )
+    <style>
+    .success-animation {
+      width: 100px;
+      height: 100px;
+      position: relative;
+    }
+    .checkmark {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      display: block;
+      stroke-width: 2;
+      stroke: #4361ee;
+      stroke-miterlimit: 10;
+      box-shadow: 0 0 20px rgba(67, 97, 238, 0.3);
+      animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+    }
+    .checkmark__circle {
+      stroke-dasharray: 166;
+      stroke-dashoffset: 166;
+      stroke-width: 2;
+      stroke-miterlimit: 10;
+      stroke: #4361ee;
+      fill: none;
+      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+    }
+    .checkmark__check {
+      transform-origin: 50% 50%;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+    }
+    @keyframes stroke {
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+    @keyframes scale {
+      0%, 100% {
+        transform: none;
+      }
+      50% {
+        transform: scale3d(1.1, 1.1, 1);
+      }
+    }
+    @keyframes fill {
+      100% {
+        box-shadow: 0 0 20px rgba(67, 97, 238, 0.3);
+      }
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Main container for itinerary content
+    st.markdown('<div class="modern-card">', unsafe_allow_html=True)
+    
+    # Modern tabs for different views
+    itinerary_tab, details_tab, download_tab = st.tabs(["🗒️ Full Itinerary", "💼Details", "💾 Download & Share"])
     
-    # Option to view the itinerary directly
-    with st.expander("Preview Your Itinerary", expanded=True):
-        st.components.v1.html(st.session_state.generated_itinerary, height=600, scrolling=True)
+    with itinerary_tab:
+        # Preview the itinerary as text
+        st.text_area("Your Itinerary", st.session_state.generated_itinerary, height=600)
     
-    # Option to view individual agent outputs
-    with st.expander("View Detailed Agent Outputs"):
+    with details_tab:
+        # More detailed view with agent outputs in a nested tab structure
         agent_tabs = st.tabs([
-            "Destination", "Accommodation", "Transportation", 
-            "Activities", "Dining", "Day-by-Day"
+            "🌎 Destination", "🏨 Accommodation", "🚗 Transportation", 
+            "🎭 Activities", "🍽️ Dining"
         ])
         
         with agent_tabs[0]:
-            st.markdown("### Destination Research")
+            st.markdown("### 🌎 Destination Research")
             st.markdown(st.session_state.results["destination_info"])
             
         with agent_tabs[1]:
-            st.markdown("### Accommodation Options")
+            st.markdown("### 🏨 Accommodation Options")
             st.markdown(st.session_state.results["accommodation_info"])
             
         with agent_tabs[2]:
-            st.markdown("### Transportation Plan")
+            st.markdown("### 🚗 Transportation Plan")
             st.markdown(st.session_state.results["transportation_info"])
             
         with agent_tabs[3]:
-            st.markdown("### Recommended Activities")
+            st.markdown("### 🎭 Recommended Activities")
             st.markdown(st.session_state.results["activities_info"])
             
         with agent_tabs[4]:
-            st.markdown("### Dining Recommendations")
+            st.markdown("### 🍽️ Dining Recommendations")
             st.markdown(st.session_state.results["dining_info"])
             
-        with agent_tabs[5]:
-            st.markdown("### Day-by-Day Itinerary")
-            st.markdown(st.session_state.results["itinerary"])
+
     
-    # Option to start over
-    if st.button("Create Another Itinerary"):
-        # Reset session state
+    with download_tab:
+        col1, col2 = st.columns([2, 1])
+        
+        with col1:
+            st.markdown("### Save Your Itinerary")
+            st.markdown("Download your personalized travel plan to access it offline or share with your travel companions.")
+            
+            # Display stylized download button
+            st.markdown("""
+            <div style="background-color: #f8f9fa; padding: 15px; border-radius: 10px; margin-top: 20px;">
+                <h4 style="margin-top: 0;">Your Itinerary File</h4>
+                <p style="font-size: 0.9rem; color: #6c757d;">Text format - Can be opened in any text editor</p>
+            """, unsafe_allow_html=True)
+            
+            # Enhanced download link
+            st.markdown(
+                f"""<div style="margin: 10px 0;">{ get_download_link(st.session_state.generated_itinerary, st.session_state.filename) }</div>""",
+                unsafe_allow_html=True
+            )
+            
+            st.markdown("</div>", unsafe_allow_html=True)
+            
+            # Share options
+            st.markdown("### Share Your Itinerary")
+            st.markdown("*Coming soon: Email your itinerary or share via social media.*")
+        
+        with col2:
+            # QR code placeholder for future implementation
+            st.markdown("### Save for Mobile")
+            st.markdown("*Coming soon: QR code for easy access on your phone*")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Add a reset button to create a new itinerary
+    if st.button("🔄 Plan Another Trip", key="reset_button"):
+        # Reset the session state
         st.session_state.generated_itinerary = None
         st.session_state.generation_complete = False
         st.session_state.current_step = 0
-        st.session_state.results = {
-            "destination_info": "",
-            "accommodation_info": "",
-            "transportation_info": "",
-            "activities_info": "",
-            "dining_info": "",
-            "itinerary": "",
-            "final_itinerary": ""
-        }
-        st.rerun()
+        st.session_state.form_submitted = False
+        st.session_state.results = {}
+        st.experimental_rerun()
+    
+    # Footer for the app
+    st.markdown("""
+    <div style="margin-top: 50px; text-align: center; padding: 20px; color: #6c757d; font-size: 0.8rem;">
+        <p>© 2023 AI Travel Planner | Built with ❤️ using Streamlit and advanced AI</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # End of app
 
-# Footer
-st.markdown('<div class="footer">BlockX Travel Itinerary Generator © 2025</div>', unsafe_allow_html=True)
+# Modern footer with more information
+st.markdown("""
+<div style="margin-top: 50px; border-top: 1px solid #e9ecef; padding: 30px 0; color: #6c757d;">
+    <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px;">
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+            <h4 style="color: #4361ee; margin-bottom: 15px;">BlockX Travel</h4>
+            <p>AI-powered travel planning made easy. Create personalized itineraries for your dream destinations.</p>
+        </div>
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+            <h4 style="color: #4361ee; margin-bottom: 15px;">Quick Links</h4>
+            <ul style="list-style: none; padding: 0;">
+                <li style="margin-bottom: 8px;">About</li>
+                <li style="margin-bottom: 8px;">Travel Guides</li>
+                <li style="margin-bottom: 8px;">FAQs</li>
+                <li style="margin-bottom: 8px;">Contact Us</li>
+            </ul>
+        </div>
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+            <h4 style="color: #4361ee; margin-bottom: 15px;">Connect</h4>
+            <p>Stay updated with our latest travel guides and features.</p>
+            <div style="margin-top: 15px;">
+                <!-- Social media icons would go here -->
+                <span>🐰 🐿 🐸 🦉</span>
+            </div>
+        </div>
+    </div>
+    <div style="text-align: center; margin-top: 30px;">
+        <p>© 2025 BlockX AI Travel | All rights reserved | Built with ❤️ from the team of BlockX AI Ltd https://blockxint.com.</p>
+    </div>
+</div>
+""", unsafe_allow_html=True)