Upload folder using huggingface_hub

hate_speech_demo.py

@@ -622,91 +622,26 @@ def create_gradio_app():
         border_color_primary="#E0E0E0"
     )
     
-    # Then use the defined theme in gr.Blocks
     with gr.Blocks(title="Hate Speech Rating Oracle", theme=theme, css=CUSTOM_CSS) as app:
-        # First, define all UI elements
+        # Add loading spinner
         loading_spinner = gr.HTML('<div id="loading-spinner"></div>')
         
-        # Create a file component to serve the PDF (hidden from UI)
-        pdf_file = gr.File("Hate Speech Policy.pdf", visible=False, label="Policy PDF")
+        # Rest of your UI definition code...
         
-        # Add policy popup HTML
-        # ...
+        # Define show/hide loading indicator functions BEFORE using them
+        def show_loading():
+            return """<script>
+            const spinner = document.getElementById('loading-spinner');
+            if (spinner) spinner.style.display = 'block';
+            </script>"""
         
-        gr.Markdown("# Hate Speech Rating Oracle [BETA]")
-        # Markdown content...
+        def hide_loading():
+            return """<script>
+            const spinner = document.getElementById('loading-spinner');
+            if (spinner) spinner.style.display = 'none';
+            </script>"""
         
-        # Define input elements first
-        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
-                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)
-        
-        # Define output elements
-        with gr.Row():
-            with gr.Column(scale=1, elem_classes=["model-column"]):
-                # Contextual AI section
-                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>')
-        
-        with gr.Row():
-            with gr.Column(scale=1, elem_classes=["model-column"]):
-                # LlamaGuard section
-                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(scale=1, elem_classes=["model-column"]):
-                # OpenAI section
-                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
-                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>')
-        
-        # Hidden element for retrieved knowledge
-        retrieved_knowledge = gr.HTML('', visible=False)
-        
-        # After defining all UI elements, set up the event handlers
-        # Define show/hide loading functions first...
-        
-        # Bind the buttons
+        # Then bind the buttons
         random_test_btn.click(
             show_loading,
             inputs=None,