Upload folder using huggingface_hub

hate_speech_demo.py

@@ -318,36 +318,6 @@ textarea.svelte-1pie7s6 {
 h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, label {
     font-family: 'All Round Gothic Demi', 'Poppins', sans-serif !important;
 }
-
-/* Make safety warning text red */
-.safety-warning-red {
-    color: #F44336 !important;
-    font-weight: bold;
-}
-
-/* Make knowledge button match orange button style */
-.knowledge-button.orange-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;
-    display: inline-block;
-    text-decoration: none;
-}
-
-.knowledge-button.orange-button:hover {
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-    transform: translateY(-2px);
-}
-
-/* Make the third column of models narrower to fit 3 on one row */
-.model-column {
-    max-width: 33% !important;
-    flex: 1 !important;
-}
 """
 
 # Contextual API class - UPDATED WITH NEW MODEL ID
@@ -471,57 +441,6 @@ def get_openai_moderation(openai_client, user_input):
         return formatted_result, safety_level
     except Exception as e:
         return f"Safety Status: Error\nError: {str(e)}", "unsafe"
-    
-def get_perspective_rating(user_input):
-    url = 'https://commentanalyzer.googleapis.com/v1alpha1/comments:analyze'
-    api_key = PERSPECTIVE_API_KEY
-    
-    params = {'key': api_key}
-    data = {
-        'comment': {'text': user_input},
-        'requestedAttributes': {
-            'TOXICITY': {},
-            'SEVERE_TOXICITY': {},
-            'IDENTITY_ATTACK': {},
-            'INSULT': {},
-            'PROFANITY': {},
-            'THREAT': {},
-            'SEXUALLY_EXPLICIT': {}
-        }
-    }
-    
-    try:
-        start_time = time.time()
-        response = requests.post(url, params=params, json=data)
-        end_time = time.time()
-        
-        response_json = response.json()
-        attribute_scores = response_json.get('attributeScores', {})
-        
-        # Collect attributes with scores above 0.5
-        high_attributes = {}
-        for attr, data in attribute_scores.items():
-            score = data.get('summaryScore', {}).get('value', 0)
-            if score >= 0.5:
-                high_attributes[attr] = score
-        
-        # Determine safety level
-        safety_level = "safe"
-        if high_attributes:
-            safety_level = "unsafe"
-        
-        # Format the output
-        formatted_result = f"Safety Status: {'Unsafe' if high_attributes else 'Safe'}\n"
-        if high_attributes:
-            formatted_result += "Flagged Categories (≥ 0.5):\n"
-            for attr, score in high_attributes.items():
-                formatted_result += f"  - {attr}: {score:.2f}\n"
-        else:
-            formatted_result += "Flagged Categories: None\n"
-            
-        return formatted_result, safety_level
-    except Exception as e:
-        return f"Safety Status: Error\nError: {str(e)}", "unsafe"
         
 
 # Updated to only require one input
@@ -535,7 +454,6 @@ def rate_user_input(user_input):
     llama_rating, llama_safety = get_llama_guard_rating(together_client, user_input)
     contextual_rating, contextual_retrieval, contextual_safety = get_contextual_rating(contextual_api, user_input)
     openai_rating, openai_safety = get_openai_moderation(openai_client, user_input)
-    perspective_rating, perspective_safety = get_perspective_rating(user_input)
     
     # Format responses carefully to avoid random line breaks
     llama_rating = re.sub(r'\.(?=\s+[A-Z])', '.\n', llama_rating)
@@ -547,7 +465,6 @@ def rate_user_input(user_input):
     # Format results with HTML styling
     llama_html = f"""<div class="rating-box secondary-box {llama_safety}-rating">{llama_rating}</div>"""
     openai_html = f"""<div class="rating-box secondary-box {openai_safety}-rating">{openai_rating}</div>"""
-    perspective_html = f"""<div class="rating-box secondary-box {perspective_safety}-rating">{perspective_rating}</div>"""
     
     # Create the knowledge section (initially hidden) and button
     knowledge_html = ""
@@ -574,10 +491,10 @@ def rate_user_input(user_input):
         </div>
         """
         
-        # Create a toggle button (positioned BELOW the contextual results) - Updated to match orange button styling
+        # Create a toggle button (positioned BELOW the contextual results)
         knowledge_button = f"""
         <div style="margin-top: 10px; margin-bottom: 5px;">
-            <a href="#" id="btn-{popup_id}" class="knowledge-button orange-button" 
+            <a href="#" id="btn-{popup_id}" class="knowledge-button" 
                onclick="document.getElementById('{popup_id}').style.display='block'; this.style.display='none'; return false;">
                Show supporting evidence
             </a>
@@ -594,7 +511,7 @@ def rate_user_input(user_input):
     {knowledge_html}
     """
     
-    return contextual_html, llama_html, openai_html, perspective_html, ""
+    return contextual_html, llama_html, openai_html, ""
 
 def random_test_case():
     try:
@@ -622,13 +539,252 @@ def create_gradio_app():
         border_color_primary="#E0E0E0"
     )
     
-    with gr.Blocks(title="Hate Speech Rating Oracle", theme=theme, css=CUSTOM_CSS) as app:
+    # 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;
+    }
+    
+    /* Custom gray button style */
+    .gray-button {
+        background-color: #c4c4c3 !important;
+        color: #000000 !important;
+    }
+    """
+    
+    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>')
         
-        # Rest of your UI definition code...
+        # Create a file component to serve the PDF (hidden from UI)
+        pdf_file = gr.File("Hate Speech Policy.pdf", visible=False, label="Policy PDF")
+        
+        # Add policy popup HTML with improved PDF handling
+        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">
+                    <!-- Primary method: Try Google PDF Viewer -->
+                    <iframe class="policy-iframe" id="policy-iframe"></iframe>
+                    
+                    <!-- 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>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <script>
+        // Function to handle opening the policy popup
+        function openPolicyPopup() {
+            // Set PDF URL - this approach is more reliable with Gradio
+            const pdfFileName = "Hate Speech Policy.pdf";
+            
+            // Try multiple approaches to display the PDF
+            // 1. Google PDF viewer (works in most cases)
+            const googleViewerUrl = "https://docs.google.com/viewer?embedded=true&url=";
+            
+            // 2. Direct link as fallback
+            let directPdfUrl = "";
+            
+            // Find the PDF link by looking for file links in the DOM
+            const links = document.querySelectorAll("a");
+            for (const link of links) {
+                if (link.href && link.href.includes(encodeURIComponent(pdfFileName))) {
+                    directPdfUrl = link.href;
+                    break;
+                }
+            }
+            
+            // Set the iframe source if we found a link
+            const iframe = document.getElementById("policy-iframe");
+            const fallback = document.getElementById("policy-fallback");
+            const downloadLink = document.getElementById("policy-download-link");
+            
+            if (directPdfUrl) {
+                // Try Google Viewer first
+                iframe.src = googleViewerUrl + encodeURIComponent(directPdfUrl);
+                iframe.style.display = "block";
+                fallback.style.display = "none";
+                
+                // Set the download link
+                downloadLink.href = directPdfUrl;
+                
+                // Provide fallback in case Google Viewer fails
+                iframe.onerror = function() {
+                    iframe.style.display = "none";
+                    fallback.style.display = "block";
+                };
+            } else {
+                // No direct URL found, show fallback
+                iframe.style.display = "none";
+                fallback.style.display = "block";
+                downloadLink.href = "#";
+                downloadLink.textContent = "PDF not available";
+            }
+            
+            // Display the popup
+            document.getElementById('policy-popup').style.display = 'flex';
+        }
+        </script>
+        """
+        
+        gr.HTML(policy_popup_html)
+        
+        gr.Markdown("# Hate Speech Rating Oracle [BETA]")
+        gr.Markdown(
+    "Assess whether user-generated social content contains hate speech using Contextual AI's State-of-the-Art Agentic RAG system. Classifications are steerable and explainable as they are based on a policy document rather than parametric knowledge! This app also returns ratings from LlamaGuard 3.0 and the OpenAI Moderation API for you to compare. This is a demo from Contextual AI researchers. Feedback is welcome as we work with design partners to bring this to production.  \n"
+    "## Instructions \n" 
+    "Enter user-generated content to receive an assessment from all three models. Or use our random test case generator to have it pre-filled.  \n"
+    "## How it works\n" 
+    "* **Document-Grounded Evaluations**: Every rating is directly tied to our <a href='#' onclick='openPolicyPopup(); return false;'>hate speech policy document</a>, which makes our system far superior to other solutions that lack transparent decision criteria.\n"
+    "* **Adaptable Policies**: The policy document serves as a starting point and can be easily adjusted to meet your specific requirements. As policies evolve, the system immediately adapts without requiring retraining.\n"
+    "* **Clear Rationales**: Each evaluation includes a detailed explanation referencing specific policy sections, allowing users to understand exactly why content was flagged or approved.\n"
+    "* **Continuous Improvement**: The system learns from feedback, addressing any misclassifications by improving retrieval accuracy over time.\n\n"
+    "Our approach combines Contextual's state-of-the-art <a href='https://contextual.ai/blog/introducing-instruction-following-reranker/' target='_blank'>steerable reranker</a>, <a href='https://contextual.ai/blog/introducing-grounded-language-model/' target='_blank'>world's most grounded language model</a>, and <a href='https://contextual.ai/blog/combining-rag-and-specialization/' target='_blank'>tuning for agent specialization</a> to achieve superhuman performance in content evaluation tasks. This technology enables consistent, fine-grained assessments across any content type and format.\n\n"
+    
+    "## Contact info \n"
+    "Reach out to Aravind Mohan , Head of Data Science, to find out more or sign up as a design partner at aravind.mohan@contextual.ai \n"
+    "## SAFETY WARNING \n" 
+    "Some of the randomly generated test cases contain hateful language that you might find offensive or upsetting."
+)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Random test case button at the top
+                random_test_btn = gr.Button("🎲 Random Test Case", elem_classes=["orange-button"])
+                
+                # Rate Content button - moved above the input box with gray color
+                rate_btn = gr.Button("Rate Content", variant="primary", size="lg", elem_classes=["gray-button"])
+                
+                # Input field below both buttons
+                user_input = gr.Textbox(label="Input content to rate:", placeholder="Type content to evaluate here...", lines=6)
+            
+            with gr.Column(scale=2):
+                # Contextual Safety Oracle with policy button
+                gr.HTML("""
+                <div>
+                    <h3 class="result-header">🌟 Contextual Safety Oracle</h3>
+                    <div style="margin-top: -10px; margin-bottom: 10px;">
+                        <a href="#" class="knowledge-button" onclick="openPolicyPopup(); return false;">View policy</a>
+                    </div>
+                </div>
+                """)
+                contextual_results = gr.HTML('<div class="rating-box contextual-box empty-rating">Rating will appear here</div>')
+                
+                # Hidden placeholder for retrieved knowledge
+                retrieved_knowledge = gr.HTML('', visible=False)
+                
+                with gr.Row():
+                    with gr.Column():
+                        # LlamaGuard section with permanent model card link
+                        gr.HTML("""
+                        <div>
+                            <h3 class="result-header">🦙 LlamaGuard 3.0</h3>
+                            <div style="margin-top: -10px; margin-bottom: 10px;">
+                                <a href="https://github.com/meta-llama/PurpleLlama/blob/main/Llama-Guard3/8B/MODEL_CARD.md" 
+                                   target="_blank" class="knowledge-button">View model card</a>
+                            </div>
+                        </div>
+                        """)
+                        llama_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
+                    with gr.Column():
+                        # OpenAI section with permanent model card link
+                        gr.HTML("""
+                        <div>
+                            <h3 class="result-header">🧷 OpenAI Moderation</h3>
+                            <div style="margin-top: -10px; margin-bottom: 10px;">
+                                <a href="https://platform.openai.com/docs/guides/moderation" 
+                                   target="_blank" class="knowledge-button">View model card</a>
+                            </div>
+                        </div>
+                        """)
+                        openai_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
         
-        # Define show/hide loading indicator functions BEFORE using them
+        # Define show/hide loading indicator functions
         def show_loading():
             return """<script>
             const spinner = document.getElementById('loading-spinner');
@@ -641,7 +797,7 @@ def create_gradio_app():
             if (spinner) spinner.style.display = 'none';
             </script>"""
         
-        # Then bind the buttons
+        # Bind random test case button with loading indicator
         random_test_btn.click(
             show_loading,
             inputs=None,
@@ -656,6 +812,7 @@ def create_gradio_app():
             outputs=loading_spinner
         )
         
+        # Bind rating button with loading indicator
         rate_btn.click(
             show_loading,
             inputs=None,
@@ -663,7 +820,7 @@ def create_gradio_app():
         ).then(
             rate_user_input,
             inputs=[user_input],
-            outputs=[contextual_results, llama_results, openai_results, perspective_results, retrieved_knowledge]
+            outputs=[contextual_results, llama_results, openai_results, retrieved_knowledge]
         ).then(
             hide_loading,
             inputs=None,