Update frontend with some style and adapt app.py

app.py

@@ -39,27 +39,6 @@ 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:
@@ -285,10 +264,15 @@ def run_extractor():
 @app.route('/results/<path:filename>')
 def results(filename):
     try:
-        return send_file(os.path.join('results', filename))
+        file_path = os.path.join('results', filename)
+        if os.path.exists(file_path):
+            return send_file(file_path)
+        else:
+            logger.error(f"File not found: {file_path}")
+            return jsonify({'error': f"File not found: {filename}"}), 404
     except Exception as e:
         logger.error(f"Error serving file {filename}: {str(e)}")
-        return jsonify({'error': f"File not found: {filename}"}), 404
+        return jsonify({'error': f"Error serving file: {filename}"}), 500
 
 @app.route('/check-environment')
 def check_environment():

index.html

@@ -62,25 +62,6 @@
             <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>
@@ -136,6 +117,14 @@
 
             <div id="extractor-status" class="status hidden"></div>
 
+            <!-- Extracted Images Gallery -->
+            <div id="extracted-images-container" class="hidden">
+                <h4>Extracted Images</h4>
+                <div id="extracted-images-gallery" class="images-gallery">
+                    <!-- Images will be loaded here dynamically -->
+                </div>
+            </div>
+
             <div class="tab-description">
                 <strong>Extraction Capabilities:</strong>
                 <ul>
@@ -165,8 +154,6 @@
     </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,15 +2,6 @@
 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
@@ -48,143 +39,105 @@ function updateProgress(completedSteps) {
     }
 }
 
-// PDF Preview Functions
+// Load extracted images from the results folder
-async function loadPdfPreview(pdfFile) {
+function loadExtractedImages() {
-    if (!pdfFile) {
+    const imageGallery = document.getElementById('extracted-images-gallery');
-        hidePdfPreview();
+    const imageContainer = document.getElementById('extracted-images-container');
-        return;
+
+    // First try to load the index.html to get the list of images
+    fetch('/results/pictures/index.html')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('No extracted images found');
+            }
+            return response.text();
+        })
+        .then(html => {
+            // Parse the HTML to extract image information
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const imageCards = doc.querySelectorAll('.picture-card');
+
+            if (imageCards.length === 0) {
+                imageGallery.innerHTML = '<div class="no-images">No images were extracted from this page.</div>';
+                return;
+            }
+
+            let galleryHTML = '';
+            imageCards.forEach((card, index) => {
+                const img = card.querySelector('img');
+                const caption = card.querySelector('.picture-caption');
+                const coords = card.querySelector('.picture-coords');
+
+                if (img) {
+                    const imgSrc = img.getAttribute('src');
+                    const pictureId = index + 1;
+                    const captionText = caption ? caption.textContent : '';
+                    const coordsText = coords ? coords.textContent : '';
+
+                    galleryHTML += `
+                        <div class="extracted-image-card">
+                            <div class="image-wrapper">
+                                <img src="/results/pictures/${imgSrc}" alt="Extracted Image ${pictureId}" 
+                                     onclick="openImageModal('/results/pictures/${imgSrc}', '${captionText}', '${coordsText}')">
+                            </div>
+                            <div class="image-info">
+                                <h4>Picture ${pictureId}</h4>
+                                ${captionText ? `<p class="image-caption">${captionText}</p>` : ''}
+                                <p class="image-coords">${coordsText}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+            });
+
+            imageGallery.innerHTML = galleryHTML;
+            imageContainer.classList.remove('hidden');
+        })
+        .catch(error => {
+            console.log('No extracted images found:', error);
+            imageGallery.innerHTML = '<div class="no-images">No images have been extracted yet. Run the image extraction first.</div>';
+        });
+}
+
+// Open image in modal for better viewing
+function openImageModal(imageSrc, caption, coords) {
+    // Create modal if it doesn't exist
+    let modal = document.getElementById('image-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'image-modal';
+        modal.className = 'image-modal';
+        modal.innerHTML = `
+            <div class="modal-content">
+                <span class="modal-close" onclick="closeImageModal()">&times;</span>
+                <img id="modal-image" src="" alt="Extracted Image">
+                <div class="modal-info">
+                    <p id="modal-caption"></p>
+                    <p id="modal-coords"></p>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
     }
 
-    const previewContainer = document.getElementById('pdf-preview-container');
+    // Set image and info
-    const loadingDiv = document.getElementById('pdf-preview-loading');
+    document.getElementById('modal-image').src = imageSrc;
-    const canvas = document.getElementById('pdf-preview-canvas');
+    document.getElementById('modal-caption').textContent = caption;
+    document.getElementById('modal-coords').textContent = coords;
 
-    // Show preview container and loading
+    // Show modal
-    previewContainer.classList.remove('hidden');
+    modal.classList.add('active');
-    loadingDiv.classList.remove('hidden');
+}
-    canvas.classList.add('hidden');
 
-    try {
+// Close image modal
-        // Load the PDF
+function closeImageModal() {
-        const loadingTask = pdfjsLib.getDocument(`/${pdfFile}`);
+    const modal = document.getElementById('image-modal');
-        currentPdf = await loadingTask.promise;
+    if (modal) {
-        totalPages = currentPdf.numPages;
+        modal.classList.remove('active');
-
-        // 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');
@@ -219,6 +172,9 @@ window.addEventListener('DOMContentLoaded', function() {
 
     // Run an environment check on startup
     checkEnvironment();
+
+    // Try to load any existing extracted images
+    loadExtractedImages();
 });
 
 // Check the environment
@@ -362,6 +318,13 @@ function pollTasks() {
                             document.getElementById('image-container').classList.remove('hidden');
                         }
 
+                        // Load extracted images if extractor completed
+                        if (taskInfo.type === 'extractor') {
+                            setTimeout(() => {
+                                loadExtractedImages();
+                            }, 1000); // Small delay to ensure files are written
+                        }
+
                         // Enable next step button and update progress
                         if (taskInfo.type === 'analyzer') {
                             document.getElementById('visualizer-btn').disabled = false;
@@ -436,6 +399,11 @@ function runScript(script) {
         document.getElementById('image-container').classList.add('hidden');
     }
 
+    // Hide extracted images if not running extractor
+    if (script !== 'extractor') {
+        document.getElementById('extracted-images-container').classList.add('hidden');
+    }
+
     // Determine endpoint
     let endpoint;
     switch(script) {

static/styles.css

@@ -72,7 +72,7 @@ h4 {
     color: var(--primary-dark);
     font-weight: 500;
     font-size: 1rem;
-    margin: 0 0 var(--spacing-sm) 0;
+    margin: 0 0 var(--spacing-md) 0;
 }
 
 p {
@@ -279,60 +279,6 @@ 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);
@@ -455,7 +401,7 @@ button:disabled {
     box-shadow: var(--shadow-md);
 }
 
-/* Image container */
+/* Image container (for visualizer) */
 #image-container {
     margin-top: var(--spacing-lg);
     text-align: center;
@@ -478,6 +424,187 @@ button:disabled {
     box-shadow: var(--shadow-md);
 }
 
+/* Extracted Images Gallery */
+#extracted-images-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);
+}
+
+#extracted-images-container h4 {
+    color: var(--primary-dark);
+    margin: 0 0 var(--spacing-lg) 0;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+}
+
+.images-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-md);
+}
+
+.extracted-image-card {
+    background: var(--surface-white);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    transition: all 0.2s ease;
+    border: 1px solid var(--border-light);
+}
+
+.extracted-image-card:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+
+.image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    background: var(--surface-light);
+    cursor: pointer;
+}
+
+.image-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    transition: transform 0.2s ease;
+}
+
+.image-wrapper:hover img {
+    transform: scale(1.05);
+}
+
+.image-info {
+    padding: var(--spacing-md);
+}
+
+.image-info h4 {
+    margin: 0 0 var(--spacing-xs) 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--primary-dark);
+}
+
+.image-caption {
+    margin: 0 0 var(--spacing-xs) 0;
+    font-size: 0.8rem;
+    color: var(--text-medium);
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.image-coords {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--text-light);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.no-images {
+    text-align: center;
+    padding: var(--spacing-xl);
+    color: var(--text-light);
+    font-style: italic;
+    background: var(--surface-white);
+    border-radius: var(--radius-md);
+    border: 2px dashed var(--border-light);
+}
+
+/* Image Modal */
+.image-modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
+}
+
+.image-modal.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-lg);
+}
+
+.modal-content {
+    background: var(--surface-white);
+    border-radius: var(--radius-lg);
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow: auto;
+    position: relative;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-close {
+    position: absolute;
+    top: var(--spacing-md);
+    right: var(--spacing-lg);
+    color: var(--text-light);
+    font-size: 2rem;
+    font-weight: bold;
+    cursor: pointer;
+    z-index: 1001;
+    background: var(--surface-white);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-md);
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    color: var(--error);
+    transform: scale(1.1);
+}
+
+#modal-image {
+    max-width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.modal-info {
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--border-light);
+}
+
+.modal-info p {
+    margin: 0 0 var(--spacing-sm) 0;
+    font-size: 0.9rem;
+}
+
+#modal-caption {
+    color: var(--text-dark);
+    font-weight: 500;
+}
+
+#modal-coords {
+    color: var(--text-light);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.8rem;
+}
+
 /* Environment check */
 #environment-check {
     margin-top: var(--spacing-lg);
@@ -593,13 +720,21 @@ button:disabled {
         padding: var(--spacing-lg);
     }
 
-    .pdf-preview-controls {
+    .images-gallery {
-        flex-direction: column;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        align-items: stretch;
+        gap: var(--spacing-md);
     }
 
-    .pdf-preview-info {
+    .image-wrapper {
-        margin-left: 0;
+        height: 150px;
-        text-align: center;
+    }
+
+    .modal-content {
+        margin: var(--spacing-md);
+        max-width: calc(100vw - 32px);
+    }
+
+    #modal-image {
+        max-height: 60vh;
     }
 }