Upload folder using huggingface_hub

hate_speech_demo.py

@@ -829,56 +829,59 @@ def create_gradio_app():
 </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>')
+        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
+                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>')
         
         # Define show/hide loading indicator functions
         def show_loading():
@@ -894,7 +897,7 @@ def create_gradio_app():
             </script>"""
         
         # Bind random test case button with loading indicator
-        random_test_case.click(
+        random_test_btn.click(
             show_loading,
             inputs=None,
             outputs=loading_spinner