Spaces:
Sleeping
Sleeping
Jatin Mehra
Enhance dark theme: Update styles for improved readability and aesthetics, including background colors, text colors, and button styles across the application.
3399b78 | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RAG Chat - Intelligent Document Q&A System</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"> | |
| <link href="/static/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid h-100"> | |
| <div class="row h-100"> | |
| <!-- Sidebar --> | |
| <div class="col-md-3 sidebar"> | |
| <div class="sidebar-content p-3"> | |
| <!-- Mobile Close Button --> | |
| <button class="mobile-close-btn d-md-none" id="mobileCloseBtn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h4 class="mb-4">🔧 Configuration</h4> | |
| <!-- API Key Section --> | |
| <div class="mb-4"> | |
| <label for="apiKey" class="form-label">GROQ API Key</label> | |
| <div class="input-group"> | |
| <input type="password" class="form-control" id="apiKey" placeholder="Enter your GROQ API key"> | |
| <button class="btn btn-primary" id="setApiKeyBtn">Set</button> | |
| </div> | |
| <small class="form-text text-muted">Required for OCR and chat capabilities</small> | |
| </div> | |
| <hr> | |
| <!-- File Upload Section --> | |
| <div class="mb-4"> | |
| <h5>📁 Documents</h5> | |
| <div class="mb-3"> | |
| <label for="fileInput" class="form-label">Upload Documents</label> | |
| <input type="file" class="form-control" id="fileInput" multiple | |
| accept=".pdf,.txt,.md,.py,.js,.html,.csv,.json,.png,.jpg,.jpeg,.bmp,.tiff,.webp"> | |
| <small class="form-text text-muted">Upload up to 75+ documents in various formats</small> | |
| </div> | |
| <button class="btn btn-success w-100" id="uploadBtn"> | |
| <i class="fas fa-rocket"></i> Process Documents | |
| </button> | |
| </div> | |
| <!-- Directory Processing --> | |
| <div class="mb-4"> | |
| <h5>📂 Directory Processing</h5> | |
| <div class="mb-3"> | |
| <input type="text" class="form-control" id="directoryPath" placeholder="Enter directory path"> | |
| </div> | |
| <button class="btn btn-info w-100" id="processDirectoryBtn"> | |
| <i class="fas fa-folder"></i> Process Directory | |
| </button> | |
| </div> | |
| <hr> | |
| <!-- Vector Store Management --> | |
| <div class="mb-4"> | |
| <h5>🗄️ Vector Store</h5> | |
| <div class="row"> | |
| <div class="col-6"> | |
| <button class="btn btn-outline-primary w-100" id="saveVectorStoreBtn"> | |
| <i class="fas fa-save"></i> Save | |
| </button> | |
| </div> | |
| <div class="col-6"> | |
| <button class="btn btn-outline-secondary w-100" id="loadVectorStoreBtn"> | |
| <i class="fas fa-folder-open"></i> Load | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statistics --> | |
| <div class="mb-4" id="statsSection" style="display: none;"> | |
| <h5>📊 Statistics</h5> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="totalFiles">0</div> | |
| <div class="stat-label">Files</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="totalDocuments">0</div> | |
| <div class="stat-label">Pages</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="totalChunks">0</div> | |
| <div class="stat-label">Chunks</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="totalFileTypes">0</div> | |
| <div class="stat-label">File Types</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Types Chart --> | |
| <div class="mb-4" id="chartSection" style="display: none;"> | |
| <canvas id="fileTypesChart" width="300" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="col-md-9 main-content"> | |
| <!-- Mobile Menu Button --> | |
| <button class="mobile-menu-btn d-md-none" id="mobileMenuBtn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="header text-center py-4"> | |
| <h1 class="main-title">📚 RAG Chat</h1> | |
| <p class="tagline">Intelligent Document Q&A System with citation tracking</p> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="chat-container" id="chatContainer"> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="welcome-message" id="welcomeMessage"> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle"></i> | |
| Please upload and process documents using the sidebar to start chatting! | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="chat-input-container" id="chatInputContainer" style="display: none;"> | |
| <div class="chat-input-wrapper"> | |
| <div class="input-controls"> | |
| <div class="control-group"> | |
| <button class="btn btn-sm btn-outline-secondary" id="markdownToggle" title="Toggle markdown preview"> | |
| <i class="fas fa-eye"></i> Preview | |
| </button> | |
| <button class="btn btn-sm btn-outline-info" id="markdownHelp" title="Markdown help" data-bs-toggle="modal" data-bs-target="#markdownHelpModal"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| <small class="text-muted">Markdown supported • Ctrl+P to preview • Ctrl+Enter to send</small> | |
| </div> | |
| <div class="input-section"> | |
| <div class="input-area"> | |
| <textarea class="form-control" id="chatInput" rows="2" | |
| placeholder="Ask a question about your documents... (Markdown supported)" disabled></textarea> | |
| <div class="markdown-preview" id="markdownPreview" style="display: none;"></div> | |
| </div> | |
| <div class="input-actions"> | |
| <button class="btn btn-outline-warning btn-sm" id="clearChatBtn" title="Clear chat history" style="display: none;"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| <button class="btn btn-primary btn-sm" id="sendBtn" disabled> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div class="loading-spinner" id="loadingSpinner" style="display: none;"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| <div class="loading-text">Processing your request...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Sidebar Overlay --> | |
| <div class="mobile-overlay d-md-none" id="mobileOverlay"></div> | |
| <!-- Processing Modal --> | |
| <div class="modal fade" id="processingModal" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Processing Documents</h5> | |
| </div> | |
| <div class="modal-body text-center"> | |
| <div class="spinner-border text-primary mb-3" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| <p id="processingMessage">Processing uploaded documents...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Processing Summary Modal --> | |
| <div class="modal fade" id="summaryModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">📋 Processing Summary</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="row mb-3"> | |
| <div class="col-3"> | |
| <div class="metric-card"> | |
| <div class="metric-value" id="summaryFiles">0</div> | |
| <div class="metric-label">Files Uploaded</div> | |
| </div> | |
| </div> | |
| <div class="col-3"> | |
| <div class="metric-card"> | |
| <div class="metric-value" id="summaryDocuments">0</div> | |
| <div class="metric-label">Total Pages</div> | |
| </div> | |
| </div> | |
| <div class="col-3"> | |
| <div class="metric-card"> | |
| <div class="metric-value" id="summaryChunks">0</div> | |
| <div class="metric-label">Total Chunks</div> | |
| </div> | |
| </div> | |
| <div class="col-3"> | |
| <div class="metric-card"> | |
| <div class="metric-value" id="summaryFileTypes">0</div> | |
| <div class="metric-label">File Types</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="summaryChart" width="400" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Markdown Help Modal --> | |
| <div class="modal fade" id="markdownHelpModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">📝 Markdown Support Guide</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h6>Text Formatting</h6> | |
| <code>**bold text**</code> → <strong>bold text</strong><br> | |
| <code>*italic text*</code> → <em>italic text</em><br> | |
| <code>`inline code`</code> → <code>inline code</code><br><br> | |
| <h6>Headers</h6> | |
| <code># Header 1</code><br> | |
| <code>## Header 2</code><br> | |
| <code>### Header 3</code><br><br> | |
| <h6>Lists</h6> | |
| <code>- Bullet point</code><br> | |
| <code>1. Numbered item</code><br> | |
| <code> - Nested item</code><br><br> | |
| </div> | |
| <div class="col-md-6"> | |
| <h6>Code Blocks</h6> | |
| <pre><code>```python | |
| def hello(): | |
| print("Hello!") | |
| ```</code></pre> | |
| <h6>Blockquotes</h6> | |
| <code>> Important note</code><br><br> | |
| <h6>Links & Tables</h6> | |
| <code>[Link text](URL)</code><br> | |
| <code>| Col1 | Col2 |</code><br> | |
| <code>|------|------|</code><br> | |
| <code>| Data | Data |</code><br><br> | |
| </div> | |
| </div> | |
| <div class="alert alert-info mt-3"> | |
| <strong>💡 Tips:</strong> | |
| <ul class="mb-0"> | |
| <li><kbd>Ctrl</kbd> + <kbd>P</kbd> to toggle preview</li> | |
| <li><kbd>Ctrl</kbd> + <kbd>Enter</kbd> to send message</li> | |
| <li>Use syntax highlighting for code: <code>```language</code></li> | |
| <li>Supports Python, JavaScript, HTML, CSS, and more!</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked@5.1.1/marked.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.3/dist/purify.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |