Upload folder using huggingface_hub

hate_speech_demo.py

@@ -606,267 +606,92 @@ def random_test_case():
 
 # Simplified Gradio app for Hate Speech Rating
 def create_gradio_app():
-    # Create theme with custom CSS
-    theme = gr.themes.Default().set(
-        body_text_size="16px",
-        body_text_color="#333333",
-        button_primary_background_fill="#FCA539",
-        button_primary_text_color="#000000",
-        button_secondary_background_fill="#FCA539",
-        button_secondary_text_color="#000000",
-        background_fill_primary="#FFFFFF",
-        background_fill_secondary="#F8F9FA",
-        block_title_text_weight="600",
-        block_border_width="1px",
-        block_shadow="0 1px 3px rgba(0,0,0,0.1)",
-        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;
-    }
-    
-    /* Custom gray button style */
-    .gray-button {
-        background-color: #c4c4c3 !important;
-        color: #000000 !important;
-    }
-    """
+    # Create theme and basic setup as before...
     
     with gr.Blocks(title="Hate Speech Rating Oracle", theme=theme, css=custom_css) as app:
-        # Add loading spinner
+        # First, define all UI elements
         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=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>
+        # Add policy popup HTML
+        # ...
         
-        <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";
+        gr.Markdown("# Hate Speech Rating Oracle [BETA]")
+        # Markdown content...
+        
+        # Define input elements first
+        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"])
                 
-                // Set the download link
-                downloadLink.href = directPdfUrl;
+                # Rate Content button
+                rate_btn = gr.Button("Rate Content", variant="primary", size="lg", elem_classes=["gray-button"])
                 
-                // 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)
+                # Input field below both buttons
+                user_input = gr.Textbox(label="Input content to rate:", placeholder="Type content to evaluate here...", lines=6)
         
-        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 Bertie Vidgen, Head of Human Data at Contextual AI, to find out more or sign up as a design partner at bertie@contextual.ai \n"
-    "## <span class='safety-warning-red'>SAFETY WARNING</span> \n" 
-    "Some of the randomly generated test cases contain hateful language that you might find offensive or upsetting."
-)
+        # Define output elements
+        with gr.Row():
+            with gr.Column(scale=1, elem_classes=["model-column"]):
+                # Contextual AI section
+                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>')
         
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["model-column"]):
-        # LlamaGuard section with permanent model card link
+                # LlamaGuard section
                 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(scale=1, elem_classes=["model-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>')
-    with gr.Column(scale=1, elem_classes=["model-column"]):
-        # Perspective API section with permanent model card link
-        gr.HTML("""
-        <div>
-            <h3 class="result-header">👁️ Perspective API</h3>
-            <div style="margin-top: -10px; margin-bottom: 10px;">
-                <a href="https://developers.perspectiveapi.com/s/about-the-api" 
-                   target="_blank" class="knowledge-button">View model card</a>
-            </div>
-        </div>
-        """)
-        perspective_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</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(scale=1, elem_classes=["model-column"]):
+                # OpenAI section
+                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>')
+            with gr.Column(scale=1, elem_classes=["model-column"]):
+                # Perspective API section
+                gr.HTML("""
+                <div>
+                    <h3 class="result-header">👁️ Perspective API</h3>
+                    <div style="margin-top: -10px; margin-bottom: 10px;">
+                        <a href="https://developers.perspectiveapi.com/s/about-the-api" 
+                           target="_blank" class="knowledge-button">View model card</a>
+                    </div>
+                </div>
+                """)
+                perspective_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
         
-        # Define show/hide loading indicator functions
-        def show_loading():
-            return """<script>
-            const spinner = document.getElementById('loading-spinner');
-            if (spinner) spinner.style.display = 'block';
-            </script>"""
+        # Hidden element for retrieved knowledge
+        retrieved_knowledge = gr.HTML('', visible=False)
         
-        def hide_loading():
-            return """<script>
-            const spinner = document.getElementById('loading-spinner');
-            if (spinner) spinner.style.display = 'none';
-            </script>"""
+        # After defining all UI elements, set up the event handlers
+        # Define show/hide loading functions first...
         
-        # Bind random test case button with loading indicator
+        # Bind the buttons
         random_test_btn.click(
             show_loading,
             inputs=None,
@@ -881,20 +706,19 @@ def create_gradio_app():
             outputs=loading_spinner
         )
         
-        # 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, retrieved_knowledge]
-).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, retrieved_knowledge]
+        ).then(
+            hide_loading,
+            inputs=None,
+            outputs=loading_spinner
+        )
     
     return app