Update app.py

app.py

@@ -2,7 +2,7 @@
 # -*- coding: utf-8 -*-
 """
 🪶 Council Matters Classifier – PT
-Dark modern Gradio interface with suggestions box: title on top, arrows at bottom corners, "Use" button below.
+Dark modern Gradio interface with compact arrow buttons on top of suggestion box.
 """
 
 import gradio as gr
@@ -170,7 +170,7 @@ def classify_display(text):
         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>"
 
-# ---------------- CSS ----------------
+# ---------------- CSS atualizado ----------------
 custom_css = """
 body { background-color: #0c0c0c; color: #f1f1f1; font-family: 'Inter', sans-serif; }
 .gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
@@ -179,39 +179,18 @@ textarea { background-color: #181818 !important; color: #fff !important; border-
 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; }
-
-/* Caixa de sugestões */
 .suggestion-box { 
     background-color: #112f50;  
     border-radius: 10px; 
     border: 1px solid #1f3c5a; 
-    padding: 15px; 
-    color: #eee; 
-    margin-top: 25px; 
+    padding: 10px; 
     display: flex; 
-    flex-direction: column; 
     align-items: center; 
-}
-
-/* Título das sugestões */
-.suggestion-box-title {
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #00b4ff;
-}
-
-/* Texto da sugestão */
-.suggestion-box .suggestion-text { 
-    width: 100%; 
-    text-align: center; 
-    border: none; 
-    background: none; 
+    justify-content: center; 
     color: #eee; 
-    font-weight: 500; 
-    padding: 8px 0; 
+    margin-top: 25px; 
+    position: relative;
 }
-
-/* Botões */
 .arrow-btn { 
     width: 25px;    
     height: 25px;   
@@ -224,16 +203,11 @@ button:hover { background-color: #00aaff !important; }
     font-weight: bold;
 }
 .arrow-btn:hover { color: #ffffff; transform: scale(1.3); }
-.use-btn { background-color:#66b3ff !important; color:#000 !important; font-weight:600 !important; border-radius:6px !important; padding:3px 8px !important; margin-top:10px;}
+.use-btn { background-color:#66b3ff !important; color:#000 !important; font-weight:600 !important; border-radius:6px !important; padding:3px 8px !important; margin-left:5px;}
 .use-btn:hover { background-color:#99ccff !important; }
-
-/* Posicionamento das setas em baixo, cantos */
-.suggestion-box-bottom {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-}
+.suggestion-box .prev-btn { position: absolute; top: 5px; left: 5px; }
+.suggestion-box .next-btn { position: absolute; top: 5px; right: 5px; }
+.suggestion-box .suggestion-text { width: 100%; text-align: center; border:none; background:none; color:#eee; font-weight:500; padding-top:8px; }
 """
 
 # ---------------- Gradio UI ----------------
@@ -242,27 +216,22 @@ with gr.Blocks(css=custom_css, theme="gradio/soft") as demo:
     gr.Markdown("### Insira texto administrativo em português:")
 
     input_text = gr.Textbox(label="", placeholder="Escreva aqui o texto em português...", lines=6)
+
     classify_btn = gr.Button("Classificar")
     output = gr.HTML()
     classify_btn.click(fn=classify_display, inputs=input_text, outputs=output)
 
     # Sugestões
+    prev_btn = gr.Button("⟨", elem_classes="prev-btn arrow-btn")
     suggestion_display = gr.Textbox(value=suggestions[0], interactive=False, elem_classes="suggestion-text")
-    prev_btn = gr.Button("⟨", elem_classes="arrow-btn")
-    next_btn = gr.Button("⟩", elem_classes="arrow-btn")
+    next_btn = gr.Button("⟩", elem_classes="next-btn arrow-btn")
     use_btn = gr.Button("Usar", elem_classes="use-btn")
 
     prev_btn.click(fn=prev_example, outputs=suggestion_display)
     next_btn.click(fn=next_example, outputs=suggestion_display)
     use_btn.click(fn=use_suggestion, inputs=suggestion_display, outputs=input_text)
 
-    with gr.Column(elem_classes="suggestion-box"):
-        gr.Markdown("**Sugestões**", elem_classes="suggestion-box-title")
-        suggestion_display.render()
-        with gr.Row(elem_classes="suggestion-box-bottom"):
-            prev_btn.render()
-            next_btn.render()
-        use_btn.render()
+    gr.Row([prev_btn, suggestion_display, next_btn, use_btn], elem_id="suggestion-box")
 
 # ---------------- Launch ----------------
 if __name__ == "__main__":