Update interface.py

interface.py

@@ -8,147 +8,118 @@ from ai_logic import (
 )
 
 css_customizado = """
-.gradio-container { 
-    max-width: 1400px !important; 
-    margin: 0 auto; 
-    width: 100% !important; 
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto;
+    width: 99%;
     height: 100vh !important;
-    display: flex; 
-    flex-direction: column; 
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
 }
 
 .main-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh !important;
+    height: 100vh;
     overflow: hidden;
+    flex-shrink: 0;
 }
 
-.titulo-principal { 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
-    color: white !important; 
+.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; 
+    border-radius: 10px !important;
+    margin-bottom: 10px !important;
+    text-align: center !important;
     flex-shrink: 0;
 }
 
+.chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
 .chat-container {
-    flex-grow: 1 !important;
+    flex: 1;
     overflow-y: auto;
-    margin: 10px !important;
-    min-height: 40vh !important;
+    margin-bottom: 10px;
 }
 
 .input-container {
     flex-shrink: 0;
-    padding: 10px !important;
+    padding: 10px 0;
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    justify-content: center;
 }
 
 .additional-content {
     overflow-y: auto;
-    padding: 10px !important;
-    flex-shrink: 0;
-}
-
-.gr-textbox textarea { 
-    font-size: 14px !important; 
-    line-height: 1.5 !important; 
+    padding-top: 20px;
 }
 
-.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; 
+.gr-textbox textarea {
+    font-size: 14px !important;
+    line-height: 1.5 !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; 
+.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;
 }
 
-.modelo-dropdown { 
-    margin-bottom: 15px !important; 
+.resposta-container pre code {
+    color: #1a1a1a !important;
+    background-color: #f8f9fa !important;
 }
 
-.unequal-height.svelte-1xp0cw7 { 
-    align-items: normal !important; 
+.pergunta-container {
+    background-color: #f0f8ff !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
 }
 
-div.svelte-1xp0cw7 { 
-    display: grid !important; 
+.modelo-dropdown {
+    margin-bottom: 15px !important;
 }
 
 #entrada_usuario textarea {
-    color: white !important; 
-    font-size: large !important; 
-    background-color: #1a1a1a !important; 
+    color: white !important;
+    font-size: large !important;
+    background-color: #1a1a1a !important;
     min-height: 60px !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;
 }
 
-/* Responsivo para dispositivos móveis */
+/* Responsivo */
 @media (max-width: 768px) {
     .titulo-principal {
         padding: 15px !important;
-        margin: 5px !important;
     }
-    
-    .chat-container {
-        min-height: 35vh !important;
-    }
-    
-    .input-container {
-        padding: 5px !important;
-    }
-    
     #entrada_usuario textarea {
         min-height: 50px !important;
         font-size: 16px !important;
     }
 }
-
-@media (max-width: 480px) {
-    .titulo-principal {
-        padding: 10px !important;
-        margin: 5px !important;
-    }
-    
-    .chat-container {
-        min-height: 30vh !important;
-    }
-    
-    .input-container {
-        padding: 5px !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
         with gr.Column(elem_classes="main-content"):
-            # Cabeçalho
             gr.HTML("""
             <div class="titulo-principal">
                 <h4>🤖 iAldo - Pergunte e aprenda</h4>
@@ -156,44 +127,39 @@ def criar_interface():
             </div>
             """)
 
-            # Área do chat
-            with gr.Column(elem_classes="chat-container"):
-                chatbot = gr.Chatbot(
-                    label="💬 Chat com Dr. Aldo", 
-                    elem_id="chat",
-                    height="100%"
-                )
-
-            # Área de entrada
-            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"
+            with gr.Column(elem_classes="chat-area"):
+                with gr.Column(elem_classes="chat-container"):
+                    chatbot = gr.Chatbot(
+                        label="💬 Chat com Dr. Aldo",
+                        elem_id="chat",
+                        height="100%"
                     )
 
-                with gr.Row():
-                    user_input = gr.Textbox(
-                        show_label=False,
-                        placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
-                        lines=2,
-                        elem_id="entrada_usuario"
-                    )
-                    enviar_btn = gr.Button("Enviar", variant="primary")
+                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"
+                        )
+                    with gr.Row():
+                        user_input = gr.Textbox(
+                            show_label=False,
+                            placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
+                            lines=2,
+                            elem_id="entrada_usuario"
+                        )
+                        enviar_btn = gr.Button("Enviar", variant="primary")
 
-        # Conteúdo adicional (fora da visualização inicial)
         with gr.Column(elem_classes="additional-content"):
-            # 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=[
@@ -204,11 +170,9 @@ 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:
@@ -223,15 +187,11 @@ def criar_interface():
         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, ""
 
@@ -255,19 +215,18 @@ def criar_interface():
             show_progress=True
         )
 
-        # 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);
-              }
-          });
+            window.addEventListener("load", function() {
+                const textarea = document.querySelector("#entrada_usuario textarea");
+                if (textarea) {
+                    setTimeout(() => textarea.focus(), 100);
+                }
+            });
         </script>
         """)
 
     return interface
 
 def configurar_interface():
-    return criar_interface()
+    return criar_interface()