Update app.py

app.py

@@ -1,8 +1,8 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
 """
-🪶 Council Matters Classifier – PT (Light Edition)
-Simplified modern Gradio interface with light minimal theme.
+🪶 Council Matters Classifier – PT (Optimized Dark Theme)
+Simplified dark interface with working suggestion carousel.
 """
 
 import gradio as gr
@@ -127,11 +127,8 @@ class PortugueseClassifier:
         return predicted_labels
 
 
-# ---------------- Load Classifier ----------------
 classifier = PortugueseClassifier()
 
-
-# ---------------- Gradio UI ----------------
 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.",
@@ -145,115 +142,125 @@ suggestions = [
     "O plano estratégico inclui medidas para atrair investimento privado.",
 ]
 
-# --- Simplified Light CSS ---
+# ---------------- CSS ----------------
 custom_css = """
 body {
-  background-color: #fafafa;
+  background-color: #0c0c0c;
+  color: #f1f1f1;
   font-family: 'Inter', sans-serif;
-  color: #222;
 }
-.gradio-container { background-color: #fafafa; color: #222; }
-h2, h3 { text-align: center; color: #0078cc; font-weight: 600; }
+.gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
+h2, h3 { text-align: center; color: #00b4ff; font-weight: 600; }
 textarea {
-  background-color: #fff !important;
-  color: #222 !important;
-  border-radius: 8px !important;
-  border: 1px solid #ccc !important;
+  background-color: #181818 !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  border: 1px solid #333 !important;
 }
 button {
-  background-color: #0078cc !important;
-  color: #fff !important;
+  background-color: #007aff !important;
+  color: white !important;
+  font-weight: 600 !important;
   border-radius: 8px !important;
   border: none !important;
-  font-weight: 600 !important;
 }
-button:hover { background-color: #0094ff !important; }
+button:hover { background-color: #00aaff !important; }
 .output-chip {
-  background-color: #f3f9ff;
-  color: #005fa3;
+  background-color: #1a1a1a;
+  color: #00c3ff;
   padding: 5px 12px;
   border-radius: 8px;
+  border: 1px solid #007aff33;
   font-weight: 500;
-  border: 1px solid #cde5ff;
 }
 .suggestion-box {
-  background-color: #fff;
+  background-color: #111;
   border-radius: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid #222;
   padding: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: #555;
-  margin-top: 20px;
+  color: #aaa;
+  margin-top: 25px;
 }
 .arrow-btn {
   background: none;
   border: none;
-  color: #0078cc;
-  font-size: 20px;
+  color: #00c3ff;
+  font-size: 22px;
   cursor: pointer;
 }
-.arrow-btn:hover { color: #0094ff; transform: scale(1.1); }
+.arrow-btn:hover { color: #00e0ff; transform: scale(1.15); }
 """
 
+# ---------------- JS ----------------
 custom_js = f"""
 let examples = {suggestions};
 let index = 0;
-function updateSuggestion(direction) {{
+function updateSuggestionText() {{
   const el = document.getElementById('suggestion-text');
+  if (!el) return;
   el.style.opacity = 0;
   setTimeout(() => {{
-    if (direction === 'next') index = (index + 1) % examples.length;
-    else index = (index - 1 + examples.length) % examples.length;
     el.innerText = examples[index];
     document.getElementById('input-text').value = examples[index];
     el.style.opacity = 1;
-  }}, 200);
+  }}, 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();
+    }});
+  }}
+}});
+"""
 
-# --- Interface ---
 def classify_display(text):
     preds = classifier.predict(text)
     if not preds:
         return "<div style='color:#777;text-align:center'>No topics detected.</div>"
-
     chips = ""
     for p in preds[:10]:
         label = p["label"]
         prob = p["probability"]
         conf = p["confidence"]
-        color = {"high": "#009e60", "medium": "#d1a000", "low": "#d13f3f"}[conf]
-        chips += f"<span class='output-chip' style='border-color:{color}33;color:{color}'>{label} ({prob:.0%})</span>"
-    return f"<div style='display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px'>{chips}</div>"
-
+        color = {"high": "#00ff88", "medium": "#ffd966", "low": "#ff6666"}[conf]
+        chips += f"<span class='output-chip' style='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:
     gr.Markdown("## 🏛️ **Council Matters Classifier – PT**")
-    gr.Markdown("### Introduza texto administrativo em português:")
+    gr.Markdown("### Insira texto administrativo em português:")
 
     input_text = gr.Textbox(
         label="",
-        placeholder="Escreva aqui o texto...",
+        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 class='arrow-btn' onclick="updateSuggestion('prev')">⟨</button>
+        <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 class='arrow-btn' onclick="updateSuggestion('next')">⟩</button>
+        <button id='next-btn' class='arrow-btn'>⟩</button>
     </div>
     """)