try again

extractor_compare.py

@@ -217,7 +217,17 @@ def create_interface():
                     label="PDF Document",
                     value='''
                     <div style="width:100%; height:700px; position:relative; border:1px solid #ddd;">
-                        <iframe id="pdf-iframe" width="100%" height="100%" style="border:none;" src="about:blank"></iframe>
+                        <style>
+                            @font-face {
+                                font-family: 'Local Arial';
+                                src: local('Arial');
+                            }
+                            body {
+                                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>
                         <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;">
                             Click "Load PDFs" to start viewing documents.
@@ -336,80 +346,41 @@ def create_interface():
             outputs=[extractor2_text]
         )
         
-        # Add JavaScript to handle PDF display
+        # JavaScript for PDF handling
         demo.load(
-            None, None, None,
+            fn=None,
             js="""
-            () => {
-                console.log('Setting up PDF Blob handler...');
-                window.currentPdfBlobUrl = null; // Store previous blob url globally
-
-                function displayPdfBlob(base64Data) {
-                    console.log('displayPdfBlob called - data length:', base64Data ? base64Data.length : 0);
-                    const iframe = document.getElementById('pdf-iframe');
-                    const fallbackDiv = document.getElementById('pdf-fallback');
-                    
-                    if (!iframe) {
-                        console.error('PDF iframe not found!');
-                        return;
-                    }
-
-                    // Revoke previous Blob URL to free memory
-                    if (window.currentPdfBlobUrl) {
-                        console.log('Revoking previous Blob URL:', window.currentPdfBlobUrl);
-                        URL.revokeObjectURL(window.currentPdfBlobUrl);
-                        window.currentPdfBlobUrl = null;
-                    }
-
-                    if (base64Data && base64Data.length > 100) { // Ensure there's actual content
-                        try {
-                            // Hide fallback message
-                            if (fallbackDiv) fallbackDiv.style.display = 'none';
-                            
-                            // Decode Base64
-                            const byteCharacters = atob(base64Data);
-                            console.log('Base64 decoded successfully, length:', byteCharacters.length);
-                            const byteNumbers = new Array(byteCharacters.length);
-                            for (let i = 0; i < byteCharacters.length; i++) {
-                                byteNumbers[i] = byteCharacters.charCodeAt(i);
-                            }
-                            const byteArray = new Uint8Array(byteNumbers);
-                            
-                            // Create Blob and URL
-                            const blob = new Blob([byteArray], {type: 'application/pdf'});
-                            window.currentPdfBlobUrl = URL.createObjectURL(blob);
-                            console.log('Created new Blob URL:', window.currentPdfBlobUrl);
-                            
-                            // Update iframe source
-                            iframe.src = window.currentPdfBlobUrl;
-                            console.log('Iframe src updated to Blob URL');
-                        } catch (e) {
-                            console.error('Error processing Base64 data or creating Blob URL:', e);
-                            if (fallbackDiv) {
-                                fallbackDiv.innerHTML = '<div style="color:red;">Error loading PDF: ' + e.message + '</div>';
-                                fallbackDiv.style.display = 'flex';
-                            }
-                            iframe.src = 'about:blank'; // Clear iframe on error
+            // Function to safely setup the MutationObserver for the PDF data
+            function setupPdfDataObserver() {
+                console.log('Setting up PDF data observer...');
+                
+                // Wait for Gradio components to fully render
+                setTimeout(() => {
+                    try {
+                        const targetNode = document.getElementById('pdf_base64_data');
+                        if (!targetNode) {
+                            console.error('PDF data container not found!');
+                            return;
                         }
-                    } else {
-                        console.log('No valid Base64 data provided.');
-                        if (fallbackDiv) {
-                            fallbackDiv.innerHTML = '<div>No PDF loaded yet. Use the "Load PDFs" button.</div>';
-                            fallbackDiv.style.display = 'flex';
+                        
+                        // Find the textarea within the Gradio component
+                        const hiddenTextArea = targetNode.querySelector('textarea');
+                        if (!hiddenTextArea) {
+                            console.error('Hidden textarea not found within the container!');
+                            return;
                         }
-                        iframe.src = 'about:blank'; // Clear iframe if no data
-                    }
-                }
-                
-                // MutationObserver to watch the hidden Textbox
-                const targetNode = document.getElementById('pdf_base64_data');
-                if (targetNode) {
-                    // Find the actual textarea inside the Gradio component structure
-                    const hiddenTextArea = targetNode.querySelector('textarea');
-                    if(hiddenTextArea){
-                        console.log('Found hidden textarea to observe.');
-                        const observerConfig = { characterData: true, childList: true, subtree: true, attributes: true }; // Watch for all changes
                         
+                        console.log('Found hidden textarea to observe');
+                        
+                        // Setup observer configuration
+                        const observerConfig = { 
+                            characterData: true, 
+                            childList: true, 
+                            subtree: true, 
+                            attributes: true 
+                        };
+                        
+                        // 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) {
@@ -418,55 +389,71 @@ def create_interface():
                             }
                         });
                         
-                        observer.observe(targetNode, observerConfig);
-                        console.log('MutationObserver attached');
-
-                        // Try to display any initial value
-                        setTimeout(() => {
-                            if(hiddenTextArea.value && hiddenTextArea.value.length > 100) { 
-                                console.log('Initial value found in textarea, displaying PDF');
-                                displayPdfBlob(hiddenTextArea.value); 
-                            }
-                        }, 1000);
-
-                    } else {
-                        console.error('Could not find the textarea within #pdf_base64_data!');
+                        // Observe the textarea itself, not its parent
+                        observer.observe(hiddenTextArea, observerConfig);
+                        console.log('MutationObserver attached to textarea');
+                        
+                        // Also check initial value
+                        if (hiddenTextArea.value && hiddenTextArea.value.length > 100) {
+                            console.log('Initial valid value found, displaying PDF');
+                            displayPdfBlob(hiddenTextArea.value);
+                        }
+                    } catch (error) {
+                        console.error('Error setting up observer:', error);
                     }
-                } else {
-                    console.error('Hidden data element #pdf_base64_data not found!');
-                }
-                
-                // Add keyboard shortcuts like in app.py
-                document.addEventListener('keydown', function(event) {
-                    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
-                        return; // Ignore inputs
+                }, 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');
+                        return;
                     }
-                    let targetButtonId = null;
-                    const key = event.key;
                     
-                    if (key === 'ArrowLeft') targetButtonId = 'prev_button';
-                    else if (key === 'ArrowRight') targetButtonId = 'next_button';
-
-                    if (targetButtonId) {
-                        const targetButton = document.getElementById(targetButtonId);
-                        if (targetButton) {
-                             event.preventDefault(); 
-                             targetButton.click(); 
-                        }
-                    } 
-                });
-                console.log('Keydown listener added.');
-                
-                // Additional style for basic font
-                const additionalStyle = document.createElement('style');
-                additionalStyle.textContent = `
-                    .extraction-text textarea {
-                        font-family: Arial, Helvetica, sans-serif !important;
-                        font-size: 14px !important;
+                    // 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);
                     }
-                `;
-                document.head.appendChild(additionalStyle);
+                    
+                    // Create blob and URL
+                    const blob = new Blob([bytes], { type: 'application/pdf' });
+                    const objectUrl = URL.createObjectURL(blob);
+                    
+                    // Update iframe
+                    iframe.src = objectUrl;
+                    
+                    // Hide fallback message
+                    fallback.style.display = 'none';
+                    
+                    // Log success
+                    console.log('PDF displayed successfully');
+                } catch (error) {
+                    console.error('Error displaying PDF:', error);
+                }
             }
+            
+            // 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);
+            });
             """
         )