Upload folder using huggingface_hub

hate_speech_demo.py

@@ -318,6 +318,36 @@ 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
@@ -441,6 +471,57 @@ 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
@@ -454,6 +535,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 +547,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 +574,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 +594,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:
@@ -727,62 +810,48 @@ 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 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" 
+    "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."
 )
         
         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
+            with gr.Column(scale=1, elem_classes=["model-column"]):
+        # LlamaGuard section with permanent model card link
                 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>')
+            <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>')
         
         # Define show/hide loading indicator functions
         def show_loading():
@@ -814,18 +883,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