Update app.py

app.py

@@ -2,7 +2,7 @@
 # -*- coding: utf-8 -*-
 """
 🪶 Council Matters Classifier – PT
-
+Dark modern Gradio interface with top corner arrow buttons for suggestions.
 """
 
 import gradio as gr
@@ -183,7 +183,7 @@ button:hover { background-color: #00aaff !important; }
     background-color: #112f50;  
     border-radius: 10px; 
     border: 1px solid #1f3c5a; 
-    padding: 10px; 
+    padding: 30px 10px 10px 10px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
@@ -207,7 +207,7 @@ button:hover { background-color: #00aaff !important; }
 .use-btn:hover { background-color:#99ccff !important; }
 .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; }
+.suggestion-text { text-align: center; color: #eee; font-weight: 500; width: 100%; }
 """
 
 # ---------------- Gradio UI ----------------
@@ -221,17 +221,34 @@ with gr.Blocks(css=custom_css, theme="gradio/soft") as demo:
     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")
-    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)
-
-    gr.Row([prev_btn, suggestion_display, next_btn, use_btn], elem_id="suggestion-box")
+    # Caixa de sugestões com setas no topo
+    suggestion_box_html = f"""
+    <div class="suggestion-box">
+        <button class="arrow-btn prev-btn" onclick="updateSuggestion('prev')">⟨</button>
+        <span class="suggestion-text" id="suggestion-text">{suggestions[0]}</span>
+        <button class="arrow-btn next-btn" onclick="updateSuggestion('next')">⟩</button>
+    </div>
+    <div style="text-align:center;margin-top:5px;">
+        <button class="use-btn" onclick="useSuggestion()">Usar</button>
+    </div>
+    """
+    suggestion_html = gr.HTML(suggestion_box_html)
+
+    # JavaScript para navegar sugestões
+    demo.load(lambda: None, [], [], _js=f"""
+    let examples = {suggestions};
+    let index = 0;
+    function updateSuggestion(direction){{
+        const el = document.getElementById('suggestion-text');
+        if(direction==='next') index=(index+1)%examples.length;
+        else index=(index-1+examples.length)%examples.length;
+        el.innerText = examples[index];
+    }}
+    function useSuggestion(){{
+        const text = document.getElementById('suggestion-text').innerText;
+        document.querySelector('textarea').value = text;
+    }}
+    """)
 
 # ---------------- Launch ----------------
 if __name__ == "__main__":