Add pdf visualization on first part

app.py

@@ -39,6 +39,27 @@ def index():
 def serve_static(filename):
     return send_file(os.path.join('static', filename))
 
+@app.route('/<path:filename>')
+def serve_pdf(filename):
+    """Serve PDF files from the current directory"""
+    try:
+        # Security check: only allow PDF files and prevent directory traversal
+        if not filename.endswith('.pdf') or '..' in filename or '/' in filename:
+            logger.warning(f"Blocked access to non-PDF or invalid file: {filename}")
+            return jsonify({"error": "Access denied"}), 403
+
+        # Check if file exists in current directory
+        file_path = Path(filename)
+        if not file_path.exists() or not file_path.is_file():
+            logger.error(f"PDF file not found: {filename}")
+            return jsonify({"error": f"PDF file not found: {filename}"}), 404
+
+        logger.info(f"Serving PDF file: {filename}")
+        return send_file(filename, mimetype='application/pdf')
+    except Exception as e:
+        logger.error(f"Error serving PDF {filename}: {str(e)}")
+        return jsonify({"error": f"Error serving PDF: {str(e)}"}), 500
+
 @app.route('/pdf-files')
 def pdf_files():
     try:

index.html

@@ -62,6 +62,25 @@
             <h3>Document Analysis</h3>
             <p>Extract comprehensive document structure from your PDF using advanced AI-powered analysis. This process identifies headers, paragraphs, images, tables, and other document elements with precise coordinate information.</p>
 
+            <!-- PDF Preview Section -->
+            <div id="pdf-preview-container" class="pdf-preview-container hidden">
+                <h4>PDF Preview</h4>
+                <div class="pdf-preview-controls">
+                    <button id="prev-page-btn" onclick="changePage(-1)" disabled>← Previous</button>
+                    <button id="next-page-btn" onclick="changePage(1)" disabled>Next →</button>
+                    <button id="refresh-preview-btn" onclick="refreshPreview()">Refresh</button>
+                    <div class="pdf-preview-info">
+                        <span id="page-info">Page 1 of 1</span> |
+                        <span id="zoom-info">100%</span>
+                    </div>
+                </div>
+                <div id="pdf-preview-loading" class="pdf-preview-loading hidden">
+                    <div class="loader"></div>
+                    Loading PDF preview...
+                </div>
+                <canvas id="pdf-preview-canvas" class="hidden"></canvas>
+            </div>
+
             <button id="analyzer-btn" onclick="runScript('analyzer')">
                 Start Analysis
             </button>
@@ -146,6 +165,8 @@
     </div>
 </div>
 
+<!-- PDF.js Library -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
 <script src="static/app.js"></script>
 </body>
 </html>

static/app.js

@@ -2,6 +2,15 @@
 const activeTasks = {};
 let pollingInterval = null;
 
+// PDF preview variables
+let currentPdf = null;
+let currentPageNum = 1;
+let totalPages = 0;
+let renderScale = 1.0;
+
+// Initialize PDF.js
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
 // Tab switching functionality
 function switchTab(tabName) {
     // Hide all tab contents
@@ -39,6 +48,143 @@ function updateProgress(completedSteps) {
     }
 }
 
+// PDF Preview Functions
+async function loadPdfPreview(pdfFile) {
+    if (!pdfFile) {
+        hidePdfPreview();
+        return;
+    }
+
+    const previewContainer = document.getElementById('pdf-preview-container');
+    const loadingDiv = document.getElementById('pdf-preview-loading');
+    const canvas = document.getElementById('pdf-preview-canvas');
+
+    // Show preview container and loading
+    previewContainer.classList.remove('hidden');
+    loadingDiv.classList.remove('hidden');
+    canvas.classList.add('hidden');
+
+    try {
+        // Load the PDF
+        const loadingTask = pdfjsLib.getDocument(`/${pdfFile}`);
+        currentPdf = await loadingTask.promise;
+        totalPages = currentPdf.numPages;
+
+        // Update page info
+        updatePageInfo();
+        updatePageControls();
+
+        // Render the current page
+        await renderPage();
+
+        // Hide loading, show canvas
+        loadingDiv.classList.add('hidden');
+        canvas.classList.remove('hidden');
+
+    } catch (error) {
+        console.error('Error loading PDF preview:', error);
+        loadingDiv.innerHTML = '<span class="error">Error loading PDF preview: ' + error.message + '</span>';
+    }
+}
+
+async function renderPage() {
+    if (!currentPdf) return;
+
+    const canvas = document.getElementById('pdf-preview-canvas');
+    const ctx = canvas.getContext('2d');
+
+    try {
+        // Get the page
+        const page = await currentPdf.getPage(currentPageNum);
+
+        // Calculate scale to fit container width (max 600px)
+        const viewport = page.getViewport({ scale: 1.0 });
+        const maxWidth = 600;
+        renderScale = Math.min(maxWidth / viewport.width, 1.5);
+
+        const scaledViewport = page.getViewport({ scale: renderScale });
+
+        // Set canvas dimensions
+        canvas.height = scaledViewport.height;
+        canvas.width = scaledViewport.width;
+
+        // Render the page
+        const renderContext = {
+            canvasContext: ctx,
+            viewport: scaledViewport
+        };
+
+        await page.render(renderContext).promise;
+
+        // Update zoom info
+        document.getElementById('zoom-info').textContent = Math.round(renderScale * 100) + '%';
+
+    } catch (error) {
+        console.error('Error rendering page:', error);
+    }
+}
+
+function updatePageInfo() {
+    document.getElementById('page-info').textContent = `Page ${currentPageNum} of ${totalPages}`;
+}
+
+function updatePageControls() {
+    document.getElementById('prev-page-btn').disabled = currentPageNum <= 1;
+    document.getElementById('next-page-btn').disabled = currentPageNum >= totalPages;
+}
+
+async function changePage(delta) {
+    const newPage = currentPageNum + delta;
+    if (newPage >= 1 && newPage <= totalPages) {
+        currentPageNum = newPage;
+
+        // Update the page number input
+        document.getElementById('page_num').value = currentPageNum;
+
+        updatePageInfo();
+        updatePageControls();
+        await renderPage();
+    }
+}
+
+async function refreshPreview() {
+    const pdfFile = document.getElementById('pdf_file').value;
+    if (pdfFile) {
+        await loadPdfPreview(pdfFile);
+    }
+}
+
+function hidePdfPreview() {
+    document.getElementById('pdf-preview-container').classList.add('hidden');
+    currentPdf = null;
+    totalPages = 0;
+    currentPageNum = 1;
+}
+
+// Event listeners for PDF selection and page changes
+document.addEventListener('DOMContentLoaded', function() {
+    // PDF file selection change
+    document.getElementById('pdf_file').addEventListener('change', async function() {
+        const selectedFile = this.value;
+        if (selectedFile) {
+            await loadPdfPreview(selectedFile);
+        } else {
+            hidePdfPreview();
+        }
+    });
+
+    // Page number input change
+    document.getElementById('page_num').addEventListener('change', async function() {
+        const pageNum = parseInt(this.value);
+        if (pageNum >= 1 && pageNum <= totalPages && pageNum !== currentPageNum) {
+            currentPageNum = pageNum;
+            updatePageInfo();
+            updatePageControls();
+            await renderPage();
+        }
+    });
+});
+
 // Load PDF files on page load
 window.addEventListener('DOMContentLoaded', function() {
     const pdfStatus = document.getElementById('pdf-load-status');

static/styles.css

@@ -68,6 +68,13 @@ h3 {
     margin: 0 0 var(--spacing-sm) 0;
 }
 
+h4 {
+    color: var(--primary-dark);
+    font-weight: 500;
+    font-size: 1rem;
+    margin: 0 0 var(--spacing-sm) 0;
+}
+
 p {
     color: var(--text-medium);
     margin: 0 0 var(--spacing-lg) 0;
@@ -272,6 +279,60 @@ label:has(input[type="checkbox"]) {
     display: block;
 }
 
+/* PDF Preview Section */
+.pdf-preview-container {
+    margin-top: var(--spacing-lg);
+    padding: var(--spacing-lg);
+    background: var(--surface-light);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-light);
+}
+
+.pdf-preview-controls {
+    display: flex;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    align-items: center;
+}
+
+.pdf-preview-controls button {
+    padding: var(--spacing-xs) var(--spacing-md);
+    font-size: 0.8rem;
+    background: var(--text-medium);
+}
+
+.pdf-preview-controls button:hover {
+    background: var(--text-dark);
+}
+
+.pdf-preview-controls button:disabled {
+    background: var(--border-light);
+    color: var(--text-light);
+}
+
+.pdf-preview-info {
+    font-size: 0.8rem;
+    color: var(--text-medium);
+    margin-left: auto;
+}
+
+#pdf-preview-canvas {
+    max-width: 100%;
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    background: white;
+    display: block;
+    margin: 0 auto;
+}
+
+.pdf-preview-loading {
+    text-align: center;
+    padding: var(--spacing-xl);
+    color: var(--text-medium);
+    font-size: 0.9rem;
+}
+
 /* Buttons */
 button {
     padding: var(--spacing-md) var(--spacing-lg);
@@ -531,4 +592,14 @@ button:disabled {
     .tab-content {
         padding: var(--spacing-lg);
     }
+
+    .pdf-preview-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .pdf-preview-info {
+        margin-left: 0;
+        text-align: center;
+    }
 }