push up

extractor_compare.py

@@ -226,10 +226,11 @@ def create_interface():
                                 font-family: 'Local Arial', sans-serif;
                             }
                         </style>
-                        <meta http-equiv="Content-Security-Policy" content="default-src * blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">
-                        <iframe id="pdf-iframe" width="100%" height="100%" style="border:none;" src="about:blank" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
+                        <object id="pdf-object" type="application/pdf" width="100%" height="100%" style="display:none;">
+                            <p>PDF cannot be displayed</p>
+                        </object>
                         <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;">
+                             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.
                         </div>
                     </div>
@@ -350,110 +351,113 @@ def create_interface():
         demo.load(
             fn=None,
             js="""
-            // Function to safely setup the MutationObserver for the PDF data
-            function setupPdfDataObserver() {
-                console.log('Setting up PDF data observer...');
+            function() {
+                console.log("Setting up PDF viewer");
                 
-                // Wait for Gradio components to fully render
-                setTimeout(() => {
+                // Store the current blob URL
+                var pdfBlobUrl = null;
+                
+                // Function to display PDF from base64 data
+                function displayPdfFromBase64(base64Data) {
                     try {
-                        const targetNode = document.getElementById('pdf_base64_data');
-                        if (!targetNode) {
-                            console.error('PDF data container not found!');
+                        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';
                             return;
                         }
                         
-                        // Find the textarea within the Gradio component
-                        const hiddenTextArea = targetNode.querySelector('textarea');
-                        if (!hiddenTextArea) {
-                            console.error('Hidden textarea not found within the container!');
-                            return;
-                        }
+                        console.log("Displaying PDF from base64 data");
                         
-                        console.log('Found hidden textarea to observe');
+                        // Clean up previous blob URL
+                        if (pdfBlobUrl) {
+                            URL.revokeObjectURL(pdfBlobUrl);
+                        }
                         
-                        // Setup observer configuration
-                        const observerConfig = { 
-                            characterData: true, 
-                            childList: true, 
-                            subtree: true, 
-                            attributes: true 
-                        };
+                        // 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);
+                        }
                         
-                        // Create and attach the observer
-                        const observer = new MutationObserver(function(mutationsList) {
-                            console.log('Mutation detected, checking textarea value');
-                            if (hiddenTextArea.value && hiddenTextArea.value.length > 100) {
-                                console.log('Valid value found in textarea, displaying PDF');
-                                displayPdfBlob(hiddenTextArea.value);
-                            }
-                        });
+                        // Create blob and URL
+                        const blob = new Blob([bytes], {type: 'application/pdf'});
+                        pdfBlobUrl = URL.createObjectURL(blob);
                         
-                        // Observe the textarea itself, not its parent
-                        observer.observe(hiddenTextArea, observerConfig);
-                        console.log('MutationObserver attached to textarea');
+                        // Display PDF in the object element
+                        const pdfObject = document.getElementById('pdf-object');
+                        const fallback = document.getElementById('pdf-fallback');
                         
-                        // Also check initial value
-                        if (hiddenTextArea.value && hiddenTextArea.value.length > 100) {
-                            console.log('Initial valid value found, displaying PDF');
-                            displayPdfBlob(hiddenTextArea.value);
+                        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");
                         }
                     } catch (error) {
-                        console.error('Error setting up observer:', 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';
+                        }
                     }
-                }, 1000); // Wait 1 second for components to render
-            }
-            
-            // Function to display PDF from base64 data
-            function displayPdfBlob(base64Data) {
-                try {
-                    // Get iframe and fallback elements
-                    const iframe = document.getElementById('pdf-iframe');
-                    const fallback = document.getElementById('pdf-fallback');
-                    
-                    if (!iframe || !fallback) {
-                        console.error('PDF viewer elements not found');
+                }
+                
+                // Check for PDF data repeatedly
+                function checkForPdfData() {
+                    const dataElement = document.getElementById('pdf_base64_data');
+                    if (!dataElement) {
+                        console.log("PDF data element not found, will retry");
+                        setTimeout(checkForPdfData, 1000);
                         return;
                     }
                     
-                    // Convert base64 to binary
-                    const binaryString = atob(base64Data);
-                    const len = binaryString.length;
-                    const bytes = new Uint8Array(len);
-                    
-                    for (let i = 0; i < len; i++) {
-                        bytes[i] = binaryString.charCodeAt(i);
+                    const textarea = dataElement.querySelector('textarea');
+                    if (!textarea) {
+                        console.log("Textarea not found, will retry");
+                        setTimeout(checkForPdfData, 1000);
+                        return;
                     }
                     
-                    // Create blob and URL
-                    const blob = new Blob([bytes], { type: 'application/pdf' });
-                    const objectUrl = URL.createObjectURL(blob);
+                    // Display initial data if available
+                    if (textarea.value && textarea.value.length > 100) {
+                        displayPdfFromBase64(textarea.value);
+                    }
                     
-                    // Update iframe
-                    iframe.src = objectUrl;
+                    // Set up polling to check for changes
+                    setInterval(function() {
+                        if (textarea.value && textarea.value.length > 100) {
+                            displayPdfFromBase64(textarea.value);
+                        }
+                    }, 2000);
+                }
+                
+                // Start checking for PDF data
+                setTimeout(checkForPdfData, 1000);
+                
+                // Add keyboard shortcuts
+                document.addEventListener('keydown', function(event) {
+                    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+                        return;
+                    }
                     
-                    // Hide fallback message
-                    fallback.style.display = 'none';
+                    var buttonId = null;
+                    if (event.key === 'ArrowLeft') buttonId = 'prev_button';
+                    else if (event.key === 'ArrowRight') buttonId = 'next_button';
                     
-                    // Log success
-                    console.log('PDF displayed successfully');
-                } catch (error) {
-                    console.error('Error displaying PDF:', error);
-                }
+                    if (buttonId) {
+                        var button = document.getElementById(buttonId);
+                        if (button) {
+                            event.preventDefault();
+                            button.click();
+                        }
+                    }
+                });
             }
-            
-            // Initialize the observer after everything is loaded
-            window.addEventListener('load', function() {
-                console.log('Window loaded, initializing PDF observer...');
-                setupPdfDataObserver();
-            });
-            
-            // Also setup when Gradio mounts the component
-            document.addEventListener('DOMContentLoaded', function() {
-                console.log('DOM loaded, waiting for Gradio components...');
-                // Wait a bit longer for Gradio components to mount
-                setTimeout(setupPdfDataObserver, 2000);
-            });
             """
         )