Update app.py

app.py

@@ -218,8 +218,18 @@ body {
 
 # Interface Gradio
 # Interface Gradio
+def toggle_cover():
+    cover_html = """
+        <div style="position: fixed; top: 0; left: 0; right: 0; height: 64px; 
+             background: white; z-index: 9999; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+        </div>
+    """
+    return gr.update(value=cover_html), gr.update(value="Mostrar Barra")
+
+def remove_cover():
+    return gr.update(value=""), gr.update(value="Ocultar Barra")
+
 def demo():
-    # CSS personalizado com a faixa de cobertura
     custom_css = """
         #banner {
             display: none !important;
@@ -227,75 +237,32 @@ def demo():
         footer {
             display: none !important;
         }
-        /* Estilo do botão de controle */
-        #toggle-bar-btn {
-            position: fixed;
-            top: 10px;
-            right: 10px;
-            z-index: 10000;
-            background: #2563eb;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-            transition: background-color 0.2s;
-        }
-        #toggle-bar-btn:hover {
-            background: #1d4ed8;
-        }
-        /* Estilo da faixa de cobertura */
-        #cover-bar {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 64px;
-            background: white;
-            z-index: 9999;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
-        }
-        /* Classe para mostrar a faixa */
-        #cover-bar.visible {
-            display: block;
-        }
         /* Ajustes do container principal */
         .gradio-container {
             margin-top: 0 !important;
         }
-    """
-
-    # HTML para o botão e a faixa
-    cover_bar_html = """
-        <div id="cover-bar"></div>
-        <button id="toggle-bar-btn" onclick="toggleCoverBar()">Ocultar Barra</button>
-        <script>
-            function toggleCoverBar() {
-                const coverBar = document.getElementById('cover-bar');
-                const btn = document.getElementById('toggle-bar-btn');
-                if (coverBar.classList.contains('visible')) {
-                    coverBar.classList.remove('visible');
-                    btn.textContent = 'Ocultar Barra';
-                } else {
-                    coverBar.classList.add('visible');
-                    btn.textContent = 'Mostrar Barra';
-                }
-            }
-        </script>
+        /* Estilo do botão */
+        .cover-button {
+            position: fixed !important;
+            top: 10px !important;
+            right: 10px !important;
+            z-index: 10000 !important;
+        }
     """
 
     with gr.Blocks(theme=gr.themes.Default(primary_hue="blue", secondary_hue="gray"), css=custom_css) as demo:
-        # Adiciona o HTML do botão e faixa de cobertura
-        gr.HTML(cover_bar_html)
-        
+        # Componentes para controle da barra
+        with gr.Row():
+            cover_html = gr.HTML("")
+            toggle_btn = gr.Button("Ocultar Barra", elem_classes="cover-button")
+            is_covered = gr.State(False)
+
+        # Estados do sistema
         vector_db = gr.State()
         qa_chain = gr.State()
         collection_name = gr.State()
 
+        # Cabeçalho
         gr.Markdown(
             """<center><h2>Chatbot baseado em PDF</center></h2>
             <h3>Faça perguntas sobre seus documentos PDF</h3>"""
@@ -308,38 +275,50 @@ def demo():
             """
         )
 
+        # Passo 1 - Upload do PDF
         with gr.Tab("Passo 1 - Carregar PDF"):
             with gr.Row():
-                document = gr.Files(height=100, file_count="multiple", file_types=["pdf"], interactive=True, label="Carregue seus documentos PDF (único ou múltiplos)")
+                document = gr.Files(height=100, file_count="multiple", file_types=["pdf"], interactive=True, 
+                                 label="Carregue seus documentos PDF (único ou múltiplos)")
 
+        # Passo 2 - Processamento do documento
         with gr.Tab("Passo 2 - Processar documento"):
             with gr.Row():
-                db_btn = gr.Radio(["ChromaDB"], label="Tipo de banco de dados vetorial", value="ChromaDB", type="index", info="Escolha seu banco de dados vetorial")
+                db_btn = gr.Radio(["ChromaDB"], label="Tipo de banco de dados vetorial", value="ChromaDB", 
+                                type="index", info="Escolha seu banco de dados vetorial")
             with gr.Accordion("Opções avançadas - Divisor de texto do documento", open=False):
                 with gr.Row():
-                    slider_chunk_size = gr.Slider(minimum=100, maximum=1000, value=600, step=20, label="Tamanho do chunk", info="Tamanho do chunk", interactive=True)
+                    slider_chunk_size = gr.Slider(minimum=100, maximum=1000, value=600, step=20, 
+                                                label="Tamanho do chunk", info="Tamanho do chunk", interactive=True)
                 with gr.Row():
-                    slider_chunk_overlap = gr.Slider(minimum=10, maximum=200, value=40, step=10, label="Sobreposição do chunk", info="Sobreposição do chunk", interactive=True)
+                    slider_chunk_overlap = gr.Slider(minimum=10, maximum=200, value=40, step=10, 
+                                                   label="Sobreposição do chunk", info="Sobreposição do chunk", interactive=True)
             with gr.Row():
                 db_progress = gr.Textbox(label="Inicialização do banco de dados vetorial", value="Nenhum")
             with gr.Row():
-                db_btn = gr.Button("Gerar banco de dados vetorial")
+                process_btn = gr.Button("Gerar banco de dados vetorial")
 
+        # Passo 3 - Configuração da cadeia QA
         with gr.Tab("Passo 3 - Inicializar cadeia de QA"):
             with gr.Row():
-                llm_btn = gr.Radio(list_llm_simple, label="Modelos LLM", value=list_llm_simple[0], type="index", info="Escolha seu modelo LLM")
+                llm_btn = gr.Radio(list_llm_simple, label="Modelos LLM", value=list_llm_simple[0], 
+                                 type="index", info="Escolha seu modelo LLM")
             with gr.Accordion("Opções avançadas - Modelo LLM", open=False):
                 with gr.Row():
-                    slider_temperature = gr.Slider(minimum=0.01, maximum=1.0, value=0.7, step=0.1, label="Temperatura", info="Temperatura do modelo", interactive=True)
+                    slider_temperature = gr.Slider(minimum=0.01, maximum=1.0, value=0.7, step=0.1, 
+                                                 label="Temperatura", info="Temperatura do modelo", interactive=True)
                 with gr.Row():
-                    slider_maxtokens = gr.Slider(minimum=224, maximum=4096, value=1024, step=32, label="Máximo de Tokens", info="Máximo de tokens do modelo", interactive=True)
+                    slider_maxtokens = gr.Slider(minimum=224, maximum=4096, value=1024, step=32, 
+                                               label="Máximo de Tokens", info="Máximo de tokens do modelo", interactive=True)
                 with gr.Row():
-                    slider_topk = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="Amostras top-k", info="Amostras top-k do modelo", interactive=True)
+                    slider_topk = gr.Slider(minimum=1, maximum=10, value=3, step=1, 
+                                          label="Amostras top-k", info="Amostras top-k do modelo", interactive=True)
             with gr.Row():
                 llm_progress = gr.Textbox(value="Nenhum", label="Inicialização da cadeia de QA")
             with gr.Row():
-                qachain_btn = gr.Button("Inicializar cadeia de Perguntas e Respostas")
+                qa_init_btn = gr.Button("Inicializar cadeia de Perguntas e Respostas")
 
+        # Passo 4 - Interface do Chatbot
         with gr.Tab("Passo 4 - Chatbot"):
             chatbot = gr.Chatbot(height=300)
             with gr.Accordion("Avançado - Referências de documentos", open=False):
@@ -358,15 +337,67 @@ def demo():
                 submit_btn = gr.Button("Enviar mensagem")
                 clear_btn = gr.ClearButton([msg, chatbot], value="Limpar conversa")
 
+        # Eventos do sistema
+        toggle_btn.click(
+            fn=toggle_cover,
+            inputs=[],
+            outputs=[cover_html, toggle_btn],
+            show_progress=False
+        ).then(
+            fn=lambda: True,
+            outputs=[is_covered]
+        )
+
+        toggle_btn.click(
+            fn=remove_cover,
+            inputs=[],
+            outputs=[cover_html, toggle_btn],
+            show_progress=False,
+            trigger_mode=lambda s: s
+        ).then(
+            fn=lambda: False,
+            outputs=[is_covered]
+        )
+
         # Eventos de pré-processamento
-        db_btn.click(initialize_database, inputs=[document, slider_chunk_size, slider_chunk_overlap], outputs=[vector_db, collection_name, db_progress])
-        qachain_btn.click(initialize_LLM, inputs=[llm_btn, slider_temperature, slider_maxtokens, slider_topk, vector_db], outputs=[qa_chain, llm_progress]).then(
-            lambda: [None, "", 0, "", 0, "", 0], inputs=None, outputs=[chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page], queue=False)
+        process_btn.click(
+            initialize_database,
+            inputs=[document, slider_chunk_size, slider_chunk_overlap],
+            outputs=[vector_db, collection_name, db_progress]
+        )
+
+        qa_init_btn.click(
+            initialize_LLM,
+            inputs=[llm_btn, slider_temperature, slider_maxtokens, slider_topk, vector_db],
+            outputs=[qa_chain, llm_progress]
+        ).then(
+            lambda: [None, "", 0, "", 0, "", 0],
+            inputs=None,
+            outputs=[chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page],
+            queue=False
+        )
 
         # Eventos do chatbot
-        msg.submit(conversation, inputs=[qa_chain, msg, chatbot], outputs=[qa_chain, msg, chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page], queue=False)
-        submit_btn.click(conversation, inputs=[qa_chain, msg, chatbot], outputs=[qa_chain, msg, chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page], queue=False)
-        clear_btn.click(lambda: [None, "", 0, "", 0, "", 0], inputs=None, outputs=[chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page], queue=False)
+        msg.submit(
+            conversation,
+            inputs=[qa_chain, msg, chatbot],
+            outputs=[qa_chain, msg, chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page],
+            queue=False
+        )
+
+        submit_btn.click(
+            conversation,
+            inputs=[qa_chain, msg, chatbot],
+            outputs=[qa_chain, msg, chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page],
+            queue=False
+        )
+
+        clear_btn.click(
+            lambda: [None, "", 0, "", 0, "", 0],
+            inputs=None,
+            outputs=[chatbot, doc_source1, source1_page, doc_source2, source2_page, doc_source3, source3_page],
+            queue=False
+        )
 
     demo.queue().launch(debug=True)