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> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| color: white; | |
| margin-bottom: 40px; | |
| } | |
| header h1 { | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| header p { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| } | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 25px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .card h2 { | |
| color: #333; | |
| margin-bottom: 15px; | |
| font-size: 1.3em; | |
| } | |
| .upload-area { | |
| border: 2px dashed #667eea; | |
| border-radius: 8px; | |
| padding: 30px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .upload-area:hover { | |
| border-color: #764ba2; | |
| background: #f8f9ff; | |
| } | |
| .upload-area.dragover { | |
| border-color: #764ba2; | |
| background: #f0f2ff; | |
| } | |
| .upload-area input { | |
| display: none; | |
| } | |
| .upload-area p { | |
| color: #666; | |
| margin-bottom: 10px; | |
| } | |
| .btn { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1em; | |
| font-weight: 600; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: #f0f0f0; | |
| color: #333; | |
| } | |
| .btn-secondary:hover { | |
| background: #e0e0e0; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .query-input { | |
| display: flex; | |
| gap: 10px; | |
| 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; | |
| } | |
| .query-input input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .status { | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| font-size: 0.95em; | |
| } | |
| .status.success { | |
| background: #d4edda; | |
| color: #155724; | |
| border-left: 4px solid #28a745; | |
| } | |
| .status.error { | |
| background: #f8d7da; | |
| color: #721c24; | |
| border-left: 4px solid #f5c6cb; | |
| } | |
| .status.loading { | |
| background: #e7f3ff; | |
| color: #004085; | |
| border-left: 4px solid #0c5ff4; | |
| } | |
| .answer-box { | |
| background: #f8f9fa; | |
| border-left: 4px solid #667eea; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .answer-box h3 { | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .answer-box p { | |
| color: #555; | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| } | |
| .sources { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .sources h4 { | |
| color: #333; | |
| margin-bottom: 12px; | |
| font-size: 0.95em; | |
| } | |
| .source-item { | |
| padding: 10px; | |
| background: #f8f9fa; | |
| border-radius: 6px; | |
| margin-bottom: 8px; | |
| border-left: 3px solid #667eea; | |
| font-size: 0.9em; | |
| } | |
| .source-item .relevance { | |
| color: #667eea; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .source-item .text { | |
| color: #555; | |
| font-style: italic; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-box { | |
| background: #f8f9fa; | |
| padding: 12px; | |
| border-radius: 6px; | |
| text-align: center; | |
| } | |
| .stat-box .number { | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| color: #667eea; | |
| } | |
| .stat-box .label { | |
| font-size: 0.85em; | |
| color: #666; | |
| margin-top: 5px; | |
| } | |
| .status-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid #667eea; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-right: 10px; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .full-width { | |
| grid-column: 1 / -1; | |
| } | |
| @media (max-width: 768px) { | |
| .main-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| header h1 { | |
| font-size: 1.8em; | |
| } | |
| .stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .status-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>📚 Document Intelligence RAG</h1> | |
| <p>Ask questions about your research papers</p> | |
| </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="What would you like to know 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 | |
| }); | |
| </script> | |
| </body> | |
| </html> |