fix: double upload prompt

frontend/index.html

@@ -6,104 +6,158 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document Intelligence RAG</title>
     <style>
+        /* -----------------------------
+   Design tokens (neutral)
+------------------------------*/
+        :root {
+            --surface: #ffffff;
+            --surface-subtle: #fafafa;
+            --bg-main: #f5f7fb;
+            --card-bg: #ffffff;
+            --accent: #2563eb;
+            /* calm blue */
+            --accent-soft: #eff6ff;
+            --text-main: #111827;
+            --text-muted: #6b7280;
+            --border-soft: #e5e7eb;
+
+            --success: #16a34a;
+            --error: #dc2626;
+            --info: #2563eb;
+
+            --radius-sm: 6px;
+            --radius-md: 10px;
+            --radius-lg: 14px;
+        }
+
+        /* -----------------------------
+   Reset
+------------------------------*/
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
+        /* -----------------------------
+   Base
+------------------------------*/
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
+                Roboto, Helvetica, Arial, sans-serif;
+            background: var(--bg-main);
             min-height: 100vh;
-            padding: 20px;
+            padding: 24px;
+            color: var(--text-main);
         }
 
+        /* -----------------------------
+   Container
+------------------------------*/
         .container {
-            max-width: 1000px;
+            max-width: 1040px;
             margin: 0 auto;
         }
 
+        /* -----------------------------
+   Header
+------------------------------*/
         header {
             text-align: center;
-            color: white;
-            margin-bottom: 40px;
+            margin-bottom: 48px;
         }
 
         header h1 {
-            font-size: 2.5em;
-            margin-bottom: 10px;
-            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            font-size: 2.2rem;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+            margin-bottom: 8px;
         }
 
         header p {
-            font-size: 1.1em;
-            opacity: 0.9;
+            font-size: 1rem;
+            color: var(--text-muted);
         }
 
+        /* -----------------------------
+   Layout
+------------------------------*/
         .main-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-bottom: 20px;
+            gap: 24px;
+            margin-bottom: 24px;
         }
 
+        /* -----------------------------
+   Cards
+------------------------------*/
         .card {
-            background: white;
-            border-radius: 12px;
-            padding: 25px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            background: var(--surface);
+            border-radius: var(--radius-lg);
+            padding: 28px;
+            border: 1px solid var(--border-soft);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
         }
 
         .card h2 {
-            color: #333;
-            margin-bottom: 15px;
-            font-size: 1.3em;
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 18px;
         }
 
+        /* -----------------------------
+   Upload area
+------------------------------*/
         .upload-area {
-            border: 2px dashed #667eea;
-            border-radius: 8px;
-            padding: 30px;
+            border: 2px dashed var(--border-soft);
+            border-radius: var(--radius-md);
+            padding: 40px 24px;
             text-align: center;
             cursor: pointer;
-            transition: all 0.3s;
+            background: var(--surface-subtle);
+            transition: border-color 0.2s ease, background 0.2s ease;
         }
 
         .upload-area:hover {
-            border-color: #764ba2;
-            background: #f8f9ff;
+            border-color: var(--accent);
+            background: var(--accent-soft);
         }
 
         .upload-area.dragover {
-            border-color: #764ba2;
-            background: #f0f2ff;
+            border-color: var(--accent);
+            background: var(--accent-soft);
         }
 
-        .upload-area input {
-            display: none;
+        .upload-area p {
+            color: var(--text-muted);
+            margin-bottom: 14px;
         }
 
-        .upload-area p {
-            color: #666;
-            margin-bottom: 10px;
+        .upload-area input {
+            display: none;
         }
 
+        /* -----------------------------
+   Buttons
+------------------------------*/
         .btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--accent);
             color: white;
             border: none;
-            padding: 12px 24px;
-            border-radius: 8px;
+            padding: 11px 20px;
+            border-radius: var(--radius-md);
+            font-size: 0.9rem;
+            font-weight: 500;
             cursor: pointer;
-            font-size: 1em;
-            font-weight: 600;
-            transition: transform 0.2s, box-shadow 0.2s;
+            transition: background 0.15s ease, transform 0.15s ease,
+                box-shadow 0.15s ease;
         }
 
         .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+            background: #1d4ed8;
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
         }
 
         .btn:active {
@@ -111,177 +165,219 @@
         }
 
         .btn-secondary {
-            background: #f0f0f0;
-            color: #333;
+            background: #f3f4f6;
+            color: #374151;
         }
 
         .btn-secondary:hover {
-            background: #e0e0e0;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            background: #e5e7eb;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         }
 
+        /* -----------------------------
+   Query input
+------------------------------*/
         .query-input {
             display: flex;
-            gap: 10px;
+            gap: 12px;
             margin-bottom: 20px;
         }
 
         .query-input input {
             flex: 1;
-            padding: 12px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
-            font-size: 1em;
-            transition: border-color 0.3s;
+            padding: 12px 14px;
+            border: 1.5px solid var(--border-soft);
+            border-radius: var(--radius-md);
+            font-size: 0.9rem;
         }
 
         .query-input input:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
         }
 
+        /* -----------------------------
+   Status messages
+------------------------------*/
         .status {
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 15px;
-            font-size: 0.95em;
+            padding: 14px 16px;
+            border-radius: var(--radius-md);
+            margin-bottom: 16px;
+            font-size: 0.9rem;
         }
 
         .status.success {
-            background: #d4edda;
-            color: #155724;
-            border-left: 4px solid #28a745;
+            background: #ecfdf3;
+            color: var(--success);
+            border-left: 4px solid var(--success);
         }
 
         .status.error {
-            background: #f8d7da;
-            color: #721c24;
-            border-left: 4px solid #f5c6cb;
+            background: #fef2f2;
+            color: var(--error);
+            border-left: 4px solid var(--error);
         }
 
         .status.loading {
-            background: #e7f3ff;
-            color: #004085;
-            border-left: 4px solid #0c5ff4;
+            background: #eff6ff;
+            color: var(--info);
+            border-left: 4px solid var(--info);
         }
 
+        /* -----------------------------
+   Answer
+------------------------------*/
         .answer-box {
-            background: #f8f9fa;
-            border-left: 4px solid #667eea;
-            padding: 15px;
-            border-radius: 8px;
+            background: var(--card-bg);
+            border-left: 4px solid var(--accent);
+            padding: 18px;
+            border-radius: var(--radius-md);
             margin-bottom: 20px;
         }
 
         .answer-box h3 {
-            color: #333;
-            margin-bottom: 10px;
+            font-size: 1rem;
+            margin-bottom: 8px;
+            color: var(--text-main);
         }
 
         .answer-box p {
-            color: #555;
+            color: var(--text-main);
             line-height: 1.6;
-            margin-bottom: 15px;
         }
 
+        [data-theme="dark"] .answer-box {
+            background: #020617;
+            /* slightly darker than cards */
+        }
+
+        /* -----------------------------
+   Sources
+------------------------------*/
         .sources {
-            background: white;
-            border-radius: 8px;
-            padding: 15px;
-            margin-bottom: 15px;
+            background: var(--surface);
+            border-radius: var(--radius-md);
+            padding: 16px;
+            border: 1px solid var(--border-soft);
         }
 
         .sources h4 {
-            color: #333;
+            font-size: 0.85rem;
             margin-bottom: 12px;
-            font-size: 0.95em;
+            color: var(--text-muted);
         }
 
         .source-item {
-            padding: 10px;
-            background: #f8f9fa;
-            border-radius: 6px;
-            margin-bottom: 8px;
-            border-left: 3px solid #667eea;
-            font-size: 0.9em;
+            background: var(--surface-subtle);
+            border-radius: var(--radius-sm);
+            padding: 12px;
+            margin-bottom: 10px;
+            border-left: 3px solid var(--accent);
         }
 
         .source-item .relevance {
-            color: #667eea;
+            font-size: 0.8rem;
             font-weight: 600;
-            margin-bottom: 5px;
+            color: var(--accent);
+            margin-bottom: 6px;
         }
 
         .source-item .text {
-            color: #555;
+            font-size: 0.85rem;
+            color: var(--text-muted);
             font-style: italic;
         }
 
+        /* -----------------------------
+   Stats
+------------------------------*/
         .stats {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
+            gap: 12px;
             margin-bottom: 20px;
         }
 
         .stat-box {
-            background: #f8f9fa;
-            padding: 12px;
-            border-radius: 6px;
+            background: var(--surface-subtle);
+            padding: 14px;
+            border-radius: var(--radius-md);
             text-align: center;
+            border: 1px solid var(--border-soft);
         }
 
         .stat-box .number {
-            font-size: 1.5em;
-            font-weight: bold;
-            color: #667eea;
+            font-size: 1.4rem;
+            font-weight: 600;
+            color: var(--accent);
         }
 
         .stat-box .label {
-            font-size: 0.85em;
-            color: #666;
-            margin-top: 5px;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-top: 6px;
         }
 
+        /* -----------------------------
+   System status grid
+------------------------------*/
         .status-grid {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
-            gap: 10px;
+            gap: 12px;
         }
 
+        /* -----------------------------
+   Spinner
+------------------------------*/
         .loading-spinner {
             display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
+            width: 18px;
+            height: 18px;
+            border: 3px solid #e5e7eb;
+            border-top: 3px solid var(--accent);
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin-right: 10px;
+            margin-right: 8px;
             vertical-align: middle;
         }
 
         @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
+            to {
                 transform: rotate(360deg);
             }
         }
 
+        /* -----------------------------
+   Utilities
+------------------------------*/
         .full-width {
             grid-column: 1 / -1;
         }
 
+        .upload-area,
+        .stat-box,
+        .sources,
+        .source-item,
+        .card {
+            border-color: var(--border-soft);
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        /* -----------------------------
+   Responsive
+------------------------------*/
         @media (max-width: 768px) {
             .main-grid {
                 grid-template-columns: 1fr;
             }
 
             header h1 {
-                font-size: 1.8em;
+                font-size: 1.7rem;
             }
 
             .stats {
@@ -293,10 +389,39 @@
             }
         }
 
-        .hidden {
-            display: none;
+        [data-theme="dark"] {
+            --bg-main: #0f172a;
+            --card-bg: #020617;
+            --accent: #60a5fa;
+            --accent-soft: #0b1b33;
+
+            --text-main: #e5e7eb;
+            --text-muted: #9ca3af;
+            --border-soft: #1f2937;
+
+            --success: #22c55e;
+            --error: #f87171;
+            --info: #60a5fa;
+            --surface: #020617;
+            --surface-subtle: #020617;
+        }
+
+        /* smoother transitions */
+        body,
+        .card,
+        .upload-area,
+        .btn,
+        input,
+        .status,
+        .answer-box,
+        .sources,
+        .stat-box {
+            transition: background-color 0.25s ease,
+                color 0.25s ease,
+                border-color 0.25s ease;
         }
     </style>
+
 </head>
 
 <body>
@@ -304,6 +429,21 @@
         <header>
             <h1>📚 Document Intelligence RAG</h1>
             <p>Ask questions about your research papers</p>
+            <button id="themeToggle" aria-label="Toggle dark mode" style="
+            position: fixed;
+            top: 16px;
+            right: 20px;
+            background: none;
+            border: none;
+            padding: 6px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            color: #6b7280;
+        ">
+                🌙 Dark
+            </button>
+
+            </button>
         </header>
 
         <div class="main-grid">
@@ -351,7 +491,7 @@
                 <h2>❓ Ask Questions</h2>
 
                 <div class="query-input">
-                    <input type="text" id="queryInput" placeholder="What would you like to know about your documents?"
+                    <input type="text" id="queryInput" placeholder="Ask about your documents?"
                         onkeypress="if(event.key==='Enter') submitQuery()">
                     <button class="btn" onclick="submitQuery()">Search</button>
                 </div>
@@ -386,7 +526,7 @@
         const uploadArea = document.getElementById('uploadArea');
         const fileInput = document.getElementById('fileInput');
 
-        uploadArea.addEventListener('click', () => fileInput.click());
+        // uploadArea.addEventListener('click', () => fileInput.click());
         uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
             uploadArea.classList.add('dragover');
@@ -586,6 +726,40 @@
             loadHealth();
             setInterval(loadHealth, 30000); // Refresh every 30s
         });
+
+        // -----------------------------
+        // Dark mode toggle
+        // -----------------------------
+        const themeToggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        // Load saved theme or system preference
+        const savedTheme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+        if (savedTheme) {
+            root.setAttribute("data-theme", savedTheme);
+        } else if (prefersDark) {
+            root.setAttribute("data-theme", "dark");
+        }
+
+        // Update button text
+        function updateToggleText() {
+            const isDark = root.getAttribute("data-theme") === "dark";
+            themeToggle.textContent = isDark ? "☀️ Light mode" : "🌙 Dark mode";
+        }
+        updateToggleText();
+
+        // Toggle on click
+        themeToggle.addEventListener("click", () => {
+            const isDark = root.getAttribute("data-theme") === "dark";
+            const newTheme = isDark ? "light" : "dark";
+
+            root.setAttribute("data-theme", newTheme);
+            localStorage.setItem("theme", newTheme);
+            updateToggleText();
+        });
+
     </script>
 </body>
 

src/main.py

@@ -329,7 +329,7 @@ async def query(request: QueryRequest):
     if pipeline.vector_store.size() == 0:
         raise HTTPException(
             status_code=400,
-            detail="No documents ingested yet. Use /ingest endpoint first."
+            detail="No documents ingested yet. Upload documents first."
         )
     
     try: