Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeFlow AI - Análise e Correção Automatizada</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| qwen: '#10b981', | |
| zai: '#f59e0b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="max-w-7xl mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">CodeFlow AI <span class="text-primary">🚀</span></h1> | |
| <p class="text-gray-600">Análise e correção automatizada com IA colaborativa (Qwen + Zai)</p> | |
| <div class="mt-4 flex justify-center gap-4"> | |
| <a href="https://huggingface.co/Qwen/Qwen3-235B-A22B-Instruct-2507" target="_blank" class="text-qwen hover:text-green-600 flex items-center gap-2"> | |
| <i data-feather="external-link" class="w-4 h-4"></i> | |
| Qwen AI | |
| </a> | |
| <a href="https://huggingface.co/zai-org/GLM-4.6" target="_blank" class="text-zai hover:text-amber-600 flex items-center gap-2"> | |
| <i data-feather="external-link" class="w-4 h-4"></i> | |
| Zai AI | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white rounded-t-xl shadow-md"> | |
| <div class="flex border-b"> | |
| <button class="tab-btn active px-6 py-3 font-medium text-gray-700 border-b-2 border-primary text-primary" data-tab="upload"> | |
| <i data-feather="upload" class="w-4 h-4 inline mr-2"></i> | |
| 1. Upload | |
| </button> | |
| <button class="tab-btn px-6 py-3 font-medium text-gray-700 border-b-2 border-transparent hover:border-gray-300" data-tab="qwen"> | |
| <i data-feather="cpu" class="w-4 h-4 inline mr-2"></i> | |
| 2. Qwen (Análise) | |
| </button> | |
| <button class="tab-btn px-6 py-3 font-medium text-gray-700 border-b-2 border-transparent hover:border-gray-300" data-tab="zai"> | |
| <i data-feather="tool" class="w-4 h-4 inline mr-2"></i> | |
| 3. Zai (Correção) | |
| </button> | |
| <button class="tab-btn px-6 py-3 font-medium text-gray-700 border-b-2 border-transparent hover:border-gray-300" data-tab="results"> | |
| <i data-feather="download" class="w-4 h-4 inline mr-2"></i> | |
| 4. Resultados | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="bg-white rounded-b-xl shadow-md p-6"> | |
| <!-- Upload Tab --> | |
| <div id="upload-tab" class="tab-content"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">📤 Upload do Projeto</h2> | |
| <!-- File Upload --> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Selecione o diretório do projeto</label> | |
| <div id="drop-zone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-primary"> | |
| <i data-feather="folder" class="w-10 h-10 text-gray-400 mx-auto mb-3"></i> | |
| <p class="text-gray-600 mb-2">Arraste e solte sua pasta de projeto aqui</p> | |
| <p class="text-gray-500 text-sm">ou</p> | |
| <button id="browse-btn" class="mt-2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition-colors"> | |
| Procurar Arquivos | |
| </button> | |
| <input type="file" id="file-input" webkitdirectory directory multiple class="hidden"> | |
| </div> | |
| </div> | |
| <!-- File Tree --> | |
| <div id="file-tree-container" class="hidden mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-700">Estrutura de Arquivos</h3> | |
| <div class="flex gap-2"> | |
| <button id="select-all" class="text-sm bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded">Selecionar Tudo</button> | |
| <button id="deselect-all" class="text-sm bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded">Desmarcar Tudo</button> | |
| </div> | |
| </div> | |
| <div id="file-tree" class="border border-gray-200 rounded-lg p-4 max-h-64 overflow-y-auto bg-gray-50"> | |
| <div class="text-gray-500 text-sm"> | |
| <i data-feather="info" class="w-4 h-4 inline mr-2"></i> | |
| Os arquivos selecionados serão incluídos no relatório | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generate Report Button --> | |
| <button id="generate-report" class="w-full bg-qwen text-white py-3 rounded-lg font-medium hover:bg-green-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i data-feather="file-text" class="w-5 h-5 inline mr-2"></i> | |
| Gerar Relatório Estruturado | |
| </button> | |
| <!-- Report Output --> | |
| <div id="report-container" class="hidden mt-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Relatório Gerado</h3> | |
| <textarea id="report-output" class="w-full h-48 p-3 border border-gray-300 rounded-lg font-mono text-sm" readonly></textarea> | |
| <div class="flex gap-2 mt-2"> | |
| <button id="copy-report" class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-indigo-600 transition-colors"> | |
| <i data-feather="clipboard" class="w-4 h-4 inline mr-2"></i> | |
| Copiar Relatório | |
| </button> | |
| <button id="download-report" class="flex-1 bg-gray-600 text-white py-2 rounded-lg hover:bg-gray-700 transition-colors"> | |
| <i data-feather="download" class="w-4 h-4 inline mr-2"></i> | |
| Baixar TXT | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Qwen Tab --> | |
| <div id="qwen-tab" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Qwen Input --> | |
| <div> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4 text-qwen">🤖 Qwen - Análise do Problema</h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Descrição do Problema</label> | |
| <div class="flex"> | |
| <input type="text" id="problem-input-qwen" placeholder="Descreva o problema a ser analisado..." class="flex-grow border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-qwen"> | |
| <button id="voice-btn-qwen" class="bg-gray-200 border border-l-0 border-gray-300 rounded-r-lg px-4 py-2 hover:bg-gray-300"> | |
| <i data-feather="mic" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Relatório do Projeto</label> | |
| <textarea id="qwen-project-input" class="w-full h-64 p-3 border border-gray-300 rounded-lg font-mono text-sm" placeholder="Cole aqui o relatório gerado na aba anterior..."></textarea> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button id="open-qwen" class="flex-1 bg-qwen text-white py-3 rounded-lg font-medium hover:bg-green-600 transition-colors"> | |
| <i data-feather="external-link" class="w-5 h-5 inline mr-2"></i> | |
| Abrir Qwen no Hugging Face | |
| </button> | |
| <button id="inject-qwen" class="flex-1 bg-gray-600 text-white py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors" onclick="window.open('javascript:(function(){initHFBookmarklet();})()', '_blank')"> | |
| <i data-feather="code" class="w-5 h-5 inline mr-2"></i> | |
| Abrir Assistente | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Qwen Output --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">📋 Análise do Qwen</h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-700">Status da Análise</span> | |
| <span id="qwen-status" class="text-gray-500">Aguardando</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="qwen-progress" class="bg-qwen h-2 rounded-full transition-all duration-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 max-h-96 overflow-y-auto"> | |
| <div id="qwen-analysis" class="text-sm font-mono whitespace-pre-wrap"></div> | |
| </div> | |
| <button id="send-to-zai" class="w-full mt-4 bg-zai text-white py-3 rounded-lg font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i data-feather="arrow-right" class="w-5 h-5 inline mr-2"></i> | |
| Enviar Análise para Zai | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Zai Tab --> | |
| <div id="zai-tab" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Zai Input --> | |
| <div> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4 text-zai">🔧 Zai - Correção do Código</h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Análise Recebida do Qwen</label> | |
| <textarea id="zai-analysis-input" class="w-full h-48 p-3 border border-gray-300 rounded-lg font-mono text-sm" placeholder="Cole aqui a análise do Qwen..."></textarea> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button id="open-zai" class="flex-1 bg-zai text-white py-3 rounded-lg font-medium hover:bg-amber-600 transition-colors"> | |
| <i data-feather="external-link" class="w-5 h-5 inline mr-2"></i> | |
| Abrir Zai no Hugging Face | |
| </button> | |
| <button id="inject-zai" class="flex-1 bg-gray-600 text-white py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors" onclick="window.open('javascript:(function(){initHFBookmarklet();})()', '_blank')"> | |
| <i data-feather="code" class="w-5 h-5 inline mr-2"></i> | |
| Abrir Assistente | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Zai Output --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">📝 Correções do Zai</h3> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-700">Status da Correção</span> | |
| <span id="zai-status" class="text-gray-500">Aguardando</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="zai-progress" class="bg-zai h-2 rounded-full transition-all duration-500" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 max-h-96 overflow-y-auto"> | |
| <div id="zai-corrections" class="text-sm font-mono whitespace-pre-wrap"></div> | |
| </div> | |
| <button id="process-corrections" class="w-full mt-4 bg-primary text-white py-3 rounded-lg font-medium hover:bg-indigo-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i data-feather="check" class="w-5 h-5 inline mr-2"></i> | |
| Processar Correções | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Tab --> | |
| <div id="results-tab" class="tab-content hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">📊 Resultados Finais</h2> | |
| <!-- Summary --> | |
| <div id="results-summary" class="hidden mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-6 h-6 text-blue-600 mr-3"></i> | |
| <div> | |
| <span class="text-blue-800 font-medium">Processo Concluído!</span> | |
| <p class="text-sm text-blue-700 mt-1" id="summary-text"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File List --> | |
| <div id="results-file-list" class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Arquivos Corrigidos</h3> | |
| <div id="corrected-files-list" class="space-y-2"></div> | |
| </div> | |
| <!-- Actions --> | |
| <div class="flex gap-2"> | |
| <button id="download-all-corrected" class="flex-1 bg-secondary text-white py-3 rounded-lg font-medium hover:bg-purple-600 transition-colors"> | |
| <i data-feather="download" class="w-5 h-5 inline mr-2"></i> | |
| Baixar Todos os Arquivos | |
| </button> | |
| <button id="generate-patch" class="flex-1 bg-gray-600 text-white py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"> | |
| <i data-feather="git-branch" class="w-5 h-5 inline mr-2"></i> | |
| Gerar Patch | |
| </button> | |
| <button id="start-new" class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"> | |
| <i data-feather="refresh-cw" class="w-5 h-5 inline mr-2"></i> | |
| Novo Projeto | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Error Display --> | |
| <div id="error-container" class="hidden fixed bottom-4 right-4 bg-red-50 border border-red-200 rounded-lg p-4 max-w-md shadow-lg"> | |
| <div class="flex items-start"> | |
| <i data-feather="alert-circle" class="w-5 h-5 text-red-600 mr-3 mt-0.5"></i> | |
| <div> | |
| <p class="text-red-800 font-medium">Erro</p> | |
| <p class="text-red-700 text-sm mt-1" id="error-message"></p> | |
| </div> | |
| <button id="dismiss-error" class="ml-4 text-red-600 hover:text-red-800"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Success Notification --> | |
| <div id="success-container" class="hidden fixed bottom-4 right-4 bg-green-50 border border-green-200 rounded-lg p-4 max-w-md shadow-lg"> | |
| <div class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3 mt-0.5"></i> | |
| <div> | |
| <p class="text-green-800 font-medium">Sucesso</p> | |
| <p class="text-green-700 text-sm mt-1" id="success-message"></p> | |
| </div> | |
| <button id="dismiss-success" class="ml-4 text-green-600 hover:text-green-800"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Novo Modal de Instruções --> | |
| <div id="bookmarklet-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-lg p-6 max-w-3xl max-h-[80vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">🚀 Assistente CodeFlow AI</h3> | |
| <button id="close-bookmarklet" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">🎯 O que é?</h4> | |
| <p class="text-sm text-gray-600"> | |
| Uma ferramenta moderna que substitui os bookmarklets tradicionais, | |
| fornecendo uma interface intuitiva para automação no Hugging Face. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">📦 Como Instalar</h4> | |
| <p class="text-sm text-gray-600 mb-2"> | |
| Arraste um dos links abaixo para sua barra de favoritos: | |
| </p> | |
| <div class="space-y-2"> | |
| <div class="bg-gray-100 p-3 rounded-lg"> | |
| <a href="javascript:(function(){if(!window.location.href.includes('huggingface.co')){window.open('https://huggingface.co/chat/','_blank');return;}if(window.bookmarkletManager){window.bookmarkletManager.injectMainPanel();}else{const s=document.createElement('script');s.src='bookmarklet-manager.js';document.head.appendChild(s);}})();" class="text-blue-600 hover:text-blue-800 font-mono text-sm block"> | |
| 🤖 HF Assistant Completo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">✨ Recursos</h4> | |
| <ul class="text-sm text-gray-600 list-disc list-inside space-y-1"> | |
| <li>Interface moderna e responsiva</li> | |
| <li>Auto-detecção de Qwen e ZAI</li> | |
| <li>Transferência automática entre IAs</li> | |
| <li>Modo tela cheia otimizado</li> | |
| <li>Atalhos de teclado (Ctrl+Shift+V/C)</li> | |
| <li>Sincronização via localStorage</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-700 mb-2">🎮 Atalhos</h4> | |
| <ul class="text-sm text-gray-600 list-disc list-inside space-y-1"> | |
| <li><kbd>Ctrl+Shift+V</kbd> - Colar inteligente</li> | |
| <li><kbd>Ctrl+Shift+C</kbd> - Copiar resposta</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="bookmarklet-manager.js"></script> | |
| <script>feather.replace();</script> | |
| <script> | |
| // Inicializar bookmarklet manager automaticamente | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| if (window.bookmarkletManager && window.location.href.includes('huggingface.co')) { | |
| window.bookmarkletManager.injectMainPanel(); | |
| } | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |