Update app.py

app.py

@@ -1,8 +1,8 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
 """
-🪶 Council Matters Classifier – PT (Optimized Dark Theme)
-Simplified dark interface with working suggestion carousel.
+🪶 Council Matters Classifier – PT
+Dark modern Gradio interface with working suggestions carousel.
 """
 
 import gradio as gr
@@ -12,6 +12,7 @@ import re
 from pathlib import Path
 from scipy.sparse import hstack, csr_matrix
 
+# Optional PyTorch
 try:
     import torch
     from transformers import AutoTokenizer, AutoModel
@@ -127,8 +128,10 @@ class PortugueseClassifier:
         return predicted_labels
 
 
+# ---------------- Load Classifier ----------------
 classifier = PortugueseClassifier()
 
+# ---------------- Suggestions ----------------
 suggestions = [
     "A Câmara Municipal aprovou o novo orçamento para 2025, com foco em sustentabilidade.",
     "Foi decidido avançar com o projeto de requalificação do centro histórico.",
@@ -141,89 +144,17 @@ suggestions = [
     "A Câmara apoiará as associações juvenis em atividades culturais.",
     "O plano estratégico inclui medidas para atrair investimento privado.",
 ]
+example_idx = 0
 
-# ---------------- CSS ----------------
-custom_css = """
-body {
-  background-color: #0c0c0c;
-  color: #f1f1f1;
-  font-family: 'Inter', sans-serif;
-}
-.gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
-h2, h3 { text-align: center; color: #00b4ff; font-weight: 600; }
-textarea {
-  background-color: #181818 !important;
-  color: #fff !important;
-  border-radius: 10px !important;
-  border: 1px solid #333 !important;
-}
-button {
-  background-color: #007aff !important;
-  color: white !important;
-  font-weight: 600 !important;
-  border-radius: 8px !important;
-  border: none !important;
-}
-button:hover { background-color: #00aaff !important; }
-.output-chip {
-  background-color: #1a1a1a;
-  color: #00c3ff;
-  padding: 5px 12px;
-  border-radius: 8px;
-  border: 1px solid #007aff33;
-  font-weight: 500;
-}
-.suggestion-box {
-  background-color: #111;
-  border-radius: 10px;
-  border: 1px solid #222;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #aaa;
-  margin-top: 25px;
-}
-.arrow-btn {
-  background: none;
-  border: none;
-  color: #00c3ff;
-  font-size: 22px;
-  cursor: pointer;
-}
-.arrow-btn:hover { color: #00e0ff; transform: scale(1.15); }
-"""
+def next_example():
+    global example_idx
+    example_idx = (example_idx + 1) % len(suggestions)
+    return suggestions[example_idx], suggestions[example_idx]
 
-# ---------------- JS ----------------
-custom_js = f"""
-let examples = {suggestions};
-let index = 0;
-function updateSuggestionText() {{
-  const el = document.getElementById('suggestion-text');
-  if (!el) return;
-  el.style.opacity = 0;
-  setTimeout(() => {{
-    el.innerText = examples[index];
-    document.getElementById('input-text').value = examples[index];
-    el.style.opacity = 1;
-  }}, 150);
-}}
-
-window.addEventListener('DOMContentLoaded', () => {{
-  const prev = document.getElementById('prev-btn');
-  const next = document.getElementById('next-btn');
-  if (prev && next) {{
-    prev.addEventListener('click', () => {{
-      index = (index - 1 + examples.length) % examples.length;
-      updateSuggestionText();
-    }});
-    next.addEventListener('click', () => {{
-      index = (index + 1) % examples.length;
-      updateSuggestionText();
-    }});
-  }}
-}});
-"""
+def prev_example():
+    global example_idx
+    example_idx = (example_idx - 1 + len(suggestions)) % len(suggestions)
+    return suggestions[example_idx], suggestions[example_idx]
 
 def classify_display(text):
     preds = classifier.predict(text)
@@ -235,34 +166,46 @@ def classify_display(text):
         prob = p["probability"]
         conf = p["confidence"]
         color = {"high": "#00ff88", "medium": "#ffd966", "low": "#ff6666"}[conf]
-        chips += f"<span class='output-chip' style='color:{color}'>{label} ({prob:.0%})</span>"
+        chips += f"<span class='output-chip' style='border-color:{color}80;color:{color}'>{label} ({prob:.0%})</span>"
     return f"<div style='display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px'>{chips}</div>"
 
-with gr.Blocks(css=custom_css, js=custom_js, theme="gradio/soft") as demo:
+# ---------------- CSS ----------------
+custom_css = """
+body { background-color: #0c0c0c; color: #f1f1f1; font-family: 'Inter', sans-serif; }
+.gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
+h2, h3 { text-align: center; color: #00b4ff; font-weight: 600; }
+textarea { background-color: #181818 !important; color: #fff !important; border-radius: 10px !important; border: 1px solid #333 !important; }
+button { background-color: #007aff !important; color: white !important; font-weight: 600 !important; border-radius: 8px !important; border: none !important; }
+button:hover { background-color: #00aaff !important; }
+.output-chip { background-color: #1a1a1a; padding: 5px 12px; border-radius: 8px; font-weight: 500; border: 1px solid #007aff33; }
+.suggestion-box { background-color: #111; border-radius: 10px; border: 1px solid #222; padding: 10px; display: flex; align-items: center; justify-content: space-between; color: #aaa; margin-top: 25px; }
+.arrow-btn { background: none; border: none; color: #00c3ff; font-size: 22px; cursor: pointer; }
+.arrow-btn:hover { color: #00e0ff; transform: scale(1.15); }
+"""
+
+# ---------------- Gradio UI ----------------
+with gr.Blocks(css=custom_css, theme="gradio/soft") as demo:
     gr.Markdown("## 🏛️ **Council Matters Classifier – PT**")
     gr.Markdown("### Insira texto administrativo em português:")
 
     input_text = gr.Textbox(
-        label="",
-        placeholder="Escreva aqui o texto em português...",
-        lines=6,
-        elem_id="input-text"
+        label="", placeholder="Escreva aqui o texto em português...", lines=6, elem_id="input-text"
     )
 
     classify_btn = gr.Button("Classificar")
     output = gr.HTML(label="Tópicos previstos")
     classify_btn.click(fn=classify_display, inputs=input_text, outputs=output)
 
-    gr.Markdown("### 💡 Sugestões")
-    gr.HTML("""
-    <div class='suggestion-box'>
-        <button id='prev-btn' class='arrow-btn'>⟨</button>
-        <span id='suggestion-text' style='flex:1;text-align:center;padding:0 10px;transition:opacity 0.3s'>
-            A Câmara Municipal aprovou o novo orçamento para 2025, com foco em sustentabilidade.
-        </span>
-        <button id='next-btn' class='arrow-btn'>⟩</button>
-    </div>
-    """)
+    # Sugestões
+    prev_btn = gr.Button("⟨")
+    suggestion_display = gr.Textbox(value=suggestions[0], interactive=False)
+    next_btn = gr.Button("⟩")
+
+    prev_btn.click(fn=prev_example, outputs=[input_text, suggestion_display])
+    next_btn.click(fn=next_example, outputs=[input_text, suggestion_display])
+
+    gr.Row([prev_btn, suggestion_display, next_btn], elem_id="suggestion-box")
 
+# ---------------- Launch ----------------
 if __name__ == "__main__":
     demo.launch()