Spaces:
Sleeping
Sleeping
Commit
·
1f56a52
1
Parent(s):
411fbac
Correções e evoluções
Browse files- templates/index.html +14 -19
templates/index.html
CHANGED
|
@@ -8,18 +8,14 @@
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
|
| 11 |
-
<!-- Loader Overlay com Barra de Progresso -->
|
| 12 |
<div id="loader-overlay" style="display: none;">
|
| 13 |
<div class="loader-content">
|
| 14 |
<div class="loader-spinner"></div>
|
| 15 |
<p id="loader-message">Processando sua solicitação...</p>
|
| 16 |
-
<div class="progress-bar-container">
|
| 17 |
-
<div id="progress-bar" class="progress-bar"></div>
|
| 18 |
-
</div>
|
| 19 |
</div>
|
| 20 |
</div>
|
| 21 |
|
| 22 |
-
<!-- Novo Botão Flutuante de Merge -->
|
| 23 |
<button id="merge-btn" class="floating-merge-btn" style="display: none;">Processar Merge</button>
|
| 24 |
|
| 25 |
<div class="container">
|
|
@@ -29,13 +25,9 @@
|
|
| 29 |
<p id="flow-description">GROK ➔ Claude Sonnet ➔ Gemini</p>
|
| 30 |
</div>
|
| 31 |
<div class="controls-container">
|
| 32 |
-
<!-- Novo Seletor de Modo de Processamento -->
|
| 33 |
<div class="mode-toggle" title="A versão 'Hierárquica' gerará um único no texto que passará por revisão em duas instâncias. Na versão 'Atômica', serão gerados 3 textos, um em cada modelo de IA; e depois um 4º texto será gerado fazendo um texto final consolidado dessas 3 versões.">
|
| 34 |
<span>Hierárquico</span>
|
| 35 |
-
<label class="switch">
|
| 36 |
-
<input type="checkbox" id="processing-mode-switch">
|
| 37 |
-
<span class="slider round"></span>
|
| 38 |
-
</label>
|
| 39 |
<span>Atômico</span>
|
| 40 |
</div>
|
| 41 |
<div class="mode-toggle">
|
|
@@ -49,7 +41,6 @@
|
|
| 49 |
|
| 50 |
<div id="error-box-container"></div>
|
| 51 |
|
| 52 |
-
<!-- Formulários -->
|
| 53 |
<div id="real-form-container">
|
| 54 |
<form id="request-form-real">
|
| 55 |
<label for="solicitacao_usuario">Digite sua solicitação (ou arraste arquivos aqui):</label>
|
|
@@ -66,22 +57,21 @@
|
|
| 66 |
</form>
|
| 67 |
</div>
|
| 68 |
|
| 69 |
-
<!-- Resultados -->
|
| 70 |
<div id="results-container" class="results-container" style="display: none;">
|
| 71 |
<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>
|
| 72 |
<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>
|
| 73 |
<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>
|
| 74 |
</div>
|
| 75 |
|
| 76 |
-
<!--
|
| 77 |
<div id="final-result-container" style="display: none;">
|
| 78 |
-
<h2>Texto Final</h2>
|
| 79 |
<div class="output-box" id="final-output"></div>
|
| 80 |
</div>
|
| 81 |
</div>
|
| 82 |
|
| 83 |
<script>
|
| 84 |
-
// --- Variáveis Globais e Lógica de UI ---
|
| 85 |
const processingModeSwitch = document.getElementById('processing-mode-switch');
|
| 86 |
const modeSwitch = document.getElementById('mode-switch');
|
| 87 |
const realContainer = document.getElementById('real-form-container');
|
|
@@ -104,10 +94,10 @@
|
|
| 104 |
mockContainer.style.display = this.checked ? 'block' : 'none';
|
| 105 |
});
|
| 106 |
processingModeSwitch.addEventListener('change', function() {
|
| 107 |
-
document.getElementById('flow-description').textContent = this.checked ? "GROK | Claude Sonnet | Gemini" : "GROK ➔ Claude Sonnet ➔ Gemini";
|
| 108 |
});
|
| 109 |
|
| 110 |
-
// --- Lógica de Upload ---
|
| 111 |
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
| 112 |
textarea.addEventListener(eventName, preventDefaults, false);
|
| 113 |
document.body.addEventListener(eventName, preventDefaults, false);
|
|
@@ -141,7 +131,7 @@
|
|
| 141 |
});
|
| 142 |
}
|
| 143 |
|
| 144 |
-
// --- Lógica de Submissão Principal ---
|
| 145 |
document.getElementById('request-form-real').addEventListener('submit', handleFormSubmit);
|
| 146 |
document.getElementById('request-form-mock').addEventListener('submit', handleFormSubmit);
|
| 147 |
|
|
@@ -243,7 +233,7 @@
|
|
| 243 |
}
|
| 244 |
});
|
| 245 |
|
| 246 |
-
// --- Função de Processamento de Stream
|
| 247 |
function processStreamData(data, isMerge) {
|
| 248 |
if (data.error) {
|
| 249 |
showError(data.error);
|
|
@@ -255,7 +245,12 @@
|
|
| 255 |
progressBar.style.width = data.progress + '%';
|
| 256 |
|
| 257 |
if (isMerge && data.final_result) {
|
|
|
|
| 258 |
finalOutput.innerHTML = data.final_result.content;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 259 |
finalResultContainer.style.display = 'block';
|
| 260 |
} else if (data.partial_result) {
|
| 261 |
resultsContainer.style.display = 'flex';
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
|
|
|
|
| 11 |
<div id="loader-overlay" style="display: none;">
|
| 12 |
<div class="loader-content">
|
| 13 |
<div class="loader-spinner"></div>
|
| 14 |
<p id="loader-message">Processando sua solicitação...</p>
|
| 15 |
+
<div class="progress-bar-container"><div id="progress-bar" class="progress-bar"></div></div>
|
|
|
|
|
|
|
| 16 |
</div>
|
| 17 |
</div>
|
| 18 |
|
|
|
|
| 19 |
<button id="merge-btn" class="floating-merge-btn" style="display: none;">Processar Merge</button>
|
| 20 |
|
| 21 |
<div class="container">
|
|
|
|
| 25 |
<p id="flow-description">GROK ➔ Claude Sonnet ➔ Gemini</p>
|
| 26 |
</div>
|
| 27 |
<div class="controls-container">
|
|
|
|
| 28 |
<div class="mode-toggle" title="A versão 'Hierárquica' gerará um único no texto que passará por revisão em duas instâncias. Na versão 'Atômica', serão gerados 3 textos, um em cada modelo de IA; e depois um 4º texto será gerado fazendo um texto final consolidado dessas 3 versões.">
|
| 29 |
<span>Hierárquico</span>
|
| 30 |
+
<label class="switch"><input type="checkbox" id="processing-mode-switch"><span class="slider round"></span></label>
|
|
|
|
|
|
|
|
|
|
| 31 |
<span>Atômico</span>
|
| 32 |
</div>
|
| 33 |
<div class="mode-toggle">
|
|
|
|
| 41 |
|
| 42 |
<div id="error-box-container"></div>
|
| 43 |
|
|
|
|
| 44 |
<div id="real-form-container">
|
| 45 |
<form id="request-form-real">
|
| 46 |
<label for="solicitacao_usuario">Digite sua solicitação (ou arraste arquivos aqui):</label>
|
|
|
|
| 57 |
</form>
|
| 58 |
</div>
|
| 59 |
|
|
|
|
| 60 |
<div id="results-container" class="results-container" style="display: none;">
|
| 61 |
<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>
|
| 62 |
<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>
|
| 63 |
<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>
|
| 64 |
</div>
|
| 65 |
|
| 66 |
+
<!-- Container do Resultado Final com ID no título -->
|
| 67 |
<div id="final-result-container" style="display: none;">
|
| 68 |
+
<h2 id="final-result-title">Texto Final</h2>
|
| 69 |
<div class="output-box" id="final-output"></div>
|
| 70 |
</div>
|
| 71 |
</div>
|
| 72 |
|
| 73 |
<script>
|
| 74 |
+
// --- Variáveis Globais e Lógica de UI (sem alterações) ---
|
| 75 |
const processingModeSwitch = document.getElementById('processing-mode-switch');
|
| 76 |
const modeSwitch = document.getElementById('mode-switch');
|
| 77 |
const realContainer = document.getElementById('real-form-container');
|
|
|
|
| 94 |
mockContainer.style.display = this.checked ? 'block' : 'none';
|
| 95 |
});
|
| 96 |
processingModeSwitch.addEventListener('change', function() {
|
| 97 |
+
document.getElementById('flow-description').textContent = this.checked ? "GROK | Claude Sonnet | Gemini (Paralelo)" : "GROK ➔ Claude Sonnet ➔ Gemini";
|
| 98 |
});
|
| 99 |
|
| 100 |
+
// --- Lógica de Upload (sem alterações) ---
|
| 101 |
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
| 102 |
textarea.addEventListener(eventName, preventDefaults, false);
|
| 103 |
document.body.addEventListener(eventName, preventDefaults, false);
|
|
|
|
| 131 |
});
|
| 132 |
}
|
| 133 |
|
| 134 |
+
// --- Lógica de Submissão Principal (sem alterações) ---
|
| 135 |
document.getElementById('request-form-real').addEventListener('submit', handleFormSubmit);
|
| 136 |
document.getElementById('request-form-mock').addEventListener('submit', handleFormSubmit);
|
| 137 |
|
|
|
|
| 233 |
}
|
| 234 |
});
|
| 235 |
|
| 236 |
+
// --- Função de Processamento de Stream ATUALIZADA ---
|
| 237 |
function processStreamData(data, isMerge) {
|
| 238 |
if (data.error) {
|
| 239 |
showError(data.error);
|
|
|
|
| 245 |
progressBar.style.width = data.progress + '%';
|
| 246 |
|
| 247 |
if (isMerge && data.final_result) {
|
| 248 |
+
const finalTitle = document.getElementById('final-result-title');
|
| 249 |
finalOutput.innerHTML = data.final_result.content;
|
| 250 |
+
// ATUALIZAÇÃO: Modifica o título com a contagem de palavras
|
| 251 |
+
if (data.final_result.word_count) {
|
| 252 |
+
finalTitle.textContent = `Texto Final (${data.final_result.word_count} palavras)`;
|
| 253 |
+
}
|
| 254 |
finalResultContainer.style.display = 'block';
|
| 255 |
} else if (data.partial_result) {
|
| 256 |
resultsContainer.style.display = 'flex';
|