Upload folder using huggingface_hub

hate_speech_demo.py

@@ -88,7 +88,6 @@ def process_retrieval_text(retrieval_text, user_input):
 ORACLE_API_KEY = os.environ.get("ORACLE_API_KEY", "")
 TOGETHER_API_KEY = os.environ.get("TOGETHER_API_KEY", "")
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
-PERSPECTIVE_API_KEY = os.environ.get("PERSPECTIVE_API_KEY", "")
 
 # Custom CSS for styling
 CUSTOM_CSS = """
@@ -442,61 +441,8 @@ 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"
-    
-# Perspective API rating
-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
 # Updated to only require one input
 def rate_user_input(user_input):
     # Initialize APIs with hardcoded keys
@@ -508,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)
@@ -520,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 = ""
@@ -547,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>
@@ -567,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:
@@ -596,37 +540,94 @@ def create_gradio_app():
     )
     
     # Add CSS for the policy popup and custom button color
-    CUSTOM_CSS = CUSTOM_CSS + """
-/* 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;
-}
-"""
+    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
@@ -726,11 +727,11 @@ def create_gradio_app():
     "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" 
+    "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."
 )
-#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      
+        
         with gr.Row():
             with gr.Column(scale=1):
                 # Random test case button at the top
@@ -756,44 +757,32 @@ def create_gradio_app():
                 
                 # 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>')
-    with gr.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>')
+                
+                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
         def show_loading():
@@ -825,18 +814,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, 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, retrieved_knowledge]
+        ).then(
+            hide_loading,
+            inputs=None,
+            outputs=loading_spinner
+        )
     
     return app