Spaces:

luanngo
/

chatpdf

Running

File size: 24,155 Bytes

8b4b81e

<!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>

        <!-- Upload Section -->
        <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>

        <!-- Editor Section (hidden initially) -->
        <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">
                <!-- PDF Editor Column -->
                <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>

                <!-- Chat Assistant Column -->
                <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>
        // Set PDF.js worker path
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

        // DOM elements
        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');

        // Variables
        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 = [];

        // Event listeners
        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();
            }
        });

        // Tool buttons
        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'));

        // Handle file upload
        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);
        }

        // Load PDF document
        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.';
            });
        }

        // Render PDF pages
        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);
            }

            // Set up drawing canvases
            setupDrawingCanvases();
        }

        // Render a specific page
        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;
                
                // Adjust drawing canvas size
                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;
        }

        // Zoom functions
        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);
                }
            }
        }

        // Set up drawing canvases
        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;
                }
            });
        }

        // Set active tool
        function setActiveTool(tool) {
            activeTool = tool;
            
            // Reset all tool buttons
            [highlightBtn, underlineBtn, strikeBtn, drawBtn, textBtn, eraserBtn].forEach(btn => {
                btn.classList.remove('active-tool');
            });
            
            // Highlight 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;
            }
        }

        // Chat functions
        function sendChatMessage() {
            const message = chatInput.value.trim();
            if (!message) return;
            
            // Add user message to chat
            addChatMessage(message, 'user');
            
            // Simulate AI response (in a real app, this would call an API)
            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);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Download PDF (simplified - in a real app, you'd need to merge annotations)
        function downloadPDF() {
            alert('In a real application, this would download the edited PDF with all annotations.');
        }

        // Reset app to initial state
        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>