Update interface.py

interface.py

@@ -8,53 +8,54 @@ from ai_logic import (
 )
 
 css_customizado = """
-.gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto;
-    width: 99%;
-    height: 100vh !important;
-    display: flex;
-    flex-direction: column;
+.gradio-container { 
+    max-width: 1400px !important; 
+    margin: 0 auto; 
+    width: 99%; 
+    height: 100% !important;
+    display: flex; 
+    flex-direction: column; 
     overflow: hidden;
 }
 
 .main-content {
+    height: 100vh !important;
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    justify-content: center;
     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-bottom: 10px !important;
-    text-align: center !important;
-    flex-shrink: 0;
-}
-
-.chat-area {
-    flex: 1;
+    border-radius: 10px !important; 
+    margin-bottom: 10px !important; 
+    text-align: center !important; 
+    height: 10vh !important;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
 }
 
 .chat-container {
-    flex: 1;
+    height: 50vh !important;
     overflow-y: auto;
+    flex-shrink: 0;
     margin-bottom: 10px;
 }
 
 .input-container {
-    flex-shrink: 0;
-    padding: 10px 0;
+    height: 10vh !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 10px 0;
 }
 
 .additional-content {
@@ -62,64 +63,99 @@ css_customizado = """
     padding-top: 20px;
 }
 
-.gr-textbox textarea {
-    font-size: 14px !important;
-    line-height: 1.5 !important;
+.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 { 
+    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;
+.resposta-container pre code { 
+    color: #1a1a1a !important; 
+    background-color: #f8f9fa !important; 
 }
 
-.pergunta-container {
-    background-color: #f0f8ff !important;
-    border-radius: 8px !important;
-    padding: 15px !important;
+.pergunta-container { 
+    background-color: #f0f8ff !important; 
+    border-radius: 8px !important; 
+    padding: 15px !important; 
 }
 
-.modelo-dropdown {
-    margin-bottom: 15px !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: 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 */
+/* Responsivo para dispositivos móveis */
 @media (max-width: 768px) {
     .titulo-principal {
+        height: 12vh !important;
         padding: 15px !important;
     }
+    
+    .chat-container {
+        height: 48vh !important;
+    }
+    
+    .input-container {
+        height: 10vh !important;
+    }
+    
     #entrada_usuario textarea {
         min-height: 50px !important;
         font-size: 16px !important;
     }
 }
+
+@media (max-width: 480px) {
+    .titulo-principal {
+        height: 15vh !important;
+        padding: 10px !important;
+    }
+    
+    .chat-container {
+        height: 55vh !important;
+    }
+    
+    .input-container {
+        height: 10vh !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
             gr.HTML("""
             <div class="titulo-principal">
                 <h4>🤖 iAldo - Pergunte e aprenda</h4>
@@ -127,39 +163,44 @@ def criar_interface():
             </div>
             """)
 
-            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%"
-                    )
+            # Área do chat - 70% da tela
+            with gr.Column(elem_classes="chat-container"):
+                chatbot = gr.Chatbot(
+                    label="💬 Chat com Dr. Aldo", 
+                    elem_id="chat",
+                    height="100%"
+                )
 
-                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")
+            # Área de entrada - 20% da tela
+            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=[
@@ -170,9 +211,11 @@ 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:
@@ -187,11 +230,15 @@ 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, ""
 
@@ -215,14 +262,15 @@ 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>
         """)