Upload index-6.html

templates/index-6.html

@@ -19,18 +19,18 @@
 			header{padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, #111723, #0f1218);}
 			h1{margin:0;font-size:20px}
 			h2{margin:0 0 10px;font-size:18px}
-			h3{margin:16px 0 8px;font-size:15px;color:var(--muted)}
-			main{display:grid;grid-template-columns:0.65fr 1fr;gap:16px;padding:16px}
+			h3{margin:10px 0 6px;font-size:13px;color:var(--muted)}
+			main{display:grid;grid-template-columns:0.55fr 1fr;gap:12px;padding:12px}
 			@media (max-width:1100px){main{grid-template-columns:1fr}}
 			.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}
-			.card header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:#121720}
-			.card .content{padding:14px}
-			.row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
+			.card header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:#121720}
+			.card .content{padding:12px}
+			.row{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
 			.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
-			label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
-			input[type="text"],input[type="number"],select{width:100%;padding:10px 10px;border:1px solid var(--border);border-radius:8px;background:#0c1117;color:var(--fg);font-family:var(--mono)}
+			label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
+			input[type="text"],input[type="number"],select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:#0c1117;color:var(--fg);font-family:var(--mono);font-size:13px}
 			input[type="checkbox"]{transform:scale(1.1)}
-			.hint{font-size:11px;color:#7aa2d6;margin-top:4px}
+			.hint{font-size:10px;color:#7aa2d6;margin-top:3px}
 			.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--chip);color:var(--fg);cursor:pointer}
 			.btn:hover{filter:brightness(1.08)}
 			.btn-primary{background:var(--accent2);border-color:#2855a3}
@@ -231,11 +231,11 @@
 					</div>
 
 					<div class="col-8" style="display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px">
+						<button class="btn" id="modelDirBtn">📂 Ver output_dir</button>
 						<button class="btn" id="mergeBtn">🔗 Fazer Merge</button>
 						<button class="btn" id="continueBtn">🔁 Continuar (+1 Época)</button>
 						<button class="btn" id="testBtn">🧠 Testar Modelo (sem Merge)</button>
 						<button class="btn" id="tensorboardBtn">📈 Ver Gráfico (TensorBoard)</button>
-						<button class="btn" id="modelDirBtn">📂 Ver output_dir</button>
 					</div>
 					
         </div>
@@ -251,41 +251,6 @@
 					</div>
 				</div>
 
-				<!-- MÉTRICAS EM TEMPO REAL -->
-				<h3>📊 Métricas em Tempo Real</h3>
-				<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;">
-					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 12px;">
-						<div style="font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Estado</div>
-						<div id="mv-status" style="font-size:16px;font-weight:700;font-family:var(--mono);color:#79c0ff">—</div>
-					</div>
-					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 12px;">
-						<div style="font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Gradient Accum.</div>
-						<div id="mv-accum" style="font-size:16px;font-weight:700;font-family:var(--mono);color:#ffd479">—</div>
-						<div id="mv-accum-origin" style="font-size:10px;color:#7aa2d6;margin-top:2px;"></div>
-					</div>
-					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 12px;">
-						<div style="font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Effective Batch</div>
-						<div id="mv-effbatch" style="font-size:16px;font-weight:700;font-family:var(--mono);color:#7ee787">—</div>
-					</div>
-					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 12px;">
-						<div style="font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Total Steps</div>
-						<div id="mv-steps" style="font-size:16px;font-weight:700;font-family:var(--mono);color:#d2a8ff">—</div>
-					</div>
-					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 12px;position:relative;overflow:hidden;">
-						<div style="font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">RAM Usada</div>
-						<div id="mv-ram" style="font-size:16px;font-weight:700;font-family:var(--mono);color:#ff7b72">—</div>
-						<div style="position:absolute;bottom:0;left:0;right:0;height:3px;background:#1a1f26;">
-							<div id="mv-ram-bar" style="height:100%;width:0%;background:#f85149;transition:width .5s,background .5s;border-radius:0 2px 0 0;"></div>
-						</div>
-					</div>
-				</div>
-
-				<!-- HISTÓRICO DE AJUSTES DO CALLBACK -->
-				<div id="accumHistorySection" style="display:none;margin-bottom:12px;">
-					<h3>⚙️ Histórico de Ajustes (DynamicAccumulationCallback)</h3>
-					<div id="accumHistoryList" style="background:#0a0e14;border:1px solid var(--border);border-radius:8px;padding:8px;max-height:130px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;"></div>
-				</div>
-
 				<!-- PASSO ATUAL & ETA -->
 				<div id="currentStepSection" style="display:none;margin-bottom:10px;">
 					<div style="background:#0c1117;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:var(--mono);font-size:13px;display:flex;gap:20px;flex-wrap:wrap;">
@@ -295,12 +260,6 @@
 					</div>
 				</div>
 
-				<!-- LOSS POR ÉPOCA -->
-				<div id="epochLossSection" style="display:none;margin-bottom:12px;">
-					<h3>📉 Loss por Época</h3>
-					<div id="epochLossBar" style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;"></div>
-				</div>
-
 				<!-- LOGS -->
 				<h3>Status do Treino / Logs</h3>
 				<div id="trainingBox" style="height:340px;overflow-y:auto;white-space:pre-wrap;border:1px solid var(--border);padding:10px;font-family:var(--mono);font-size:14px;line-height:1.6;background:#0a0e14;border-radius:8px;color:#c9d1d9;">
@@ -597,14 +556,15 @@
 			if (!section || !bar || !epoch_losses || epoch_losses.length === 0) return;
 			section.style.display = '';
 			bar.innerHTML = '';
-			const maxLoss = Math.max(...epoch_losses.map(Number).filter(isFinite));
-			epoch_losses.forEach((loss, i) => {
-				const val = parseFloat(loss);
+			// epoch_losses pode ser array de números OU array de {epoch, loss}
+			const vals = epoch_losses.map(e => typeof e === 'object' ? parseFloat(e.loss) : parseFloat(e));
+			const maxLoss = Math.max(...vals.filter(isFinite));
+			vals.forEach((val, i) => {
 				const heightPct = isFinite(val) && maxLoss > 0 ? Math.max(10, (val / maxLoss) * 60) : 30;
 				const chip = document.createElement('div');
-				chip.style = `display:flex;flex-direction:column;align-items:center;gap:4px;`;
+				chip.style = 'display:flex;flex-direction:column;align-items:center;gap:4px;';
 				chip.innerHTML = `
-					<div style="font-size:11px;font-family:var(--mono);color:#ffd479;font-weight:600">${isFinite(val)?val.toFixed(4):loss}</div>
+					<div style="font-size:11px;font-family:var(--mono);color:#ffd479;font-weight:600">${isFinite(val) ? val.toFixed(4) : '?'}</div>
 					<div style="width:28px;height:${heightPct}px;background:linear-gradient(180deg,#1f6feb,#2ea043);border-radius:4px 4px 0 0;min-height:6px;transition:height .4s;"></div>
 					<div style="font-size:10px;color:var(--muted)">É${i+1}</div>
 				`;
@@ -630,61 +590,28 @@
 						if (progressPct) progressPct.textContent = `${pct}%`;
 					}
 
-					// — Estado —
-					const statusColors = { training:'#79c0ff', idle:'var(--muted)', done:'#7ee787', error:'#ff7b72' };
-					if (data.status) {
-						const el = $('mv-status');
-						if (el) { el.textContent = data.status; el.style.color = statusColors[data.status] || '#79c0ff'; }
-					}
-
-					// — Métricas extraídas dos logs (fallback) + campos directos do JSON (prioritários) —
+					// — Métricas dos logs: só passo/ETA (os cards de accum/batch/steps foram removidos) —
 					const allLogs = data.logs || [];
 					const m = parseMetricsFromLogs(allLogs);
 
-					// Gradient Accumulation: JSON > logs
-					const accumVal = data.current_accum_steps ?? m.accum;
-					if (accumVal != null) updateMetricCard('mv-accum', String(accumVal));
-
-					// Effective Batch: JSON > logs
-					const effVal = data.effective_batch ?? m.effbatch;
-					if (effVal != null) updateMetricCard('mv-effbatch', String(effVal));
-
-					// Total Steps: JSON > logs
-					const stepsVal = data.total_train_steps ?? m.steps;
-					if (stepsVal != null) updateMetricCard('mv-steps', String(stepsVal));
-
-					// Origem do accum (só via logs)
-					if (m.accumOrigin) { const el=$('mv-accum-origin'); if(el) el.textContent=m.accumOrigin; }
-
-					// Passo actual & ETA
 					if (m.lastStep || m.eta || m.stepTime) {
 						const sec = $('currentStepSection'); if(sec) sec.style.display='';
-						if (m.lastStep)  updateMetricCard('mv-laststep', m.lastStep);
-						if (m.eta)       updateMetricCard('mv-eta', m.eta);
-						if (m.stepTime)  updateMetricCard('mv-steptime', m.stepTime);
-					}
-
-					// — RAM: JSON > logs —
-					const ramVal = data.ram_percent ?? (m.ram ? parseFloat(m.ram) : null);
-					if (ramVal != null) {
-						updateMetricCard('mv-ram', `${parseFloat(ramVal).toFixed(1)}%`);
-						const bar = $('mv-ram-bar');
-						if (bar) {
-							bar.style.width = `${ramVal}%`;
-							bar.style.background = ramVal > 85 ? '#f85149' : ramVal > 70 ? '#ffd479' : '#7ee787';
-						}
+						if (m.lastStep) updateMetricCard('mv-laststep', m.lastStep);
+						if (m.eta)      updateMetricCard('mv-eta', m.eta);
+						if (m.stepTime) updateMetricCard('mv-steptime', m.stepTime);
 					}
 
-					// — Histórico de ajustes do callback —
+					// — Histórico de ajustes do callback (persiste na sessão) —
 					updateAccumHistory(m.newAccumEvents);
 
 					// — Epoch losses —
 					updateEpochLosses(data.epoch_losses);
 
-					// — Logs (só texto limpo) —
+					// — Logs: substituir conteúdo (o backend já devolve os últimos 200) —
 					const logsText = allLogs.join('\n');
 					const trainingBox = $('trainingBox');
-					if (trainingBox) {
+					if (trainingBox && logsText !== trainingBox.dataset.lastLogs) {
+						trainingBox.dataset.lastLogs = logsText;
 						const wasAtBottom = trainingBox.scrollHeight - trainingBox.scrollTop <= trainingBox.clientHeight + 40;
 						trainingBox.textContent = logsText;
 						if (wasAtBottom) trainingBox.scrollTop = trainingBox.scrollHeight;