Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| Roboto, Helvetica, Arial, sans-serif; | |
| background: var(--bg-main); | |
| min-height: 100vh; | |
| padding: 24px; | |
| color: var(--text-main); | |
| } | |
| /* ----------------------------- | |
| Container | |
| ------------------------------*/ | |
| .container { | |
| max-width: 1040px; | |
| margin: 0 auto; | |
| } | |
| /* ----------------------------- | |
| Header | |
| ------------------------------*/ | |
| header { | |
| text-align: center; | |
| margin-bottom: 48px; | |
| } | |
| header h1 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 8px; | |
| } | |
| header p { | |
| font-size: 1rem; | |
| color: var(--text-muted); | |
| margin-bottom: 20px; | |
| } | |
| header nav { | |
| display: flex; | |
| justify-content: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .eval-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| background: var(--accent); | |
| color: white; | |
| text-decoration: none; | |
| border-radius: var(--radius-md); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: background 0.15s ease, transform 0.15s ease, | |
| box-shadow 0.15s ease; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .eval-button:hover { | |
| background: #1d4ed8; | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); | |
| } | |
| .eval-button:active { | |
| transform: translateY(0); | |
| } | |
| /* Dark mode for eval button */ | |
| [data-theme="dark"] .eval-button { | |
| background: #60a5fa; | |
| } | |
| [data-theme="dark"] .eval-button:hover { | |
| background: #3b82f6; | |
| } | |
| /* ----------------------------- | |
| Layout | |
| ------------------------------*/ | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| margin-bottom: 24px; | |
| } | |
| /* ----------------------------- | |
| Cards | |
| ------------------------------*/ | |
| .card { | |
| 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 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| /* ----------------------------- | |
| Upload area | |
| ------------------------------*/ | |
| .upload-area { | |
| border: 2px dashed var(--border-soft); | |
| border-radius: var(--radius-md); | |
| padding: 40px 24px; | |
| text-align: center; | |
| cursor: pointer; | |
| background: var(--surface-subtle); | |
| transition: border-color 0.2s ease, background 0.2s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .upload-area.dragover { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .upload-area p { | |
| color: var(--text-muted); | |
| margin-bottom: 14px; | |
| } | |
| .upload-area input { | |
| display: none; | |
| } | |
| /* ----------------------------- | |
| Buttons | |
| ------------------------------*/ | |
| .btn { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 11px 20px; | |
| border-radius: var(--radius-md); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background 0.15s ease, transform 0.15s ease, | |
| box-shadow 0.15s ease; | |
| } | |
| .btn:hover { | |
| background: #1d4ed8; | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: #f3f4f6; | |
| color: #374151; | |
| } | |
| .btn-secondary:hover { | |
| background: #e5e7eb; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| } | |
| /* ----------------------------- | |
| Query input | |
| ------------------------------*/ | |
| .query-input { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .query-input input { | |
| flex: 1; | |
| 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: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); | |
| } | |
| /* ----------------------------- | |
| Status messages | |
| ------------------------------*/ | |
| .status { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 16px; | |
| font-size: 0.9rem; | |
| } | |
| .status.success { | |
| background: #ecfdf3; | |
| color: var(--success); | |
| border-left: 4px solid var(--success); | |
| } | |
| .status.error { | |
| background: #fef2f2; | |
| color: var(--error); | |
| border-left: 4px solid var(--error); | |
| } | |
| .status.loading { | |
| background: #eff6ff; | |
| color: var(--info); | |
| border-left: 4px solid var(--info); | |
| } | |
| /* ----------------------------- | |
| Answer | |
| ------------------------------*/ | |
| .answer-box { | |
| background: var(--card-bg); | |
| border-left: 4px solid var(--accent); | |
| padding: 18px; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 20px; | |
| } | |
| .answer-box h3 { | |
| font-size: 1rem; | |
| margin-bottom: 8px; | |
| color: var(--text-main); | |
| } | |
| .answer-box p { | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| } | |
| [data-theme="dark"] .answer-box { | |
| background: #020617; | |
| /* slightly darker than cards */ | |
| } | |
| /* ----------------------------- | |
| Sources | |
| ------------------------------*/ | |
| .sources { | |
| background: var(--surface); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| border: 1px solid var(--border-soft); | |
| } | |
| .sources h4 { | |
| font-size: 0.85rem; | |
| margin-bottom: 12px; | |
| color: var(--text-muted); | |
| } | |
| .source-item { | |
| background: var(--surface-subtle); | |
| border-radius: var(--radius-sm); | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| border-left: 3px solid var(--accent); | |
| } | |
| .source-item .relevance { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 6px; | |
| } | |
| .source-item .text { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| /* ----------------------------- | |
| Stats | |
| ------------------------------*/ | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-box { | |
| 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.4rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .stat-box .label { | |
| 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: 12px; | |
| } | |
| /* ----------------------------- | |
| Spinner | |
| ------------------------------*/ | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 18px; | |
| height: 18px; | |
| border: 3px solid #e5e7eb; | |
| border-top: 3px solid var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| 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.7rem; | |
| } | |
| header nav { | |
| flex-direction: column; | |
| } | |
| .eval-button { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .status-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| [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, | |
| .eval-button { | |
| transition: background-color 0.25s ease, | |
| color 0.25s ease, | |
| border-color 0.25s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>📚 Document Intelligence RAG</h1> | |
| <p>Ask questions about your research papers</p> | |
| <nav> | |
| <a href="/evaluation" class="eval-button">📊 Evaluation Dashboard</a> | |
| <a href="/ragas-demo" class="eval-button">🔬 RAGAS Evaluation</a> | |
| </nav> | |
| <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> | |
| </header> | |
| <div class="main-grid"> | |
| <!-- Upload Section --> | |
| <div class="card"> | |
| <h2>📤 Upload Documents</h2> | |
| <div class="upload-area" id="uploadArea"> | |
| <p>📁 Drag & drop PDFs here or click to browse</p> | |
| <input type="file" id="fileInput" multiple accept=".pdf"> | |
| <button class="btn" onclick="document.getElementById('fileInput').click()"> | |
| Choose Files | |
| </button> | |
| </div> | |
| <div id="uploadStatus" class="status hidden"></div> | |
| <div id="stats" class="stats"> | |
| <div class="stat-box"> | |
| <div class="number" id="totalChunks">0</div> | |
| <div class="label">Total Chunks</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="number" id="docCount">0</div> | |
| <div class="label">Documents</div> | |
| </div> | |
| </div> | |
| <button class="btn btn-secondary" onclick="loadStats()"> | |
| 🔄 Refresh Stats | |
| </button> | |
| <button class="btn btn-secondary" style="background: #ff6b6b; color: white; margin-top: 10px;" | |
| onclick="resetSystem()"> | |
| 🗑️ Delete All Documents | |
| </button> | |
| <p style="font-size: 0.85em; color: #999; margin-top: 10px;"> | |
| 💾 Documents are stored persistently. They remain after restart. | |
| </p> | |
| </div> | |
| <!-- Query Section --> | |
| <div class="card"> | |
| <h2>❓ Ask Questions</h2> | |
| <div class="query-input"> | |
| <input type="text" id="queryInput" placeholder="Ask about your documents?" | |
| onkeypress="if(event.key==='Enter') submitQuery()"> | |
| <button class="btn" onclick="submitQuery()">Search</button> | |
| </div> | |
| <div id="queryStatus" class="status hidden"></div> | |
| <div id="answerContainer" class="hidden"> | |
| <div class="answer-box"> | |
| <h3>Answer</h3> | |
| <p id="answerText"></p> | |
| </div> | |
| <div class="sources" id="sourcesBox"> | |
| <h4>📖 Sources Used</h4> | |
| <div id="sourcesList"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Indicators --> | |
| <div class="card full-width"> | |
| <h2>🔧 System Status</h2> | |
| <div id="healthStatus" class="status-grid">Loading...</div> | |
| </div> | |
| </div> | |
| <script> | |
| const API_URL = window.location.origin; // 'http://localhost:8000'; | |
| // Upload handlers | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const fileInput = document.getElementById('fileInput'); | |
| // uploadArea.addEventListener('click', () => fileInput.click()); | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.add('dragover'); | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.classList.remove('dragover'); | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| handleFiles(e.dataTransfer.files); | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| handleFiles(e.target.files); | |
| }); | |
| async function handleFiles(files) { | |
| const statusDiv = document.getElementById('uploadStatus'); | |
| for (const file of files) { | |
| if (!file.name.endsWith('.pdf')) { | |
| showStatus(statusDiv, `Skipping ${file.name} - only PDFs supported`, 'error'); | |
| continue; | |
| } | |
| showStatus(statusDiv, `Uploading ${file.name}...`, 'loading'); | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| try { | |
| const response = await fetch(`${API_URL}/ingest`, { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| showStatus( | |
| statusDiv, | |
| `✓ ${file.name}: ${data.chunks_embedded} chunks ingested`, | |
| 'success' | |
| ); | |
| loadStats(); | |
| } else { | |
| const error = await response.json(); | |
| showStatus(statusDiv, `✗ ${file.name}: ${error.detail}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(statusDiv, `✗ Upload failed: ${error.message}`, 'error'); | |
| } | |
| } | |
| fileInput.value = ''; | |
| } | |
| async function submitQuery() { | |
| const query = document.getElementById('queryInput').value.trim(); | |
| if (!query) { | |
| showStatus( | |
| document.getElementById('queryStatus'), | |
| 'Please enter a question', | |
| 'error' | |
| ); | |
| return; | |
| } | |
| const statusDiv = document.getElementById('queryStatus'); | |
| showStatus(statusDiv, 'Searching your documents...', 'loading'); | |
| try { | |
| const response = await fetch(`${API_URL}/query`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ query, top_k: 3 }) | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| displayAnswer(data); | |
| statusDiv.classList.add('hidden'); | |
| } else { | |
| const error = await response.json(); | |
| showStatus(statusDiv, error.error || 'Query failed', 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(statusDiv, `Error: ${error.message}`, 'error'); | |
| } | |
| } | |
| function displayAnswer(data) { | |
| document.getElementById('answerText').textContent = data.answer; | |
| const sourcesList = document.getElementById('sourcesList'); | |
| sourcesList.innerHTML = data.sources.map(source => ` | |
| <div class="source-item"> | |
| <div class="relevance">📌 Relevance: ${(source.similarity * 100).toFixed(0)}%</div> | |
| <div class="text">${source.preview}</div> | |
| </div> | |
| `).join(''); | |
| document.getElementById('answerContainer').classList.remove('hidden'); | |
| } | |
| async function loadStats() { | |
| try { | |
| const response = await fetch(`${API_URL}/stats`); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| document.getElementById('totalChunks').textContent = data.total_chunks; | |
| } | |
| } catch (error) { | |
| console.error('Failed to load stats:', error); | |
| } | |
| } | |
| async function loadHealth() { | |
| try { | |
| const response = await fetch(`${API_URL}/health`); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| // Get embedding backend name | |
| let embeddingName = data.embedding_backend || 'Unknown'; | |
| // Format nicely | |
| if (embeddingName === 'sentence-transformers') { | |
| embeddingName = 'Sentence-Transformers'; | |
| } else if (embeddingName === 'ollama') { | |
| embeddingName = 'Ollama'; | |
| } | |
| const healthHtml = ` | |
| <div class="stat-box"> | |
| <div class="number">${data.embedding_backend ? '✓' : '✗'}</div> | |
| <div class="label">${embeddingName} (Embeddings)</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="number">${data.groq === '✓' ? '✓' : '✗'}</div> | |
| <div class="label">Groq (LLM)</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="number">${data.chroma.status === '✓' ? '✓' : '✗'}</div> | |
| <div class="label">Chroma (Vector DB)</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="number">${data.status === 'healthy' ? '✓' : '⚠'}</div> | |
| <div class="label">Overall Status</div> | |
| </div> | |
| `; | |
| document.getElementById('healthStatus').innerHTML = healthHtml; | |
| } | |
| } catch (error) { | |
| document.getElementById('healthStatus').innerHTML = | |
| `<div style="grid-column: 1/-1; padding: 15px; background: #f8d7da; color: #721c24; border-radius: 8px;">Cannot connect to API at ${API_URL}</div>`; | |
| } | |
| } | |
| async function resetSystem() { | |
| if (!confirm('⚠️ Delete ALL documents and embeddings? This cannot be undone!')) { | |
| return; | |
| } | |
| const statusDiv = document.getElementById('uploadStatus'); | |
| showStatus(statusDiv, 'Resetting system...', 'loading'); | |
| try { | |
| const response = await fetch(`${API_URL}/reset`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| showStatus(statusDiv, '✓ All documents deleted!', 'success'); | |
| loadStats(); | |
| } else { | |
| const error = await response.json(); | |
| showStatus(statusDiv, `Reset failed: ${error.detail || 'Unknown error'}`, 'error'); | |
| } | |
| } catch (error) { | |
| showStatus(statusDiv, `Error: ${error.message}`, 'error'); | |
| } | |
| } | |
| function showStatus(element, message, type) { | |
| element.textContent = message; | |
| element.className = `status ${type}`; | |
| element.classList.remove('hidden'); | |
| } | |
| // Load stats and health on page load | |
| window.addEventListener('load', () => { | |
| loadStats(); | |
| 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> | |
| </html> |