Update app.py

app.py

@@ -1,207 +1,945 @@
-""" Basic Agent Evaluation Runner"""
-import os
-import inspect
 import gradio as gr
-import requests
-import pandas as pd
+import time
+import os
+import base64
+from typing import List, Tuple, Optional
 from langchain_core.messages import HumanMessage
 from agent import build_graph
 
-
-
-# (Keep Constants as is)
-# --- Constants ---
-DEFAULT_API_URL = "https://agents-course-unit4-scoring.hf.space"
-
-# --- Basic Agent Definition ---
-# ----- THIS IS WERE YOU CAN BUILD WHAT YOU WANT ------
-
-
-class BasicAgent:
-    """A langgraph agent."""
+class QnAChatbot:
+    """A Q&A chatbot interface for the agent."""
+    
     def __init__(self):
-        print("BasicAgent initialized.")
+        print("🤖 QnAChatbot initializing...")
+        print("🔧 Building agent graph...")
         self.graph = build_graph()
-
-    def __call__(self, question: str) -> str:
-        print(f"Agent received question (first 50 chars): {question[:50]}...")
-        messages = [HumanMessage(content=question)]
-        result = self.graph.invoke({"messages": messages})
-        answer = result['messages'][-1].content
-        return answer  # kein [14:] mehr nötig!
-
-
-
-def run_and_submit_all( profile: gr.OAuthProfile | None):
-    """
-    Fetches all questions, runs the BasicAgent on them, submits all answers,
-    and displays the results.
-    """
-    # --- Determine HF Space Runtime URL and Repo URL ---
-    space_id = os.getenv("SPACE_ID") # Get the SPACE_ID for sending link to the code
-
-    if profile:
-        username= f"{profile.username}"
-        print(f"User logged in: {username}")
-    else:
-        print("User not logged in.")
-        return "Please Login to Hugging Face with the button.", None
-
-    api_url = DEFAULT_API_URL
-    questions_url = f"{api_url}/questions"
-    submit_url = f"{api_url}/submit"
-
-    # 1. Instantiate Agent ( modify this part to create your agent)
-    try:
-        agent = BasicAgent()
-    except Exception as e:
-        print(f"Error instantiating agent: {e}")
-        return f"Error initializing agent: {e}", None
-    # In the case of an app running as a hugging Face space, this link points toward your codebase ( usefull for others so please keep it public)
-    agent_code = f"https://huggingface.co/spaces/{space_id}/tree/main"
-    print(agent_code)
-
-    # 2. Fetch Questions
-    print(f"Fetching questions from: {questions_url}")
-    try:
-        response = requests.get(questions_url, timeout=15)
-        response.raise_for_status()
-        questions_data = response.json()
-        if not questions_data:
-             print("Fetched questions list is empty.")
-             return "Fetched questions list is empty or invalid format.", None
-        print(f"Fetched {len(questions_data)} questions.")
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching questions: {e}")
-        return f"Error fetching questions: {e}", None
-    except requests.exceptions.JSONDecodeError as e:
-         print(f"Error decoding JSON response from questions endpoint: {e}")
-         print(f"Response text: {response.text[:500]}")
-         return f"Error decoding server response for questions: {e}", None
-    except Exception as e:
-        print(f"An unexpected error occurred fetching questions: {e}")
-        return f"An unexpected error occurred fetching questions: {e}", None
-
-    # 3. Run your Agent
-    results_log = []
-    answers_payload = []
-    print(f"Running agent on {len(questions_data)} questions...")
-    for item in questions_data:
-        task_id = item.get("task_id")
-        question_text = item.get("question")
-        if not task_id or question_text is None:
-            print(f"Skipping item with missing task_id or question: {item}")
-            continue
+        self.conversation_history = []
+        print("✅ QnAChatbot initialized successfully")
+    
+    def process_question(self, question: str, history: List[Tuple[str, str]], uploaded_files: Optional[List] = None) -> Tuple[str, List[Tuple[str, str]]]:
+        """Process a question and return the response with updated history."""
+        if not question.strip() and not uploaded_files:
+            print("⚠️  No question or files provided")
+            return "", history
+        
         try:
-            submitted_answer = agent(question_text)
-            answers_payload.append({"task_id": task_id, "submitted_answer": submitted_answer})
-            results_log.append({"Task ID": task_id, "Question": question_text, "Submitted Answer": submitted_answer})
+            print(f"\n{'='*60}")
+            print(f"🤖 Processing new question...")
+            print(f"📝 Question: {question[:100]}{'...' if len(question) > 100 else ''}")
+            print(f"📁 Files uploaded: {len(uploaded_files) if uploaded_files else 0}")
+            
+            # Handle uploaded files
+            file_context = ""
+            if uploaded_files:
+                print(f"📂 Processing {len(uploaded_files)} uploaded file(s)...")
+                file_context = self._process_uploaded_files(uploaded_files)
+                if file_context:
+                    original_question = question
+                    question = f"{question}\n\n{file_context}" if question.strip() else file_context
+                    print(f"📋 File context added to question (length: {len(file_context)} chars)")
+            
+            # Wrap the question in a HumanMessage
+            messages = [HumanMessage(content=question)]
+            print(f"🔄 Invoking agent graph...")
+            
+            # Get response from the agent
+            result = self.graph.invoke({"messages": messages})
+            print(f"📨 Received {len(result['messages'])} message(s) from agent")
+            
+            # Print all messages for debugging
+            for i, msg in enumerate(result['messages']):
+                print(f"📧 Message {i+1}: {type(msg).__name__}")
+                if hasattr(msg, 'content'):
+                    content_preview = msg.content[:200] + "..." if len(msg.content) > 200 else msg.content
+                    print(f"   Content preview: {content_preview}")
+            
+            answer = result['messages'][-1].content
+            
+            # Clean up the answer if it starts with "Assistant: "
+            if answer.startswith("Assistant: "):
+                answer = answer[11:]
+                print("🧹 Cleaned 'Assistant: ' prefix from response")
+            
+            # Update conversation history
+            history.append((question, answer))
+            print(f"✅ Question processed successfully")
+            print(f"📊 Response length: {len(answer)} characters")
+            print(f"💬 Total conversation history: {len(history)} exchanges")
+            print(f"{'='*60}\n")
+            
+            return "", history
+            
         except Exception as e:
-             print(f"Error running agent on task {task_id}: {e}")
-             results_log.append({"Task ID": task_id, "Question": question_text, "Submitted Answer": f"AGENT ERROR: {e}"})
+            error_msg = f"Error processing question: {str(e)}"
+            print(f"❌ {error_msg}")
+            print(f"🔍 Exception details: {type(e).__name__}: {str(e)}")
+            import traceback
+            print(f"📋 Traceback:\n{traceback.format_exc()}")
+            history.append((question, error_msg))
+            print(f"{'='*60}\n")
+            return "", history
+    
+    def _process_uploaded_files(self, uploaded_files: List) -> str:
+        """Process uploaded files and return context for the question."""
+        file_contexts = []
+        
+        for file_path in uploaded_files:
+            if not file_path or not os.path.exists(file_path):
+                print(f"⚠️  Skipping invalid file path: {file_path}")
+                continue
+                
+            try:
+                file_name = os.path.basename(file_path)
+                file_ext = os.path.splitext(file_name)[1].lower()
+                file_size = os.path.getsize(file_path)
+                
+                print(f"📄 Processing file: {file_name} ({file_size} bytes, {file_ext})")
+                
+                # Handle different file types
+                if file_ext in ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']:
+                    # Image file - convert to base64
+                    with open(file_path, 'rb') as f:
+                        image_data = base64.b64encode(f.read()).decode('utf-8')
+                    file_contexts.append(f"[UPLOADED IMAGE: {file_name}] - Base64 data: {image_data}")
+                    print(f"🖼️  Image converted to base64 ({len(image_data)} chars)")
+                    
+                elif file_ext in ['.txt', '.md', '.py', '.js', '.html', '.css', '.json', '.xml']:
+                    # Text file - read content
+                    with open(file_path, 'r', encoding='utf-8') as f:
+                        content = f.read()
+                    file_contexts.append(f"[UPLOADED TEXT FILE: {file_name}]\nContent:\n{content}")
+                    print(f"📝 Text file content read ({len(content)} chars)")
+                    
+                elif file_ext in ['.csv']:
+                    # CSV file - provide file path for analysis
+                    file_contexts.append(f"[UPLOADED CSV FILE: {file_name}] - File path: {file_path}")
+                    print(f"📊 CSV file prepared for analysis")
+                    
+                elif file_ext in ['.xlsx', '.xls']:
+                    # Excel file - provide file path for analysis
+                    file_contexts.append(f"[UPLOADED EXCEL FILE: {file_name}] - File path: {file_path}")
+                    print(f"📈 Excel file prepared for analysis")
+                    
+                elif file_ext in ['.pdf']:
+                    # PDF file - mention it's available
+                    file_contexts.append(f"[UPLOADED PDF FILE: {file_name}] - File path: {file_path}")
+                    print(f"📄 PDF file prepared for processing")
+                    
+                else:
+                    # Other file types - just mention the file
+                    file_contexts.append(f"[UPLOADED FILE: {file_name}] - File path: {file_path}")
+                    print(f"📁 Generic file prepared for processing")
+                    
+            except Exception as e:
+                error_msg = f"Error processing file {file_path}: {e}"
+                print(f"❌ {error_msg}")
+                print(f"🔍 File processing error details: {type(e).__name__}: {str(e)}")
+                file_contexts.append(f"[ERROR PROCESSING FILE: {os.path.basename(file_path)}] - {str(e)}")
+        
+        total_context = "\n\n".join(file_contexts) if file_contexts else ""
+        if total_context:
+            print(f"📋 Total file context generated: {len(total_context)} characters")
+        
+        return total_context
+    
+    def clear_history(self):
+        """Clear the conversation history."""
+        print("🧹 Clearing conversation history...")
+        self.conversation_history = []
+        print("✅ Conversation history cleared")
+        return []
 
-    if not answers_payload:
-        print("Agent did not produce any answers to submit.")
-        return "Agent did not produce any answers to submit.", pd.DataFrame(results_log)
-
-    # 4. Prepare Submission 
-    submission_data = {"username": username.strip(), "agent_code": agent_code, "answers": answers_payload}
-    status_update = f"Agent finished. Submitting {len(answers_payload)} answers for user '{username}'..."
-    print(status_update)
-
-    # 5. Submit
-    print(f"Submitting {len(answers_payload)} answers to: {submit_url}")
-    try:
-        response = requests.post(submit_url, json=submission_data, timeout=60)
-        response.raise_for_status()
-        result_data = response.json()
-        final_status = (
-            f"Submission Successful!\n"
-            f"User: {result_data.get('username')}\n"
-            f"Overall Score: {result_data.get('score', 'N/A')}% "
-            f"({result_data.get('correct_count', '?')}/{result_data.get('total_attempted', '?')} correct)\n"
-            f"Message: {result_data.get('message', 'No message received.')}"
+def create_qna_interface():
+    """Create the Q&A chatbot interface."""
+    
+    print("🚀 Creating Q&A interface...")
+    # Initialize the chatbot
+    chatbot = QnAChatbot()
+    print("🎨 Setting up UI components...")
+    
+    # Enhanced Custom CSS for modern, professional styling
+    custom_css = """
+    /* Import Google Fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+    
+    /* CSS Variables for Theme Support */
+    :root {
+        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+        --glass-bg: rgba(255, 255, 255, 0.95);
+        --glass-border: rgba(255, 255, 255, 0.2);
+        --text-primary: #2d3748;
+        --text-secondary: #4a5568;
+        --text-light: #718096;
+        --bg-light: #f7fafc;
+        --bg-card: #ffffff;
+        --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
+        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
+        --border-radius: 12px;
+        --border-radius-lg: 20px;
+        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Global Styles */
+    * {
+        font-family: 'Inter', sans-serif !important;
+        box-sizing: border-box !important;
+    }
+    
+    /* Main Container with Enhanced Background */
+    .gradio-container {
+        max-width: 1400px !important;
+        margin: 0 auto !important;
+        background: 
+            radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3), transparent 50%),
+            radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3), transparent 50%),
+            var(--primary-gradient) !important;
+        min-height: 100vh !important;
+        padding: 20px !important;
+        position: relative !important;
+        overflow-x: hidden !important;
+    }
+    
+    /* Animated Background Particles */
+    .gradio-container::before {
+        content: '' !important;
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='53' cy='7' r='1'/%3E%3Ccircle cx='7' cy='53' r='1'/%3E%3Ccircle cx='53' cy='53' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+        animation: float 20s ease-in-out infinite !important;
+        pointer-events: none !important;
+        z-index: 0 !important;
+    }
+    
+    /* Main Content Area with Glass Effect */
+    .main-content {
+        background: var(--glass-bg) !important;
+        backdrop-filter: blur(20px) !important;
+        -webkit-backdrop-filter: blur(20px) !important;
+        border-radius: var(--border-radius-lg) !important;
+        box-shadow: 
+            var(--shadow-lg),
+            inset 0 1px 0 var(--glass-border) !important;
+        padding: 40px !important;
+        margin: 20px 0 !important;
+        position: relative !important;
+        z-index: 1 !important;
+        border: 1px solid var(--glass-border) !important;
+        transition: var(--transition) !important;
+    }
+    
+    .main-content:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 
+            0 25px 50px rgba(0, 0, 0, 0.15),
+            inset 0 1px 0 var(--glass-border) !important;
+    }
+    
+    /* Enhanced Header with Animations */
+    .markdown h1 {
+        background: var(--primary-gradient) !important;
+        -webkit-background-clip: text !important;
+        -webkit-text-fill-color: transparent !important;
+        background-clip: text !important;
+        font-size: 3rem !important;
+        font-weight: 800 !important;
+        text-align: center !important;
+        margin-bottom: 1.5rem !important;
+        position: relative !important;
+        animation: titleGlow 3s ease-in-out infinite alternate !important;
+    }
+    
+    .markdown h1::after {
+        content: '' !important;
+        position: absolute !important;
+        bottom: -10px !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        width: 100px !important;
+        height: 4px !important;
+        background: var(--primary-gradient) !important;
+        border-radius: 2px !important;
+        animation: pulse 2s ease-in-out infinite !important;
+    }
+    
+    /* Enhanced Chat Interface */
+    .chatbot {
+        border: none !important;
+        border-radius: var(--border-radius) !important;
+        box-shadow: var(--shadow-md) !important;
+        background: var(--bg-card) !important;
+        overflow: hidden !important;
+        position: relative !important;
+    }
+    
+    /* Chat Messages with Better Styling */
+    .chatbot .message-wrap {
+        padding: 20px !important;
+        margin: 15px !important;
+        border-radius: 18px !important;
+        max-width: 85% !important;
+        animation: messageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        position: relative !important;
+        word-wrap: break-word !important;
+    }
+    
+    .chatbot .message.user {
+        background: var(--primary-gradient) !important;
+        color: white !important;
+        margin-left: auto !important;
+        margin-right: 15px !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+        border-bottom-right-radius: 5px !important;
+    }
+    
+    .chatbot .message.user::before {
+        content: '🧑‍💻' !important;
+        position: absolute !important;
+        top: -25px !important;
+        right: 10px !important;
+        font-size: 16px !important;
+        background: var(--bg-card) !important;
+        padding: 5px 8px !important;
+        border-radius: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    .chatbot .message.bot {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        color: var(--text-primary) !important;
+        margin-right: auto !important;
+        margin-left: 15px !important;
+        border: 1px solid #e2e8f0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        border-bottom-left-radius: 5px !important;
+    }
+    
+    .chatbot .message.bot::before {
+        content: '🤖' !important;
+        position: absolute !important;
+        top: -25px !important;
+        left: 10px !important;
+        font-size: 16px !important;
+        background: var(--bg-card) !important;
+        padding: 5px 8px !important;
+        border-radius: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    /* Typing Indicator */
+    .typing-indicator {
+        display: flex !important;
+        align-items: center !important;
+        padding: 15px 20px !important;
+        margin: 15px !important;
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        border-radius: 18px !important;
+        max-width: 85% !important;
+        margin-right: auto !important;
+        margin-left: 15px !important;
+        border: 1px solid #e2e8f0 !important;
+        animation: messageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+    
+    .typing-dots {
+        display: flex !important;
+        align-items: center !important;
+        gap: 4px !important;
+    }
+    
+    .typing-dots span {
+        width: 8px !important;
+        height: 8px !important;
+        border-radius: 50% !important;
+        background: var(--text-light) !important;
+        animation: typingDots 1.4s ease-in-out infinite both !important;
+    }
+    
+    .typing-dots span:nth-child(1) { animation-delay: -0.32s !important; }
+    .typing-dots span:nth-child(2) { animation-delay: -0.16s !important; }
+    .typing-dots span:nth-child(3) { animation-delay: 0s !important; }
+    
+    /* Enhanced Input Areas */
+    .textbox input, .textbox textarea {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: var(--border-radius) !important;
+        padding: 18px 24px !important;
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+        transition: var(--transition) !important;
+        background: var(--bg-card) !important;
+        box-shadow: var(--shadow-sm) !important;
+        font-family: 'Inter', sans-serif !important;
+    }
+    
+    .textbox input:focus, .textbox textarea:focus {
+        border-color: #667eea !important;
+        box-shadow: 
+            0 0 0 4px rgba(102, 126, 234, 0.1),
+            var(--shadow-md) !important;
+        outline: none !important;
+        transform: translateY(-1px) !important;
+        background: #ffffff !important;
+    }
+    
+    /* Enhanced Buttons with Micro-interactions */
+    .btn {
+        border-radius: var(--border-radius) !important;
+        font-weight: 600 !important;
+        text-transform: none !important;
+        letter-spacing: 0.3px !important;
+        transition: var(--transition) !important;
+        border: none !important;
+        box-shadow: var(--shadow-sm) !important;
+        padding: 14px 28px !important;
+        font-size: 16px !important;
+        position: relative !important;
+        overflow: hidden !important;
+        cursor: pointer !important;
+    }
+    
+    .btn::before {
+        content: '' !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: -100% !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
+        transition: left 0.5s !important;
+    }
+    
+    .btn:hover::before {
+        left: 100% !important;
+    }
+    
+    .btn-primary {
+        background: var(--primary-gradient) !important;
+        color: white !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
+    }
+    
+    .btn-primary:hover {
+        transform: translateY(-3px) scale(1.02) !important;
+        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4) !important;
+    }
+    
+    .btn-primary:active {
+        transform: translateY(-1px) scale(0.98) !important;
+    }
+    
+    .btn-secondary {
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
+        color: var(--text-secondary) !important;
+        border: 1px solid #e2e8f0 !important;
+    }
+    
+    .btn-secondary:hover {
+        transform: translateY(-2px) !important;
+        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    
+    /* Enhanced File Upload with Drag & Drop Animation */
+    .file-upload {
+        border: 3px dashed #cbd5e0 !important;
+        border-radius: var(--border-radius) !important;
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
+        padding: 40px !important;
+        text-align: center !important;
+        transition: var(--transition) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        cursor: pointer !important;
+    }
+    
+    .file-upload:hover {
+        border-color: #667eea !important;
+        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%) !important;
+        transform: translateY(-2px) scale(1.01) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    
+    .file-upload::before {
+        content: '📁' !important;
+        font-size: 4rem !important;
+        display: block !important;
+        margin-bottom: 15px !important;
+        animation: fileFloat 3s ease-in-out infinite !important;
+    }
+    
+    .file-upload::after {
+        content: 'Drag files here or click to browse' !important;
+        position: absolute !important;
+        bottom: 15px !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        font-size: 14px !important;
+        color: var(--text-light) !important;
+        font-weight: 500 !important;
+    }
+    
+    /* Enhanced Examples Section */
+    .examples {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 30px !important;
+        margin: 25px 0 !important;
+        border: 1px solid #e2e8f0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        position: relative !important;
+    }
+    
+    .examples::before {
+        content: '💡' !important;
+        position: absolute !important;
+        top: -15px !important;
+        left: 30px !important;
+        background: var(--bg-card) !important;
+        padding: 10px !important;
+        border-radius: 50% !important;
+        font-size: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    .examples h3 {
+        color: #667eea !important;
+        font-weight: 700 !important;
+        margin-bottom: 20px !important;
+        font-size: 1.3rem !important;
+        margin-left: 20px !important;
+    }
+    
+    /* Feature Cards with Hover Effects */
+    .feature-card {
+        background: var(--bg-card) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 25px !important;
+        margin: 15px 0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        border-left: 4px solid transparent !important;
+        transition: var(--transition) !important;
+        cursor: pointer !important;
+    }
+    
+    .feature-card:hover {
+        transform: translateY(-5px) translateX(5px) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    
+    .feature-card.research {
+        border-left-color: #667eea !important;
+    }
+    
+    .feature-card.code {
+        border-left-color: #48bb78 !important;
+    }
+    
+    .feature-card.data {
+        border-left-color: #ed8936 !important;
+    }
+    
+    .feature-card.image {
+        border-left-color: #dd6b20 !important;
+    }
+    
+    /* Status Indicator with Pulse Animation */
+    .status-indicator {
+        display: inline-block !important;
+        width: 12px !important;
+        height: 12px !important;
+        border-radius: 50% !important;
+        background: radial-gradient(circle, #48bb78, #38a169) !important;
+        margin-right: 12px !important;
+        animation: statusPulse 2s ease-in-out infinite !important;
+        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7) !important;
+    }
+    
+    /* Enhanced Footer */
+    .footer {
+        background: var(--glass-bg) !important;
+        backdrop-filter: blur(10px) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 30px !important;
+        margin-top: 40px !important;
+        text-align: center !important;
+        border: 1px solid var(--glass-border) !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    /* Advanced Animations */
+    @keyframes titleGlow {
+        0%, 100% { text-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
+        50% { text-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 0 0 40px rgba(118, 75, 162, 0.6); }
+    }
+    
+    @keyframes messageSlideIn {
+        from {
+            opacity: 0;
+            transform: translateY(30px) scale(0.95);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+    
+    @keyframes typingDots {
+        0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+        40% { transform: scale(1.2); opacity: 1; }
+    }
+    
+    @keyframes fileFloat {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+    }
+    
+    @keyframes statusPulse {
+        0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
+        }
+        70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
+        }
+        100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
+        }
+    }
+    
+    @keyframes float {
+        0%, 100% { transform: translateY(0px) rotate(0deg); }
+        33% { transform: translateY(-10px) rotate(1deg); }
+        66% { transform: translateY(-5px) rotate(-1deg); }
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1) scaleX(1); }
+        50% { transform: scale(1.05) scaleX(1.1); }
+    }
+    
+    /* Responsive Design Enhancements */
+    @media (max-width: 1024px) {
+        .gradio-container { padding: 15px !important; }
+        .main-content { padding: 25px !important; margin: 15px 0 !important; }
+        .markdown h1 { font-size: 2.5rem !important; }
+    }
+    
+    @media (max-width: 768px) {
+        .gradio-container { padding: 10px !important; }
+        .main-content { padding: 20px !important; margin: 10px 0 !important; }
+        .chatbot .message-wrap { max-width: 90% !important; margin: 10px !important; padding: 15px !important; }
+        .markdown h1 { font-size: 2rem !important; }
+        .btn { padding: 12px 20px !important; font-size: 14px !important; }
+        .file-upload { padding: 30px 20px !important; }
+    }
+    
+    @media (max-width: 480px) {
+        .markdown h1 { font-size: 1.8rem !important; }
+        .chatbot .message-wrap { margin: 8px !important; padding: 12px !important; }
+        .main-content { padding: 15px !important; }
+    }
+    
+    /* Custom Scrollbar Enhancement */
+    ::-webkit-scrollbar { width: 12px; }
+    ::-webkit-scrollbar-track { 
+        background: rgba(241, 241, 241, 0.5); 
+        border-radius: 6px; 
+    }
+    ::-webkit-scrollbar-thumb { 
+        background: var(--primary-gradient); 
+        border-radius: 6px; 
+        border: 2px solid rgba(255, 255, 255, 0.2);
+    }
+    ::-webkit-scrollbar-thumb:hover { 
+        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); 
+    }
+    
+    /* Loading States */
+    .loading { animation: pulse 2s infinite !important; }
+    .processing { 
+        position: relative !important;
+        overflow: hidden !important;
+    }
+    .processing::after {
+        content: '' !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: -100% !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
+        animation: shimmer 2s infinite !important;
+    }
+    
+    @keyframes shimmer {
+        0% { left: -100%; }
+        100% { left: 100%; }
+    }
+    
+    /* Dark mode support (future enhancement) */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --glass-bg: rgba(26, 32, 44, 0.95);
+            --text-primary: #e2e8f0;
+            --text-secondary: #cbd5e0;
+            --text-light: #a0aec0;
+            --bg-card: #2d3748;
+            --bg-light: #1a202c;
+        }
+    }
+    """
+    
+    with gr.Blocks(css=custom_css, title="GAIA Agent - Q&A Chatbot", theme=gr.themes.Soft()) as demo:
+        # Header with enhanced styling
+        with gr.Row(elem_classes="main-content"):
+            gr.Markdown(
+                """
+                <h1 align="center">🤖 GAIA Agent - Advanced Q&A Chatbot</h1>
+                
+                Welcome to the **GAIA Agent Q&A interface**! Ask me anything and I'll help you find the answer using my various tools and capabilities.
+                
+                ### 🌟 **What I can do:**
+                
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
+                    <div class="feature-card research" style="background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #667eea; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">🔍</span>
+                            <strong style="font-size: 1.1rem; color: #667eea;">Research & Search</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Web search, Wikipedia, academic papers, arXiv research</p>
+                    </div>
+                    <div class="feature-card code" style="background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #48bb78; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">💻</span>
+                            <strong style="font-size: 1.1rem; color: #48bb78;">Code Execution</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Python, Bash, SQL, C, Java with real-time results</p>
+                    </div>
+                    <div class="feature-card data" style="background: linear-gradient(135deg, #fffaf0 0%, #fbd38d 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #ed8936; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">📊</span>
+                            <strong style="font-size: 1.1rem; color: #ed8936;">Data Analysis</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">CSV, Excel, visualizations, statistical analysis</p>
+                    </div>
+                    <div class="feature-card image" style="background: linear-gradient(135deg, #fef5e7 0%, #f6ad55 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #dd6b20; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">🖼️</span>
+                            <strong style="font-size: 1.1rem; color: #dd6b20;">Image Processing</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Analysis, OCR, transformations, generation</p>
+                    </div>
+                </div>
+                
+                ---
+                """
+            )
+        
+        # Chat interface with enhanced styling
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column(scale=1):
+                chatbot_interface = gr.Chatbot(
+                    label="💬 Conversation",
+                    height=600,
+                    show_label=True,
+                    container=True,
+                    bubble_full_width=False,
+                    elem_classes="chatbot"
+                )
+        
+        # File upload section with enhanced styling
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column():
+                file_upload = gr.File(
+                    label="📁 Upload Files - Drag & drop or click to upload images, documents, CSV, Excel files, etc.",
+                    file_count="multiple",
+                    file_types=[
+                        ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp",  # Images
+                        ".txt", ".md", ".py", ".js", ".html", ".css", ".json", ".xml",  # Text files
+                        ".csv", ".xlsx", ".xls",  # Data files
+                        ".pdf", ".doc", ".docx"  # Documents
+                    ],
+                    height=120,
+                    elem_classes="file-upload"
+                )
+        
+        # Input and buttons with enhanced styling
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column(scale=8):
+                question_input = gr.Textbox(
+                    label="💭 Ask a question",
+                    placeholder="Type your question here or upload files above... (e.g., 'What is the capital of France?', 'Analyze this image', 'Summarize this document')",
+                    lines=3,
+                    max_lines=5,
+                    elem_classes="textbox"
+                )
+            with gr.Column(scale=2, min_width=120):
+                submit_btn = gr.Button("🚀 Send", variant="primary", size="lg", elem_classes="btn btn-primary")
+        
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column(scale=1):
+                clear_btn = gr.Button("🧹 Clear History", variant="secondary", elem_classes="btn btn-secondary")
+            with gr.Column(scale=1):
+                clear_files_btn = gr.Button("🗑️ Clear Files", variant="secondary", elem_classes="btn btn-secondary")
+            with gr.Column(scale=1):
+                export_btn = gr.Button("💾 Export Chat", variant="secondary", elem_classes="btn btn-secondary")
+                
+        # Hidden download component for chat export
+        download_file = gr.File(visible=False)
+            
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column():
+                gr.Examples(
+                    examples=[
+                        "What is the current population of Tokyo?",
+                        "Calculate the square root of 144",
+                        "Write a Python function to sort a list",
+                        "What are the latest developments in AI?",
+                        "Explain quantum computing in simple terms",
+                    ],
+                    inputs=question_input,
+                    label="🌐 General Questions"
+                )
+            with gr.Column():
+                gr.Examples(
+                    examples=[
+                        "Search for recent papers on machine learning",
+                        "What is the weather like today?",
+                        "Create a simple bar chart using Python",
+                        "Convert 100 USD to EUR",
+                        "What are the benefits of renewable energy?",
+                    ],
+                    inputs=question_input,
+                    label="🔬 Research & Analysis"
+                )
+            with gr.Column():
+                gr.Examples(
+                    examples=[
+                        "Analyze this image and describe what you see",
+                        "Extract text from this image using OCR",
+                        "Summarize the content of this document",
+                        "Analyze the data in this CSV file",
+                        "What insights can you find in this Excel file?",
+                    ],
+                    inputs=question_input,
+                    label="📁 File Analysis"
+                )
+        
+        # Event handlers
+        def submit_question(question, history, files):
+            print(f"🎯 UI: Submit button clicked")
+            print(f"📝 UI: Question length: {len(question) if question else 0}")
+            print(f"📁 UI: Files count: {len(files) if files else 0}")
+            result_question, result_history = chatbot.process_question(question, history, files)
+            print(f"🔄 UI: Returning results and clearing files")
+            return result_question, result_history, None  # Clear files after processing
+        
+        def clear_conversation():
+            print("�� UI: Clear conversation button clicked")
+            return chatbot.clear_history()
+        
+        def clear_files():
+            print("🗑️  UI: Clear files button clicked")
+            return None
+            
+        def export_conversation(history):
+            """Export conversation history to a text file"""
+            print("💾 UI: Export conversation button clicked")
+            if not history:
+                print("⚠️  No conversation to export")
+                return None
+                
+            try:
+                import tempfile
+                import datetime
+                
+                # Create export content
+                timestamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+                export_content = f"# GAIA Agent Conversation Export\n"
+                export_content += f"Export Date: {datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n"
+                export_content += f"Total Messages: {len(history)}\n\n"
+                export_content += "=" * 50 + "\n\n"
+                
+                for i, (user_msg, bot_msg) in enumerate(history, 1):
+                    export_content += f"## Message {i}\n\n"
+                    export_content += f"**User:** {user_msg}\n\n"
+                    export_content += f"**Assistant:** {bot_msg}\n\n"
+                    export_content += "-" * 30 + "\n\n"
+                
+                # Save to temporary file
+                temp_file = tempfile.NamedTemporaryFile(
+                    mode='w', 
+                    suffix=f'_gaia_chat_export_{timestamp}.md',
+                    delete=False,
+                    encoding='utf-8'
+                )
+                temp_file.write(export_content)
+                temp_file.close()
+                
+                print(f"📄 Conversation exported to: {temp_file.name}")
+                return temp_file.name
+                
+            except Exception as e:
+                print(f"❌ Error exporting conversation: {e}")
+                return None
+        
+        # Connect the events
+        submit_btn.click(
+            fn=submit_question,
+            inputs=[question_input, chatbot_interface, file_upload],
+            outputs=[question_input, chatbot_interface, file_upload],
+            show_progress=True
         )
-        print("Submission successful.")
-        results_df = pd.DataFrame(results_log)
-        return final_status, results_df
-    except requests.exceptions.HTTPError as e:
-        error_detail = f"Server responded with status {e.response.status_code}."
-        try:
-            error_json = e.response.json()
-            error_detail += f" Detail: {error_json.get('detail', e.response.text)}"
-        except requests.exceptions.JSONDecodeError:
-            error_detail += f" Response: {e.response.text[:500]}"
-        status_message = f"Submission Failed: {error_detail}"
-        print(status_message)
-        results_df = pd.DataFrame(results_log)
-        return status_message, results_df
-    except requests.exceptions.Timeout:
-        status_message = "Submission Failed: The request timed out."
-        print(status_message)
-        results_df = pd.DataFrame(results_log)
-        return status_message, results_df
-    except requests.exceptions.RequestException as e:
-        status_message = f"Submission Failed: Network error - {e}"
-        print(status_message)
-        results_df = pd.DataFrame(results_log)
-        return status_message, results_df
-    except Exception as e:
-        status_message = f"An unexpected error occurred during submission: {e}"
-        print(status_message)
-        results_df = pd.DataFrame(results_log)
-        return status_message, results_df
-
-
-# --- Build Gradio Interface using Blocks ---
-with gr.Blocks() as demo:
-    gr.Markdown("# Basic Agent Evaluation Runner")
-    gr.Markdown(
-        """
-        **Instructions:**
-        1.  Please clone this space, then modify the code to define your agent's logic, the tools, the necessary packages, etc ...
-        2.  Log in to your Hugging Face account using the button below. This uses your HF username for submission.
-        3.  Click 'Run Evaluation & Submit All Answers' to fetch questions, run your agent, submit answers, and see the score.
-        ---
-        **Disclaimers:**
-        Once clicking on the "submit button, it can take quite some time ( this is the time for the agent to go through all the questions).
-        This space provides a basic setup and is intentionally sub-optimal to encourage you to develop your own, more robust solution. For instance for the delay process of the submit button, a solution could be to cache the answers and submit in a seperate action or even to answer the questions in async.
-        """
-    )
-
-    gr.LoginButton()
-
-    run_button = gr.Button("Run Evaluation & Submit All Answers")
-
-    status_output = gr.Textbox(label="Run Status / Submission Result", lines=5, interactive=False)
-    # Removed max_rows=10 from DataFrame constructor
-    results_table = gr.DataFrame(label="Questions and Agent Answers", wrap=True)
-
-    run_button.click(
-        fn=run_and_submit_all,
-        outputs=[status_output, results_table]
-    )
+        
+        question_input.submit(
+            fn=submit_question,
+            inputs=[question_input, chatbot_interface, file_upload],
+            outputs=[question_input, chatbot_interface, file_upload],
+            show_progress=True
+        )
+        
+        clear_btn.click(
+            fn=clear_conversation,
+            outputs=[chatbot_interface],
+            show_progress=False
+        )
+        
+        clear_files_btn.click(
+            fn=clear_files,
+            outputs=[file_upload],
+            show_progress=False
+        )
+        
+        export_btn.click(
+            fn=export_conversation,
+            inputs=[chatbot_interface],
+            outputs=[download_file],
+            show_progress=True
+        )
+    
+    return demo
 
 if __name__ == "__main__":
-    print("\n" + "-"*30 + " App Starting " + "-"*30)
-    # Check for SPACE_HOST and SPACE_ID at startup for information
-    space_host_startup = os.getenv("SPACE_HOST")
-    space_id_startup = os.getenv("SPACE_ID") # Get SPACE_ID at startup
-
-    if space_host_startup:
-        print(f"✅ SPACE_HOST found: {space_host_startup}")
-        print(f"   Runtime URL should be: https://{space_host_startup}.hf.space")
-    else:
-        print("ℹ️  SPACE_HOST environment variable not found (running locally?).")
-
-    if space_id_startup: # Print repo URLs if SPACE_ID is found
-        print(f"✅ SPACE_ID found: {space_id_startup}")
-        print(f"   Repo URL: https://huggingface.co/spaces/{space_id_startup}")
-        print(f"   Repo Tree URL: https://huggingface.co/spaces/{space_id_startup}/tree/main")
-    else:
-        print("ℹ️  SPACE_ID environment variable not found (running locally?). Repo URL cannot be determined.")
-
-    print("-"*(60 + len(" App Starting ")) + "\n")
-
-    print("Launching Gradio Interface for Basic Agent Evaluation...")
-    demo.launch(debug=True, share=False)
+    print("\n" + "-"*50)
+    print("🚀 Starting GAIA Agent Q&A Chatbot...")
+    print("-"*50 + "\n")
+    
+    # Create and launch the interface
+    demo = create_qna_interface()
+    demo.launch(
+        debug=True,
+        share=False,
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True
+    )