Upload folder using huggingface_hub

hate_speech_demo.py

@@ -743,7 +743,7 @@ def create_gradio_app():
         loading_spinner = gr.HTML('<div id="loading-spinner"></div>')
         
         # Create a file component to serve the PDF (hidden from UI)
-        pdf_file = gr.File("Hate Speech Policy.pdf", visible=True, label="Policy PDF")
+        pdf_file = gr.File("Hate Speech Policy.pdf", visible=True, label="Hate Speech Policy Document")
         
         # Add policy popup HTML with reliable PDF loading that works on first click
         # Replace the problematic policy_popup_html with this fixed version
@@ -756,34 +756,41 @@ def create_gradio_app():
             <button class="policy-popup-close" onclick="document.getElementById('policy-popup').style.display='none';">Close</button>
         </div>
         <div class="policy-iframe-container">
-            <!-- We'll use a download approach instead of iframe embedding -->
-            <div id="pdf-container" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
+            <!-- PDF.js viewer setup -->
+            <div id="pdf-viewer" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
+                <!-- We'll load PDF.js and then render the PDF here -->
+                <iframe id="pdf-js-viewer" style="flex: 1; border: none; width: 100%; height: 100%;"></iframe>
+            </div>
+            
+            <!-- Loading indicator -->
+            <div id="pdf-loading" style="display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8);">
+                <div style="text-align: center;">
+                    <div style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #FCA539; border-radius: 50%; margin: 0 auto 15px auto; animation: spin 1s linear infinite;"></div>
+                    <p>Loading document...</p>
+                </div>
+            </div>
+            
+            <!-- Fallback for when viewer fails -->
+            <div id="pdf-fallback" style="display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
                 <img src="https://img.icons8.com/color/96/000000/pdf.png" style="width: 96px; height: 96px; margin-bottom: 20px;">
-                <h3>Hate Speech Policy Document</h3>
+                <h3>PDF Viewer Unavailable</h3>
                 <p style="text-align: center; max-width: 80%; margin: 15px auto;">
-                    The policy document is available for download. Click the button below to view or download it.
+                    We couldn't display the PDF directly. Please download it using the button below.
                 </p>
                 <a id="policy-download-link" href="#" class="evidence-button" target="_blank" style="margin-top: 20px;">
                     Download Policy PDF
                 </a>
-                <p style="font-size: 14px; color: #666; margin-top: 30px;">
-                    If the download doesn't work, make sure the file is properly uploaded and accessible in your Gradio app.
-                </p>
+                <button onclick="retryPdfLoad()" class="retry-button" style="margin-top: 15px;">
+                    Try Again
+                </button>
             </div>
             
-            <!-- Loading indicator (only shown briefly) -->
-            <div id="pdf-loading" style="display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8);">
-                <div style="text-align: center;">
-                    <div style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #FCA539; border-radius: 50%; margin: 0 auto 15px auto; animation: spin 1s linear infinite;"></div>
-                    <p>Finding document...</p>
-                </div>
-            </div>
             <style>
                 @keyframes spin {
                     0% { transform: rotate(0deg); }
                     100% { transform: rotate(360deg); }
                 }
-                .evidence-button {
+                .evidence-button, .retry-button {
                     background: #FCA539 !important;
                     color: #000000 !important;
                     font-weight: bold;
@@ -797,22 +804,28 @@ def create_gradio_app():
                     text-decoration: none !important;
                     margin-top: 10px;
                     margin-bottom: 5px;
+                    border: none;
                 }
-                .evidence-button:hover {
+                .evidence-button:hover, .retry-button:hover {
                     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                     transform: translateY(-2px);
                 }
+                .retry-button {
+                    background: #666 !important;
+                    color: white !important;
+                }
             </style>
         </div>
     </div>
 </div>
 
 <script>
+// We need to load PDF.js dynamically
+let pdfViewerInitialized = false;
+let pdfUrl = null;
+
 // Function to find PDF URL from various Gradio components
 function findPdfUrl() {
-    // Display loading indicator
-    document.getElementById('pdf-loading').style.display = 'flex';
-    
     // Method 1: Try to find the PDF URL from file components
     const fileComponents = document.querySelectorAll(".file-component");
     for (const comp of fileComponents) {
@@ -820,7 +833,6 @@ function findPdfUrl() {
         if (downloadBtn && downloadBtn.href && 
             (downloadBtn.href.includes("Hate Speech Policy.pdf") || 
              downloadBtn.href.includes("Hate%20Speech%20Policy.pdf"))) {
-            document.getElementById('pdf-loading').style.display = 'none';
             return downloadBtn.href;
         }
     }
@@ -832,19 +844,21 @@ function findPdfUrl() {
             (link.href.includes("Hate Speech Policy.pdf") || 
              link.href.includes("Hate%20Speech%20Policy.pdf") ||
              (link.href.includes("file=") && link.download))) {
-            document.getElementById('pdf-loading').style.display = 'none';
             return link.href;
         }
     }
     
-    // Method 3: Check for file elements with specific selectors
-    const fileElements = document.querySelectorAll("[class*='file'], [id*='file']");
-    for (const elem of fileElements) {
-        const links = elem.querySelectorAll("a");
-        for (const link of links) {
-            if (link.href && (link.href.includes("file=") || link.download)) {
-                document.getElementById('pdf-loading').style.display = 'none';
-                return link.href;
+    // Method 3: Look for file inputs or elements
+    const fileInputs = document.querySelectorAll("input[type='file']");
+    for (const input of fileInputs) {
+        if (input.value && input.value.includes("Hate Speech Policy.pdf")) {
+            // This means we found the file input, but need to find its download URL
+            const parentContainer = input.closest("div[class*='component']");
+            if (parentContainer) {
+                const downloadLinks = parentContainer.querySelectorAll("a[download]");
+                if (downloadLinks.length > 0) {
+                    return downloadLinks[0].href;
+                }
             }
         }
     }
@@ -857,42 +871,125 @@ function findPdfUrl() {
         "file/Hate%20Speech%20Policy.pdf"
     ];
     
-    // Method 5: If not found, hide loading and use a fallback message
-    document.getElementById('pdf-loading').style.display = 'none';
-    console.log("PDF URL not found - using fallback path");
-    
     // Return a default path that might work
     return paths[0];
 }
 
+// Load PDF.js library
+function loadPdfJsLibrary() {
+    if (typeof pdfjsLib !== 'undefined') {
+        return Promise.resolve(); // Already loaded
+    }
+    
+    return new Promise((resolve, reject) => {
+        // Load PDF.js from CDN
+        const pdfJsScript = document.createElement('script');
+        pdfJsScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js';
+        pdfJsScript.onload = resolve;
+        pdfJsScript.onerror = reject;
+        document.head.appendChild(pdfJsScript);
+    });
+}
+
+// Display the PDF using PDF.js viewer
+function displayPdfUsingViewer(pdfUrl) {
+    // Get the iframe element
+    const viewerIframe = document.getElementById('pdf-js-viewer');
+    
+    // Mozilla's PDF.js viewer URL
+    const viewerUrl = 'https://mozilla.github.io/pdf.js/web/viewer.html';
+    
+    // Set the iframe source to the PDF.js viewer with our PDF URL as a parameter
+    viewerIframe.src = `${viewerUrl}?file=${encodeURIComponent(pdfUrl)}`;
+    
+    // Hide loading indicator once iframe has loaded
+    viewerIframe.onload = function() {
+        document.getElementById('pdf-loading').style.display = 'none';
+        document.getElementById('pdf-viewer').style.display = 'flex';
+    };
+    
+    // Show fallback if viewer fails to load after a timeout
+    setTimeout(function() {
+        if (document.getElementById('pdf-loading').style.display === 'flex') {
+            showFallback();
+        }
+    }, 8000); // 8 second timeout
+}
+
+// Show fallback download option
+function showFallback() {
+    document.getElementById('pdf-loading').style.display = 'none';
+    document.getElementById('pdf-viewer').style.display = 'none';
+    document.getElementById('pdf-fallback').style.display = 'flex';
+    
+    // Set download link
+    const downloadLink = document.getElementById('policy-download-link');
+    if (downloadLink && pdfUrl) {
+        downloadLink.href = pdfUrl;
+    }
+}
+
+// Function to retry loading the PDF
+function retryPdfLoad() {
+    // Show loading, hide fallback
+    document.getElementById('pdf-loading').style.display = 'flex';
+    document.getElementById('pdf-fallback').style.display = 'none';
+    
+    // Find the URL again (in case it changed)
+    pdfUrl = findPdfUrl();
+    
+    // Try displaying the PDF
+    displayPdfUsingViewer(pdfUrl);
+}
+
 // Function to open the policy popup
 function openPolicyPopup() {
     // Display the popup
     document.getElementById('policy-popup').style.display = 'flex';
     
-    // Find the PDF URL
-    const pdfUrl = findPdfUrl();
+    // Show loading indicator
+    document.getElementById('pdf-loading').style.display = 'flex';
+    document.getElementById('pdf-viewer').style.display = 'none';
+    document.getElementById('pdf-fallback').style.display = 'none';
     
-    // Set the download link
-    const downloadLink = document.getElementById('policy-download-link');
-    if (downloadLink) {
-        downloadLink.href = pdfUrl;
+    // If we've already found the PDF URL
+    if (pdfUrl) {
+        displayPdfUsingViewer(pdfUrl);
+    } else {
+        // Find the PDF URL
+        pdfUrl = findPdfUrl();
+        
+        // Set the download link for fallback
+        const downloadLink = document.getElementById('policy-download-link');
+        if (downloadLink) {
+            downloadLink.href = pdfUrl;
+        }
+        
+        // Initialize PDF.js and display the PDF
+        loadPdfJsLibrary()
+            .then(() => {
+                displayPdfUsingViewer(pdfUrl);
+            })
+            .catch(error => {
+                console.error('Error loading PDF.js:', error);
+                showFallback();
+            });
     }
 }
 
 // Make functions globally available
 window.openPolicyPopup = openPolicyPopup;
+window.retryPdfLoad = retryPdfLoad;
 
 // Initialize when the document is loaded
 document.addEventListener('DOMContentLoaded', function() {
     // Find the PDF URL in advance
-    const pdfUrl = findPdfUrl();
+    pdfUrl = findPdfUrl();
     
-    // Set the download link
-    const downloadLink = document.getElementById('policy-download-link');
-    if (downloadLink) {
-        downloadLink.href = pdfUrl;
-    }
+    // Load PDF.js in advance
+    loadPdfJsLibrary().catch(err => {
+        console.warn('PDF.js preload failed:', err);
+    });
 });
 </script>
 """