Upload index-6.html

templates/index-6.html

@@ -49,29 +49,26 @@
 			.ok{color:#7ee787}.warn{color:#ffd479}.err{color:#ff7b72}
 			.footer{padding:12px 16px;color:var(--muted);border-top:1px solid var(--border);font-size:12px}
 
+			/* NOVO: Barra de redimensionamento vertical */
 			.resizer-v {
-				height: 15px; /* Mais alto para facilitar o toque */
+				height: 10px;
 				cursor: ns-resize;
-				background: #21262d;
-				border-top: 1px solid #30363d;
-				border-bottom: 1px solid #30363d;
+				background: var(--border);
+				margin: 6px 0;
+				border-radius: 4px;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				user-select: none; /* Impede que seleciones texto ao arrastar */
-				z-index: 50;
-			}
-			.resizer-v:hover {
-				background: #1f6feb; /* Fica azul brilhante ao passar o rato */
+				transition: background 0.2s;
 			}
+			.resizer-v:hover { background: var(--accent2); }
 			.resizer-v::after {
 				content: "";
 				width: 40px;
-				height: 4px;
-				background: #8b949e;
+				height: 2px;
+				background: var(--muted);
 				border-radius: 2px;
 			}
-
 	</style>	
 
 </head>
@@ -207,7 +204,7 @@
 
     <section class="card">
       <header>
-        <h2>Treinar IA com Ficheiros</h2>
+        <h2>Treinar IA</h2>
         <div class="chips">
           <span class="pill" id="trainerState">estado: inativo</span>
         </div>
@@ -215,7 +212,7 @@
       <div class="content">
         <div class="row">
           <div class="col-12">
-            <label for="model_path">Caminho do Modelo Base</label>
+            <label for="model_path">Caminho do Modelo Base (exemple: Fedir-Ilina/meta-llamaLlama-3.2-1B)</label>
             <input type="text" id="model_path" placeholder="/caminho/para/modelo" />
           </div>
           <div class="col-12">
@@ -243,22 +240,81 @@
 					
         </div>
 
-					<div class="mt-2 w-full bg-gray-200 rounded-full h-3">
-						<div id="progressBar" class="bg-indigo-500 h-3 rounded-full transition-all duration-300" style="width: 0%;"></div>
+				<!-- BARRA DE PROGRESSO -->
+				<div style="margin:12px 0 6px;">
+					<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
+						<span style="font-size:12px;color:var(--muted)">Progresso do Treino</span>
+						<span id="progressPct" style="font-size:13px;font-family:var(--mono);color:#7ee787;font-weight:600">0%</span>
 					</div>
-					
-					<h3>Status do Treino</h3>
-					<div id="trainingBox" class="bg-gray-800" style="height: 500px; overflow-y: auto; white-space: pre-wrap; border: 1px solid #ccc; padding: 10px;">
-          À espera do início do treino…					
-				 </div>
-
-					<!-- INSERE ISTO AQUI -->
-					<div id="resizer" class="resizer-v"></div>
-
-					<h3>Conteúdo do Diretório do Modelo</h3>
-					<div id="modelDirBox" class="bg-gray-900" style="height:200px;overflow-y:auto;border:1px solid #444;padding:10px;font-family:monospace;">
-						A carregar conteúdo do diretório...
+					<div style="background:#0a0e14;border:1px solid var(--border);border-radius:999px;height:10px;overflow:hidden;">
+						<div id="progressBar" style="width:0%;height:100%;background:linear-gradient(90deg,#1f6feb,#2ea043);border-radius:999px;transition:width 0.5s ease;"></div>
+					</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;">
+						<span><span style="color:var(--muted)">Último passo: </span><span id="mv-laststep" style="color:#ffd479;font-weight:600"></span></span>
+						<span><span style="color:var(--muted)">Tempo restante (est.): </span><span id="mv-eta" style="color:#79c0ff;font-weight:600"></span></span>
+						<span><span style="color:var(--muted)">Último tempo/passo: </span><span id="mv-steptime" style="color:#7ee787;font-weight:600"></span></span>
+					</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;">
+          À espera do início do treino…
+				</div>
+
+				<!-- INSERE ISTO AQUI -->
+				<div id="resizer" class="resizer-v"></div>
+
+				<h3>Diretório Output</h3>
+				<div id="modelDirBox" style="height:200px;overflow-y:auto;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;">
+					A carregar conteúdo do diretório...
+				</div>
+				<div id="resizer2" class="resizer-v"></div>
 				 			
       </div>
     </section>
@@ -432,6 +488,130 @@
 			trainingBox.scrollTop = trainingBox.scrollHeight;
 		}
 
+		// Guarda histórico de ajustes do callback (apenas em memória, por sessão)
+		const accumAdjustHistory = [];
+
+		function parseMetricsFromLogs(logs) {
+			const metrics = {
+				accum: null, accumOrigin: null, effbatch: null, steps: null,
+				lastStep: null, eta: null, stepTime: null,
+				ram: null, newAccumEvents: []
+			};
+
+			for (const line of logs) {
+				// ── Padrão do backend: gradient_accumulation_steps atual: N (origem) ──
+				const mAccumInfo = line.match(/gradient_accumulation_steps atual:\s*(\d+)\s*\(([^)]+)\)/);
+				if (mAccumInfo) { metrics.accum = mAccumInfo[1]; metrics.accumOrigin = mAccumInfo[2]; }
+
+				// ── Effective Batch via backend ──
+				const mEff = line.match(/Effective Batch[^=]+=\s*(\d+)/);
+				if (mEff) metrics.effbatch = mEff[1];
+
+				// ── Total train steps ──
+				const mSteps = line.match(/total_train_steps[^:]*:\s*(\d+)/);
+				if (mSteps) metrics.steps = mSteps[1];
+
+				// ── Ajuste MANUAL: 🧭 Ajuste manual aplicado → gradient_accumulation_steps = N (Effective Batch: Y) ──
+				const mManual = line.match(/Ajuste manual aplicado.*gradient_accumulation_steps\s*=\s*(\d+).*Effective Batch[:\s]+(\d+)/);
+				if (mManual) {
+					metrics.accum = mManual[1];
+					metrics.effbatch = mManual[2];
+					metrics.accumOrigin = 'manual';
+					metrics.newAccumEvents.push({ type: 'manual', accum: mManual[1], effbatch: mManual[2], ram: null });
+				}
+
+				// ── RAM ALTA: ⚠️ RAM alta (X%) → diminuindo accumulation_steps de A para B (Effective Batch: Y) ──
+				const mHighRam = line.match(/RAM alta \(([0-9.]+)%\).*diminuindo accumulation_steps de (\d+) para (\d+).*Effective Batch[:\s]+(\d+)/);
+				if (mHighRam) {
+					metrics.accum = mHighRam[3];
+					metrics.effbatch = mHighRam[4];
+					metrics.accumOrigin = 'auto↓RAM alta';
+					metrics.ram = mHighRam[1];
+					metrics.newAccumEvents.push({ type: 'high', ram: mHighRam[1], from: mHighRam[2], accum: mHighRam[3], effbatch: mHighRam[4] });
+				}
+
+				// ── RAM OCIOSA: 💡 RAM ociosa (X%) → aumentando accumulation_steps de A para B (Effective Batch: Y) ──
+				const mLowRam = line.match(/RAM ociosa \(([0-9.]+)%\).*aumentando accumulation_steps de (\d+) para (\d+).*Effective Batch[:\s]+(\d+)/);
+				if (mLowRam) {
+					metrics.accum = mLowRam[3];
+					metrics.effbatch = mLowRam[4];
+					metrics.accumOrigin = 'auto↑RAM ociosa';
+					metrics.ram = mLowRam[1];
+					metrics.newAccumEvents.push({ type: 'low', ram: mLowRam[1], from: mLowRam[2], accum: mLowRam[3], effbatch: mLowRam[4] });
+				}
+
+				// ── RAM % de qualquer linha de aviso (fallback) ──
+				const mRamLine = line.match(/RAM[^(]*\(([0-9.]+)%\)/);
+				if (mRamLine && !metrics.ram) metrics.ram = mRamLine[1];
+
+				// ── Passo: -- | N/M | ... Tempo: | Xs | ──
+				const mStep = line.match(/PASSO:\s*-\s*-\s*\|\s*(\d+)\/(\d+)\s*\|[^|]*Tempo:\s*\|\s*([\d.]+)s/);
+				if (mStep) {
+					metrics.lastStep = `${mStep[1]} / ${mStep[2]}`;
+					metrics.stepTime = `${parseFloat(mStep[3]).toFixed(1)}s`;
+					const remaining = (parseInt(mStep[2]) - parseInt(mStep[1])) * parseFloat(mStep[3]);
+					if (remaining > 0) {
+						const h = Math.floor(remaining / 3600), m = Math.floor((remaining % 3600) / 60), s = Math.floor(remaining % 60);
+						metrics.eta = h > 0 ? `${h}h ${m}m` : m > 0 ? `${m}m ${s}s` : `${s}s`;
+					}
+				}
+			}
+			return metrics;
+		}
+
+		function updateAccumHistory(events) {
+			if (!events || events.length === 0) return;
+			const section = $('accumHistorySection');
+			const list = $('accumHistoryList');
+			if (!section || !list) return;
+
+			// Deduplica: só adiciona eventos realmente novos
+			events.forEach(ev => {
+				const key = `${ev.type}-${ev.accum}-${ev.effbatch}-${ev.ram}`;
+				if (accumAdjustHistory.find(h => h.key === key)) return;
+				accumAdjustHistory.push({ key, ...ev, ts: new Date().toLocaleTimeString() });
+
+				const row = document.createElement('div');
+				const isHigh = ev.type === 'high', isManual = ev.type === 'manual';
+				const icon   = isManual ? '🧭' : isHigh ? '⚠️' : '💡';
+				const color  = isManual ? '#79c0ff' : isHigh ? '#ff7b72' : '#7ee787';
+				const label  = isManual
+					? `Ajuste manual → accum=${ev.accum}, batch=${ev.effbatch}`
+					: `RAM ${ev.ram}% → accum ${ev.from}→${ev.accum} (batch ${ev.effbatch})`;
+				row.style = `display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;padding:3px 6px;border-radius:4px;background:#0c1117;`;
+				row.innerHTML = `<span>${icon}</span><span style="color:${color};flex:1">${label}</span><span style="color:var(--muted)">${new Date().toLocaleTimeString()}</span>`;
+				list.appendChild(row);
+				list.scrollTop = list.scrollHeight;
+			});
+
+			if (accumAdjustHistory.length > 0) section.style.display = '';
+		}
+
+		function updateMetricCard(id, value, fallback='—') {
+			const el = $(id); if(el) el.textContent = value ?? fallback;
+		}
+
+		function updateEpochLosses(epoch_losses) {
+			const section = $('epochLossSection');
+			const bar = $('epochLossBar');
+			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);
+				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.innerHTML = `
+					<div style="font-size:11px;font-family:var(--mono);color:#ffd479;font-weight:600">${isFinite(val)?val.toFixed(4):loss}</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>
+				`;
+				bar.appendChild(chip);
+			});
+		}
+
 		function startPolling() {
 			if (pollTimer) return;
 
@@ -441,33 +621,74 @@
 					if (!r.ok) throw new Error('HTTP ' + r.status);
 					const data = await r.json();
 
-					let content = '🚀 Treino iniciado\n';
-
-					// Progresso e estado
+					// — Progresso —
 					if (data.progress !== undefined) {
 						const pct = typeof data.progress === 'object' ? data.progress.percent : data.progress;
-						content += `Progresso: ${pct}%\n`;
 						const progressBar = $('progressBar');
+						const progressPct = $('progressPct');
 						if (progressBar) progressBar.style.width = `${pct}%`;
+						if (progressPct) progressPct.textContent = `${pct}%`;
 					}
 
-					
-					if (data.status) content += `Estado: ${data.status}\n`;
+					// — 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) —
+					const allLogs = data.logs || [];
+					const m = parseMetricsFromLogs(allLogs);
 
-					// Epoch losses
-					if (data.epoch_losses && data.epoch_losses.length > 0) {
-						content += `Loss por época: ${data.epoch_losses.join(', ')}\n`;
+					// 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);
 					}
 
-					// Logs
-					if (data.logs && data.logs.length > 0) {
-						content += 'Logs recentes:\n' + data.logs.join('\n');
-					} else {
-						content += 'Logs ainda não recebidos...\n';
+					// — 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';
+						}
 					}
 
-					trainingBox.textContent = content;
-					trainingBox.scrollTop = trainingBox.scrollHeight;
+					// — Histórico de ajustes do callback —
+					updateAccumHistory(m.newAccumEvents);
+
+					// — Epoch losses —
+					updateEpochLosses(data.epoch_losses);
+
+					// — Logs (só texto limpo) —
+					const logsText = allLogs.join('\n');
+					const trainingBox = $('trainingBox');
+					if (trainingBox) {
+						const wasAtBottom = trainingBox.scrollHeight - trainingBox.scrollTop <= trainingBox.clientHeight + 40;
+						trainingBox.textContent = logsText;
+						if (wasAtBottom) trainingBox.scrollTop = trainingBox.scrollHeight;
+					}
 
 				} catch (e) {
 					console.error('Erro ao atualizar treinamento:', e);
@@ -546,6 +767,11 @@
 				}
 		}
 
+
+
+
+
+
 		// =========================
 		// EVENT LISTENERS
 		// =========================
@@ -563,43 +789,47 @@
 					case 'tensorboardBtn': el.addEventListener('click',openTensorBoard); break;
 					case 'reduceBtn': el.addEventListener('click',()=>manualAdjustAccumulation(-1)); break;
 					case 'increaseBtn': el.addEventListener('click',()=>manualAdjustAccumulation(1)); break;
-					case 'modelDirBtn': el.addEventListener('click',loadModelDir); break;
+					case 'modelDirBtn': el.addEventListener('click', async () => {
+						await loadModelDir();
+						// Autoscroll para a janela "Diretório Output"
+						const box = $('modelDirBox');
+						if (box) {
+							box.scrollIntoView({ behavior: 'smooth', block: 'start' });
+							// Flash visual para indicar que a janela foi atualizada
+							box.style.transition = 'box-shadow 0.3s';
+							box.style.boxShadow = '0 0 0 2px #1f6feb';
+							setTimeout(() => { box.style.boxShadow = 'none'; }, 1200);
+						}
+					}); break;
 				}
 			});
 			fetchConfigFromServer();
 		});
 
-				// Lógica de Redimensionamento Vertical (Versão HF)
-				const resizer = document.getElementById('resizer');
-				const trainingBox = document.getElementById('trainingBox');
-
-				if (resizer && trainingBox) {
-						resizer.addEventListener('mousedown', function(e) {
-								e.preventDefault();
-								// Adiciona uma classe ao body para o cursor não "fugir" durante o arrasto
-								document.body.style.cursor = 'ns-resize';
-								
-								window.addEventListener('mousemove', startResizing);
-								window.addEventListener('mouseup', stopResizing);
-						});
-				}
-
-				function startResizing(e) {
-						// Calculamos a posição relativa ao topo da caixa de treino
-						const rect = trainingBox.getBoundingClientRect();
-						const offset = e.clientY - rect.top;
-						
-						// Aplicamos a nova altura (mínimo 100px, máximo 800px)
-						if (offset > 100 && offset < 800) {
-								trainingBox.style.height = offset + 'px';
+				// Lógica para redimensionar: trainingBox (resizer) e modelDirBox (resizer2)
+				function makeResizer(resizerId, targetBoxId) {
+					const resizer = document.getElementById(resizerId);
+					const box     = document.getElementById(targetBoxId);
+					if (!resizer || !box) return;
+
+					resizer.addEventListener('mousedown', function(e) {
+						e.preventDefault();
+						function onMove(e) {
+							const rect = box.getBoundingClientRect();
+							const newH = e.clientY - rect.top;
+							if (newH > 80 && newH < 1000) box.style.height = newH + 'px';
+						}
+						function onUp() {
+							window.removeEventListener('mousemove', onMove);
+							window.removeEventListener('mouseup', onUp);
 						}
+						window.addEventListener('mousemove', onMove);
+						window.addEventListener('mouseup', onUp);
+					});
 				}
 
-				function stopResizing() {
-						document.body.style.cursor = 'default';
-						window.removeEventListener('mousemove', startResizing);
-						window.removeEventListener('mouseup', stopResizing);
-				}
+				makeResizer('resizer',  'trainingBox');
+				makeResizer('resizer2', 'modelDirBox');
 
 	</script>
 </body>