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.
+Dark modern Gradio interface with compact arrow buttons on top of suggestion box.
 """
 
 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: 30px 10px 10px 10px; 
+    padding: 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-text { text-align: center; color: #eee; font-weight: 500; width: 100%; }
+.suggestion-box .suggestion-text { width: 100%; text-align: center; border:none; background:none; color:#eee; font-weight:500; padding-top:8px; }
 """
 
 # ---------------- Gradio UI ----------------
@@ -221,34 +221,17 @@ 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)
 
-    # 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;
-    }}
-    """)
+    # 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")
 
 # ---------------- Launch ----------------
 if __name__ == "__main__":