Upload folder using huggingface_hub

hate_speech_demo.py

@@ -840,48 +840,56 @@ def create_gradio_app():
                 # 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 class="result-header" style="display: flex; align-items: center; gap: 10px;">
-    <span>🌟 Contextual Safety Oracle</span>
-    <a href="#" class="knowledge-button" onclick="openPolicyPopup(); return false;">View policy</a>
-</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.Column(scale=1):
-                        gr.HTML("""
-<div class="result-header" style="display: flex; align-items: center; gap: 10px;">
-    <span>🦙 LlamaGuard 3.0</span>
-    <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>
-""")
-                        llama_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
-
-                with gr.Column(scale=1):
-                        gr.HTML("""
-<div class="result-header" style="display: flex; align-items: center; gap: 10px;">
-    <span>🧷 OpenAI Moderation</span>
-    <a href="https://platform.openai.com/docs/guides/moderation" 
-       target="_blank" class="knowledge-button">View model card</a>
-</div>
-""")
-                        openai_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
-
-                with gr.Column(scale=1):
-                        gr.HTML("""
-<div class="result-header" style="display: flex; align-items: center; gap: 10px;">
-    <span>🧩 Perspective API</span>
-    <a href="https://developers.perspectiveapi.com/s/docs" 
-       target="_blank" class="knowledge-button">View docs</a>
-</div>
-""")
-                        perspective_results = gr.HTML('<div class="rating-box secondary-box empty-rating">Rating will appear here</div>')
+    with gr.Column(scale=2):
+        # 🌟 Contextual Safety Oracle
+        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 retrieval
+        retrieved_knowledge = gr.HTML('', visible=False)
+
+        # 🦙 LlamaGuard
+        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>')
+
+        # 🧷 OpenAI Moderation
+        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>')
+
+        # 🧩 Perspective API
+        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/docs" 
+                target="_blank" class="knowledge-button">View docs</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():