update UI

app.py

@@ -331,14 +331,34 @@ def vote_thumbs_up(text_id):
     """Handle thumbs up vote"""
     if text_id and GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
         save_vote_data(text_id, True)
-        return '<div style="background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: #34d399; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; border: 1px solid #10b981; margin: 8px 0;">👍 Thanks for your feedback!</div>'
+        return '''
+        <div style="background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: #34d399; padding: 24px; border-radius: 16px; text-align: center; font-weight: 700; border: 2px solid #10b981; margin: 16px 0; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); animation: bounceIn 0.6s ease-out;">
+            <div style="font-size: 48px; margin-bottom: 12px;">🎉</div>
+            <h3 style="color: #ffffff; font-size: 20px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+                Awesome! Thank you!
+            </h3>
+            <p style="color: #a7f3d0; font-size: 14px; margin: 0;">
+                Your positive feedback helps improve our AI safety models
+            </p>
+        </div>
+        '''
     return '<div style="color: #9ca3af; text-align: center; padding: 16px;">Voting not available</div>'
 
 def vote_thumbs_down(text_id):
     """Handle thumbs down vote"""
     if text_id and GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
         save_vote_data(text_id, False)
-        return '<div style="background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%); color: #fca5a5; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; border: 1px solid #ef4444; margin: 8px 0;">👎 Thanks for your feedback!</div>'
+        return '''
+        <div style="background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%); color: #fca5a5; padding: 24px; border-radius: 16px; text-align: center; font-weight: 700; border: 2px solid #ef4444; margin: 16px 0; box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); animation: bounceIn 0.6s ease-out;">
+            <div style="font-size: 48px; margin-bottom: 12px;">📝</div>
+            <h3 style="color: #ffffff; font-size: 20px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+                Thanks for the feedback!
+            </h3>
+            <p style="color: #fecaca; font-size: 14px; margin: 0;">
+                Critical feedback helps us identify and fix model weaknesses
+            </p>
+        </div>
+        '''
     return '<div style="color: #9ca3af; text-align: center; padding: 16px;">Voting not available</div>'
 
 # Create Gradio interface with dark theme
@@ -383,21 +403,46 @@ with gr.Blocks(title="LionGuard2", theme=gr.themes.Base().set(
                 value='<div style="text-align: center; color: #9ca3af; padding: 30px; font-style: italic;">Category scores will appear here after analysis</div>'
             )
             
-            # Voting section
-            voting_section = gr.HTML(value="")
-            
-            with gr.Row(visible=False) as voting_row:
+            # Enhanced Voting section - always visible and prominent
+            with gr.Row():
                 with gr.Column():
                     gr.HTML("""
-                    <div style="margin: 16px 0; text-align: center;">
-                        <h3 style="color: #f9fafb; font-size: 18px; font-weight: 600; margin-bottom: 8px;">📊 How accurate are these results?</h3>
-                        <p style="color: #d1d5db; font-size: 14px; margin-bottom: 16px;">Your feedback helps improve the model</p>
+                    <div style="background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); border-radius: 16px; padding: 24px; margin: 20px 0; text-align: center; border: 2px solid #60a5fa; box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); position: relative; overflow: hidden;">
+                        <div style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: pulse 3s ease-in-out infinite;"></div>
+                        <div style="position: relative; z-index: 1;">
+                            <h3 style="color: #ffffff; font-size: 22px; font-weight: 700; margin-bottom: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+                                🎯 Help Us Improve! Rate the Analysis
+                            </h3>
+                            <p style="color: #dbeafe; font-size: 16px; margin-bottom: 0; font-weight: 500;">
+                                Your feedback trains better AI safety models
+                            </p>
+                        </div>
                     </div>
                     """)
                     
-                    with gr.Row():
-                        thumbs_up_btn = gr.Button("👍 Accurate", variant="secondary", scale=1)
-                        thumbs_down_btn = gr.Button("👎 Inaccurate", variant="secondary", scale=1)
+                    voting_instruction = gr.HTML(value="""
+                    <div id="voting-instructions" style="background: #374151; border-radius: 12px; padding: 20px; margin: 16px 0; text-align: center; border: 2px dashed #6b7280; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
+                        <p style="color: #d1d5db; font-size: 16px; margin: 0; font-weight: 500;">
+                            ⬆️ Analyze some text above to unlock voting ⬆️
+                        </p>
+                    </div>
+                    """)
+                    
+                    with gr.Row(visible=False) as voting_buttons_row:
+                        with gr.Column(scale=1):
+                            thumbs_up_btn = gr.Button(
+                                "👍 Results Look Accurate", 
+                                variant="primary", 
+                                size="lg",
+                                elem_classes=["voting-btn-positive"]
+                            )
+                        with gr.Column(scale=1):
+                            thumbs_down_btn = gr.Button(
+                                "👎 Results Look Wrong", 
+                                variant="secondary", 
+                                size="lg",
+                                elem_classes=["voting-btn-negative"]
+                            )
                     
                     vote_feedback = gr.HTML(value="")
             
@@ -431,22 +476,39 @@ with gr.Blocks(title="LionGuard2", theme=gr.themes.Base().set(
     # Function to handle analysis and show voting buttons
     def analyze_and_show_voting(text):
         binary_score, category_table, text_id, voting_html = analyze_text(text)
-        # Show voting row if we have results
-        voting_row_update = gr.update(visible=bool(text_id))
-        return binary_score, category_table, text_id, voting_row_update, ""
+        # Show voting buttons and hide instructions if we have results
+        if text_id:
+            voting_buttons_update = gr.update(visible=True)
+            voting_instruction_update = gr.update(value="""
+            <div style="background: linear-gradient(135deg, #065f46 0%, #047857 100%); border-radius: 12px; padding: 20px; margin: 16px 0; text-align: center; border: 2px solid #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">
+                <p style="color: #34d399; font-size: 16px; margin: 0; font-weight: 600;">
+                    ✅ Analysis Complete! Please rate the accuracy below 👇
+                </p>
+            </div>
+            """)
+        else:
+            voting_buttons_update = gr.update(visible=False)
+            voting_instruction_update = gr.update(value="""
+            <div style="background: #374151; border-radius: 12px; padding: 20px; margin: 16px 0; text-align: center; border: 2px dashed #6b7280; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
+                <p style="color: #d1d5db; font-size: 16px; margin: 0; font-weight: 500;">
+                    ⬆️ Analyze some text above to unlock voting ⬆️
+                </p>
+            </div>
+            """)
+        return binary_score, category_table, text_id, voting_buttons_update, voting_instruction_update, ""
     
     # Connect the analyze button to the function
     analyze_btn.click(
         fn=analyze_and_show_voting,
         inputs=[text_input],
-        outputs=[binary_output, category_table, current_text_id, voting_row, vote_feedback]
+        outputs=[binary_output, category_table, current_text_id, voting_buttons_row, voting_instruction, vote_feedback]
     )
     
     # Allow Enter key to trigger analysis
     text_input.submit(
         fn=analyze_and_show_voting,
         inputs=[text_input],
-        outputs=[binary_output, category_table, current_text_id, voting_row, vote_feedback]
+        outputs=[binary_output, category_table, current_text_id, voting_buttons_row, voting_instruction, vote_feedback]
     )
     
     # Connect voting buttons