Update interface.py

interface.py

@@ -8,65 +8,77 @@ from ai_logic import (
 )
 
 css_customizado = """
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100vh;
-    overflow: hidden;
+.gradio-container { 
+    max-width: 1400px !important; 
+    margin: 0 auto; 
+    width: 99%; 
+    height: 100vh !important; /* Define a altura total da janela */
+    display: flex; 
+    flex-direction: column; 
 }
-
-.gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto;
-    height: 100vh;
+.main-content {
+    flex: 1; /* Faz o conteúdo principal ocupar o espaço disponível */
+    overflow-y: auto; /* Adiciona rolagem vertical se necessário */
     display: flex;
     flex-direction: column;
+    min-height: 0; /* Evita problemas de altura em flex containers */
 }
-
-.conteudo-principal {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    padding: 10px;
+.gr-textbox textarea { 
+    font-size: 14px !important; 
+    line-height: 1.5 !important; 
 }
-
-.titulo-principal {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    padding: 10px !important;
-    border-radius: 10px !important;
-    margin-bottom: 10px !important;
-    text-align: center !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; 
 }
-
-.chat-area {
-    flex: 1;
-    overflow-y: auto;
-    margin-bottom: 10px;
+.resposta-container pre code { 
+    color: #1a1a1a !important; 
+    background-color: #f8f9fa !important; 
 }
-
-.modelo-dropdown {
-    margin-bottom: 10px !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; /* Ajustado para padding consistente */
+    border-radius: 10px !important; 
+    margin-bottom: 10px !important; 
+    text-align: center !important; 
+}
+.modelo-dropdown { 
+    margin-bottom: 15px !important; 
+}
+.unequal-height.svelte-1xp0cw7 { 
+    align-items: normal !important; 
+}
+div.svelte-1xp0cw7 { 
+    display: grid !important; 
 }
-
 #entrada_usuario textarea {
-    color: white !important;
-    font-size: x-large !important;
-    background-color: #1a1a1a !important;
+    color: white !important; 
+    font-size: x-large !important; 
+    background-color: #1a1a1a !important; 
 }
-
-.message-content {
-    font-size: larger;
-    color: white !important;
-    background-color: #1a1a1a !important;
+.message-content { 
+    font-size: larger; 
+    color: white !important; 
+    background-color: #1a1a1a !important; 
 }
 """
 
 def criar_interface():
     with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
-        with gr.Column(elem_classes="conteudo-principal"):
+        # Contêiner principal para o conteúdo visível
+        with gr.Column(elem_classes="main-content"):
+            # Cabeçalho
             gr.HTML("""
             <div class="titulo-principal">
                 <h1>🤖 iAldo - Pergunte e aprenda</h1>
@@ -74,39 +86,98 @@ def criar_interface():
             </div>
             """)
 
-            with gr.Column(elem_classes="chat-area"):
-                chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat")
+            chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat")
 
-            modelo_select = gr.Dropdown(
-                choices=list(MODELS.keys()),
-                value=DEFAULT_MODEL,
-                label="🧠 Selecione o Modelo de IA",
-                info="Escolha o modelo para responder",
-                elem_classes="modelo-dropdown"
-            )
+            with gr.Row():
+                modelo_select = gr.Dropdown(
+                    choices=list(MODELS.keys()),
+                    value=DEFAULT_MODEL,
+                    label="🧠 Selecione o Modelo de IA",
+                    info="Escolha o modelo para responder",
+                    elem_classes="modelo-dropdown"
+                )
 
             with gr.Row():
                 user_input = gr.Textbox(
                     show_label=False,
                     placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
-                    lines=3,
+                    lines=5,
                     elem_id="entrada_usuario"
                 )
                 enviar_btn = gr.Button("Enviar", variant="primary")
 
-        # Função de resposta
+        # Elementos fora da área visível inicial (acordions abaixo do botão Enviar)
+        with gr.Column():
+            # 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")
+                download_faiss_file = gr.File(label="Download do Índice FAISS", interactive=False, file_count="single", file_types=[".pkl"])
+                download_urls_file = gr.File(label="Download das URLs Processadas", interactive=False, file_count="single", file_types=[".pkl"])
+
+            # Exemplos
+            with gr.Accordion("📚 Exemplos de Perguntas", open=False):
+                gr.Examples(
+                    examples=[
+                        ["Como implementar uma lista ligada em C com todas as operações básicas?", DEFAULT_MODEL],
+                        ["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=[user_input, modelo_select]
+                )
+
+            # Status API
+            with gr.Accordion("🔧 Status da API", open=False):
+                status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8)
+
+            # Informações
+            with gr.Accordion("ℹ️ Informações", open=False):
+                gr.Markdown("""
+                ### Sobre o Dr. Aldo Henrique:
+                - **Especialidade**: Linguagens C, Java, Desenvolvimento Web, Inteligência Artificial
+                - **Conhecimento Adicional**: Conteúdo do blog aldohenrique.com.br
+
+                ### Dicas para melhores respostas:
+                - Faça perguntas específicas sobre o conteúdo do blog para ver o RAG em ação!
+                - Peça resumos ou opiniões sobre temas que o professor aborda.
+                """)
+
         def responder(chat_history, user_msg, modelo):
             if not user_msg.strip():
                 return chat_history, ""
+            
+            # Adiciona a mensagem do usuário e uma resposta temporária
             chat_history = chat_history + [[user_msg, "Dr. Aldo Henrique está digitando..."]]
             yield chat_history, ""
+            
+            # Gera a resposta real
             resposta_final = responder_como_aldo(user_msg, modelo)
+            
+            # Atualiza com a resposta final
             chat_history[-1][1] = resposta_final
             yield chat_history, ""
 
-        enviar_btn.click(fn=responder, inputs=[chatbot, user_input, modelo_select], outputs=[chatbot, user_input])
-        user_input.submit(fn=responder, inputs=[chatbot, user_input, modelo_select], outputs=[chatbot, user_input])
-
+        enviar_btn.click(
+            fn=responder,
+            inputs=[chatbot, user_input, modelo_select],
+            outputs=[chatbot, user_input],
+            show_progress=True
+        )
+
+        user_input.submit(
+            fn=responder,
+            inputs=[chatbot, user_input, modelo_select],
+            outputs=[chatbot, user_input],
+            show_progress=True
+        )
+
+        botao_retreinar.click(
+            fn=build_and_save_vector_store,
+            outputs=[status_rag, download_faiss_file, download_urls_file],
+            show_progress=True
+        )
+
+        # Foco automático no campo de texto ao abrir
         gr.HTML("""
         <script>
           window.addEventListener("load", function() {
@@ -121,7 +192,4 @@ def criar_interface():
     return interface
 
 def configurar_interface():
-    return criar_interface()
-
-if __name__ == "__main__":
-    configurar_interface().launch()
+    return criar_interface()