Update interface.py

interface.py

@@ -1,33 +1,35 @@
 import gradio as gr
-from ai_logic import responder_como_aldo, build_and_save_vector_store, testar_todos_modelos, MODELS, DEFAULT_MODEL
+from ai_logic import (
+    responder_como_aldo,
+    build_and_save_vector_store,
+    testar_todos_modelos,
+    MODELS,
+    DEFAULT_MODEL
+)
 
-# CSS personalizado
 css_customizado = """
 .gradio-container { max-width: 1400px !important; margin: 0 auto; width: 99%; }
 .gr-textbox textarea { font-size: 14px !important; line-height: 1.5 !important; }
+.resposta-container { background-color: #ffffff !important; color: #1a1a1a !important; border: 1px solid #e0e0e0 !important; border-radius: 20px !important; padding: 20px !important; margin: 20px 0 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; }
+.resposta-container pre code { color: #1a1a1a !important; background-color: #f8f9fa !important; }
+.pergunta-container { background-color: #f0f8ff !important; border-radius: 8px !important; padding: 15px !important; }
+.titulo-principal { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; padding: 20px !important; border-radius: 10px !important; margin-bottom: 20px !important; text-align: center !important; }
 .modelo-dropdown { margin-bottom: 15px !important; }
 """
 
 def criar_interface():
-    """Cria e retorna a interface Gradio em formato de chat"""
-
-    with gr.Blocks(title="Dr. Aldo Henrique - Chat IA", theme=gr.themes.Soft(), css=css_customizado) as interface:
+    with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
         # Cabeçalho
         gr.HTML("""
-        <div class="titulo-principal" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; text-align: center;">
-            <h1>🤖 Dr. Aldo Henrique - Foco em TI com diferentes modelos de IA</h1>
+        <div class="titulo-principal">
+            <h1>🤖 Dr. Aldo Henrique - Foco em TI com diferentes modelos de IA </h1>
             <p style="font-size: 14px; opacity: 0.9;">Conhecimento enriquecido com o conteúdo do <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Blog do Prof. Dr. Aldo Henrique</a></p>
         </div>
         """)
 
-        chat = gr.Chatbot(label="💬 Conversa com Dr. Aldo Henrique", show_label=True)
+        chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat")
 
         with gr.Row():
-            entrada = gr.Textbox(
-                placeholder="Digite sua pergunta aqui e pressione Enter...", 
-                show_label=False, 
-                lines=3
-            )
             modelo_select = gr.Dropdown(
                 choices=list(MODELS.keys()),
                 value=DEFAULT_MODEL,
@@ -36,25 +38,41 @@ def criar_interface():
                 elem_classes="modelo-dropdown"
             )
 
-        estado_chat = gr.State([])  # Para armazenar a conversa
-
-        def responder_mensagem(mensagem_usuario, modelo_escolhido, historico):
-            historico = historico or []
-            historico.append((mensagem_usuario, "🕒 Dr. Aldo Henrique está digitando..."))
-            yield gr.update(value=historico), historico
-
-            resposta = responder_como_aldo(mensagem_usuario, modelo_escolhido)
-            historico[-1] = (mensagem_usuario, resposta)
-            yield gr.update(value=historico), historico
+        with gr.Row():
+            user_input = gr.Textbox(
+                show_label=False,
+                placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
+                lines=1,
+                elem_id="entrada_usuario"
+            )
+            enviar_btn = gr.Button("Enviar", variant="primary")
+
+        estado_chat = gr.State([])
+
+        def responder(mensagens, user_msg, modelo):
+            mensagens = mensagens or []
+            mensagens.append(("Usuário", user_msg))
+            resposta_html = "<i>Dr. Aldo Henrique está digitando...</i>"
+            yield mensagens + [("Dr. Aldo", resposta_html)], ""  # Mostra o typing
+            resposta_final = responder_como_aldo(user_msg, modelo)
+            mensagens.append(("Dr. Aldo", resposta_final))
+            yield mensagens, ""
+
+        enviar_btn.click(
+            fn=responder,
+            inputs=[estado_chat, user_input, modelo_select],
+            outputs=[chatbot, user_input],
+            show_progress=True
+        )
 
-        entrada.submit(
-            responder_mensagem,
-            inputs=[entrada, modelo_select, estado_chat],
-            outputs=[chat, estado_chat],
+        user_input.submit(
+            fn=responder,
+            inputs=[estado_chat, user_input, modelo_select],
+            outputs=[chatbot, user_input],
             show_progress=True
-        ).then(lambda: "", None, entrada)  # Limpa o campo de entrada após enviar
+        )
 
-        # --- SEÇÃO PARA CONTROLE DO RAG ---
+        # RAG
         with gr.Accordion("⚙️ Controle do Conhecimento (RAG)", open=False):
             status_rag = gr.Textbox(label="Status do Retreino", interactive=False)
             botao_retreinar = gr.Button("🔄 Atualizar Conhecimento do Blog", variant="stop")
@@ -75,10 +93,10 @@ def criar_interface():
                     ["Qual a sua opinião sobre o uso de ponteiros em C++ moderno, baseada no seu blog?", "Mistral 7B"],
                     ["Resuma o que você escreveu sobre machine learning no seu blog.", "Zephyr 7B"],
                 ],
-                inputs=[entrada, modelo_select]
+                inputs=[user_input, modelo_select]
             )
 
-        # Status da API
+        # Status API
         with gr.Accordion("🔧 Status da API", open=False):
             status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8)
 
@@ -97,5 +115,4 @@ def criar_interface():
     return interface
 
 def configurar_interface():
-    """Configura e retorna a interface pronta para lançamento"""
     return criar_interface()