Update app.py

app.py

@@ -425,114 +425,113 @@ def create_interface():
         theme=gr.themes.Base(),
         css="""
     /* Import Google Fonts for better typography */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-    
+    [cite_start]@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); [cite: 52]
     /* Dark theme styling with enhanced visuals */
     .gradio-container {
-        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
-        color: #ffffff !important; /* Ensure base text color is bright */
-        height: 100vh !important;
-        max-width: none !important;
-        padding: 0 !important;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+        [cite_start]background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important; [cite: 52]
+        color: #ffffff !important; [cite_start]/* Ensure base text color is bright */ [cite: 53]
+        [cite_start]height: 100vh !important; [cite: 53]
+        [cite_start]max-width: none !important; [cite: 54]
+        [cite_start]padding: 0 !important; [cite: 54]
+        [cite_start]font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; [cite: 55]
     }
     
     /* Main container with animated background */
     .main-container {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
+        [cite_start]display: flex; [cite: 56]
+        [cite_start]flex-direction: column; [cite: 56]
+        [cite_start]height: 100vh; [cite: 56]
         background: 
             radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
             radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
             radial-gradient(circle at 40% 80%, rgba(255, 87, 34, 0.03) 0%, transparent 50%),
-            linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
-        animation: backgroundShift 15s ease-in-out infinite alternate;
+            [cite_start]linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); [cite: 56]
+        [cite_start]animation: backgroundShift 15s ease-in-out infinite alternate; [cite: 57]
     }
     
     @keyframes backgroundShift {
-        0% { filter: hue-rotate(0deg); }
-        100% { filter: hue-rotate(10deg); }
+        [cite_start]0% { filter: hue-rotate(0deg); [cite: 58] }
+        [cite_start]100% { filter: hue-rotate(10deg); [cite: 59] }
     }
     
     /* Enhanced Header with glow */
     .header {
-        background: rgba(255, 193, 7, 0.08);
-        border-bottom: 2px solid transparent;
-        border-image: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 123, 255, 0.3)) 1;
-        padding: 1.5rem 2rem;
-        backdrop-filter: blur(20px);
+        [cite_start]background: rgba(255, 193, 7, 0.08); [cite: 60]
+        [cite_start]border-bottom: 2px solid transparent; [cite: 60]
+        [cite_start]border-image: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 123, 255, 0.3)) 1; [cite: 60]
+        [cite_start]padding: 1.5rem 2rem; [cite: 60]
+        [cite_start]backdrop-filter: blur(20px); [cite: 61]
         box-shadow: 
             0 4px 20px rgba(255, 193, 7, 0.1),
-            inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        position: relative;
-        overflow: hidden;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.1); [cite: 61]
+        [cite_start]position: relative; [cite: 62]
+        [cite_start]overflow: hidden; [cite: 62]
     }
     
     .header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
-        animation: shimmer 3s ease-in-out infinite;
+        [cite_start]content: ''; [cite: 63]
+        [cite_start]position: absolute; [cite: 63]
+        [cite_start]top: 0; [cite: 63]
+        [cite_start]left: -100%; [cite: 63]
+        [cite_start]width: 100%; [cite: 63]
+        [cite_start]height: 100%; [cite: 63]
+        [cite_start]background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent); [cite: 63]
+        [cite_start]animation: shimmer 3s ease-in-out infinite; [cite: 64]
     }
     
     @keyframes shimmer {
-        0% { left: -100%; }
-        100% { left: 100%; }
+        [cite_start]0% { left: -100%; [cite: 65] }
+        [cite_start]100% { left: 100%; [cite: 66] }
     }
     
     .header h1 {
-        color: #ffc107;
-        margin: 0;
-        font-size: 2rem;
-        font-weight: 700;
+        [cite_start]color: #ffc107; [cite: 67]
+        [cite_start]margin: 0; [cite: 67]
+        [cite_start]font-size: 2rem; [cite: 67]
+        [cite_start]font-weight: 700; [cite: 67]
         text-shadow: 
             0 0 10px rgba(255, 193, 7, 0.3),
-            0 0 20px rgba(255, 193, 7, 0.2);
-        letter-spacing: -0.02em;
+            [cite_start]0 0 20px rgba(255, 193, 7, 0.2); [cite: 67]
+        [cite_start]letter-spacing: -0.02em; [cite: 68]
     }
     
     .header p {
-        color: #e0e0e0;
-        margin: 0.5rem 0 0 0;
-        font-size: 1rem;
-        font-weight: 400;
-        opacity: 0.9;
+        color: #ffffff; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 69]
+        [cite_start]margin: 0.5rem 0 0 0; [cite: 69]
+        [cite_start]font-size: 1rem; [cite: 69]
+        [cite_start]font-weight: 400; [cite: 69]
+        [cite_start]opacity: 0.9; [cite: 70]
     }
     
     /* Enhanced Chat container */
     .chat-container {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        max-width: 1200px;
-        margin: 0 auto;
-        width: 100%;
-        padding: 2rem;
-        height: calc(100vh - 200px) !important;
-        gap: 1.5rem;
+        [cite_start]flex: 1; [cite: 71]
+        [cite_start]display: flex; [cite: 71]
+        [cite_start]flex-direction: column; [cite: 71]
+        [cite_start]max-width: 1200px; [cite: 71]
+        [cite_start]margin: 0 auto; [cite: 71]
+        [cite_start]width: 100%; [cite: 71]
+        [cite_start]padding: 2rem; [cite: 71]
+        [cite_start]height: calc(100vh - 200px) !important; [cite: 71]
+        [cite_start]gap: 1.5rem; [cite: 72]
     }
     
     /* Enhanced Chatbot with glow effect */
     .gradio-chatbot {
-        height: 400px !important;
-        max-height: 400px !important;
-        background: rgba(45, 45, 45, 0.4) !important;
-        border: 2px solid rgba(255, 193, 7, 0.2) !important;
-        border-radius: 20px !important;
-        margin-bottom: 1rem;
-        overflow-y: auto !important;
+        [cite_start]height: 400px !important; [cite: 73]
+        [cite_start]max-height: 400px !important; [cite: 73]
+        [cite_start]background: rgba(45, 45, 45, 0.4) !important; [cite: 73]
+        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2) !important; [cite: 73]
+        [cite_start]border-radius: 20px !important; [cite: 74]
+        [cite_start]margin-bottom: 1rem; [cite: 74]
+        [cite_start]overflow-y: auto !important; [cite: 74]
         box-shadow: 
             0 0 30px rgba(255, 193, 7, 0.15),
             0 8px 32px rgba(0, 0, 0, 0.3),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
-        backdrop-filter: blur(20px) !important;
-        position: relative;
-        animation: chatGlow 4s ease-in-out infinite alternate;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 74]
+        [cite_start]backdrop-filter: blur(20px) !important; [cite: 75]
+        [cite_start]position: relative; [cite: 75]
+        [cite_start]animation: chatGlow 4s ease-in-out infinite alternate; [cite: 76]
     }
     
     @keyframes chatGlow {
@@ -540,71 +539,71 @@ def create_interface():
             box-shadow: 
                 0 0 30px rgba(255, 193, 7, 0.15),
                 0 8px 32px rgba(0, 0, 0, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 77]
         }
         100% { 
             box-shadow: 
                 0 0 40px rgba(255, 193, 7, 0.25),
                 0 12px 40px rgba(0, 0, 0, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08); [cite: 78]
         }
     }
     
     /* Enhanced chat messages */
     .message {
-        background: rgba(255, 255, 255, 0.05) !important;
-        border-radius: 16px !important;
-        padding: 1rem 1.5rem !important;
-        margin: 0.75rem 0 !important;
-        border: 1px solid rgba(255, 255, 255, 0.1) !important;
-        backdrop-filter: blur(10px) !important;
-        font-size: 0.95rem !important;
-        line-height: 1.6 !important;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
-        transition: all 0.3s ease !important;
-        color: #ffffff !important; /* Made brighter for all messages */
+        [cite_start]background: rgba(255, 255, 255, 0.05) !important; [cite: 79]
+        [cite_start]border-radius: 16px !important; [cite: 79]
+        [cite_start]padding: 1rem 1.5rem !important; [cite: 79]
+        [cite_start]margin: 0.75rem 0 !important; [cite: 79]
+        [cite_start]border: 1px solid rgba(255, 255, 255, 0.1) !important; [cite: 80]
+        [cite_start]backdrop-filter: blur(10px) !important; [cite: 80]
+        [cite_start]font-size: 0.95rem !important; [cite: 80]
+        [cite_start]line-height: 1.6 !important; [cite: 80]
+        [cite_start]box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; [cite: 81]
+        [cite_start]transition: all 0.3s ease !important; [cite: 81]
+        color: #ffffff !important; [cite_start]/* Made brighter for all messages */ [cite: 81]
     }
     
     .message:hover {
-        transform: translateY(-1px) !important;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
+        [cite_start]transform: translateY(-1px) !important; [cite: 82]
+        [cite_start]box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; [cite: 82]
     }
     
     /* User message styling */
     .message.user {
-        background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)) !important;
-        border-color: rgba(255, 193, 7, 0.2) !important;
-        margin-left: 15% !important;
+        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)) !important; [cite: 83]
+        [cite_start]border-color: rgba(255, 193, 7, 0.2) !important; [cite: 83]
+        [cite_start]margin-left: 15% !important; [cite: 83]
         box-shadow: 
             0 2px 10px rgba(255, 193, 7, 0.1),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 84]
     }
     
     /* Assistant message styling - important for streaming text */
     .message.assistant {
-        background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04)) !important;
-        border-color: rgba(0, 123, 255, 0.2) !important;
-        margin-right: 15% !important;
+        [cite_start]background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04)) !important; [cite: 85]
+        [cite_start]border-color: rgba(0, 123, 255, 0.2) !important; [cite: 85]
+        [cite_start]margin-right: 15% !important; [cite: 85]
         box-shadow: 
             0 2px 10px rgba(0, 123, 255, 0.1),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
-        color: #ffffff !important; /* Ensures generated text is bright white */
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 86]
+        color: #ffffff !important; [cite_start]/* Ensures generated text is bright white */ [cite: 86]
     }
     
     /* Enhanced Input area with glow */
     .input-area {
-        background: rgba(45, 45, 45, 0.6);
-        border-radius: 20px;
-        padding: 1.5rem;
-        border: 2px solid rgba(255, 193, 7, 0.2);
-        backdrop-filter: blur(20px);
-        position: sticky;
-        bottom: 0;
+        [cite_start]background: rgba(45, 45, 45, 0.6); [cite: 87]
+        [cite_start]border-radius: 20px; [cite: 87]
+        [cite_start]padding: 1.5rem; [cite: 87]
+        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2); [cite: 87]
+        [cite_start]backdrop-filter: blur(20px); [cite: 87]
+        [cite_start]position: sticky; [cite: 87]
+        [cite_start]bottom: 0; [cite: 88]
         box-shadow: 
             0 0 25px rgba(255, 193, 7, 0.1),
             0 8px 32px rgba(0, 0, 0, 0.2),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05);
-        animation: inputGlow 3s ease-in-out infinite alternate;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 89]
+        [cite_start]animation: inputGlow 3s ease-in-out infinite alternate; [cite: 89]
     }
     
     @keyframes inputGlow {
@@ -612,217 +611,217 @@ def create_interface():
             box-shadow: 
                 0 0 25px rgba(255, 193, 7, 0.1),
                 0 8px 32px rgba(0, 0, 0, 0.2),
-                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05); [cite: 90]
         }
         100% { 
             box-shadow: 
                 0 0 35px rgba(255, 193, 7, 0.2),
                 0 12px 40px rgba(0, 0, 0, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+                [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08); [cite: 91]
         }
     }
     
     /* Enhanced File upload area */
     .upload-area {
-        background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.04)) !important;
-        border: 2px dashed rgba(255, 193, 7, 0.4) !important;
-        border-radius: 16px !important;
-        padding: 1.5rem !important;
-        margin-bottom: 1.5rem !important;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        backdrop-filter: blur(10px) !important;
+        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.04)) !important; [cite: 92]
+        [cite_start]border: 2px dashed rgba(255, 193, 7, 0.4) !important; [cite: 92]
+        [cite_start]border-radius: 16px !important; [cite: 92]
+        [cite_start]padding: 1.5rem !important; [cite: 92]
+        [cite_start]margin-bottom: 1.5rem !important; [cite: 93]
+        [cite_start]transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 93]
+        [cite_start]backdrop-filter: blur(10px) !important; [cite: 94]
         box-shadow: 
             0 0 20px rgba(255, 193, 7, 0.05),
-            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; [cite: 95]
     }
     
     .upload-area:hover {
-        background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.06)) !important;
-        border-color: rgba(255, 193, 7, 0.6) !important;
+        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.06)) !important; [cite: 96]
+        [cite_start]border-color: rgba(255, 193, 7, 0.6) !important; [cite: 96]
         box-shadow: 
             0 0 30px rgba(255, 193, 7, 0.15),
-            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
-        transform: translateY(-2px) !important;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; [cite: 97]
+        [cite_start]transform: translateY(-2px) !important; [cite: 97]
     }
     
     /* Sidebar styling */
     .sidebar {
-        background: rgba(30, 30, 30, 0.6) !important;
-        border-right: 2px solid rgba(255, 193, 7, 0.1) !important;
-        backdrop-filter: blur(15px) !important;
+        [cite_start]background: rgba(30, 30, 30, 0.6) !important; [cite: 98]
+        [cite_start]border-right: 2px solid rgba(255, 193, 7, 0.1) !important; [cite: 98]
+        [cite_start]backdrop-filter: blur(15px) !important; [cite: 99]
         box-shadow: 
             inset -1px 0 0 rgba(255, 255, 255, 0.05),
-            4px 0 20px rgba(0, 0, 0, 0.1) !important;
+            [cite_start]4px 0 20px rgba(0, 0, 0, 0.1) !important; [cite: 100]
     }
     
     /* Enhanced buttons with glow effects */
     .send-btn {
-        background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
-        color: #000000 !important;
-        border: none !important;
-        border-radius: 12px !important;
-        font-weight: 600 !important;
-        min-height: 48px !important;
-        font-size: 0.95rem !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        [cite_start]background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important; [cite: 101]
+        [cite_start]color: #000000 !important; [cite: 101]
+        [cite_start]border: none !important; [cite: 101]
+        [cite_start]border-radius: 12px !important; [cite: 101]
+        [cite_start]font-weight: 600 !important; [cite: 101]
+        [cite_start]min-height: 48px !important; [cite: 101]
+        [cite_start]font-size: 0.95rem !important; [cite: 102]
+        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 102]
         box-shadow: 
             0 4px 15px rgba(255, 193, 7, 0.3),
-            0 0 20px rgba(255, 193, 7, 0.2) !important;
-        position: relative;
-        overflow: hidden;
+            [cite_start]0 0 20px rgba(255, 193, 7, 0.2) !important; [cite: 103]
+        [cite_start]position: relative; [cite: 103]
+        [cite_start]overflow: hidden; [cite: 103]
     }
     
     .send-btn::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-        transition: left 0.5s;
+        [cite_start]content: ''; [cite: 104]
+        [cite_start]position: absolute; [cite: 104]
+        [cite_start]top: 0; [cite: 104]
+        [cite_start]left: -100%; [cite: 104]
+        [cite_start]width: 100%; [cite: 104]
+        [cite_start]height: 100%; [cite: 104]
+        [cite_start]background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); [cite: 105]
+        [cite_start]transition: left 0.5s; [cite: 105]
     }
     
     .send-btn:hover::before {
-        left: 100%;
+        [cite_start]left: 100%; [cite: 106]
     }
     
     .send-btn:hover {
-        transform: translateY(-2px) !important;
+        [cite_start]transform: translateY(-2px) !important; [cite: 107]
         box-shadow: 
             0 8px 25px rgba(255, 193, 7, 0.4),
-            0 0 30px rgba(255, 193, 7, 0.3) !important;
+            [cite_start]0 0 30px rgba(255, 193, 7, 0.3) !important; [cite: 108]
     }
     
     .primary-btn {
-        background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
-        color: #000000 !important;
-        border: none !important;
-        border-radius: 12px !important;
-        font-weight: 600 !important;
-        padding: 0.75rem 1.5rem !important;
-        font-size: 0.95rem !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        [cite_start]background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important; [cite: 109]
+        [cite_start]color: #000000 !important; [cite: 109]
+        [cite_start]border: none !important; [cite: 109]
+        [cite_start]border-radius: 12px !important; [cite: 109]
+        [cite_start]font-weight: 600 !important; [cite: 109]
+        [cite_start]padding: 0.75rem 1.5rem !important; [cite: 109]
+        [cite_start]font-size: 0.95rem !important; [cite: 110]
+        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 110]
         box-shadow: 
             0 4px 15px rgba(255, 193, 7, 0.3),
-            0 0 20px rgba(255, 193, 7, 0.2) !important;
+            [cite_start]0 0 20px rgba(255, 193, 7, 0.2) !important; [cite: 111]
     }
     
     .primary-btn:hover {
-        transform: translateY(-2px) !important;
+        [cite_start]transform: translateY(-2px) !important; [cite: 112]
         box-shadow: 
             0 8px 25px rgba(255, 193, 7, 0.4),
-            0 0 30px rgba(255, 193, 7, 0.3) !important;
+            [cite_start]0 0 30px rgba(255, 193, 7, 0.3) !important; [cite: 113]
     }
     
     /* Enhanced Text inputs with glow */
     .gradio-textbox input, .gradio-textbox textarea {
-        background: rgba(45, 45, 45, 0.8) !important;
-        color: #ffffff !important;
-        border: 2px solid rgba(255, 193, 7, 0.2) !important;
-        border-radius: 12px !important;
-        font-size: 0.95rem !important;
-        padding: 0.75rem 1rem !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        backdrop-filter: blur(10px) !important;
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        [cite_start]background: rgba(45, 45, 45, 0.8) !important; [cite: 114]
+        [cite_start]color: #ffffff !important; [cite: 114]
+        [cite_start]border: 2px solid rgba(255, 193, 7, 0.2) !important; [cite: 114]
+        [cite_start]border-radius: 12px !important; [cite: 114]
+        [cite_start]font-size: 0.95rem !important; [cite: 115]
+        [cite_start]padding: 0.75rem 1rem !important; [cite: 115]
+        [cite_start]transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; [cite: 115]
+        [cite_start]backdrop-filter: blur(10px) !important; [cite: 116]
+        [cite_start]box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; [cite: 117]
     }
     
     .gradio-textbox input:focus, .gradio-textbox textarea:focus {
-        border-color: rgba(255, 193, 7, 0.5) !important;
+        [cite_start]border-color: rgba(255, 193, 7, 0.5) !important; [cite: 118]
         box-shadow: 
             0 0 20px rgba(255, 193, 7, 0.2),
-            inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-        outline: none !important;
+            [cite_start]inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; [cite: 119]
+        [cite_start]outline: none !important; [cite: 119]
     }
     
     /* Enhanced Processing indicator */
     .processing-indicator {
-        background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
-        border: 2px solid rgba(255, 193, 7, 0.3);
-        border-radius: 12px;
-        padding: 1rem 1.5rem;
-        margin: 1rem 0;
-        color: #ffc107;
-        text-align: center;
-        font-weight: 500;
-        backdrop-filter: blur(10px);
+        [cite_start]background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08)); [cite: 120]
+        [cite_start]border: 2px solid rgba(255, 193, 7, 0.3); [cite: 120]
+        [cite_start]border-radius: 12px; [cite: 120]
+        [cite_start]padding: 1rem 1.5rem; [cite: 120]
+        [cite_start]margin: 1rem 0; [cite: 120]
+        [cite_start]color: #ffc107; [cite: 120]
+        [cite_start]text-align: center; [cite: 121]
+        [cite_start]font-weight: 500; [cite: 121]
+        [cite_start]backdrop-filter: blur(10px); [cite: 121]
         box-shadow: 
             0 0 25px rgba(255, 193, 7, 0.1),
-            inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        animation: processingPulse 2s ease-in-out infinite;
+            [cite_start]inset 0 1px 0 rgba(255, 255, 255, 0.1); [cite: 122]
+        [cite_start]animation: processingPulse 2s ease-in-out infinite; [cite: 122]
     }
     
     @keyframes processingPulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.8; }
+        [cite_start]0%, 100% { opacity: 1; [cite: 123] }
+        [cite_start]50% { opacity: 0.8; [cite: 124] }
     }
     
     /* Enhanced Input row styling */
     .input-row {
-        display: flex !important;
-        gap: 12px !important;
-        align-items: end !important;
+        [cite_start]display: flex !important; [cite: 125]
+        [cite_start]gap: 12px !important; [cite: 125]
+        [cite_start]align-items: end !important; [cite: 125]
     }
     
     /* Message input */
     .message-input {
-        flex: 1 !important;
-        min-height: 48px !important;
+        [cite_start]flex: 1 !important; [cite: 126]
+        [cite_start]min-height: 48px !important; [cite: 126]
     }
     
     /* Markdown content styling - applies to text within gr.Markdown components */
     .markdown-content {
-        color: #e0e0e0 !important; /* Made brighter for general markdown text */
-        line-height: 1.6 !important;
-        font-size: 0.95rem !important;
+        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 127]
+        [cite_start]line-height: 1.6 !important; [cite: 128]
+        [cite_start]font-size: 0.95rem !important; [cite: 128]
     }
     
     .markdown-content h1, .markdown-content h2, .markdown-content h3 {
-        color: #ffc107 !important;
-        margin-top: 1.5rem !important;
-        margin-bottom: 0.5rem !important;
+        [cite_start]color: #ffc107 !important; [cite: 129]
+        [cite_start]margin-top: 1.5rem !important; [cite: 129]
+        [cite_start]margin-bottom: 0.5rem !important; [cite: 129]
     }
     
     .markdown-content code {
-        background: rgba(255, 193, 7, 0.1) !important;
-        color: #ffc107 !important;
-        padding: 0.2rem 0.4rem !important;
-        border-radius: 4px !important;
+        [cite_start]background: rgba(255, 193, 7, 0.1) !important; [cite: 130]
+        [cite_start]color: #ffc107 !important; [cite: 130]
+        [cite_start]padding: 0.2rem 0.4rem !important; [cite: 130]
+        [cite_start]border-radius: 4px !important; [cite: 131]
     }
     
     .markdown-content pre {
-        background: rgba(0, 0, 0, 0.3) !important;
-        border: 1px solid rgba(255, 193, 7, 0.2) !important;
-        border-radius: 8px !important;
-        padding: 1rem !important;
-        margin: 1rem 0 !important;
+        [cite_start]background: rgba(0, 0, 0, 0.3) !important; [cite: 132]
+        [cite_start]border: 1px solid rgba(255, 193, 7, 0.2) !important; [cite: 132]
+        [cite_start]border-radius: 8px !important; [cite: 132]
+        [cite_start]padding: 1rem !important; [cite: 132]
+        [cite_start]margin: 1rem 0 !important; [cite: 133]
     }
     
     /* Examples styling */
     .examples {
-        background: rgba(45, 45, 45, 0.3) !important;
-        border-radius: 12px !important;
-        padding: 1rem !important;
-        border: 1px solid rgba(255, 193, 7, 0.1) !important;
-        backdrop-filter: blur(10px) !important;
-        color: #e0e0e0 !important; /* Explicitly set for examples text */
+        [cite_start]background: rgba(45, 45, 45, 0.3) !important; [cite: 134]
+        [cite_start]border-radius: 12px !important; [cite: 134]
+        [cite_start]padding: 1rem !important; [cite: 134]
+        [cite_start]border: 1px solid rgba(255, 193, 7, 0.1) !important; [cite: 134]
+        [cite_start]backdrop-filter: blur(10px) !important; [cite: 134]
+        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 135]
     }
 
     /* General paragraph text and Gradio HTML components (for architecture text) */
     .gradio-container p,
     .gradio-container .gr-html {
-        color: #e0e0e0 !important; /* Ensures general text is visible */
+        color: #ffffff !important; [cite_start]/* UPDATED from #e0e0e0 */ [cite: 136]
     }
     
     /* Loading animation */
     @keyframes loading {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        [cite_start]0% { transform: rotate(0deg); [cite: 137] }
+        [cite_start]100% { transform: rotate(360deg); [cite: 138] }
     }
     
     .loading {
-        animation: loading 2s linear infinite;
+        [cite_start]animation: loading 2s linear infinite; [cite: 139]
     }
     
     /* Responsive design */
@@ -835,106 +834,88 @@ def create_interface():
             with gr.Column():
                 gr.HTML("""
                 <div class="header">
-                    <h1> Agentic RAG Assistant</h1>
+                    [cite_start]<h1> Agentic RAG Assistant</h1> [cite: 140]
                     <p>Upload documents and ask questions - powered by Multi-Agent Architecture with streaming responses</p>
                 </div>
                 """)
 
         # Main layout with sidebar and chat
-        with gr.Row():
+        [cite_start]with gr.Row(): [cite: 141]
             # Left sidebar for file upload
             with gr.Column(scale=1, elem_classes=["sidebar"]):
-                gr.Markdown("### 📁 Document Upload", elem_classes=["markdown-content"])
+                gr.Markdown("### 刀 Document Upload", elem_classes=["markdown-content"])
                 
                 file_upload = gr.File(
-                    file_count="multiple",
-                    file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
-                    label="📄 Upload Documents",
-                    elem_classes=["upload-area"]
+                    [cite_start]file_count="multiple", [cite: 142]
+                    [cite_start]file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"], [cite: 142]
+                    [cite_start]label="塘 Upload Documents", [cite: 142]
+                    [cite_start]elem_classes=["upload-area"] [cite: 142]
                 )
                 
-                processing_status = gr.HTML(visible=False)
+                [cite_start]processing_status = gr.HTML(visible=False) [cite: 143]
                 
                 process_btn = gr.Button(
                     " Process Documents",
                     variant="primary",
-                    elem_classes=["primary-btn"]
+                    [cite_start]elem_classes=["primary-btn"] [cite: 144]
                 )
                 
-                gr.Markdown("""
-                ###  Architecture
-                
-                **Multi-Agent System:**
-                -  **IngestionAgent**: Document parsing
-                -  **RetrievalAgent**: Semantic search  
-                -  **LLMAgent**: Response generation
-                -  **CoordinatorAgent**: Workflow orchestration
-                
-                **Features:**
-                -  Streaming responses
-                -  Multi-format support
-                -  Context-aware answers
-                -  Real-time processing
-                """, elem_classes=["markdown-content"])
+                # REMOVED the Architecture Markdown block
 
             # Right side - Chat interface
             with gr.Column(scale=2):
-                gr.Markdown("### 💬 Chat Interface", elem_classes=["markdown-content"])
+                gr.Markdown("### 町 Chat Interface", elem_classes=["markdown-content"])
                 
                 # Chatbot with enhanced styling
-                chatbot = gr.Chatbot(
-                    height=400,
-                    elem_classes=["gradio-chatbot"],
-                    show_copy_button=True,
-                    type="messages",
-                    placeholder="Upload documents , then start chatting! Ask me anything about your documents.",
-                    avatar_images=("👤", "🤖")
+                [cite_start]chatbot = gr.Chatbot( [cite: 148]
+                    [cite_start]height=400, [cite: 148]
+                    [cite_start]elem_classes=["gradio-chatbot"], [cite: 148]
+                    [cite_start]show_copy_button=True, [cite: 148]
+                    [cite_start]type="messages", [cite: 149]
+                    [cite_start]placeholder="Upload documents , then start chatting! Ask me anything about your documents.", [cite: 149, 150]
+                    [cite_start]avatar_images=("側", "､) [cite: 150]
                 )
                 
                 # Input area with improved layout
                 with gr.Row(elem_classes=["input-row"]):
-                    msg_input = gr.Textbox(
-                        placeholder="Ask about your documents...",
-                        label="Message",
-                        scale=4,
-                        elem_classes=["message-input"],
-                        show_label=False,
-                        autofocus=True
+                    [cite_start]msg_input = gr.Textbox( [cite: 151]
+                        [cite_start]placeholder="Ask about your documents...", [cite: 151]
+                        [cite_start]label="Message", [cite: 151]
+                        [cite_start]scale=4, [cite: 151]
+                        [cite_start]elem_classes=["message-input"], [cite: 152]
+                        [cite_start]show_label=False, [cite: 152]
+                        [cite_start]autofocus=True [cite: 152]
                     )
-                    send_btn = gr.Button(
+                    [cite_start]send_btn = gr.Button( [cite: 153]
                         " Send", 
                         scale=1, 
-                        elem_classes=["send-btn"],
-                        size="sm"
+                        [cite_start]elem_classes=["send-btn"], [cite: 153]
+                        [cite_start]size="sm" [cite: 154]
                     )
 
-                # Enhanced Examples
+                # Enhanced Examples - UPDATED with fewer examples
                 gr.Examples(
                     examples=[
-                        " What are the main topics discussed?",
-                        " Summarize the key findings",
-                        " What metrics are mentioned?",
-                        " What are the recommendations?",
-                        " Find specific information about...",
-                        " Create a summary of the content"
+                        [cite_start]"Summarize the key findings", [cite: 155]
+                        [cite_start]"What are the main topics discussed?", [cite: 155]
                     ],
-                    inputs=msg_input,
-                    label=" Example Questions",
-                    # elem_classes=["examples"]
+                    [cite_start]inputs=msg_input, [cite: 156]
+                    [cite_start]label=" Example Questions", [cite: 157]
+                    elem_classes=["examples"]
                 )
 
         # State to track document processing
         doc_processed = gr.State(False)
         
         # Event handlers
-        def handle_file_upload_and_process(files):
+        [cite_start]def handle_file_upload_and_process(files): [cite: 158]
             if not files:
                 return gr.update(visible=False), False
             
             # Show processing indicator
             processing_html = f"""
             <div class="processing-indicator">
-                 Processing {len(files)} documents... Please wait while we analyze your content.
+                [cite_start]Processing {len(files)} documents... Please wait while we analyze your content. [cite: 159]
             </div>
             """
             
@@ -943,8 +924,8 @@ def create_interface():
                 result = coordinator_agent.process_files(files)
                 
                 # Wait a moment for processing to complete
-                import time
-                time.sleep(3)
+                [cite_start]import time [cite: 161]
+                [cite_start]time.sleep(3) [cite: 161]
                 
                 success_html = """
                 <div style="background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08)); 
@@ -953,7 +934,7 @@ def create_interface():
                            box-shadow: 0 0 20px rgba(76, 175, 80, 0.1);">
                      Documents processed successfully! You can now ask questions about your content.
                 </div>
-                """
+                [cite_start]""" [cite: 162, 163, 164]
                 return gr.update(value=success_html, visible=True), True
                 
             except Exception as e:
@@ -964,28 +945,28 @@ def create_interface():
                            box-shadow: 0 0 20px rgba(244, 67, 54, 0.1);">
                      Error processing documents: {str(e)}
                 </div>
-                """
+                [cite_start]""" [cite: 165, 166]
                 return gr.update(value=error_html, visible=True), False
 
-        def respond(message, history, doc_ready):
+        [cite_start]def respond(message, history, doc_ready): [cite: 167]
             if not doc_ready:
                 # Show error message
                 history.append({"role": "user", "content": message})
                 history.append({"role": "assistant", "content": " Please upload and process documents first before asking questions."})
-                return history, ""
+                [cite_start]return history, "" [cite: 168]
             
             if not message.strip():
                 return history, message
             
             # Add user message
             history.append({"role": "user", "content": message})
-            history.append({"role": "assistant", "content": ""})
+            [cite_start]history.append({"role": "assistant", "content": ""}) [cite: 169]
             
             # Stream response
             try:
                 for token in coordinator_agent.handle_query(message, history):
                     history[-1]["content"] += token
-                    yield history, ""
+                    [cite_start]yield history, "" [cite: 170]
             except Exception as e:
                 history[-1]["content"] = f" Error generating response: {str(e)}"
                 yield history, ""
@@ -993,8 +974,8 @@ def create_interface():
         # Event bindings
         process_btn.click(
             handle_file_upload_and_process,
-            inputs=[file_upload],
-            outputs=[processing_status, doc_processed]
+            [cite_start]inputs=[file_upload], [cite: 171]
+            [cite_start]outputs=[processing_status, doc_processed] [cite: 171]
         )
 
         send_btn.click(
@@ -1004,7 +985,7 @@ def create_interface():
             show_progress=True
         )
 
-        msg_input.submit(
+        [cite_start]msg_input.submit( [cite: 172]
             respond,
             inputs=[msg_input, chatbot, doc_processed],
             outputs=[chatbot, msg_input],
@@ -1012,7 +993,7 @@ def create_interface():
         )
 
     return iface
-    
+                                      
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()