Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PDF Chat Assistant | Interactive RAG</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#818CF8', | |
| dark: '#1F2937', | |
| light: '#F9FAFB' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); | |
| } | |
| .drag-over { | |
| border: 2px dashed #4F46E5; | |
| background-color: #818cf820; | |
| } | |
| .message-bubble { | |
| max-width: 85%; | |
| border-radius: 18px; | |
| padding: 14px 18px; | |
| } | |
| .user-message { | |
| background-color: #4F46E5; | |
| color: white; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .bot-message { | |
| background-color: #E5E7EB; | |
| color: #1F2937; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 220px); | |
| } | |
| .pdf-preview { | |
| height: calc(100vh - 270px); | |
| } | |
| @media (max-width: 1024px) { | |
| .pdf-preview { | |
| height: 500px; | |
| } | |
| .chat-container { | |
| height: 500px; | |
| } | |
| } | |
| .chat-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <!-- Header --> | |
| <header class="bg-white py-4 card-shadow"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-pdf text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-dark ml-3">PDF Chat Assistant</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary transition"> | |
| <i class="fas fa-user mr-2"></i>My Account | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Left Side: PDF Upload & Preview --> | |
| <div class="bg-white rounded-xl card-shadow p-6"> | |
| <h2 class="text-xl font-bold text-dark mb-4 flex items-center"> | |
| <i class="fas fa-cloud-upload-alt text-secondary mr-2"></i> Upload Document | |
| </h2> | |
| <!-- File Upload Box --> | |
| <div id="upload-area" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-6 cursor-pointer hover:bg-gray-50 transition"> | |
| <div class="mb-4"> | |
| <i class="fas fa-file-upload text-4xl text-secondary mb-3"></i> | |
| <p class="font-semibold">Drag & Drop your PDF file</p> | |
| <p class="text-gray-500 text-sm mt-1">or click to browse</p> | |
| </div> | |
| <input type="file" id="file-input" accept=".pdf" class="hidden"> | |
| <button id="browse-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary transition"> | |
| Browse Files | |
| </button> | |
| </div> | |
| <!-- File Preview --> | |
| <div id="file-preview" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Document Preview</h3> | |
| <button id="remove-file" class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash-alt mr-1"></i> Remove | |
| </button> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden pdf-preview"> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="text-center p-8"> | |
| <i class="fas fa-file-pdf text-6xl text-red-500 mb-4"></i> | |
| <p class="font-semibold" id="file-name">document.pdf</p> | |
| <p class="text-gray-600 mt-2">PDF preview would appear here</p> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="w-24 h-32 bg-white border flex items-center justify-center mx-1"> | |
| <p class="text-xs">Page 1</p> | |
| </div> | |
| <div class="w-24 h-32 bg-white border flex items-center justify-center mx-1"> | |
| <p class="text-xs">Page 2</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| <span>Processing:</span> | |
| <span id="processing-text">Extracting content...</span> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Documents --> | |
| <div class="mt-8"> | |
| <h3 class="font-medium text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-400 mr-2"></i> Sample Documents | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="bg-gray-100 hover:bg-gray-200 p-4 rounded-lg flex items-center"> | |
| <i class="fas fa-file-alt text-blue-500 mr-2"></i> | |
| <span class="truncate">Annual_Report.pdf</span> | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 p-4 rounded-lg flex items-center"> | |
| <i class="fas fa-file-alt text-green-500 mr-2"></i> | |
| <span class="truncate">Research_Paper.pdf</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side: Chat Interface --> | |
| <div class="bg-white rounded-xl card-shadow overflow-hidden flex flex-col"> | |
| <div class="p-6 border-b"> | |
| <h2 class="text-xl font-bold text-dark flex items-center"> | |
| <i class="fas fa-comments text-secondary mr-2"></i> Document Chat | |
| </h2> | |
| <div class="text-sm text-gray-600 mt-1">Ask questions about your uploaded document</div> | |
| </div> | |
| <!-- Chat Messages Container --> | |
| <div id="chat-container" class="chat-container overflow-y-auto p-6 bg-gray-50 flex-grow"> | |
| <!-- Welcome message --> | |
| <div class="flex mb-6"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bot-message message-bubble"> | |
| <p class="font-bold text-secondary mb-1">PDF Assistant</p> | |
| <p>Hello! I'm your document assistant. Upload a PDF file to get started.</p> | |
| <p class="mt-2">You can ask me questions like:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Summarize this document</li> | |
| <li>What's the main point on page 5?</li> | |
| <li>Find key statistics in section 3</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat messages will appear here dynamically --> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="p-6 bg-white border-t"> | |
| <div id="upload-required" class="bg-blue-50 text-blue-800 rounded-lg p-3 mb-4 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| <span>Upload a PDF document to start chatting</span> | |
| </div> | |
| <div id="chat-input-area" class="hidden"> | |
| <div class="flex items-center"> | |
| <input | |
| id="chat-input" | |
| type="text" | |
| placeholder="Ask a question about your document..." | |
| class="flex-grow border border-gray-300 rounded-l-lg p-3 chat-input focus:border-primary" | |
| > | |
| <button id="send-btn" class="bg-primary text-white px-5 py-3 rounded-r-lg hover:bg-secondary transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-3"> | |
| <div class="flex space-x-4"> | |
| <button class="text-sm text-gray-600 hover:text-primary"> | |
| <i class="fas fa-sync-alt mr-1"></i> Reindex document | |
| </button> | |
| <button class="text-sm text-gray-600 hover:text-primary"> | |
| <i class="fas fa-file-download mr-1"></i> Export chat | |
| </button> | |
| </div> | |
| <button id="suggest-btn" class="text-sm text-primary"> | |
| <i class="fas fa-wand-magic-sparkles mr-1"></i> Suggest questions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white py-8 mt-12 border-t"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="text-gray-600 hover:text-primary"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-primary"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-primary"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-600">© 2023 PDF Chat Assistant. All rights reserved.</p> | |
| <p class="text-gray-500 text-sm mt-2">Built with Retrieval Augmented Generation technology</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript for interactivity --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const uploadArea = document.getElementById('upload-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const browseBtn = document.getElementById('browse-btn'); | |
| const filePreview = document.getElementById('file-preview'); | |
| const removeFile = document.getElementById('remove-file'); | |
| const fileName = document.getElementById('file-name'); | |
| const chatInputArea = document.getElementById('chat-input-area'); | |
| const uploadRequired = document.getElementById('upload-required'); | |
| const chatInput = document.getElementById('chat-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const chatContainer = document.getElementById('chat-container'); | |
| const suggestBtn = document.getElementById('suggest-btn'); | |
| // Browse button click event | |
| browseBtn.addEventListener('click', () => fileInput.click()); | |
| // File input change event | |
| fileInput.addEventListener('change', function() { | |
| if (this.files && this.files[0]) { | |
| handleFileUpload(this.files[0]); | |
| } | |
| }); | |
| // Drag and drop events | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, () => uploadArea.classList.add('drag-over')); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('drag-over')); | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| const dt = e.dataTransfer; | |
| const file = dt.files[0]; | |
| handleFileUpload(file); | |
| }); | |
| // File upload handler | |
| function handleFileUpload(file) { | |
| if (file && file.type === 'application/pdf') { | |
| fileName.textContent = file.name; | |
| filePreview.classList.remove('hidden'); | |
| uploadRequired.classList.add('hidden'); | |
| chatInputArea.classList.remove('hidden'); | |
| // Simulate processing delay | |
| const processingText = document.getElementById('processing-text'); | |
| processingText.textContent = 'Extracting content...'; | |
| setTimeout(() => { | |
| processingText.textContent = 'Document ready for questions'; | |
| addBotMessage(`Your document "${file.name}" has been processed successfully. How can I help you with this PDF?`); | |
| }, 3000); | |
| } else { | |
| alert('Please select a valid PDF file.'); | |
| } | |
| } | |
| // Remove file handler | |
| removeFile.addEventListener('click', () => { | |
| filePreview.classList.add('hidden'); | |
| uploadRequired.classList.remove('hidden'); | |
| chatInputArea.classList.add('hidden'); | |
| fileInput.value = ''; | |
| }); | |
| // Send button click event | |
| sendBtn.addEventListener('click', sendMessage); | |
| // Enter key in chat input | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Send message function | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (!message) return; | |
| addUserMessage(message); | |
| chatInput.value = ''; | |
| // Simulate bot typing | |
| setTimeout(() => { | |
| simulateBotReply(message); | |
| }, 1000); | |
| } | |
| // Add user message to chat | |
| function addUserMessage(message) { | |
| const messageElement = ` | |
| <div class="flex justify-end mb-6"> | |
| <div class="flex flex-col items-end"> | |
| <div class="user-message message-bubble"> | |
| ${message} | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 ml-4"> | |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.insertAdjacentHTML('beforeend', messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Add bot message to chat | |
| function addBotMessage(message) { | |
| const messageElement = ` | |
| <div class="flex mb-6"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bot-message message-bubble"> | |
| <p class="font-bold text-secondary mb-1">PDF Assistant</p> | |
| <p>${message}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.insertAdjacentHTML('beforeend', messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Function to simulate bot responses | |
| function simulateBotReply(userMessage) { | |
| // Simple response logic for demo | |
| let response; | |
| const lowerMessage = userMessage.toLowerCase(); | |
| if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) { | |
| response = "Hello! How can I assist you with your document?"; | |
| } else if (lowerMessage.includes('summary') || lowerMessage.includes('summarize')) { | |
| response = "Based on the document, the main points are: <br><br>1. The report highlights significant growth in the technology sector this year.<br>2. Cybersecurity investments have increased by 32% year-over-year.<br>3. Cloud migration remains a top priority for 75% of enterprises."; | |
| } else if (lowerMessage.includes('page') || lowerMessage.includes('section')) { | |
| const pageNum = userMessage.match(/\d+/); | |
| response = pageNum | |
| ? `On page ${pageNum[0]}, the document discusses key trends in AI adoption across industries. According to the text, over 60% of companies have implemented at least one AI solution, with healthcare leading adoption at 78%.` | |
| : `The section discusses evolving consumer preferences in digital services, highlighting increased demand for personalization and seamless cross-device experiences.`; | |
| } else if (lowerMessage.includes('statistic') || lowerMessage.includes('data')) { | |
| response = "The document contains several key statistics:<br><br>• Revenue growth projection for 2024 is 14.5%<br>• Customer satisfaction improved to 92%<br>• Employee retention rates increased by 17 percentage points"; | |
| } else { | |
| response = "Based on the document you uploaded, I can provide the following insights:<br><br>• The main theme appears to be digital transformation strategies<br>• There's a strong focus on cloud migration benefits<br>• Chapter 3 contains detailed case studies with measurable results<br><br>Can I help you explore a specific section more deeply?"; | |
| } | |
| addBotMessage(response); | |
| } | |
| // Suggest questions button | |
| suggestBtn.addEventListener('click', () => { | |
| const suggestions = ` | |
| <div class="flex mb-6"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bot-message message-bubble"> | |
| <p class="font-bold text-secondary mb-1">PDF Assistant</p> | |
| <p>Here are some questions you might ask about your document:</p> | |
| <div class="grid grid-cols-1 gap-2 mt-3"> | |
| <button class="suggestion-btn bg-white hover:bg-gray-100 border border-gray-300 rounded-lg p-2 text-left text-sm text-gray-700"> | |
| <i class="fas fa-question-circle text-secondary mr-2"></i>Summarize the key findings | |
| </button> | |
| <button class="suggestion-btn bg-white hover:bg-gray-100 border border-gray-300 rounded-lg p-2 text-left text-sm text-gray-700"> | |
| <i class="fas fa-question-circle text-secondary mr-2"></i>What methodology was used in the research? | |
| </button> | |
| <button class="suggestion-btn bg-white hover:bg-gray-100 border border-gray-300 rounded-lg p-2 text-left text-sm text-gray-700"> | |
| <i class="fas fa-question-circle text-secondary mr-2"></i>List the recommendations from conclusion | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.insertAdjacentHTML('beforeend', suggestions); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Add event listeners to suggestion buttons | |
| document.querySelectorAll('.suggestion-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const text = e.target.textContent || e.target.innerText; | |
| chatInput.value = text.split(' ').slice(1).join(' '); | |
| chatInput.focus(); | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=raktimhugging/rag-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |