Upload folder using huggingface_hub

hate_speech_demo.py

@@ -15,7 +15,27 @@ from pathlib import Path
 # Load environment variables (for local development)
 load_dotenv()
 
-# Process retrieval text to highlight relevant parts - IMPROVED FORMATTING
+# Google Drive Embed URL for PDF
+PDF_EMBED_URL = "https://drive.google.com/file/d/1WZCQpIWfelbxgBr8dNiW2rqVGaDyf-Gi/preview"
+
+# Custom PDF Viewer Modal (injected HTML)
+PDF_MODAL_HTML = f"""
+<div id='policy-popup' class='pdf-modal' style='display:none;'>
+  <div class='pdf-modal-content'>
+    <button class='close-btn' onclick="document.getElementById('policy-popup').style.display='none'; document.body.style.overflow='auto';">×</button>
+    <div class='pdf-container'>
+      <iframe class='pdf-embed' src='{PDF_EMBED_URL}' allow="autoplay"></iframe>
+    </div>
+  </div>
+</div>
+<script>
+function openPolicyPopup() {{
+  document.getElementById('policy-popup').style.display = 'flex';
+  document.body.style.overflow = 'hidden';
+}}
+</script>
+"""
+
 def process_retrieval_text(retrieval_text, user_input):
     """
     Process the retrieval text by identifying proper document boundaries
@@ -389,6 +409,55 @@ h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, label {
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
     transform: translateY(-2px);
 }
+
+/* PDF Modal Styling */
+.pdf-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.7);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.pdf-modal-content {
+    background-color: white;
+    width: 80%;
+    height: 80%;
+    border-radius: 8px;
+    padding: 20px;
+    position: relative;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+}
+
+.close-btn {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    background: #222;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 5px 15px;
+}
+
+.pdf-container {
+    width: 100%;
+    height: calc(100% - 40px);
+    margin-top: 40px;
+}
+
+.pdf-embed {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #eee;
+}
 """
 
 # Contextual API class - UPDATED WITH NEW MODEL ID
@@ -517,7 +586,6 @@ def get_openai_moderation(openai_client, user_input):
         return f"Safety Status: Error\nError: {str(e)}", "unsafe"
     
 # Perspective API
-    
 def get_perspective_rating(api_key, user_input):
     url = 'https://commentanalyzer.googleapis.com/v1alpha1/comments:analyze'
     params = {'key': api_key}
@@ -553,7 +621,6 @@ def get_perspective_rating(api_key, user_input):
     except Exception as e:
         return f"Safety Status: Error\nError: {str(e)}", "unsafe"
         
-
 # Updated to only require one input
 def rate_user_input(user_input):
     # Initialize APIs with hardcoded keys
@@ -567,7 +634,6 @@ def rate_user_input(user_input):
     openai_rating, openai_safety = get_openai_moderation(openai_client, user_input)
     perspective_rating, perspective_safety = get_perspective_rating(PERSPECTIVE_API_KEY, user_input)
     
-    
     # Format responses carefully to avoid random line breaks
     llama_rating = re.sub(r'\.(?=\s+[A-Z])', '.\n', llama_rating)
     # Don't add line breaks to contextual rating
@@ -652,180 +718,15 @@ def create_gradio_app():
         border_color_primary="#E0E0E0"
     )
     
-    # Add CSS for the policy popup and custom button color
-    custom_css = CUSTOM_CSS + """
-    /* Policy preview popup styles */
-    .policy-popup {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.7);
-        z-index: 1000;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .policy-popup-content {
-        background-color: white;
-        width: 80%;
-        height: 80%;
-        border-radius: 8px;
-        padding: 20px;
-        position: relative;
-        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .policy-popup-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 15px;
-        border-bottom: 1px solid #eee;
-        padding-bottom: 10px;
-    }
-    
-    .policy-popup-title {
-        font-weight: bold;
-        font-size: 18px;
-    }
-    
-    .policy-popup-close {
-        background-color: #222222;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        padding: 5px 10px;
-        cursor: pointer;
-    }
-    
-    .policy-popup-close:hover {
-        background-color: #000000;
-    }
-    
-    .policy-iframe-container {
-        flex: 1;
-        overflow: hidden;
-    }
-    
-    .policy-iframe {
-        width: 100%;
-        height: 100%;
-        border: 1px solid #eee;
-    }
-    
-    /* Fallback for when PDF can't be displayed in iframe */
-    .policy-fallback {
-        padding: 20px;
-        text-align: center;
-    }
-    
-    .policy-fallback a {
-        display: inline-block;
-        margin-top: 15px;
-        padding: 10px 15px;
-        background-color: #FCA539;
-        color: #000000;
-        text-decoration: none;
-        border-radius: 4px;
-        font-weight: bold;
-    }
-    
-
-    """
+    # Use the custom CSS with PDF modal styling
+    custom_css = CUSTOM_CSS
     
     with gr.Blocks(title="Hate Speech Rating Oracle", theme=theme, css=custom_css) as app:
         # Add loading spinner
         loading_spinner = gr.HTML('<div id="loading-spinner"></div>')
         
-        # Replace the PDF file component code with this:
-    try:
-        # Convert Path object to string explicitly
-        pdf_file = gr.File(str("Hate Speech Policy.pdf"), visible=False, label="Policy PDF")
-    except Exception as e:
-        print(f"Error creating PDF file component: {e}")
-        # Fallback if PDF doesn't exist or other error occurs
-        pdf_file = gr.File(None, visible=False, label="Policy PDF")
-        
-        # 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-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>
-
-            <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;
-                    }
-                }
-                
-                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';
-                }
-            }
-            </script>
-            """
-        
-        gr.HTML(policy_popup_html)
+        # Add the PDF modal HTML directly (defined at the top of the file)
+        gr.HTML(PDF_MODAL_HTML)
 
         gr.Markdown("# Safety Oracle for Rating Hate Speech [BETA]")
         gr.HTML("""
@@ -874,10 +775,10 @@ def create_gradio_app():
                 rate_btn = gr.Button("Rate Content", elem_classes=["gray-button"], scale=1)
 
             user_input = gr.Textbox(
-    placeholder="Type content to evaluate here...",
-    lines=6,
-    label=""
-)
+                placeholder="Type content to evaluate here...",
+                lines=6,
+                label=""
+            )
 
             # 🌟 Contextual Safety Oracle
             gr.HTML("""
@@ -949,18 +850,18 @@ def create_gradio_app():
         
         # Bind rating button with loading indicator
         rate_btn.click(
-    show_loading,
-    inputs=None,
-    outputs=loading_spinner
-).then(
-    rate_user_input,
-    inputs=[user_input],
-    outputs=[contextual_results, llama_results, openai_results, perspective_results]
-).then(
-    hide_loading,
-    inputs=None,
-    outputs=loading_spinner
-)
+            show_loading,
+            inputs=None,
+            outputs=loading_spinner
+        ).then(
+            rate_user_input,
+            inputs=[user_input],
+            outputs=[contextual_results, llama_results, openai_results, perspective_results]
+        ).then(
+            hide_loading,
+            inputs=None,
+            outputs=loading_spinner
+        )
     
     return app