Update interface.py

interface.py

@@ -1,226 +1,160 @@
 import gradio as gr
-from ai_logic import (
-    responder_como_aldo,
-    build_and_save_vector_store,
-    testar_todos_modelos,
-    MODELS,
-    DEFAULT_MODEL
-)
-
-css_customizado = """
-/* Estilo global */
-* {
-    box-sizing: border-box;
+# Remova a importação de ai_logic se não tiver o arquivo.
+# from ai_logic import (
+#     responder_como_aldo,
+#     build_and_save_vector_store,
+#     MODELS,
+#     DEFAULT_MODEL
+# )
+
+# --- Funções de exemplo para o código funcionar sem o ai_logic ---
+def responder_como_aldo(user_msg, modelo):
+    return f"Resposta do modelo '{modelo}' para a pergunta: '{user_msg}'"
+
+def build_and_save_vector_store():
+    return "Conhecimento atualizado com sucesso.", None, None
+
+MODELS = {"Modelo Padrão": "gpt-3.5-turbo", "Mistral 7B": "mistral-7b", "Zephyr 7B": "zephyr-7b"}
+DEFAULT_MODEL = "Modelo Padrão"
+# --- Fim das funções de exemplo ---
+
+
+# CSS corrigido para layout flexível e responsivo
+css_corrigido = """
+/* Reseta básico para garantir consistência */
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
 }
 
-.gradio-container { 
-    max-width: 1400px !important; 
-    margin: 0 auto; 
-    width: 99%; 
-    display: flex; 
-    flex-direction: column; 
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    width: 100% !important;
 }
 
-.main-content {
-    min-height: 100vh; /* Garante que o conteúdo principal ocupe a tela inteira */
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+/* Contêiner principal que ocupa a altura total da tela */
+.view-port-container {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100vh !important; /* Ocupa 100% da altura da janela de visualização */
+    background-color: #f7fafc; /* Cor de fundo suave */
 }
 
-.titulo-principal { 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
-    color: white !important; 
+/* Estilos do Título */
+.titulo-principal {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
     padding: 20px !important;
-    border-radius: 10px !important; 
-    margin: 10px !important; 
-    text-align: center !important; 
-    height: 10vh !important;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
+    text-align: center !important;
+    flex-shrink: 0; /* Impede que o título encolha */
 }
 
+/* Contêiner do Chat - A MÁGICA ACONTECE AQUI */
 .chat-container {
-    height: 75vh !important; /* Ajustado para ocupar o espaço restante */
-    overflow-y: auto;
-    flex-grow: 1; /* Cresce para preencher o espaço disponível */
-    margin: 10px !important;
-}
-
-.input-container {
-    height: 15vh !important; /* Aumentado para melhor centralização */
+    flex-grow: 1; /* Faz o chat ocupar todo o espaço vertical disponível */
+    overflow-y: auto; /* Adiciona scroll INTERNO se o conteúdo exceder */
+    padding: 10px;
+    min-height: 0; /* Correção para flexbox em alguns navegadores */
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center; /* Centraliza horizontalmente */
-    flex-shrink: 0;
-    padding: 10px;
-    margin: 0 10px;
 }
 
-.additional-content {
-    overflow-y: auto;
-    padding: 20px 10px;
-    flex-shrink: 0;
+#chat {
+    flex-grow: 1;
 }
 
-.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: 10px 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; 
-}
-
-.modelo-dropdown { 
-    margin-bottom: 15px !important; 
-    width: 100%;
-    max-width: 300px; /* Limita a largura do dropdown */
+/* Contêiner da área de input */
+.input-container {
+    padding: 15px !important;
+    flex-shrink: 0; /* Impede que a área de input encolha */
+    background-color: #ffffff;
+    border-top: 1px solid #e2e8f0;
 }
 
 #entrada_usuario textarea {
-    color: white !important; 
-    font-size: 16px !important; 
-    background-color: #1a1a1a !important; 
-    min-height: 60px !important;
-    width: 100%;
-    max-width: 800px; /* Limita a largura do campo de texto */
+    font-size: 16px !important;
+    line-height: 1.5 !important;
+    min-height: 50px !important;
 }
 
-.message-content { 
-    font-size: larger; 
-    color: white !important; 
-    background-color: #1a1a1a !important; 
+/* Conteúdo adicional que fica abaixo e é rolável */
+.scrollable-content {
+    padding: 20px;
+    background-color: #edf2f7;
 }
 
-/* Estilo do botão Enviar */
-.gr-button.primary {
-    max-width: 150px; /* Limita a largura do botão */
-    margin: 10px auto; /* Centraliza horizontalmente */
+/* Estilos adicionais para manter a aparência original */
+.gr-textbox textarea {
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.modelo-dropdown {
+    margin-bottom: 15px !important;
 }
 
-/* Responsivo para dispositivos móveis */
+/* Responsividade */
 @media (max-width: 768px) {
     .titulo-principal {
-        height: 12vh !important;
         padding: 15px !important;
-        margin: 5px !important;
-    }
-    
-    .chat-container {
-        height: 73vh !important;
+        font-size: 0.9em;
     }
-    
     .input-container {
-        height: 15vh !important;
-        padding: 8px !important;
-    }
-    
-    #entrada_usuario textarea {
-        min-height: 50px !important;
-        font-size: 14px !important;
-    }
-}
-
-@media (max-width: 480px) {
-    .titulo-principal {
-        height: 15vh !important;
         padding: 10px !important;
-        margin: 5px !important;
-        font-size: 14px !important;
-    }
-    
-    .chat-container {
-        height: 70vh !important;
-    }
-    
-    .input-container {
-        height: 15vh !important;
-        padding: 5px !important;
-    }
-    
-    #entrada_usuario textarea {
-        min-height: 45px !important;
-        font-size: 13px !important;
-    }
-    
-    .gr-button.primary {
-        max-width: 120px !important;
     }
 }
 """
 
-def criar_interface():
-    with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
-        # Contêiner principal para o conteúdo visível (100vh)
-        with gr.Column(elem_classes="main-content"):
-            # Cabeçalho - 10% da tela
+def criar_interface_corrigida():
+    with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_corrigido) as interface:
+        # Contêiner principal que ocupa toda a tela (viewport)
+        with gr.Column(elem_classes="view-port-container"):
+            # Cabeçalho (Título)
             gr.HTML("""
             <div class="titulo-principal">
                 <h4>🤖 iAldo - Pergunte e aprenda</h4>
-                <p style="font-size: 14px; opacity: 0.9;">Converse com o <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Prof. Dr. Aldo Henrique</a></p>
+                <p style="font-size: 14px; opacity: 0.9; margin: 5px 0 0 0;">Converse com o <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Prof. Dr. Aldo Henrique</a></p>
             </div>
             """)
 
-            # Área do chat - 70% da tela
+            # Área do Chat (flexível)
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    label="💬 Chat com Dr. Aldo", 
+                    label="💬 Chat com Dr. Aldo",
                     elem_id="chat",
-                    height="100%"
+                    bubble_full_width=False,
+                    height="100%" # Ocupa 100% do pai (.chat-container)
                 )
 
-            # Área de entrada - 20% da tela
+            # Área de Entrada (fixa na parte inferior)
             with gr.Column(elem_classes="input-container"):
-                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"
-                    )
-
+                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",
+                        placeholder="Digite sua pergunta...",
                         lines=2,
-                        elem_id="entrada_usuario"
+                        elem_id="entrada_usuario",
+                        scale=4
                     )
-                    enviar_btn = gr.Button("Enviar", variant="primary")
+                    enviar_btn = gr.Button("Enviar", variant="primary", scale=1)
 
-        # Conteúdo adicional (fora da visualização inicial)
-        with gr.Column(elem_classes="additional-content"):
-            # RAG
+        # Conteúdo adicional que pode ser rolado
+        with gr.Column(elem_classes="scrollable-content"):
             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"])
+                download_faiss_file = gr.File(label="Download do Índice FAISS", interactive=False)
+                download_urls_file = gr.File(label="Download das URLs Processadas", interactive=False)
 
-            # Exemplos
             with gr.Accordion("📚 Exemplos de Perguntas", open=False):
                 gr.Examples(
                     examples=[
@@ -231,70 +165,62 @@ def criar_interface():
                     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.
                 """)
 
+        # --- Lógica de Eventos (permanece a mesma) ---
         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
+            chat_history.append([user_msg, None])
+            yield chat_history, gr.update(value="", interactive=False)
+
             resposta_final = responder_como_aldo(user_msg, modelo)
-            
-            # Atualiza com a resposta final
             chat_history[-1][1] = resposta_final
-            yield chat_history, ""
+            yield chat_history, gr.update(interactive=True)
 
         enviar_btn.click(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select],
-            outputs=[chatbot, user_input],
-            show_progress=True
+            outputs=[chatbot, user_input]
         )
-
         user_input.submit(
             fn=responder,
             inputs=[chatbot, user_input, modelo_select],
-            outputs=[chatbot, user_input],
-            show_progress=True
+            outputs=[chatbot, user_input]
         )
-
         botao_retreinar.click(
             fn=build_and_save_vector_store,
-            outputs=[status_rag, download_faiss_file, download_urls_file],
-            show_progress=True
+            outputs=[status_rag, download_faiss_file, download_urls_file]
         )
 
-        # Foco automático no campo de texto ao abrir
-        gr.HTML("""
-        <script>
-          window.addEventListener("load", function() {
-              const textarea = document.querySelector("#entrada_usuario textarea");
-              if (textarea) {
-                  setTimeout(() => textarea.focus(), 100);
-              }
-          });
-        </script>
+        interface.load(_js="""
+        function () {
+            setTimeout(() => {
+                const textarea = document.querySelector("#entrada_usuario textarea");
+                if (textarea) {
+                    textarea.focus();
+                }
+            }, 100);
+        }
         """)
 
     return interface
 
 def configurar_interface():
-    return criar_interface()
+    return criar_interface_corrigida()
+
+# Para rodar o app:
+if __name__ == "__main__":
+    app = configurar_interface()
+    app.launch()