Update app.py

app.py

@@ -114,7 +114,7 @@ def classify_sentence(sentence, progress=gr.Progress()):
 
     if not sentence or sentence.strip() == "":
         status_msg = "⚠️ Please enter a sentence to classify."
-        yield status_msg, status_msg
+        yield status_msg, "", ""
         return  # End generator
 
     try:
@@ -122,7 +122,7 @@ def classify_sentence(sentence, progress=gr.Progress()):
         progress(0.1, desc="🔨 Building prompt...")
         print("Step 1: Building prompt...")
         status_1 = "⏳ **Step 1/4:** Building prompt..."
-        yield status_1, status_1
+        yield status_1, "", ""
 
         conversation = [
             {"role": "system", "content": SYSTEM_PROMPT},
@@ -132,7 +132,8 @@ def classify_sentence(sentence, progress=gr.Progress()):
         prompt = tokenizer.apply_chat_template(
             conversation=conversation,
             tokenize=False,
-            add_generation_prompt=True
+            add_generation_prompt=True,
+            enable_thinking=False  # Disable thinking to match audit_llms.py behavior
         )
         print(f"Prompt length: {len(prompt)} chars")
 
@@ -140,7 +141,7 @@ def classify_sentence(sentence, progress=gr.Progress()):
         progress(0.3, desc="🤖 Running model inference...")
         print("Step 2: Running model inference...")
         status_2 = "⏳ **Step 2/4:** Running model inference... (this may take 10-30 seconds)"
-        yield status_2, status_2
+        yield status_2, "", ""
 
         responses = text_pipeline(
             prompt,
@@ -156,7 +157,7 @@ def classify_sentence(sentence, progress=gr.Progress()):
         progress(0.8, desc="⚙️ Processing results...")
         print("Step 3: Processing results...")
         status_3 = "⏳ **Step 3/4:** Processing results..."
-        yield status_3, status_3
+        yield status_3, "", ""
 
         response_text = RESPONSE_START + responses[0]['generated_text']
         print(f"Response: {response_text[:200]}...")
@@ -173,53 +174,67 @@ def classify_sentence(sentence, progress=gr.Progress()):
 
         # Determine background color based on label
         color_map = {
-            'a': {'bg': '#e3f2fd', 'text': '#1976d2', 'border': '#1976d2'},
-            'b': {'bg': '#fff9c4', 'text': '#f57f17', 'border': '#f57f17'},
-            'c': {'bg': '#e8f5e9', 'text': '#388e3c', 'border': '#388e3c'},
-            'd': {'bg': '#ffebee', 'text': '#d32f2f', 'border': '#d32f2f'}
+            'a': {'bg': '#e3f2fd', 'text': '#0d47a1', 'border': '#1976d2', 'name': 'No Populism'},
+            'b': {'bg': '#fff9c4', 'text': '#e65100', 'border': '#f57f17', 'name': 'Anti-Elitism'},
+            'c': {'bg': '#e8f5e9', 'text': '#1b5e20', 'border': '#388e3c', 'name': 'People-Centrism'},
+            'd': {'bg': '#ffebee', 'text': '#b71c1c', 'border': '#d32f2f', 'name': 'Both'}
         }
         colors = color_map.get(label, color_map['a'])
 
-        classification_output = f"""
-<div style="border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 20px 0;">
-    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; text-align: center;">
-        <h3 style="margin: 0; font-size: 1.2em;">Classification Result</h3>
+        # Result card HTML with DARK text on light backgrounds
+        result_html = f"""
+<div style="border: 2px solid {colors['border']}; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.15); margin: 20px 0; background-color: white;">
+    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; text-align: center;">
+        <h2 style="margin: 0; font-size: 1.4em; font-weight: 600;">🎯 Classification Result</h2>
     </div>
-    <div style="background-color: {colors['bg']}; color: {colors['text']}; padding: 30px 20px; text-align: center; border-left: 6px solid {colors['border']};">
-        <h2 style="margin: 0; font-size: 2em; font-weight: bold;">{label_name}</h2>
+    <div style="background-color: {colors['bg']}; padding: 40px 30px; text-align: center; border-left: 8px solid {colors['border']};">
+        <div style="font-size: 3em; margin-bottom: 10px;">{label_name.split()[0]}</div>
+        <h1 style="margin: 0; font-size: 2.2em; font-weight: bold; color: {colors['text']}; line-height: 1.3;">
+            {colors['name']}
+        </h1>
     </div>
-    <div style="background-color: #f8f9fa; padding: 20px; border-top: 2px solid #e0e0e0;">
-        <p style="margin: 0; font-size: 1.1em;"><strong>Category:</strong> {label_desc}</p>
-    </div>
-    <div style="background-color: white; padding: 20px; border-top: 2px solid #e0e0e0;">
-        <p style="margin: 0; line-height: 1.6;"><strong>Model Explanation:</strong></p>
-        <p style="margin: 10px 0 0 0; line-height: 1.6;">{response_text}</p>
+    <div style="background-color: #f8f9fa; padding: 25px 30px; border-top: 2px solid #e0e0e0;">
+        <p style="margin: 0; font-size: 1.15em; color: #333; line-height: 1.6;">
+            <strong style="color: #000;">Description:</strong> {label_desc}
+        </p>
     </div>
 </div>
+"""
+
+        # Reasoning markdown with VISIBLE text
+        reasoning_md = f"""
+### Model's Detailed Reasoning
+
+{response_text}
+
+---
+
+**Note:** This is the model's explanation for its classification decision. The reasoning shows how the model analyzed the sentence based on the populism detection criteria.
 """
 
         progress(1.0, desc="✅ Complete!")
         print(f"Classification complete! Label: {label_name}")
         print(f"{'='*80}\n")
 
-        # Final result with success status - YIELD instead of return
+        # Final result with success status - YIELD 3 outputs
         final_status = f"✅ **Classification Complete!** Result: {label_name}"
-        yield final_status, classification_output
+        yield final_status, result_html, reasoning_md
 
     except Exception as e:
-        error_message = f"""
-<div style="border: 1px solid #f44336; border-radius: 12px; padding: 20px; background-color: #ffebee; margin: 20px 0;">
-    <h3 style="color: #d32f2f; margin-top: 0;">⚠️ Error</h3>
-    <p>An error occurred during classification. Please try again.</p>
-    <p><strong>Error details:</strong> {str(e)}</p>
-    <p style="margin-bottom: 0;">If the problem persists, please check the model configuration.</p>
+        error_html = f"""
+<div style="border: 2px solid #f44336; border-radius: 12px; padding: 25px; background-color: #ffebee; margin: 20px 0;">
+    <h3 style="color: #b71c1c; margin-top: 0; font-size: 1.5em;">⚠️ Error</h3>
+    <p style="color: #333; font-size: 1.1em; line-height: 1.6;">An error occurred during classification. Please try again.</p>
+    <p style="color: #333;"><strong style="color: #000;">Error details:</strong> {str(e)}</p>
+    <p style="margin-bottom: 0; color: #666;">If the problem persists, please check the model configuration.</p>
 </div>
 """
         print(f"Error in classify_sentence: {e}")
         import traceback
         traceback.print_exc()
         error_status = f"❌ **Error:** {str(e)}"
-        yield error_status, error_message
+        error_reasoning = "No reasoning available due to error."
+        yield error_status, error_html, error_reasoning
 
 
 # ============================================================================
@@ -309,18 +324,24 @@ with gr.Blocks(css=custom_css, title="Populism Detector") as demo:
         elem_id="status_box"
     )
 
-    # Results output
-    output_text = gr.Markdown(
+    # Classification result card (always visible)
+    result_card = gr.HTML(
         value="",
-        label="Analysis Result",
-        elem_id="output_box"
+        label="Classification Result"
     )
 
+    # Model reasoning (collapsible)
+    with gr.Accordion("📖 Show Model Reasoning", open=False) as reasoning_accordion:
+        reasoning_text = gr.Markdown(
+            value="",
+            label=""
+        )
+
     gr.Markdown("### 📝 Try these examples:")
     gr.Examples(
         examples=examples,
         inputs=input_text,
-        outputs=[status_box, output_text],
+        outputs=[status_box, result_card, reasoning_text],
         fn=classify_sentence,
         cache_examples=False
     )
@@ -329,7 +350,7 @@ with gr.Blocks(css=custom_css, title="Populism Detector") as demo:
     submit_btn.click(
         fn=classify_sentence,
         inputs=input_text,
-        outputs=[status_box, output_text],
+        outputs=[status_box, result_card, reasoning_text],
         api_name="classify",
         show_progress="full"  # Show full progress bar with percentage
     )
@@ -338,7 +359,7 @@ with gr.Blocks(css=custom_css, title="Populism Detector") as demo:
     input_text.submit(
         fn=classify_sentence,
         inputs=input_text,
-        outputs=[status_box, output_text],
+        outputs=[status_box, result_card, reasoning_text],
         show_progress="full"
     )