Update interface.py

interface.py

@@ -1,4 +1,3 @@
-import gradio as gr
 from ai_logic import (
     responder_como_aldo, 
     build_and_save_vector_store, 
@@ -7,277 +6,124 @@ from ai_logic import (
     DEFAULT_MODEL
 )
 
-# CSS personalizado para estilo de chat
+# CSS personalizado
 css_customizado = """
-.gradio-container { 
-    max-width: 1200px !important; 
-    width:98%;
-    margin: 0 auto !important; 
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-/* Estilo do chat */
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 70vh;
-    background: #f9f9f9;
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 15px;
-    margin-bottom: 20px;
-    background: white;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-}
-
-.message {
-    padding: 12px 16px;
-    margin-bottom: 12px;
-    border-radius: 18px;
-    max-width: 80%;
-    line-height: 1.4;
-    position: relative;
-}
-
-.user-message {
-    background: #0078d4;
-    color: white;
-    margin-left: auto;
-    border-bottom-right-radius: 4px;
-}
-
-.bot-message {
-    background: #f1f1f1;
-    color: #333;
-    margin-right: auto;
-    border-bottom-left-radius: 4px;
-}
-
-.message-header {
-    font-weight: bold;
-    margin-bottom: 4px;
-    font-size: 0.9em;
-}
-
-.user-message .message-header {
-    color: #e6f2ff;
-}
-
-.bot-message .message-header {
-    color: #666;
-}
-
-/* Área de entrada */
-.input-area {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-.textbox {
-    flex: 1;
-}
-
-.send-button {
-    height: 40px !important;
-    min-width: 100px !important;
-}
-
-.model-selector {
-    margin-top: 15px;
-    background: white;
-    padding: 15px;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-}
-
-/* Cabeçalho */
-.header {
-    text-align: center;
-    margin-bottom: 20px;
-    padding: 15px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border-radius: 10px;
-}
-
-/* Componentes de controle */
-.control-section {
-    margin-top: 20px;
-    background: white;
-    padding: 15px;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-}
-
-/* Scrollbar personalizada */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #a8a8a8;
-}
+.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: 20px !important; border-radius: 10px !important; margin-bottom: 20px !important; text-align: center !important; }
+.modelo-dropdown { margin-bottom: 15px !important; }
 """
 
-def format_message(text, is_user=False, model_name=None):
-    """Formata a mensagem para exibição no chat"""
-    role = "Você" if is_user else "Dr. Aldo"
-    model_info = f"<small>(Modelo: {model_name})</small>" if model_name and not is_user else ""
-    return f"""
-    <div class="message {'user-message' if is_user else 'bot-message'}">
-        <div class="message-header">{role} {model_info}</div>
-        {text}
-    </div>
-    """
-
 def criar_interface():
-    """Cria e retorna a interface Gradio no estilo chat"""
+    """Cria e retorna a interface Gradio"""
     
-    with gr.Blocks(title="Chat com Dr. Aldo Henrique", theme=gr.themes.Soft(), css=css_customizado) as interface:
-        # Estado para armazenar o histórico do chat
-        chat_history = gr.State([])
-        
+    with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
         # Cabeçalho
         gr.HTML("""
-        <div class="header">
-            <h1>🤖 Chat com Dr. Aldo Henrique</h1>
-            <p>Conhecimento enriquecido com o conteúdo do <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Blog do Prof. Dr. Aldo Henrique</a></p>
+        <div class="titulo-principal">
+            <h1>🤖 Dr. Aldo Henrique - Foco em TI com diferentes modelos de IA </h1>
+            <p style="font-size: 14px; opacity: 0.9;">Conhecimento enriquecido com o conteúdo do <a href="https://aldohenrique.com.br/" style="color: white; text-decoration: underline;">Blog do Prof. Dr. Aldo Henrique</a></p>
         </div>
         """)
         
-        # Área do chat
-        with gr.Column(elem_classes="chat-container"):
-            # Histórico de mensagens
-            chat_display = gr.HTML(
-                value="<div style='text-align: center; padding: 20px; color: #666;'>Inicie uma conversa com o Dr. Aldo...</div>",
-                elem_classes="chat-messages"
-            )
-            
-            # Área de entrada
-            with gr.Row(elem_classes="input-area"):
-                user_input = gr.Textbox(
-                    placeholder="Digite sua mensagem...",
-                    show_label=False,
-                    container=False,
-                    elem_classes="textbox"
+        # Interface principal
+        with gr.Row():
+            # Coluna de entrada
+            with gr.Column(scale=2):
+                gr.Markdown("### 📝 Faça sua pergunta:")
+                entrada = gr.Textbox(
+                    label="", 
+                    placeholder="Digite sua pergunta aqui.", 
+                    lines=6, 
+                    elem_classes="pergunta-container"
                 )
-                send_button = gr.Button("Enviar", variant="primary", elem_classes="send-button")
-            
-            # Seletor de modelo
-            with gr.Column(elem_classes="model-selector"):
-                model_select = gr.Dropdown(
-                    choices=list(MODELS.keys()),
-                    value=DEFAULT_MODEL,
-                    label="🧠 Modelo de IA",
-                    info="Selecione o modelo para gerar respostas"
+                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"
                 )
-        
-        # Seção de controle (colapsada por padrão)
-        with gr.Accordion("⚙️ Controles e Configurações", open=False):
-            with gr.Column(elem_classes="control-section"):
-                # Botão para limpar o chat
-                clear_button = gr.Button("🧹 Limpar Conversa")
-                
-                # Controle do RAG
-                with gr.Accordion("🔄 Atualizar Conhecimento (RAG)", open=False):
-                    status_rag = gr.Textbox(label="Status do Retreino", interactive=False)
-                    retrain_button = gr.Button("Atualizar Conhecimento do Blog", variant="stop")
-                    download_faiss = gr.File(label="Download do Índice FAISS", interactive=False)
-                    download_urls = gr.File(label="Download das URLs Processadas", interactive=False)
-            
-            # Status e informações
-            with gr.Accordion("ℹ️ Informações e Status", 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
-                - Peça resumos ou opiniões sobre temas que o professor aborda
-                """)
-                api_status = gr.Textbox(label="Status da API", interactive=False, lines=3)
-        
-        # Manipulação de eventos
-        def respond(user_message, history, selected_model):
-            # Adiciona mensagem do usuário ao histórico
-            history.append((user_message, True, None))
-            
-            # Obtém resposta do modelo
-            bot_response = responder_como_aldo(user_message, selected_model)
-            
-            # Adiciona resposta ao histórico
-            history.append((bot_response, False, selected_model))
-            
-            # Formata todo o histórico para exibição
-            formatted_history = []
-            for msg, is_user, model in history:
-                formatted_history.append(format_message(msg, is_user, model if not is_user else None))
-            
-            return {"": "\n".join(formatted_history)}, history
+                with gr.Row():
+                    botao_perguntar = gr.Button("🤔 Perguntar ao Dr. Aldo", variant="primary", size="lg")
+                    #botao_testar = gr.Button("🔍 Testar Modelos", variant="secondary")
+
+            # Coluna de saída
+            with gr.Column(scale=3):
+                gr.Markdown("### 💬 Resposta do Dr. Aldo Henrique:")
+                saida = gr.HTML(
+                    label="", 
+                    value="<div style='padding: 20px; text-align: center; color: #1a1a1a;'>Aguardando sua pergunta...</div>", 
+                    elem_classes="resposta-container"
+                )
+
+        # --- SEÇÃO PARA CONTROLE DO 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")
+            # Componentes para download
+            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=[entrada, modelo_select]
+            )
         
-        # Evento de enviar mensagem
-        send_button.click(
-            fn=respond,
-            inputs=[user_input, chat_history, model_select],
-            outputs=[chat_display, chat_history],
-            show_progress=True
-        ).then(
-            lambda: "",  # Limpa a caixa de entrada
-            outputs=user_input
-        )
+        # Status da API
+        with gr.Accordion("🔧 Status da API", open=False):
+            status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8)
         
-        # Evento de pressionar Enter
-        user_input.submit(
-            fn=respond,
-            inputs=[user_input, chat_history, model_select],
-            outputs=[chat_display, chat_history],
+        # 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.
+            """)
+            
+        # Configuração dos eventos
+        botao_perguntar.click(
+            fn=responder_como_aldo, 
+            inputs=[entrada, modelo_select], 
+            outputs=saida, 
             show_progress=True
-        ).then(
-            lambda: "",  # Limpa a caixa de entrada
-            outputs=user_input
         )
         
-        # Evento de limpar chat
-        def clear_chat():
-            return {"": "<div style='text-align: center; padding: 20px; color: #666;'>Conversa limpa. Inicie uma nova conversa...</div>"}, []
+        #botao_testar.click(
+        #    fn=testar_todos_modelos, 
+        #    outputs=status_api, 
+        #    show_progress=True
+        #)
         
-        clear_button.click(
-            fn=clear_chat,
-            outputs=[chat_display, chat_history]
-        )
-        
-        # Evento de atualizar conhecimento
-        retrain_button.click(
+        botao_retreinar.click(
             fn=build_and_save_vector_store,
-            outputs=[status_rag, download_faiss, download_urls],
+            outputs=[status_rag, download_faiss_file, download_urls_file],
             show_progress=True
         )
-        
-        # Evento de teste de modelos (opcional)
-        # test_button.click(
-        #     fn=testar_todos_modelos,
-        #     outputs=api_status,
-        #     show_progress=True
-        # )
     
     return interface