Versão inicial do sistema

.gitignore

@@ -0,0 +1,12 @@
+# Arquivos de ambiente virtual
+.venv311/
+__pycache__/
+
+# Arquivo de segredos
+.env
+
+# Arquivos de upload temporários
+uploads/
+
+# Arquivos do VS Code
+.vscode/

Dockerfile

@@ -0,0 +1,18 @@
+# Usa uma imagem oficial do Python como base
+FROM python:3.11-slim
+
+# Define o diretório de trabalho dentro do contêiner
+WORKDIR /app
+
+# Copia o arquivo de dependências primeiro para aproveitar o cache do Docker
+COPY requirements.txt requirements.txt
+
+# Instala as dependências
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copia todo o resto do código do projeto para o diretório de trabalho
+COPY . .
+
+# Comando para iniciar o servidor web de produção (gunicorn)
+# Ele vai procurar por uma variável chamada 'app' no arquivo 'app.py'
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,112 @@
+# app.py
+
+from flask import Flask, render_template, request, Response
+import markdown2
+import json
+import time
+import os
+import uuid # Para gerar nomes de arquivo únicos
+
+# Importações do LangChain
+from langchain.prompts import PromptTemplate
+from langchain.chains import LLMChain
+
+# Importa os LLMs
+from llms import grok_llm, claude_llm, gemini_llm
+
+# Importa os prompts
+from config import PROMPT_GROK, PROMPT_CLAUDE_SONNET, PROMPT_GEMINI
+
+# Importa nosso processador RAG
+from rag_processor import get_relevant_context
+
+app = Flask(__name__)
+
+app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024 
+
+if not os.path.exists('uploads'):
+    os.makedirs('uploads')
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/process', methods=['POST'])
+def process():
+    form_data = request.form
+    files = request.files.getlist('files')
+    mode = form_data.get('mode', 'real')
+    
+    temp_file_paths = []
+    if mode == 'real':
+        for file in files:
+            if file and file.filename:
+                unique_filename = str(uuid.uuid4()) + "_" + file.filename
+                file_path = os.path.join('uploads', unique_filename)
+                file.save(file_path)
+                temp_file_paths.append(file_path)
+
+    def generate_stream(current_mode, form_data, file_paths):
+        # Lógica de simulação atualizada para a nova ordem
+        if current_mode == 'test':
+            mock_text = form_data.get('mock_text', 'Este é um texto de simulação.')
+            mock_html = markdown2.markdown(mock_text, extras=["fenced-code-blocks", "tables"])
+            
+            yield f"data: {json.dumps({'progress': 0, 'message': 'Simulando Etapa 1: GROK...'})}\n\n"
+            time.sleep(1)
+            # O primeiro resultado agora vai para a coluna do GROK
+            yield f"data: {json.dumps({'progress': 33, 'message': 'Simulando Etapa 2: Claude Sonnet...', 'partial_result': {'id': 'grok-output', 'content': mock_html}})}\n\n"
+            time.sleep(1)
+            # O segundo resultado vai para a coluna do Sonnet
+            yield f"data: {json.dumps({'progress': 66, 'message': 'Simulando Etapa 3: Gemini...', 'partial_result': {'id': 'sonnet-output', 'content': mock_html}})}\n\n"
+            time.sleep(1)
+            yield f"data: {json.dumps({'progress': 100, 'message': 'Simulação concluída!', 'partial_result': {'id': 'gemini-output', 'content': mock_html}, 'done': True})}\n\n"
+        
+        # Lógica real com a ordem de execução alterada
+        else:
+            solicitacao_usuario = form_data.get('solicitacao', '')
+            if not solicitacao_usuario:
+                yield f"data: {json.dumps({'error': 'Solicitação não fornecida.'})}\n\n"
+                return
+
+            try:
+                # --- ETAPA RAG (continua sendo o passo zero) ---
+                yield f"data: {json.dumps({'progress': 0, 'message': 'Processando arquivos e extraindo contexto...'})}\n\n"
+                rag_context = get_relevant_context(file_paths, solicitacao_usuario)
+                
+                # --- ETAPA 1: GROK (agora o primeiro) ---
+                yield f"data: {json.dumps({'progress': 15, 'message': 'O GROK está processando sua solicitação com os arquivos...'})}\n\n"
+                prompt_grok = PromptTemplate(template=PROMPT_GROK, input_variables=["solicitacao_usuario", "rag_context"])
+                chain_grok = LLMChain(llm=grok_llm, prompt=prompt_grok)
+                resposta_grok = chain_grok.invoke({"solicitacao_usuario": solicitacao_usuario, "rag_context": rag_context})['text']
+                grok_html = markdown2.markdown(resposta_grok, extras=["fenced-code-blocks", "tables"])
+                yield f"data: {json.dumps({'progress': 33, 'message': 'Agora, o Claude Sonnet está aprofundando o texto...', 'partial_result': {'id': 'grok-output', 'content': grok_html}})}\n\n"
+                
+                # --- ETAPA 2: Claude Sonnet (agora o segundo) ---
+                prompt_sonnet = PromptTemplate(template=PROMPT_CLAUDE_SONNET, input_variables=["solicitacao_usuario", "texto_para_analise"])
+                
+                # Usamos .bind() para anexar o parâmetro max_tokens ao modelo nesta chamada específica.
+                claude_with_max_tokens = claude_llm.bind(max_tokens=10000)
+                chain_sonnet = LLMChain(llm=claude_with_max_tokens, prompt=prompt_sonnet)
+
+                # O input agora é a resposta do GROK
+                resposta_sonnet = chain_sonnet.invoke({"solicitacao_usuario": solicitacao_usuario, "texto_para_analise": resposta_grok})['text']
+                sonnet_html = markdown2.markdown(resposta_sonnet, extras=["fenced-code-blocks", "tables"])
+                yield f"data: {json.dumps({'progress': 66, 'message': 'Estamos quase lá! Seu texto está passando por uma revisão final com o Gemini...', 'partial_result': {'id': 'sonnet-output', 'content': sonnet_html}})}\n\n"
+                
+                # --- ETAPA 3: Gemini (continua o último) ---
+                prompt_gemini = PromptTemplate(template=PROMPT_GEMINI, input_variables=["solicitacao_usuario", "texto_para_analise"])
+                chain_gemini = LLMChain(llm=gemini_llm, prompt=prompt_gemini)
+                # O input agora é a resposta do SONNET
+                resposta_gemini = chain_gemini.invoke({"solicitacao_usuario": solicitacao_usuario, "texto_para_analise": resposta_sonnet})['text']
+                gemini_html = markdown2.markdown(resposta_gemini, extras=["fenced-code-blocks", "tables"])
+                yield f"data: {json.dumps({'progress': 100, 'message': 'Processamento concluído!', 'partial_result': {'id': 'gemini-output', 'content': gemini_html}, 'done': True})}\n\n"
+
+            except Exception as e:
+                print(f"Ocorreu um erro durante o processamento: {e}")
+                yield f"data: {json.dumps({'error': f'Ocorreu um erro inesperado na aplicação: {e}'})}\n\n"
+
+    return Response(generate_stream(mode, form_data, temp_file_paths), mimetype='text/event-stream')
+
+if __name__ == '__main__':
+    app.run(debug=True)

config.py

@@ -0,0 +1,95 @@
+# config.py
+
+# Prompt para o primeiro agente (GROK)
+PROMPT_GROK = """
+<prompt>
+  <role>
+    Você é um filósofo e teólogo católico, especialista em redigir textos profundos e detalhados sobre assuntos diversos da filosofia, teologia, política, antropologia, educação, psicologia etc.
+  </role>
+
+  <requirements>
+    <word_count>Entre 4000 e 5000 palavras</word_count>
+    <language>Português do Brasil</language>
+    <paragraph_structure>Parágrafos curtos para facilitar a leitura</paragraph_structure>
+    <language_style>
+      - Linguagem profunda e formal, mas acessível a leigos
+      - Evitar tecnicismos excessivos
+      - Evitar rigidez acadêmica desnecessária
+      - Manter profundidade intelectual sem perder clareza
+    </language_style>
+  </requirements>
+
+  <context_from_documents>
+    A seguir, trechos de documentos fornecidos pelo usuário para sua referência. Use-os como base teórica para enriquecer sua resposta.
+    ---
+    {rag_context}
+    ---
+  </context_from_documents>
+
+  <user_request>
+    <solicitacao_usuario>
+      {solicitacao_usuario}
+    </solicitacao_usuario>
+  </user_request>
+
+  <instructions>
+    Com base na solicitação do usuário acima, desenvolva um texto que:
+    1. Explore o tema com profundidade filosófica e teológica
+    2. Mantenha conexão com a tradição católica quando relevante
+    3. Apresente argumentos bem estruturados e fundamentados
+    4. Use exemplos práticos quando apropriado para ilustrar conceitos
+    5. Mantenha tom respeitoso e reflexivo ao longo do texto
+    6. Organize o conteúdo de forma lógica e progressiva
+  </instructions>
+</prompt>
+"""
+
+# Prompt para o segundo agente (Claude Sonnet)
+PROMPT_CLAUDE_SONNET = """
+Com base na solicitação original do usuário e no texto gerado pelo primeiro especialista, sua tarefa é analisar criticamente o texto e aprimorá-lo. Não faça reduções e nem resumos. Se conseguir aprofundar e detalhar melhor o texto, adicionar novas referência de novos autores, faça. Se não conseguir, não faça nada.
+
+**Solicitação Original do Usuário:**
+---
+{solicitacao_usuario}
+---
+
+**Texto Gerado para Análise:**
+---
+{texto_para_analise}
+---
+
+**Suas Instruções:**
+1.  **Valide se o texto atingiu a quantidade de palavras mínimas (4000 palavras).
+2.  **Analise o texto:** Verifique a coesão, coerência e profundidade dos argumentos.
+3.  **Aprofunde e Detalhe:** Identifique pontos que podem ser mais explorados. Adicione detalhes, exemplos e nuances que enriqueçam o conteúdo original.
+4.  **Faça Correções:** Corrija eventuais imprecisões conceituais ou argumentativas.
+5.  **Não Resuma ou Reduza:** Seu objetivo é expandir e aprofundar, nunca encurtar o texto. O resultado final deve ser uma versão mais completa e robusta do que a original.
+6.  **Mantenha o Estilo:** Respeite o estilo de linguagem e o tom do texto original.
+
+Reescreva o texto completo, incorporando suas melhorias, detalhamentos e correções.
+"""
+
+# Prompt para o terceiro agente (Gemini)
+PROMPT_GEMINI = """
+Você é o revisor final. Sua função é polir e aperfeiçoar o texto que já passou por uma primeira rodada de escrita e uma segunda de revisão e aprofundamento. Não faça reduções e nem resumos. Se conseguir aprofundar e detalhar melhor o texto, adicionar novas referência de novos autores, faça. Se não conseguir, não faça nada.
+
+**Solicitação Original do Usuário:**
+---
+{solicitacao_usuario}
+---
+
+**Texto Revisado para Análise Final:**
+---
+{texto_para_analise}
+---
+
+**Suas Instruções:**
+1.  **Análise Crítica Final:** Leia o texto atentamente, buscando a máxima qualidade, clareza e profundidade.
+2.  **Valide se o texto atingiu a quantidade de palavras mínimas (4000 palavras).
+3.  **Correções e Complementos Finais:** Adicione os toques finais. Melhore a fluidez entre os parágrafos, enriqueça o vocabulário e adicione insights que possam ter sido omitidos.
+4.  **Não Resuma ou Reduza:** Assim como o revisor anterior, seu papel é adicionar valor e profundidade, não remover conteúdo.
+5.  **Garantia de Qualidade:** Assegure que o texto final atende a todos os requisitos da solicitação original do usuário de forma exemplar.
+6.  **Exiba na resposta apenas o texto revisado, sem nenhuma outra mensagem para o usuário.
+
+Reescreva o texto completo com suas melhorias finais. O texto deve estar impecável e pronto para publicação.
+"""

custom_grok.py

@@ -0,0 +1,56 @@
+from typing import Any, List, Optional
+from langchain_core.language_models.chat_models import BaseChatModel
+from langchain_core.messages import AIMessage, HumanMessage
+from langchain_core.outputs import ChatGeneration, ChatResult
+import requests
+
+class GrokChatModel(BaseChatModel):
+    model: str
+    api_key: str
+    base_url: str
+
+    def _llm_type(self) -> str:
+        return "grok-chat"
+
+    def _default_headers(self):
+        return {
+            "x-api-key": self.api_key,
+            "Content-Type": "application/json",
+        }
+
+    def _generate(
+        self, messages: List[HumanMessage],
+        stop: Optional[List[str]] = None,
+        **kwargs: Any
+    ) -> ChatResult:
+        last_message = messages[-1].content
+
+        payload = {
+            "model": self.model,
+            "messages": [{"role": "user", "content": last_message}],
+            "temperature": 0.7
+        }
+
+        response = requests.post(
+            self.base_url,
+            headers=self._default_headers(),
+            json=payload
+        )
+
+        if response.status_code != 200:
+            raise ValueError(f"Erro na chamada da API da Grok: {response.status_code} - {response.text}")
+
+        result = response.json()
+        content = result["choices"][0]["message"]["content"]
+
+        # ✅ Correção: Retornar ChatResult com lista de ChatGeneration
+        return ChatResult(
+            generations=[ChatGeneration(message=AIMessage(content=content))]
+        )
+
+    @property
+    def _identifying_params(self) -> dict:
+        return {
+            "model": self.model,
+            "base_url": self.base_url,
+        }

llms.py

@@ -0,0 +1,32 @@
+# llms.py
+
+import os
+from dotenv import load_dotenv
+# from langchain_openai import ChatOpenAI
+from custom_grok import GrokChatModel
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langchain_anthropic import ChatAnthropic
+
+# Carrega as variáveis de ambiente do arquivo .env
+load_dotenv()
+
+# --- Inicialização dos LLMs ---
+
+# GROK da xAI
+grok_llm = GrokChatModel(
+    api_key=os.getenv("X_API_KEY"),
+    model=os.getenv("GROK_MODEL_ID"),
+    base_url=os.getenv("X_API_BASE_URL")
+)
+
+# Claude Sonnet
+claude_llm = ChatAnthropic(
+    api_key=os.getenv("ANTHROPIC_API_KEY"),
+    model_name=os.getenv("CLAUDE_MODEL_ID")
+)
+
+# Gemini
+gemini_llm = ChatGoogleGenerativeAI(
+    google_api_key=os.getenv("GOOGLE_API_KEY"),
+    model=os.getenv("GEMINI_MODEL_ID")
+)

rag_processor.py

@@ -0,0 +1,58 @@
+# rag_processor.py
+
+import os
+from typing import List
+from langchain_community.document_loaders import PyPDFLoader, Docx2txtLoader, TextLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain_community.vectorstores import FAISS
+from langchain_community.embeddings import HuggingFaceEmbeddings
+
+embeddings_model = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+
+def get_relevant_context(file_paths: List[str], user_query: str) -> str:
+    """
+    Processa arquivos a partir de seus caminhos no disco, cria uma base de conhecimento
+    e retorna os trechos mais relevantes para a consulta do usuário.
+    """
+    documents = []
+
+    # 1. Carregar e Extrair Texto dos Arquivos a partir dos caminhos
+    for file_path in file_paths:
+        filename = os.path.basename(file_path)
+        
+        if filename.endswith(".pdf"):
+            loader = PyPDFLoader(file_path)
+        elif filename.endswith(".docx"):
+            loader = Docx2txtLoader(file_path)
+        elif filename.endswith(".txt"):
+            loader = TextLoader(file_path, encoding='utf-8')
+        else:
+            continue
+        
+        documents.extend(loader.load())
+
+    if not documents:
+        return "Nenhum documento de referência foi fornecido ou os formatos não são suportados."
+
+    # 2. Dividir o Texto em Chunks
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=200)
+    texts = text_splitter.split_documents(documents)
+
+    # 3. Criar a Base de Conhecimento Vetorial
+    vector_store = FAISS.from_documents(texts, embeddings_model)
+
+    # 4. Buscar os Chunks Mais Relevantes
+    retriever = vector_store.as_retriever(search_kwargs={"k": 4})
+    relevant_docs = retriever.invoke(user_query)
+
+    # 5. Formatar e Retornar o Contexto
+    context = "\n\n".join([doc.page_content for doc in relevant_docs])
+    
+    # Limpa os arquivos temporários após o uso
+    for file_path in file_paths:
+        try:
+            os.remove(file_path)
+        except OSError as e:
+            print(f"Erro ao deletar o arquivo {file_path}: {e}")
+            
+    return context

resposta_sonnet.md

@@ -0,0 +1,27 @@
+# As Bases Morais Pré-Políticas do Estado Liberal: Secularismo e Religião
+
+## Introdução: O Dilema Moderno da Fundamentação Moral
+
+A questão das bases morais que sustentam o Estado liberal moderno constitui um dos debates mais cruciais de nosso tempo. Em um mundo crescentemente secularizado, emerge com urgência a pergunta fundamental: sobre que alicerces morais pode edificar-se uma ordem política justa e duradoura?
+
+Este interrogante torna-se ainda mais premente quando consideramos que o projeto da modernidade, em sua busca por autonomia racional, pretendeu emancipar-se de toda transcendência religiosa, almejando construir uma moralidade puramente secular e auto fundamentada. Contudo, as crises morais e políticas contemporâneas sugerem que tal empreendimento pode estar fadado ao fracasso.
+
+O presente ensaio propõe-se a examinar criticamente esta problemática, tomando como fio condutor o célebre debate entre Jürgen Habermas e Joseph Ratzinger, posteriormente Papa Bento XVI, sobre os fundamentos da democracia liberal. Nossa tese central sustenta que a tradição católica oferece bases morais mais sólidas e consistentes para o Estado liberal do que as alternativas puramente seculares, demonstrando a insuficiência da razão autônoma para estabelecer os princípios éticos fundamentais da vida política.
+
+## O Encontro Histórico: Habermas e Ratzinger face à Dialética da Secularidade
+
+Em janeiro de 2004, na Academia Católica da Baviera, ocorreu um dos diálogos intelectuais mais significativos do século XXI. De um lado, Jürgen Habermas, o grande teórico da modernidade secular e da ética discursiva; do outro, Joseph Ratzinger, então Prefeito da Congregação para a Doutrina da Fé, defensor da racionalidade cristã e futuro Papa Bento XVI.
+
+O encontro não foi casual. Ambos os pensadores reconheciam que a modernidade ocidental atravessava uma crise profunda em seus fundamentos normativos. Habermas, outrora defensor de uma razão pós-metafísica completamente emancipada da religião, começara a reconhecer que a secularização radical poderia estar minando as próprias bases morais da democracia liberal.
+
+Ratzinger, por sua vez, não se opunha ao projeto democrático moderno, mas questionava sua sustentabilidade quando divorciado de fundamentos transcendentes. Para o futuro Papa, a democracia liberal necessita de pressupostos morais que ela mesma não pode produzir, uma observação que ecoava a célebre formulação do jurista alemão Ernst-Wolfgang Böckenförde sobre o "dilema do Estado liberal".
+
+## A Insuficiência da Razão Secular: Crítica aos Fundamentos Puramente Imanentes
+
+### O Problema da Auto fundamentação Moral
+
+O projeto moderno de uma ética secular enfrenta um obstáculo aparentemente intransponível: o problema da auto fundamentação. Como pode a razão humana, limitada e contingente, estabelecer princípios morais universais e absolutos? Esta dificuldade manifesta-se de forma particularmente aguda quando examinamos os três pilares sobre os quais o liberalismo secular pretende edificar sua moralidade: a intuição normativa, o processo democrático e a legalidade formal.
+
+Alasdair MacIntyre, em sua obra magistral "Depois da Virtude", demonstra como o projeto iluminista de uma moralidade racional e secular resultou em um relativismo moral disfarçado. Segundo MacIntyre, ao abandonar a teleologia aristotélica e a síntese tomista, a modernidade perdeu o horizonte de significado que conferia consistência aos juízos morais.
+
+A "intuição normativa", tão cara aos teóricos liberais contemporâneos, revela-se problemática quando submetida ao escrutínio filosófico rigoroso. Sobre que base podemos afirmar que cer

static/style.css

@@ -0,0 +1,364 @@
+/* static/style.css */
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.6;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 95%;
+    margin: auto;
+    background: #fff;
+    padding: 20px 30px;
+    border-radius: 8px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.1);
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20px;
+}
+
+.header-container p {
+    margin-top: -10px;
+    color: #6c757d;
+}
+
+.refresh-btn {
+    padding: 10px 15px;
+    font-size: 16px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    height: fit-content;
+}
+
+.refresh-btn:hover {
+    background-color: #218838;
+}
+
+h1, h2 {
+    color: #444;
+}
+
+textarea {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    margin-bottom: 10px;
+    font-size: 16px;
+    box-sizing: border-box;
+}
+
+button[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button[type="submit"]:hover {
+    background-color: #0056b3;
+}
+
+.results-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    margin-top: 30px;
+    /* Permite que as colunas alinhem no topo se tiverem tamanhos diferentes */
+    align-items: flex-start;
+}
+
+.result-column {
+    flex: 1;
+    min-width: 0;
+    background-color: #fafafa;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.column-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 15px;
+    background-color: #e9ecef;
+    border-bottom: 1px solid #e0e0e0;
+    border-radius: 8px 8px 0 0;
+}
+
+.column-header h2 {
+    margin: 0;
+    font-size: 1.2em;
+}
+
+.copy-btn {
+    padding: 5px 10px;
+    font-size: 12px;
+    background-color: #6c757d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.copy-btn:hover {
+    background-color: #5a6268;
+}
+
+/* CORREÇÃO: Removida a altura fixa e a rolagem individual */
+.output-box {
+    padding: 15px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    /* A altura agora será automática, baseada no conteúdo */
+}
+
+/* Estilos para o Loader e Barra de Progresso */
+#loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    text-align: center;
+}
+
+.loader-spinner {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #007bff;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1.5s linear infinite;
+    margin-bottom: 20px;
+}
+
+#loader-message {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+
+.progress-bar-container {
+    width: 300px;
+    height: 20px;
+    background-color: #555;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    width: 0%;
+    height: 100%;
+    background-color: #28a745;
+    border-radius: 10px;
+    transition: width 0.5s ease-in-out;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Estilos para a caixa de erro */
+.error-box {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid #f5c6cb;
+    border-radius: 5px;
+    position: relative;
+}
+
+.close-btn-error {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #721c24;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.close-btn-error:hover {
+    opacity: 0.7;
+}
+
+/* Estilos para o Seletor de Modo */
+.controls-container {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.mode-toggle {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 14px;
+    color: #555;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #28a745;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: 24px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+/* Estilos para tabelas e código gerados pelo Markdown */
+.output-box table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1em;
+}
+.output-box th, .output-box td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+.output-box th {
+    background-color: #f2f2f2;
+}
+.output-box pre {
+    background-color: #eee;
+    padding: 10px;
+    border-radius: 5px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.output-box code {
+    font-family: "Courier New", Courier, monospace;
+}
+
+/* static/style.css (ADICIONAR NO FINAL) */
+
+/* Efeito visual ao arrastar arquivos sobre a textarea */
+textarea.drag-over {
+    border-color: #007bff;
+    border-style: dashed;
+    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
+}
+
+/* Container da lista de arquivos */
+#file-list-container {
+    display: none; /* Começa escondido */
+    margin-top: -5px;
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+#file-list-container p {
+    margin: 0 0 5px 0;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+#file-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#file-list li {
+    background-color: #e9ecef;
+    padding: 5px 10px;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    font-size: 13px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.remove-file-btn {
+    cursor: pointer;
+    color: #dc3545;
+    font-weight: bold;
+    font-size: 18px;
+    margin-left: 10px;
+}
+
+.remove-file-btn:hover {
+    color: #a02430;
+}

templates/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistema Multi-Agente de IA</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+
+    <div id="loader-overlay" style="display: none;">
+        <div class="loader-content">
+            <div class="loader-spinner"></div>
+            <p id="loader-message">Processando sua solicitação...</p>
+            <div class="progress-bar-container">
+                <div id="progress-bar" class="progress-bar"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="header-container">
+            <div>
+                <h1>Sistema Multi-Agente IA</h1>
+                <p>GROK ➔ Claude Sonnet ➔ Gemini</p>
+            </div>
+            <div class="controls-container">
+                <div class="mode-toggle">
+                    <span>Modo Real</span>
+                    <label class="switch"><input type="checkbox" id="mode-switch"><span class="slider round"></span></label>
+                    <span>Modo Teste</span>
+                </div>
+                <button class="refresh-btn" onclick="window.location.href='/'" title="Limpar e começar de novo">Nova Consulta</button>
+            </div>
+        </div>
+        
+        <div id="error-box-container"></div>
+
+        <div id="real-form-container">
+            <form id="request-form-real">
+                <label for="solicitacao_usuario">Digite sua solicitação (ou arraste arquivos aqui):</label>
+                <textarea name="solicitacao_usuario" id="solicitacao_usuario" rows="8" required></textarea>
+                <div id="file-list-container"><p>Arquivos Anexados:</p><ul id="file-list"></ul></div>
+                <button type="submit">Processar com IA</button>
+            </form>
+        </div>
+
+        <div id="mock-form-container" style="display: none;">
+            <form id="request-form-mock">
+                <label for="mock_text">Cole o texto de simulação aqui:</label>
+                <textarea name="mock_text" id="mock_text" rows="10" required></textarea>
+                <button type="submit">Simular Resposta</button>
+            </form>
+        </div>
+
+        <div id="results-container" class="results-container" style="display: none;">
+            <div class="result-column">
+                <div class="column-header"><h2>GROK</h2><button class="copy-btn" onclick="copyToClipboard('grok-output')">Copiar</button></div>
+                <div class="output-box" id="grok-output"></div>
+            </div>
+            <div class="result-column">
+                <div class="column-header"><h2>Claude Sonnet</h2><button class="copy-btn" onclick="copyToClipboard('sonnet-output')">Copiar</button></div>
+                <div class="output-box" id="sonnet-output"></div>
+            </div>
+            <div class="result-column">
+                <div class="column-header"><h2>Gemini</h2><button class="copy-btn" onclick="copyToClipboard('gemini-output')">Copiar</button></div>
+                <div class="output-box" id="gemini-output"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // O JavaScript continua o mesmo, pois ele preenche os resultados
+        // pelos IDs, que não mudaram. Nenhuma alteração é necessária aqui.
+        const modeSwitch = document.getElementById('mode-switch');
+        const realContainer = document.getElementById('real-form-container');
+        const mockContainer = document.getElementById('mock-form-container');
+        const loader = document.getElementById('loader-overlay');
+        const loaderMessage = document.getElementById('loader-message');
+        const progressBar = document.getElementById('progress-bar');
+        const resultsContainer = document.getElementById('results-container');
+        const errorContainer = document.getElementById('error-box-container');
+        const textarea = document.getElementById('solicitacao_usuario');
+        const fileList = document.getElementById('file-list');
+        let attachedFiles = [];
+
+        modeSwitch.addEventListener('change', function() {
+            realContainer.style.display = this.checked ? 'none' : 'block';
+            mockContainer.style.display = this.checked ? 'block' : 'none';
+        });
+
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            textarea.addEventListener(eventName, preventDefaults, false);
+            document.body.addEventListener(eventName, preventDefaults, false);
+        });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            textarea.addEventListener(eventName, () => textarea.classList.add('drag-over'), false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            textarea.addEventListener(eventName, () => textarea.classList.remove('drag-over'), false);
+        });
+        textarea.addEventListener('drop', handleDrop, false);
+
+        function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
+        function handleDrop(e) { handleFiles(e.dataTransfer.files); }
+
+        function handleFiles(files) {
+            [...files].forEach(file => {
+                const allowedTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
+                if (!allowedTypes.includes(file.type)) {
+                    showError(`Formato de arquivo não suportado: ${file.name}`);
+                    return;
+                }
+                if (file.size > 100 * 1024 * 1024) { // 100MB
+                    showError(`Arquivo muito grande (max 100MB): ${file.name}`);
+                    return;
+                }
+                attachedFiles.push(file);
+            });
+            updateFileList();
+        }
+
+        function updateFileList() {
+            fileList.innerHTML = '';
+            document.getElementById('file-list-container').style.display = attachedFiles.length > 0 ? 'block' : 'none';
+            attachedFiles.forEach((file, index) => {
+                const li = document.createElement('li');
+                li.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
+                const removeBtn = document.createElement('span');
+                removeBtn.textContent = '×';
+                removeBtn.className = 'remove-file-btn';
+                removeBtn.onclick = () => {
+                    attachedFiles.splice(index, 1);
+                    updateFileList();
+                };
+                li.appendChild(removeBtn);
+                fileList.appendChild(li);
+            });
+        }
+        
+        document.getElementById('request-form-real').addEventListener('submit', handleFormSubmit);
+        document.getElementById('request-form-mock').addEventListener('submit', handleFormSubmit);
+
+        async function handleFormSubmit(event) {
+            event.preventDefault();
+            
+            errorContainer.innerHTML = '';
+            resultsContainer.style.display = 'none';
+            document.querySelectorAll('.output-box').forEach(box => box.innerHTML = '');
+
+            loaderMessage.textContent = 'Iniciando conexão...';
+            progressBar.style.width = '0%';
+            loader.style.display = 'flex';
+
+            const formData = new FormData();
+            if (modeSwitch.checked) {
+                formData.append('mode', 'test');
+                formData.append('mock_text', document.getElementById('mock_text').value);
+            } else {
+                formData.append('mode', 'real');
+                formData.append('solicitacao', document.getElementById('solicitacao_usuario').value);
+                attachedFiles.forEach(file => {
+                    formData.append('files', file);
+                });
+            }
+
+            try {
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    body: formData,
+                });
+
+                if (!response.ok || !response.body) {
+                    throw new Error(`Erro na resposta do servidor: ${response.statusText}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    
+                    const chunk = decoder.decode(value, { stream: true });
+                    const lines = chunk.split('\n\n');
+                    
+                    lines.forEach(line => {
+                        if (line.startsWith('data: ')) {
+                            const jsonData = line.substring(6);
+                            if (jsonData.trim()) {
+                                try {
+                                    const data = JSON.parse(jsonData);
+                                    processStreamData(data);
+                                } catch (e) {
+                                    console.error("Erro ao parsear JSON do stream:", jsonData);
+                                }
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                showError('A conexão com o servidor falhou. Verifique o console para detalhes.');
+                loader.style.display = 'none';
+                console.error("Fetch Error:", error);
+            }
+        }
+
+        function processStreamData(data) {
+            if (data.error) {
+                showError(data.error);
+                loader.style.display = 'none';
+                return;
+            }
+            
+            loaderMessage.textContent = data.message;
+            progressBar.style.width = data.progress + '%';
+
+            if (data.partial_result) {
+                resultsContainer.style.display = 'flex';
+                const targetBox = document.getElementById(data.partial_result.id);
+                if (targetBox) {
+                    targetBox.innerHTML = data.partial_result.content;
+                }
+            }
+
+            if (data.done) {
+                setTimeout(() => {
+                    loader.style.display = 'none';
+                }, 1000);
+            }
+        }
+
+        function showError(message) {
+            errorContainer.innerHTML = `<div class="error-box"><strong>Erro:</strong> ${message}<span class="close-btn-error" onclick="this.parentElement.style.display='none';" title="Fechar">&times;</span></div>`;
+        }
+
+        function copyToClipboard(elementId) {
+            const element = document.getElementById(elementId);
+            navigator.clipboard.writeText(element.innerText).then(() => {
+                alert('Texto copiado!');
+            });
+        }
+    </script>
+</body>
+</html>