Upload folder using huggingface_hub

hate_speech_demo.py

@@ -14,7 +14,6 @@ import json
 # Load environment variables (for local development)
 load_dotenv()
 
-
 # Process retrieval text to highlight relevant parts - IMPROVED FORMATTING
 def process_retrieval_text(retrieval_text, user_input):
     """
@@ -743,159 +742,164 @@ 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=False, 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
-
         policy_popup_html = """
-<div id="policy-popup" class="policy-popup">
-    <div class="policy-popup-content">
-        <div class="policy-popup-header">
-            <div class="policy-popup-title">Hate Speech Policy</div>
-            <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%;">
-                <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>
-                <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.
-                </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>
-            </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 id="policy-popup" class="policy-popup">
+            <div class="policy-popup-content">
+                <div class="policy-popup-header">
+                    <div class="policy-popup-title">Hate Speech Policy</div>
+                    <button class="policy-popup-close" onclick="document.getElementById('policy-popup').style.display='none';">Close</button>
+                </div>
+                <div class="policy-iframe-container">
+                    <!-- PDF viewer iframe -->
+                    <iframe class="policy-iframe" id="policy-iframe"></iframe>
+                    
+                    <!-- Loading indicator while PDF loads -->
+                    <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 policy document...</p>
+                        </div>
+                    </div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                    
+                    <!-- Fallback content if iframe fails -->
+                    <div class="policy-fallback" id="policy-fallback" style="display:none;">
+                        <p>The policy document couldn't be displayed in the preview.</p>
+                        <a href="#" id="policy-download-link" target="_blank">Download Policy PDF</a>
+                        <button onclick="retryPdfLoad()" style="display: block; margin-top: 15px; padding: 8px 15px; background: #FCA539; border: none; border-radius: 4px; cursor: pointer;">Try Again</button>
+                    </div>
                 </div>
             </div>
-            <style>
-                @keyframes spin {
-                    0% { transform: rotate(0deg); }
-                    100% { transform: rotate(360deg); }
-                }
-                .evidence-button {
-                    background: #FCA539 !important;
-                    color: #000000 !important;
-                    font-weight: bold;
-                    border-radius: 5px;
-                    padding: 10px 15px;
-                    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-                    transition: all 0.3s ease;
-                    font-family: 'All Round Gothic Demi', 'Poppins', sans-serif !important;
-                    cursor: pointer;
-                    display: inline-block;
-                    text-decoration: none !important;
-                    margin-top: 10px;
-                    margin-bottom: 5px;
+        </div>
+        
+        <script>
+        // Store the PDF URL globally once found
+        let pdfPolicyUrl = null;
+        let pdfLoadAttempted = false;
+        
+        // Find the PDF URL as soon as possible
+        document.addEventListener('DOMContentLoaded', function() {
+            findPdfUrl();
+        });
+        
+        // Function to find the PDF URL in various locations
+        function findPdfUrl() {
+            // Try to find the file component
+            const fileComponents = document.querySelectorAll("div.file-component");
+            for (const comp of fileComponents) {
+                const downloadBtn = comp.querySelector("a[download]");
+                if (downloadBtn && downloadBtn.href && downloadBtn.href.includes("file=")) {
+                    pdfPolicyUrl = downloadBtn.href;
+                    console.log("Found PDF URL:", pdfPolicyUrl);
+                    return pdfPolicyUrl;
                 }
-                .evidence-button:hover {
-                    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-                    transform: translateY(-2px);
+            }
+            
+            // Try to find any link with the PDF name
+            const allLinks = document.querySelectorAll("a");
+            for (const link of allLinks) {
+                if (link.href && (link.href.includes("Hate%20Speech%20Policy.pdf") || 
+                                  link.href.includes("file=") && link.textContent.includes("Download"))) {
+                    pdfPolicyUrl = link.href;
+                    console.log("Found PDF URL from links:", pdfPolicyUrl);
+                    return pdfPolicyUrl;
                 }
-            </style>
-        </div>
-    </div>
-</div>
-
-<script>
-// 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) {
-        const downloadBtn = comp.querySelector("a[download]");
-        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;
+            }
+            
+            // If we didn't find it, try again in a second
+            setTimeout(findPdfUrl, 1000);
+            return null;
         }
-    }
-    
-    // Method 2: Try to find the URL from any element that might contain it
-    const allLinks = document.querySelectorAll("a");
-    for (const link of allLinks) {
-        if (link.href && 
-            (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;
+        
+        // Function to actually load the PDF
+        function loadPolicyPdf(url) {
+            const iframe = document.getElementById("policy-iframe");
+            const loadingIndicator = document.getElementById("pdf-loading");
+            const fallback = document.getElementById("policy-fallback");
+            const downloadLink = document.getElementById("policy-download-link");
+            
+            // Show loading, hide fallback
+            loadingIndicator.style.display = "flex";
+            fallback.style.display = "none";
+            iframe.style.display = "block";
+            
+            // Set the download link
+            downloadLink.href = url;
+            
+            // Set iframe source to PDF
+            iframe.src = url;
+            
+            // Set a timeout to hide loading regardless of outcome
+            setTimeout(function() {
+                loadingIndicator.style.display = "none";
+            }, 3000);
+            
+            // When iframe loads, hide loading indicator
+            iframe.onload = function() {
+                loadingIndicator.style.display = "none";
+                pdfLoadAttempted = true;
+            };
+            
+            // Handle errors
+            iframe.onerror = function() {
+                loadingIndicator.style.display = "none";
+                fallback.style.display = "block";
+                iframe.style.display = "none";
+                pdfLoadAttempted = true;
+            };
         }
-    }
-    
-    // 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;
+        
+        // Function to retry loading the PDF
+        function retryPdfLoad() {
+            if (pdfPolicyUrl) {
+                loadPolicyPdf(pdfPolicyUrl);
+            } else {
+                // Try to find the URL first
+                const url = findPdfUrl();
+                if (url) {
+                    loadPolicyPdf(url);
+                }
             }
         }
-    }
-    
-    // Method 4: Try hardcoded file paths
-    const paths = [
-        "/file=Hate%20Speech%20Policy.pdf",
-        "/file/Hate%20Speech%20Policy.pdf", 
-        "file=Hate%20Speech%20Policy.pdf",
-        "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];
-}
-
-// 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();
-    
-    // Set the download link
-    const downloadLink = document.getElementById('policy-download-link');
-    if (downloadLink) {
-        downloadLink.href = pdfUrl;
-    }
-}
-
-// Make functions globally available
-window.openPolicyPopup = openPolicyPopup;
-
-// Initialize when the document is loaded
-document.addEventListener('DOMContentLoaded', function() {
-    // Find the PDF URL in advance
-    const pdfUrl = findPdfUrl();
-    
-    // Set the download link
-    const downloadLink = document.getElementById('policy-download-link');
-    if (downloadLink) {
-        downloadLink.href = pdfUrl;
-    }
-});
-</script>
-"""
+        
+        // Function to handle opening the policy popup
+        function openPolicyPopup() {
+            // Display the popup immediately
+            document.getElementById('policy-popup').style.display = 'flex';
+            
+            // If we've never tried to load the PDF, or it failed previously, try loading it
+            if (!pdfLoadAttempted) {
+                if (pdfPolicyUrl) {
+                    // We already have the URL, load the PDF
+                    loadPolicyPdf(pdfPolicyUrl);
+                } else {
+                    // Try to find the URL first
+                    const url = findPdfUrl();
+                    if (url) {
+                        loadPolicyPdf(url);
+                    } else {
+                        // Show fallback if we can't find the URL
+                        document.getElementById("pdf-loading").style.display = "none";
+                        document.getElementById("policy-iframe").style.display = "none";
+                        document.getElementById("policy-fallback").style.display = "block";
+                    }
+                }
+            }
+        }
+        
+        // Make functions globally available
+        window.openPolicyPopup = openPolicyPopup;
+        window.retryPdfLoad = retryPdfLoad;
+        </script>
+        """
         
         gr.HTML(policy_popup_html)