Upload folder using huggingface_hub

hate_speech_demo.py

@@ -829,64 +829,54 @@ def create_gradio_app():
 </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):
+    with gr.Column():
+        # Buttons (stacked or spaced however you like)
+        random_test_btn = gr.Button("🎲 Random Test Case", elem_classes=["orange-button"])
+        rate_btn = gr.Button("Rate Content", variant="primary", size="lg", elem_classes=["gray-button"])
+
+        # Input box
+        user_input = gr.Textbox(
+            label="Input content to rate:",
+            placeholder="Type content to evaluate here...",
+            lines=6
+        )
+
         # 🌟 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 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 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 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>')
 
         # 🧷 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 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>')
 
         # 🧩 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 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>')