Update interface.py

interface.py

@@ -8,36 +8,84 @@ from ai_logic import (
 )
 
 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: 00px !important; border-radius: 10px !important; margin-bottom: 2px !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;}
-#id {height:33vh !important;}
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto;
+    width: 99%;
+}
+
+.conteudo-principal {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 10px;
+}
+
+.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: 10px !important;
+    border-radius: 10px !important;
+    margin-bottom: 10px !important;
+    text-align: center !important;
+}
+
+.modelo-dropdown {
+    margin-bottom: 10px !important;
+}
+
 #entrada_usuario textarea {
-    color: white !important; font-size: x-large !important; background-color: #1a1a1a !important;  /* opcional: fundo escuro para combinar com o texto branco */
+    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:
-        # Cabeçalho
-        gr.HTML("""
-        <div class="titulo-principal">
-            <h1>🤖 iAldo - Pergunte e aprenda</h1>
-            <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>
-        </div>
-        """)
-
+        with gr.Column(elem_classes="conteudo-principal"):
+            gr.HTML("""
+            <div class="titulo-principal">
+                <h1>🤖 iAldo - Pergunte e aprenda</h1>
+                <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>
+            </div>
+            """)
 
-        chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat")
+            chatbot = gr.Chatbot(label="💬 Chat com Dr. Aldo", elem_id="chat", scale=1)
 
-        with gr.Row():
             modelo_select = gr.Dropdown(
                 choices=list(MODELS.keys()),
                 value=DEFAULT_MODEL,
@@ -46,37 +94,32 @@ def criar_interface():
                 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=5,
-                elem_id="entrada_usuario"
-            )
-            enviar_btn = gr.Button("Enviar", variant="primary")
+            with gr.Row():
+                user_input = gr.Textbox(
+                    show_label=False,
+                    placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
+                    lines=4,
+                    elem_id="entrada_usuario"
+                )
+                enviar_btn = gr.Button("Enviar", variant="primary")
 
+        # Função de resposta
         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, ""
 
+        # Eventos de envio
         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],
@@ -118,12 +161,7 @@ def criar_interface():
             ### 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.
             """)
-        
 
         # Foco automático no campo de texto ao abrir
         gr.HTML("""
@@ -135,7 +173,7 @@ def criar_interface():
               }
           });
         </script>
-        """)    
+        """)
 
     return interface