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="Hate Speech Policy Document")
+        pdf_file = gr.File("Hate Speech Policy.pdf", visible=True, label="Policy PDF")
         
         # Add policy popup HTML with reliable PDF loading that works on first click
         # Replace the problematic policy_popup_html with this fixed version
@@ -756,41 +756,34 @@ 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">
-            <!-- 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%;">
+            <!-- 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%;">
                 <img src="https://img.icons8.com/color/96/000000/pdf.png" style="width: 96px; height: 96px; margin-bottom: 20px;">
-                <h3>PDF Viewer Unavailable</h3>
+                <h3>Hate Speech Policy Document</h3>
                 <p style="text-align: center; max-width: 80%; margin: 15px auto;">
-                    We couldn't display the PDF directly. Please download it using the button below.
+                    The policy document is available for download. Click the button below to view or download it.
                 </p>
                 <a id="policy-download-link" href="#" class="evidence-button" target="_blank" style="margin-top: 20px;">
                     Download Policy PDF
                 </a>
-                <button onclick="retryPdfLoad()" class="retry-button" style="margin-top: 15px;">
-                    Try Again
-                </button>
+                <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>
             </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, .retry-button {
+                .evidence-button {
                     background: #FCA539 !important;
                     color: #000000 !important;
                     font-weight: bold;
@@ -804,28 +797,22 @@ def create_gradio_app():
                     text-decoration: none !important;
                     margin-top: 10px;
                     margin-bottom: 5px;
-                    border: none;
                 }
-                .evidence-button:hover, .retry-button:hover {
+                .evidence-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) {
@@ -833,6 +820,7 @@ 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;
         }
     }
@@ -844,21 +832,19 @@ 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: 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;
-                }
+    // 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;
             }
         }
     }
@@ -871,75 +857,12 @@ function findPdfUrl() {
         "file/Hate%20Speech%20Policy.pdf"
     ];
     
-    // 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() {
+    // Method 5: If not found, hide loading and use a fallback message
     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';
+    console.log("PDF URL not found - using fallback path");
     
-    // Find the URL again (in case it changed)
-    pdfUrl = findPdfUrl();
-    
-    // Try displaying the PDF
-    displayPdfUsingViewer(pdfUrl);
+    // Return a default path that might work
+    return paths[0];
 }
 
 // Function to open the policy popup
@@ -947,49 +870,29 @@ function openPolicyPopup() {
     // Display the popup
     document.getElementById('policy-popup').style.display = 'flex';
     
-    // Show loading indicator
-    document.getElementById('pdf-loading').style.display = 'flex';
-    document.getElementById('pdf-viewer').style.display = 'none';
-    document.getElementById('pdf-fallback').style.display = 'none';
+    // Find the PDF URL
+    const pdfUrl = findPdfUrl();
     
-    // 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();
-            });
+    // Set the download link
+    const downloadLink = document.getElementById('policy-download-link');
+    if (downloadLink) {
+        downloadLink.href = pdfUrl;
     }
 }
 
 // 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
-    pdfUrl = findPdfUrl();
+    const pdfUrl = findPdfUrl();
     
-    // Load PDF.js in advance
-    loadPdfJsLibrary().catch(err => {
-        console.warn('PDF.js preload failed:', err);
-    });
+    // Set the download link
+    const downloadLink = document.getElementById('policy-download-link');
+    if (downloadLink) {
+        downloadLink.href = pdfUrl;
+    }
 });
 </script>
 """