| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PDF Editor with AI Assistant</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .pdf-container { |
| height: calc(100vh - 180px); |
| overflow-y: auto; |
| border: 1px solid #e5e7eb; |
| } |
| .chat-container { |
| height: calc(100vh - 180px); |
| display: flex; |
| flex-direction: column; |
| } |
| .chat-messages { |
| flex-grow: 1; |
| overflow-y: auto; |
| } |
| .pdf-page { |
| margin-bottom: 20px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| } |
| .canvas-container { |
| position: relative; |
| } |
| .annotation-tools { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| background: white; |
| padding: 5px; |
| border-radius: 5px; |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| display: none; |
| } |
| .active-tool { |
| background-color: #3b82f6; |
| color: white; |
| } |
| .loading-spinner { |
| border: 4px solid rgba(0, 0, 0, 0.1); |
| border-radius: 50%; |
| border-top: 4px solid #3b82f6; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .drawing-canvas { |
| position: absolute; |
| top: 0; |
| left: 0; |
| pointer-events: none; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="container mx-auto px-4 py-6"> |
| <header class="mb-8"> |
| <h1 class="text-3xl font-bold text-blue-600 flex items-center"> |
| <i class="fas fa-file-pdf mr-3"></i> PDF Editor with AI Assistant |
| </h1> |
| <p class="text-gray-600 mt-2">Upload, edit, and chat with your PDF documents</p> |
| </header> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md p-6 mb-8" id="upload-section"> |
| <div class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-12 bg-gray-50"> |
| <i class="fas fa-file-upload text-5xl text-blue-400 mb-4"></i> |
| <h3 class="text-xl font-semibold text-gray-700 mb-2">Upload your PDF file</h3> |
| <p class="text-gray-500 mb-6">Drag & drop your file here or click to browse</p> |
| <input type="file" id="pdf-upload" accept=".pdf" class="hidden"> |
| <button id="upload-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center"> |
| <i class="fas fa-folder-open mr-2"></i> Select PDF File |
| </button> |
| <p class="text-sm text-gray-500 mt-4">Supports PDF files up to 50MB</p> |
| </div> |
| </div> |
|
|
| |
| <div id="editor-section" class="hidden"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-semibold text-gray-800 flex items-center"> |
| <i class="fas fa-edit mr-2"></i> PDF Editor |
| </h2> |
| <div class="flex space-x-2"> |
| <button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center"> |
| <i class="fas fa-download mr-2"></i> Download |
| </button> |
| <button id="new-file-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center"> |
| <i class="fas fa-plus mr-2"></i> New File |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex flex-col lg:flex-row gap-6"> |
| |
| <div class="w-full lg:w-2/3 bg-white rounded-lg shadow-md p-4"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="flex space-x-2"> |
| <button id="highlight-btn" class="p-2 rounded-md hover:bg-gray-100" title="Highlight"> |
| <i class="fas fa-highlighter text-yellow-500"></i> |
| </button> |
| <button id="underline-btn" class="p-2 rounded-md hover:bg-gray-100" title="Underline"> |
| <i class="fas fa-underline text-blue-500"></i> |
| </button> |
| <button id="strike-btn" class="p-2 rounded-md hover:bg-gray-100" title="Strikethrough"> |
| <i class="fas fa-strikethrough text-red-500"></i> |
| </button> |
| <button id="draw-btn" class="p-2 rounded-md hover:bg-gray-100" title="Draw"> |
| <i class="fas fa-pen text-purple-500"></i> |
| </button> |
| <button id="text-btn" class="p-2 rounded-md hover:bg-gray-100" title="Add Text"> |
| <i class="fas fa-font text-green-500"></i> |
| </button> |
| <button id="eraser-btn" class="p-2 rounded-md hover:bg-gray-100" title="Eraser"> |
| <i class="fas fa-eraser text-gray-500"></i> |
| </button> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button id="zoom-in" class="p-2 rounded-md hover:bg-gray-100"> |
| <i class="fas fa-search-plus"></i> |
| </button> |
| <span id="zoom-level" class="text-sm font-medium">100%</span> |
| <button id="zoom-out" class="p-2 rounded-md hover:bg-gray-100"> |
| <i class="fas fa-search-minus"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="pdf-container" id="pdf-viewer"> |
| <div class="flex items-center justify-center h-full" id="pdf-loading"> |
| <div class="text-center"> |
| <div class="loading-spinner mx-auto mb-4"></div> |
| <p class="text-gray-600">Loading PDF document...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full lg:w-1/3 bg-white rounded-lg shadow-md p-4"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-blue-500"></i> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-800">PDF Assistant</h3> |
| </div> |
|
|
| <div class="chat-container"> |
| <div class="chat-messages" id="chat-messages"> |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> |
| <p class="text-gray-800">Hello! I'm your PDF assistant. Ask me anything about the document or request help with editing.</p> |
| </div> |
| </div> |
|
|
| <div class="mt-4"> |
| <div class="flex items-center space-x-2 mb-2"> |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded"> |
| Summarize |
| </button> |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded"> |
| Find key points |
| </button> |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-xs py-1 px-2 rounded"> |
| Explain section |
| </button> |
| </div> |
| <div class="relative"> |
| <textarea id="chat-input" rows="2" class="w-full border border-gray-300 rounded-lg p-3 pr-12 focus:ring-blue-500 focus:border-blue-500" placeholder="Ask about the document..."></textarea> |
| <button id="send-chat" class="absolute right-3 bottom-3 bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js'; |
| |
| |
| const uploadSection = document.getElementById('upload-section'); |
| const editorSection = document.getElementById('editor-section'); |
| const pdfUpload = document.getElementById('pdf-upload'); |
| const uploadBtn = document.getElementById('upload-btn'); |
| const pdfViewer = document.getElementById('pdf-viewer'); |
| const pdfLoading = document.getElementById('pdf-loading'); |
| const zoomInBtn = document.getElementById('zoom-in'); |
| const zoomOutBtn = document.getElementById('zoom-out'); |
| const zoomLevel = document.getElementById('zoom-level'); |
| const downloadBtn = document.getElementById('download-btn'); |
| const newFileBtn = document.getElementById('new-file-btn'); |
| const chatMessages = document.getElementById('chat-messages'); |
| const chatInput = document.getElementById('chat-input'); |
| const sendChatBtn = document.getElementById('send-chat'); |
| const highlightBtn = document.getElementById('highlight-btn'); |
| const underlineBtn = document.getElementById('underline-btn'); |
| const strikeBtn = document.getElementById('strike-btn'); |
| const drawBtn = document.getElementById('draw-btn'); |
| const textBtn = document.getElementById('text-btn'); |
| const eraserBtn = document.getElementById('eraser-btn'); |
| |
| |
| let pdfDoc = null; |
| let currentPage = 1; |
| let pageRendering = false; |
| let pageNumPending = null; |
| let scale = 1.0; |
| let canvas, ctx; |
| let isDrawing = false; |
| let activeTool = null; |
| let lastX = 0; |
| let lastY = 0; |
| let drawingCanvases = []; |
| |
| |
| uploadBtn.addEventListener('click', () => pdfUpload.click()); |
| pdfUpload.addEventListener('change', handleFileUpload); |
| zoomInBtn.addEventListener('click', zoomIn); |
| zoomOutBtn.addEventListener('click', zoomOut); |
| downloadBtn.addEventListener('click', downloadPDF); |
| newFileBtn.addEventListener('click', resetApp); |
| sendChatBtn.addEventListener('click', sendChatMessage); |
| chatInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendChatMessage(); |
| } |
| }); |
| |
| |
| highlightBtn.addEventListener('click', () => setActiveTool('highlight')); |
| underlineBtn.addEventListener('click', () => setActiveTool('underline')); |
| strikeBtn.addEventListener('click', () => setActiveTool('strike')); |
| drawBtn.addEventListener('click', () => setActiveTool('draw')); |
| textBtn.addEventListener('click', () => setActiveTool('text')); |
| eraserBtn.addEventListener('click', () => setActiveTool('eraser')); |
| |
| |
| function handleFileUpload(e) { |
| const file = e.target.files[0]; |
| if (file.type !== 'application/pdf') { |
| alert('Please select a PDF file.'); |
| return; |
| } |
| |
| uploadSection.classList.add('hidden'); |
| editorSection.classList.remove('hidden'); |
| |
| const fileReader = new FileReader(); |
| fileReader.onload = function() { |
| const typedarray = new Uint8Array(this.result); |
| loadPDF(typedarray); |
| }; |
| fileReader.readAsArrayBuffer(file); |
| } |
| |
| |
| function loadPDF(data) { |
| pdfLoading.style.display = 'flex'; |
| pdfViewer.innerHTML = ''; |
| pdfViewer.appendChild(pdfLoading); |
| |
| pdfjsLib.getDocument(data).promise.then(function(pdf) { |
| pdfDoc = pdf; |
| renderPDF(); |
| }).catch(function(error) { |
| console.error('Error loading PDF:', error); |
| pdfLoading.querySelector('p').textContent = 'Error loading PDF. Please try another file.'; |
| }); |
| } |
| |
| |
| function renderPDF() { |
| pdfLoading.style.display = 'none'; |
| |
| for (let i = 1; i <= pdfDoc.numPages; i++) { |
| const pageContainer = document.createElement('div'); |
| pageContainer.className = 'pdf-page'; |
| pageContainer.id = `page-${i}`; |
| |
| const canvasContainer = document.createElement('div'); |
| canvasContainer.className = 'canvas-container relative'; |
| |
| const annotationTools = document.createElement('div'); |
| annotationTools.className = 'annotation-tools'; |
| annotationTools.id = `tools-${i}`; |
| annotationTools.innerHTML = ` |
| <button class="p-1 hover:bg-gray-100 rounded" data-tool="highlight"><i class="fas fa-highlighter text-yellow-500"></i></button> |
| <button class="p-1 hover:bg-gray-100 rounded" data-tool="underline"><i class="fas fa-underline text-blue-500"></i></button> |
| <button class="p-1 hover:bg-gray-100 rounded" data-tool="strike"><i class="fas fa-strikethrough text-red-500"></i></button> |
| `; |
| |
| canvas = document.createElement('canvas'); |
| canvas.className = 'pdf-canvas border border-gray-200'; |
| canvas.id = `canvas-${i}`; |
| |
| const drawingCanvas = document.createElement('canvas'); |
| drawingCanvas.className = 'drawing-canvas'; |
| drawingCanvas.id = `drawing-${i}`; |
| drawingCanvases.push(drawingCanvas); |
| |
| canvasContainer.appendChild(canvas); |
| canvasContainer.appendChild(drawingCanvas); |
| canvasContainer.appendChild(annotationTools); |
| pageContainer.appendChild(canvasContainer); |
| pdfViewer.appendChild(pageContainer); |
| |
| renderPage(i); |
| } |
| |
| |
| setupDrawingCanvases(); |
| } |
| |
| |
| function renderPage(num) { |
| pageRendering = true; |
| pdfDoc.getPage(num).then(function(page) { |
| const viewport = page.getViewport({ scale: scale }); |
| const canvas = document.getElementById(`canvas-${num}`); |
| const context = canvas.getContext('2d'); |
| |
| canvas.height = viewport.height; |
| canvas.width = viewport.width; |
| |
| |
| const drawingCanvas = document.getElementById(`drawing-${num}`); |
| drawingCanvas.height = viewport.height; |
| drawingCanvas.width = viewport.width; |
| |
| const renderContext = { |
| canvasContext: context, |
| viewport: viewport |
| }; |
| |
| const renderTask = page.render(renderContext); |
| |
| renderTask.promise.then(function() { |
| pageRendering = false; |
| if (pageNumPending !== null) { |
| renderPage(pageNumPending); |
| pageNumPending = null; |
| } |
| }); |
| }); |
| |
| currentPage = num; |
| } |
| |
| |
| function zoomIn() { |
| if (scale >= 3.0) return; |
| scale += 0.25; |
| zoomLevel.textContent = `${Math.round(scale * 100)}%`; |
| rerenderPDF(); |
| } |
| |
| function zoomOut() { |
| if (scale <= 0.5) return; |
| scale -= 0.25; |
| zoomLevel.textContent = `${Math.round(scale * 100)}%`; |
| rerenderPDF(); |
| } |
| |
| function rerenderPDF() { |
| if (pageRendering) { |
| pageNumPending = currentPage; |
| } else { |
| for (let i = 1; i <= pdfDoc.numPages; i++) { |
| renderPage(i); |
| } |
| } |
| } |
| |
| |
| function setupDrawingCanvases() { |
| drawingCanvases.forEach(drawingCanvas => { |
| const ctx = drawingCanvas.getContext('2d'); |
| |
| drawingCanvas.addEventListener('mousedown', startDrawing); |
| drawingCanvas.addEventListener('mousemove', draw); |
| drawingCanvas.addEventListener('mouseup', stopDrawing); |
| drawingCanvas.addEventListener('mouseout', stopDrawing); |
| |
| function startDrawing(e) { |
| if (activeTool !== 'draw') return; |
| |
| isDrawing = true; |
| const rect = drawingCanvas.getBoundingClientRect(); |
| lastX = e.clientX - rect.left; |
| lastY = e.clientY - rect.top; |
| |
| ctx.beginPath(); |
| ctx.moveTo(lastX, lastY); |
| ctx.strokeStyle = '#3b82f6'; |
| ctx.lineWidth = 2; |
| ctx.lineCap = 'round'; |
| } |
| |
| function draw(e) { |
| if (!isDrawing || activeTool !== 'draw') return; |
| |
| const rect = drawingCanvas.getBoundingClientRect(); |
| const currentX = e.clientX - rect.left; |
| const currentY = e.clientY - rect.top; |
| |
| ctx.lineTo(currentX, currentY); |
| ctx.stroke(); |
| |
| lastX = currentX; |
| lastY = currentY; |
| } |
| |
| function stopDrawing() { |
| isDrawing = false; |
| } |
| }); |
| } |
| |
| |
| function setActiveTool(tool) { |
| activeTool = tool; |
| |
| |
| [highlightBtn, underlineBtn, strikeBtn, drawBtn, textBtn, eraserBtn].forEach(btn => { |
| btn.classList.remove('active-tool'); |
| }); |
| |
| |
| switch(tool) { |
| case 'highlight': |
| highlightBtn.classList.add('active-tool'); |
| break; |
| case 'underline': |
| underlineBtn.classList.add('active-tool'); |
| break; |
| case 'strike': |
| strikeBtn.classList.add('active-tool'); |
| break; |
| case 'draw': |
| drawBtn.classList.add('active-tool'); |
| break; |
| case 'text': |
| textBtn.classList.add('active-tool'); |
| break; |
| case 'eraser': |
| eraserBtn.classList.add('active-tool'); |
| break; |
| } |
| } |
| |
| |
| function sendChatMessage() { |
| const message = chatInput.value.trim(); |
| if (!message) return; |
| |
| |
| addChatMessage(message, 'user'); |
| |
| |
| setTimeout(() => { |
| const responses = [ |
| "Based on the document, the key points are...", |
| "The summary of section 3 is...", |
| "This document primarily discusses...", |
| "I've analyzed the content and found that...", |
| "The author's main argument appears to be..." |
| ]; |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
| addChatMessage(randomResponse, 'ai'); |
| }, 1000); |
| |
| chatInput.value = ''; |
| } |
| |
| function addChatMessage(message, sender) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `mb-4 ${sender === 'user' ? 'text-right' : 'text-left'}`; |
| |
| const bubble = document.createElement('div'); |
| bubble.className = `inline-block rounded-lg p-3 max-w-xs lg:max-w-md ${sender === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800'}`; |
| bubble.textContent = message; |
| |
| messageDiv.appendChild(bubble); |
| chatMessages.appendChild(messageDiv); |
| |
| |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function downloadPDF() { |
| alert('In a real application, this would download the edited PDF with all annotations.'); |
| } |
| |
| |
| function resetApp() { |
| pdfUpload.value = ''; |
| pdfViewer.innerHTML = ''; |
| pdfViewer.appendChild(pdfLoading); |
| pdfLoading.style.display = 'flex'; |
| pdfLoading.querySelector('p').textContent = 'Loading PDF document...'; |
| chatMessages.innerHTML = ` |
| <div class="bg-blue-50 rounded-lg p-4 mb-4"> |
| <p class="text-gray-800">Hello! I'm your PDF assistant. Ask me anything about the document or request help with editing.</p> |
| </div> |
| `; |
| editorSection.classList.add('hidden'); |
| uploadSection.classList.remove('hidden'); |
| scale = 1.0; |
| zoomLevel.textContent = '100%'; |
| activeTool = null; |
| drawingCanvases = []; |
| } |
| </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=luanngo/chatpdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
