fuck sandbox on hf space

extractor_compare.py

@@ -198,7 +198,11 @@ def create_interface():
     }
     """
     
-    with gr.Blocks(title="PDF Extractor Comparer", theme="soft", css=custom_css) as demo:
+    with gr.Blocks(title="PDF Extractor Comparer", theme="soft", css=custom_css, head=
+                   """
+                   <script src="https://unpkg.com/[email protected]/build/pdf.min.js"></script>
+                   """
+                   ) as demo:
         gr.Markdown("## PDF Extractor Comparer")
         
         with gr.Row():
@@ -217,18 +221,7 @@ def create_interface():
                     label="PDF Document",
                     value='''
                     <div style="width:100%; height:700px; position:relative; border:1px solid #ddd;">
-                        <style>
-                            @font-face {
-                                font-family: 'Local Arial';
-                                src: local('Arial');
-                            }
-                            body {
-                                font-family: 'Local Arial', sans-serif;
-                            }
-                        </style>
-                        <object id="pdf-object" type="application/pdf" width="100%" height="100%" style="display:none;">
-                            <p>PDF cannot be displayed</p>
-                        </object>
+                        <div id="pdf-container" style="width:100%; height:100%; overflow:auto;"></div>
                         <div id="pdf-fallback" style="position:absolute; top:0; left:0; width:100%; height:100%; 
                              display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; font-family: Arial, sans-serif;">
                             Click "Load PDFs" to start viewing documents.
@@ -352,92 +345,247 @@ def create_interface():
             fn=None,
             js="""
             function() {
-                console.log("Setting up PDF viewer");
+                console.log("Setting up PDF.js viewer");
+                
+                // Configure PDF.js worker
+                if (window.pdfjsLib) {
+                    window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/[email protected]/build/pdf.worker.min.js";
+                    console.log("PDF.js configured with worker");
+                } else {
+                    console.warn("PDF.js not found in head, attempting to load dynamically");
+                    // Fallback to load PDF.js dynamically if not in the head
+                    const pdfJsScript = document.createElement('script');
+                    pdfJsScript.src = "https://unpkg.com/[email protected]/build/pdf.min.js";
+                    document.head.appendChild(pdfJsScript);
+                    
+                    pdfJsScript.onload = function() {
+                        window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/[email protected]/build/pdf.worker.min.js";
+                        console.log("PDF.js loaded dynamically");
+                    };
+                }
                 
-                // Store the current blob URL
-                var pdfBlobUrl = null;
+                // To track when we should force a refresh
+                let currentPdfHash = "";
+                
+                // Function to render a PDF page
+                async function renderPage(pdf, pageNumber, container) {
+                    try {
+                        const page = await pdf.getPage(pageNumber);
+                        
+                        // Create page container
+                        const pageContainer = document.createElement('div');
+                        pageContainer.className = 'pdf-page';
+                        pageContainer.style.position = 'relative';
+                        pageContainer.style.margin = '10px auto';
+                        pageContainer.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+                        
+                        // Create canvas for this page
+                        const canvas = document.createElement('canvas');
+                        const context = canvas.getContext('2d');
+                        pageContainer.appendChild(canvas);
+                        
+                        // Set up viewport with scale based on container width
+                        const containerWidth = container.clientWidth - 30; // Account for margins
+                        const originalViewport = page.getViewport({ scale: 1 });
+                        const scale = containerWidth / originalViewport.width;
+                        const viewport = page.getViewport({ scale });
+                        
+                        // Set canvas dimensions
+                        canvas.width = viewport.width;
+                        canvas.height = viewport.height;
+                        
+                        // Render the PDF page into canvas context
+                        await page.render({
+                            canvasContext: context,
+                            viewport: viewport
+                        }).promise;
+                        
+                        // Add to the container
+                        container.appendChild(pageContainer);
+                        
+                        return true;
+                    } catch (error) {
+                        console.error(`Error rendering page ${pageNumber}:`, error);
+                        return false;
+                    }
+                }
+                
+                // Simple hash function for PDF data to detect changes
+                function hashData(str) {
+                    let hash = 0;
+                    if (str.length === 0) return hash;
+                    for (let i = 0; i < Math.min(str.length, 10000); i++) {
+                        const char = str.charCodeAt(i);
+                        hash = ((hash << 5) - hash) + char;
+                        hash = hash & hash;
+                    }
+                    // Also include the length as PDFs with same start can be different
+                    return `${hash}_${str.length}`;
+                }
                 
                 // Function to display PDF from base64 data
-                function displayPdfFromBase64(base64Data) {
+                async function displayPdfFromBase64(base64Data) {
                     try {
                         if (!base64Data || base64Data.length < 100) {
                             console.log("No valid PDF data received");
                             document.getElementById('pdf-fallback').style.display = 'flex';
-                            document.getElementById('pdf-object').style.display = 'none';
+                            document.getElementById('pdf-container').innerHTML = '';
                             return;
                         }
                         
-                        console.log("Displaying PDF from base64 data");
-                        
-                        // Clean up previous blob URL
-                        if (pdfBlobUrl) {
-                            URL.revokeObjectURL(pdfBlobUrl);
+                        // Check if this is the same PDF we already have displayed
+                        const dataHash = hashData(base64Data);
+                        if (dataHash === currentPdfHash) {
+                            console.log("Same PDF already displayed, skipping render");
+                            return;
                         }
                         
-                        // Convert base64 to binary
-                        const binary = atob(base64Data);
-                        const bytes = new Uint8Array(binary.length);
-                        for (let i = 0; i < binary.length; i++) {
-                            bytes[i] = binary.charCodeAt(i);
+                        // Update the current PDF hash
+                        currentPdfHash = dataHash;
+                        console.log("PDF changed, rendering new document");
+                        
+                        // Check if PDF.js is loaded
+                        if (!window.pdfjsLib) {
+                            console.warn("PDF.js not loaded yet, waiting...");
+                            document.getElementById('pdf-fallback').innerHTML = 
+                                '<div style="font-family: Arial, sans-serif;">Loading PDF viewer...</div>';
+                            setTimeout(() => displayPdfFromBase64(base64Data), 500);
+                            return;
                         }
                         
-                        // Create blob and URL
-                        const blob = new Blob([bytes], {type: 'application/pdf'});
-                        pdfBlobUrl = URL.createObjectURL(blob);
+                        // Convert base64 to array buffer
+                        const binaryString = atob(base64Data);
+                        const bytes = new Uint8Array(binaryString.length);
+                        for (let i = 0; i < binaryString.length; i++) {
+                            bytes[i] = binaryString.charCodeAt(i);
+                        }
                         
-                        // Display PDF in the object element
-                        const pdfObject = document.getElementById('pdf-object');
-                        const fallback = document.getElementById('pdf-fallback');
+                        // Clear existing content
+                        const container = document.getElementById('pdf-container');
+                        container.innerHTML = '';
+                        document.getElementById('pdf-fallback').style.display = 'none';
                         
-                        if (pdfObject && fallback) {
-                            pdfObject.data = pdfBlobUrl;
-                            pdfObject.style.display = 'block';
-                            fallback.style.display = 'none';
-                            console.log("PDF displayed successfully");
-                        } else {
-                            console.error("PDF viewer elements not found");
+                        // Load and render the PDF
+                        try {
+                            // Show loading indicator
+                            const loadingIndicator = document.createElement('div');
+                            loadingIndicator.style.padding = '20px';
+                            loadingIndicator.style.textAlign = 'center';
+                            loadingIndicator.innerText = 'Loading PDF...';
+                            container.appendChild(loadingIndicator);
+                            
+                            // Load document
+                            const loadingTask = window.pdfjsLib.getDocument({ data: bytes });
+                            const pdf = await loadingTask.promise;
+                            
+                            // Clear the loading indicator
+                            container.innerHTML = '';
+                            
+                            console.log(`PDF loaded with ${pdf.numPages} pages`);
+                            
+                            // Render all pages
+                            const pagePromises = [];
+                            for (let i = 1; i <= pdf.numPages; i++) {
+                                pagePromises.push(renderPage(pdf, i, container));
+                            }
+                            
+                            // Wait for all pages to render
+                            await Promise.all(pagePromises);
+                            console.log("All pages rendered");
+                            
+                            // Scroll to top
+                            container.scrollTop = 0;
+                            
+                        } catch (error) {
+                            console.error("Error loading PDF:", error);
+                            document.getElementById('pdf-fallback').innerHTML = 
+                                `<div style="color: red; font-family: Arial, sans-serif;">
+                                    Error loading PDF: ${error.message || 'Unknown error'}
+                                </div>`;
+                            document.getElementById('pdf-fallback').style.display = 'flex';
+                            currentPdfHash = ""; // Reset hash to allow retry
                         }
                     } catch (error) {
-                        console.error("Error displaying PDF:", error);
-                        const fallback = document.getElementById('pdf-fallback');
-                        if (fallback) {
-                            fallback.innerHTML = '<div style="color:red; font-family: Arial, sans-serif;">Error displaying PDF</div>';
-                            fallback.style.display = 'flex';
-                        }
+                        console.error("Error processing PDF data:", error);
+                        document.getElementById('pdf-fallback').innerHTML = 
+                            `<div style="color: red; font-family: Arial, sans-serif;">
+                                Error processing PDF: ${error.message || 'Unknown error'}
+                            </div>`;
+                        document.getElementById('pdf-fallback').style.display = 'flex';
+                        currentPdfHash = ""; // Reset hash to allow retry
                     }
                 }
                 
-                // Check for PDF data repeatedly
-                function checkForPdfData() {
+                // Check for PDF data
+                function setupPdfListener() {
                     const dataElement = document.getElementById('pdf_base64_data');
                     if (!dataElement) {
                         console.log("PDF data element not found, will retry");
-                        setTimeout(checkForPdfData, 1000);
+                        setTimeout(setupPdfListener, 1000);
                         return;
                     }
                     
                     const textarea = dataElement.querySelector('textarea');
                     if (!textarea) {
                         console.log("Textarea not found, will retry");
-                        setTimeout(checkForPdfData, 1000);
+                        setTimeout(setupPdfListener, 1000);
                         return;
                     }
                     
+                    console.log("Found PDF data element, setting up listeners");
+                    
                     // Display initial data if available
                     if (textarea.value && textarea.value.length > 100) {
                         displayPdfFromBase64(textarea.value);
                     }
                     
-                    // Set up polling to check for changes
-                    setInterval(function() {
+                    // Use both an observer and polling for robustness
+                    // 1. Create MutationObserver to watch for value changes
+                    const observer = new MutationObserver((mutations) => {
+                        for (const mutation of mutations) {
+                            if (textarea.value && textarea.value.length > 100) {
+                                displayPdfFromBase64(textarea.value);
+                                break;
+                            }
+                        }
+                    });
+                    
+                    // Observe the textarea for changes
+                    observer.observe(textarea, { 
+                        attributes: true,
+                        characterData: true,
+                        subtree: true,
+                        childList: true
+                    });
+                    
+                    // 2. Also use polling as a fallback
+                    setInterval(() => {
                         if (textarea.value && textarea.value.length > 100) {
                             displayPdfFromBase64(textarea.value);
                         }
-                    }, 2000);
+                    }, 1000);
+                    
+                    // Monitor the next/prev buttons to force PDF refresh
+                    const prevButton = document.getElementById('prev_button');
+                    const nextButton = document.getElementById('next_button');
+                    
+                    if (prevButton) {
+                        prevButton.addEventListener('click', () => {
+                            console.log("Prev button clicked, forcing PDF refresh");
+                            currentPdfHash = ""; // Reset hash to force refresh
+                        });
+                    }
+                    
+                    if (nextButton) {
+                        nextButton.addEventListener('click', () => {
+                            console.log("Next button clicked, forcing PDF refresh");
+                            currentPdfHash = ""; // Reset hash to force refresh
+                        });
+                    }
                 }
                 
                 // Start checking for PDF data
-                setTimeout(checkForPdfData, 1000);
+                setTimeout(setupPdfListener, 1000);
                 
                 // Add keyboard shortcuts
                 document.addEventListener('keydown', function(event) {