Update app.py

app.py

@@ -114,7 +114,8 @@ def classify_sentence(sentence, progress=gr.Progress()):
 
     if not sentence or sentence.strip() == "":
         status_msg = "⚠️ Please enter a sentence to classify."
-        return status_msg, status_msg
+        yield status_msg, status_msg
+        return  # End generator
 
     try:
         # Step 1: Building prompt
@@ -169,44 +170,56 @@ def classify_sentence(sentence, progress=gr.Progress()):
         # Step 4: Formatting output
         progress(0.95, desc="📝 Formatting output...")
         print("Step 4: Formatting output...")
-        status_4 = "⏳ **Step 4/4:** Formatting output..."
-        yield status_4, status_4
 
-        classification_output = f"""
-## Classification Result
-
-### {label_name}
-
-**Category:** {label_desc}
+        # 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'}
+        }
+        colors = color_map.get(label, color_map['a'])
 
----
-
-{response_text}
+        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>
+    </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>
+    <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>
+</div>
 """
 
         progress(1.0, desc="✅ Complete!")
         print(f"Classification complete! Label: {label_name}")
         print(f"{'='*80}\n")
 
-        # Final result with success status
+        # Final result with success status - YIELD instead of return
         final_status = f"✅ **Classification Complete!** Result: {label_name}"
-        return final_status, classification_output
+        yield final_status, classification_output
 
     except Exception as e:
         error_message = f"""
-## ⚠️ Error
-
-An error occurred during classification. Please try again.
-
-**Error details:** {str(e)}
-
-If the problem persists, please check the model configuration.
+<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>
+</div>
 """
         print(f"Error in classify_sentence: {e}")
         import traceback
         traceback.print_exc()
         error_status = f"❌ **Error:** {str(e)}"
-        return error_status, error_message
+        yield error_status, error_message
 
 
 # ============================================================================
@@ -234,111 +247,28 @@ custom_css = """
 
 /* Status box styling */
 #status_box {
-    padding: 15px;
-    border-radius: 10px;
-    margin: 15px 0;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    font-weight: 500;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    min-height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: 15px !important;
+    border-radius: 10px !important;
+    margin: 15px 0 !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    font-weight: 500 !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+    min-height: 50px !important;
+    text-align: center !important;
 }
 
 /* Result box container */
 #output_box {
-    padding: 0;
-    margin-top: 20px;
+    padding: 0 !important;
+    margin-top: 20px !important;
 }
 
-/* Result card styling - base */
+/* Make sure HTML renders properly */
 #output_box .prose {
     max-width: 100% !important;
 }
 
-#output_box h2 {
-    font-size: 1.1em !important;
-    margin-top: 0 !important;
-    margin-bottom: 15px !important;
-    padding: 20px;
-    border-radius: 12px 12px 0 0;
-    color: white !important;
-    text-align: center;
-    font-weight: 600 !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-#output_box h3 {
-    font-size: 2em !important;
-    margin: 0 !important;
-    padding: 30px 20px;
-    text-align: center;
-    border-radius: 0 !important;
-    font-weight: bold !important;
-}
-
-/* Color coding for different labels */
-#output_box h3:contains("🔵") {
-    background-color: #e3f2fd !important;
-    color: #1976d2 !important;
-    border-left: 6px solid #1976d2;
-}
-
-#output_box h3:contains("🟡") {
-    background-color: #fff9c4 !important;
-    color: #f57f17 !important;
-    border-left: 6px solid #f57f17;
-}
-
-#output_box h3:contains("🟢") {
-    background-color: #e8f5e9 !important;
-    color: #388e3c !important;
-    border-left: 6px solid #388e3c;
-}
-
-#output_box h3:contains("🔴") {
-    background-color: #ffebee !important;
-    color: #d32f2f !important;
-    border-left: 6px solid #d32f2f;
-}
-
-#output_box p strong {
-    color: #333 !important;
-}
-
-#output_box hr {
-    margin: 0 !important;
-    border: none !important;
-    border-top: 2px solid #e0e0e0 !important;
-}
-
-/* Category description styling */
-#output_box > div > p:first-of-type {
-    padding: 20px;
-    background-color: #f8f9fa;
-    margin: 0 !important;
-    font-size: 1.1em;
-}
-
-/* Model explanation section */
-#output_box > div > p:last-of-type {
-    padding: 20px;
-    background-color: white;
-    margin: 0 !important;
-    line-height: 1.6;
-    border-radius: 0 0 12px 12px;
-}
-
-/* Add shadow to entire result card */
-#output_box > div {
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-    border-radius: 12px;
-    overflow: hidden;
-    border: 1px solid #e0e0e0;
-}
-
 footer {
     display: none !important;
 }
@@ -359,8 +289,6 @@ with gr.Blocks(css=custom_css, title="Populism Detector") as demo:
     - **🟢 People-Centrism**: Positive references to "the people" or ordinary citizens
     - **🔴 Both**: Combines anti-elite rhetoric with people-centric language
 
-
-    * Note: Predictions may take a couple minutes to generate, given this space is hosted on a free cpu and i am poor :( 
     ---
     """)