Upload folder using huggingface_hub

hate_speech_demo.py

@@ -88,6 +88,7 @@ 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 = """
@@ -441,8 +442,61 @@ 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
@@ -454,6 +508,7 @@ 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)
@@ -465,6 +520,7 @@ 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 = ""
@@ -491,10 +547,10 @@ def rate_user_input(user_input):
         </div>
         """
         
-        # Create a toggle button (positioned BELOW the contextual results)
+        # Create a toggle button (positioned BELOW the contextual results) - Updated to match orange button styling
         knowledge_button = f"""
         <div style="margin-top: 10px; margin-bottom: 5px;">
-            <a href="#" id="btn-{popup_id}" class="knowledge-button" 
+            <a href="#" id="btn-{popup_id}" class="knowledge-button orange-button" 
                onclick="document.getElementById('{popup_id}').style.display='block'; this.style.display='none'; return false;">
                Show supporting evidence
             </a>
@@ -511,7 +567,7 @@ def rate_user_input(user_input):
     {knowledge_html}
     """
     
-    return contextual_html, llama_html, openai_html, ""
+    return contextual_html, llama_html, openai_html, perspective_html, ""
 
 def random_test_case():
     try:
@@ -540,94 +596,37 @@ def create_gradio_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;
-    }
-    """
+    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;
+}
+"""
     
     with gr.Blocks(title="Hate Speech Rating Oracle", theme=theme, css=custom_css) as app:
         # Add loading spinner
@@ -728,10 +727,10 @@ def create_gradio_app():
     
     "## 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"
-    "## SAFETY WARNING \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."
 )
-        
+#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
@@ -757,32 +756,44 @@ 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.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>')
         
         # Define show/hide loading indicator functions
         def show_loading():
@@ -814,18 +825,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, 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