Upload folder using huggingface_hub

hate_speech_demo.py

@@ -10,6 +10,7 @@ from dotenv import load_dotenv
 from together import Together
 import openai
 import json
+from pathlib import Path
 
 # Load environment variables (for local development)
 load_dotenv()
@@ -741,92 +742,86 @@ def create_gradio_app():
         # Add loading spinner
         loading_spinner = gr.HTML('<div id="loading-spinner"></div>')
         
-        # Create a file component to serve the PDF - make this visible and position it where needed
-        with gr.Row(visible=False) as pdf_container:
-            pdf_file = gr.File("Hate Speech Policy.pdf", label="Hate Speech Policy Document", elem_id="policy-pdf-file")
+        pdf_path = Path("Hate Speech Policy.pdf")
+        if pdf_path.exists():
+                pdf_file = gr.File(pdf_path, visible=False, label="Policy PDF")
+        else:
+            # Fallback if PDF doesn't exist
+                pdf_file = gr.File(None, visible=False, label="Policy PDF")
         
-        # Add a simplified policy popup
+        # Add policy popup HTML with reliable PDF loading that works on first click
         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-content">
-                    <p>To view or download the Hate Speech Policy document, please use the button below:</p>
-                    <button id="show-policy-btn" class="evidence-button" style="margin: 20px auto; display: block;" 
-                            onclick="showPolicyDocument(); return false;">
-                        Show Policy Document
-                    </button>
-                    <div id="policy-container" style="display:none; margin-top: 20px;"></div>
+            <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 with PDF.js as fallback -->
+                        <iframe class="policy-iframe" id="policy-iframe" 
+                                src="https://docs.google.com/viewer?url=${pdf_url}&embedded=true"
+                                style="width:100%; height:100%; border:none;"></iframe>
+                        
+                        <!-- Loading indicator -->
+                        <div id="pdf-loading" style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                            <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>
+                        
+                        <!-- Fallback content -->
+                        <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>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <script>
-        function showPolicyDocument() {
-            // Hide the button
-            document.getElementById('show-policy-btn').style.display = 'none';
-            
-            // Show the policy container
-            const policyContainer = document.getElementById('policy-container');
-            policyContainer.style.display = 'block';
-            
-            // Find the file component and click its download button
-            // First try to unhide the container if it's hidden
-            const pdfContainer = document.querySelector('[id$="pdf-container"]');
-            if (pdfContainer) {
-                pdfContainer.style.display = 'block';
-            }
-            
-            // Option 1: Try to move the whole PDF component into our container
-            const fileComponent = document.getElementById('policy-pdf-file');
-            if (fileComponent) {
-                policyContainer.appendChild(fileComponent);
-                return;
-            }
-            
-            // Option 2: If we can't find the component by ID, look for it by class
-            const allFileComponents = document.querySelectorAll('.gradio-file');
-            for (const comp of allFileComponents) {
-                const fileLabel = comp.querySelector('label');
-                if (fileLabel && fileLabel.textContent.includes('Hate Speech Policy')) {
-                    policyContainer.appendChild(comp);
-                    return;
+            <script>
+            // Function to open the policy popup
+            function openPolicyPopup() {
+                const popup = document.getElementById('policy-popup');
+                popup.style.display = 'flex';
+                
+                // Find the PDF URL from Gradio's file component
+                const fileComponents = document.querySelectorAll("div.file-component");
+                let pdfUrl = null;
+                
+                for (const comp of fileComponents) {
+                    const downloadBtn = comp.querySelector("a[download]");
+                    if (downloadBtn && downloadBtn.href) {
+                        pdfUrl = downloadBtn.href;
+                        break;
+                    }
                 }
-            }
-            
-            // Option 3: Fallback - if we can't find the component, show a download link
-            const downloadLinks = document.querySelectorAll('a[download]');
-            for (const link of downloadLinks) {
-                if (link.href && link.href.includes('Hate%20Speech%20Policy.pdf')) {
-                    policyContainer.innerHTML = `
-                        <div style="text-align:center; padding: 20px; background: #f9f9f9; border-radius: 8px;">
-                            <p>Click the button below to download the policy document:</p>
-                            <a href="${link.href}" class="evidence-button" download="Hate Speech Policy.pdf" 
-                            style="margin: 10px auto; display: inline-block; text-decoration: none;">
-                                Download Policy PDF
-                            </a>
-                        </div>
-                    `;
-                    return;
+                
+                if (pdfUrl) {
+                    // Encode the URL for Google Viewer
+                    const encodedUrl = encodeURIComponent(pdfUrl);
+                    const iframe = document.getElementById('policy-iframe');
+                    iframe.src = `https://docs.google.com/viewer?url=${encodedUrl}&embedded=true`;
+                    
+                    // Set up the download link
+                    document.getElementById('policy-download-link').href = pdfUrl;
+                    
+                    // Hide loading after some time (or when loaded)
+                    setTimeout(() => {
+                        document.getElementById('pdf-loading').style.display = 'none';
+                    }, 3000);
+                } else {
+                    // Show fallback if no PDF found
+                    document.getElementById('pdf-loading').style.display = 'none';
+                    document.getElementById('policy-fallback').style.display = 'block';
+                    document.getElementById('policy-iframe').style.display = 'none';
                 }
             }
-            
-            // Final fallback - if nothing else works
-            policyContainer.innerHTML = `
-                <div style="text-align:center; padding: 20px; background: #f9f9f9; border-radius: 8px;">
-                    <p>The policy document couldn't be displayed automatically.</p>
-                    <p>Please check the main interface for a file named "Hate Speech Policy.pdf".</p>
-                </div>
-            `;
-        }
-        
-        // Make function globally available
-        window.showPolicyDocument = showPolicyDocument;
-        </script>
-        """
+            </script>
+            """
         
         gr.HTML(policy_popup_html)