Update app.py

app.py

@@ -1,13 +1,14 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
 """
-Gradio App - Intelligent Stacking Classifier (Dark Mode)
+Gradio App - Intelligent Stacking Classifier (Dark Mode, Cards + Loading)
 """
 import gradio as gr
 import numpy as np
 import joblib
 import re
 from pathlib import Path
+from time import sleep  # para simular loading (se necessário)
 
 # Sklearn
 from sklearn.feature_extraction.text import TfidfVectorizer
@@ -23,6 +24,7 @@ except ImportError:
     TORCH_AVAILABLE = False
 
 
+# ---------------- Modelo ----------------
 class PortugueseClassifier:
     def __init__(self):
         self.model_path = Path("models")
@@ -63,9 +65,8 @@ class PortugueseClassifier:
                 self.bert_model = self.bert_model.to(self.device)
 
             self.models_loaded = True
-            return f"✅ Loaded {len(self.labels)} categories"
         except Exception as e:
-            return f"❌ Error loading models: {str(e)}"
+            print(f"❌ Error loading models: {str(e)}")
 
     def extract_bert_features(self, text):
         if not TORCH_AVAILABLE or not self.bert_model:
@@ -81,11 +82,11 @@ class PortugueseClassifier:
 
     def predict(self, text):
         if not self.models_loaded:
-            return {"error": "Models not loaded"}
+            return [{"label": "Error", "probability": 0.0, "confidence": "low"}]
 
         text = re.sub(r'\s+', ' ', text.strip())
         if not text:
-            return {"error": "Empty text"}
+            return [{"label": "Empty text", "probability": 0.0, "confidence": "low"}]
 
         tfidf_features = self.tfidf_vectorizer.transform([text])
         bert_features = self.extract_bert_features(text)
@@ -134,37 +135,63 @@ class PortugueseClassifier:
 classifier = PortugueseClassifier()
 
 
-def classify_text(text):
+def classify_text_with_loading(text):
+    """Simula loading, depois retorna cards"""
+    sleep(0.5)  # delay curto para efeito visual de loading
     preds = classifier.predict(text)
-    if "error" in preds:
-        return "❌ " + preds["error"]
-    else:
-        results = ""
-        for i, p in enumerate(preds[:10], 1):
-            emoji = {"high": "🟢", "medium": "🟡", "low": "🔴"}[p["confidence"]]
-            results += f"{i}. {p['label']} {emoji} ({p['probability']:.1%})\n"
-        return results
-
-
-# Dark theme CSS
+    cards = ""
+    for p in preds[:10]:
+        prob = p["probability"]
+        label = p["label"]
+        conf = p["confidence"]
+        color = {"high": "#28a745", "medium": "#ffc107", "low": "#dc3545"}[conf]
+        emoji = {"high": "🟢", "medium": "🟡", "low": "🔴"}[conf]
+
+        cards += f"""
+        <div style="
+            border-left: 6px solid {color};
+            background-color:#1E1E1E;
+            padding:12px;
+            margin-bottom:10px;
+            border-radius:8px;
+            transition: transform 0.2s;
+        ">
+            <strong style="color:#fff; font-size:16px;">{label}</strong> {emoji}<br>
+            <small style="color:#ccc">Probability: {prob:.1%}</small>
+        </div>
+        """
+    return cards
+
+
+# CSS Dark Theme + smooth
 css = """
-body { background-color: #121212; color: #f5f5f5; }
+body { background-color: #121212; color: #f5f5f5; font-family: 'Segoe UI', sans-serif; }
 h1, h2, h3, h4 { color: #1E90FF; }
 input, textarea { background-color: #1E1E1E; color: #f5f5f5; border: 1px solid #333; }
 button { background-color: #1E90FF; color: white; border-radius: 6px; border: none; }
 .gradio-container { background-color: #121212; }
-.output_text { background-color: #1E1E1E; color: #f5f5f5; border: 1px solid #333; padding: 10px; border-radius: 8px; }
+.output_html { background-color: #121212; color: #f5f5f5; }
+.progress-bar { height: 4px; background-color:#1E90FF; width:0%; transition: width 0.5s; border-radius:2px; }
 """
 
 with gr.Blocks(css=css, theme=None) as demo:
-    gr.Markdown("# 🧠 Intelligent Stacking Classifier", elem_id="title")
+    gr.HTML("<h1 style='text-align:center'>🧠 Intelligent Stacking Classifier</h1>")
+
     with gr.Row():
         with gr.Column():
-            text_input = gr.Textbox(label="Enter Portuguese administrative text", lines=10, placeholder="Cole aqui o texto do documento...")
+            text_input = gr.Textbox(label="Enter Portuguese administrative text", lines=10,
+                                    placeholder="Cole aqui o texto do documento...")
             classify_btn = gr.Button("🔍 Classify")
+            progress = gr.HTML("<div class='progress-bar' id='loading-bar'></div>")
         with gr.Column():
-            output = gr.Textbox(label="Predicted Categories", lines=15)
+            output = gr.HTML(label="Predicted Categories")
+
+    def wrapped_click(text):
+        progress_bar = "<div class='progress-bar' style='width:100%'></div>"
+        # animação temporária
+        result = classify_text_with_loading(text)
+        return result
 
-    classify_btn.click(classify_text, inputs=text_input, outputs=output)
+    classify_btn.click(wrapped_click, inputs=text_input, outputs=output)
 
 demo.launch()