<Feat> Ajout du halo vert ou rouge derrière les potentiometres

index.html

@@ -105,6 +105,7 @@
 			gap: 6px;
 			color: #ccc;
 			user-select: none;
+			position: relative;
 		}
 
 		.knob {
@@ -116,7 +117,13 @@
 			border: 2px solid #666;
 			box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.6), inset 2px 2px 4px rgba(255, 255, 255, 0.05);
 			cursor: grab;
-			transition: background 0.2s;
+			transition: background .2s, box-shadow .2s;
+			--halo: 0;
+			--haloAlpha: calc(.15 + .65*var(--halo));
+			--haloBlur1: calc(6px + 12px*var(--halo));
+			--haloSpread1: calc(2px + 6px*var(--halo));
+			--haloBlur2: calc(12px + 24px*var(--halo));
+			--haloSpread2: calc(6px + 12px*var(--halo));
 		}
 
 		.knob::after {
@@ -137,6 +144,22 @@
 			cursor: grabbing;
 		}
 
+		.knob.halo-pos {
+			box-shadow:
+				inset -3px -3px 6px rgba(0, 0, 0, .6),
+				inset 2px 2px 4px rgba(255, 255, 255, .05),
+				0 0 var(--haloBlur1) var(--haloSpread1) rgba(0, 255, 0, var(--haloAlpha)),
+				0 0 var(--haloBlur2) var(--haloSpread2) rgba(0, 255, 0, calc(var(--haloAlpha)*.6));
+		}
+
+		.knob.halo-neg {
+			box-shadow:
+				inset -3px -3px 6px rgba(0, 0, 0, .6),
+				inset 2px 2px 4px rgba(255, 255, 255, .05),
+				0 0 var(--haloBlur1) var(--haloSpread1) rgba(255, 0, 0, var(--haloAlpha)),
+				0 0 var(--haloBlur2) var(--haloSpread2) rgba(255, 0, 0, calc(var(--haloAlpha)*.6));
+		}
+
 		.knob-value {
 			font-size: 0.8em;
 			text-align: center;
@@ -285,7 +308,7 @@
 
 			<div class="potar">
 				<div id="knob-lr" class="knob big-potar"></div>
-				<div id="learningRateLabel" class="big-label">0.10</div>
+				<div id="learningRateLabel" class="big-label">0.50</div>
 				<div style="color:#888;">Taux d'apprentissage</div>
 			</div>
 
@@ -466,6 +489,21 @@
 		const entrees = [];
 		const poids = [];
 
+		const poidsKnobs = [];
+		function majHaloIndex(i) {
+			const w = parseFloat(poids[i].value) || 0;
+			const k = poidsKnobs[i];
+			if (!k) return;
+			const mag = Math.min(1, Math.abs(w) / 0.5); // map [-0.5,0.5] -> [0,1]
+			k.style.setProperty('--halo', mag.toFixed(3));
+			if (w > 0) {
+				k.classList.add('halo-pos'); k.classList.remove('halo-neg');
+			} else if (w < 0) {
+				k.classList.add('halo-neg'); k.classList.remove('halo-pos');
+			} else {
+				k.classList.remove('halo-pos', 'halo-neg');
+			}
+		}
 		// === LED 8x8 ===
 		for (let i = 0; i < N; i++) {
 			const led = document.createElement('div');
@@ -557,6 +595,7 @@
 				hiddenRange.value = val.toFixed(2);
 				label.textContent = val.toFixed(2);
 				knob.style.transform = `rotate(${angle}deg)`;
+				majHaloIndex(i);
 				majSortie();
 			});
 
@@ -570,12 +609,15 @@
 				label.textContent = val.toFixed(2);
 				const ang = valueToAngle(val);
 				knob.style.transform = `rotate(${ang}deg)`;
+				majHaloIndex(i);
 				majSortie();
 			});
 
 			p.appendChild(knob);
 			p.appendChild(label);
 			poidsDiv.appendChild(p);
+			poidsKnobs.push(knob);
+
 		}
 
 
@@ -636,7 +678,7 @@
 		const targetDigitSelect = document.getElementById('targetDigit');
 
 		const lrLabel = document.getElementById('learningRateLabel');
-		let learningRate = 0.1; // valeur initiale avant que le gros potar ne la change
+		let learningRate = 0.5; 
 
 		let desiredDigit = parseInt(targetDigitSelect.value);
 
@@ -653,6 +695,7 @@
 				poids[i].value = val.toFixed(2);
 				labels[i].textContent = val.toFixed(2);
 				majPotarGraphique(knobs[i], val);
+				majHaloIndex(i);
 			}
 			const bVal = (Math.random() * 2 - 1);
 			potarBiais.setValue(bVal);
@@ -668,9 +711,10 @@
 				poids[i].value = "0";
 				labels[i].textContent = "0.00";
 				majPotarGraphique(knobs[i], 0);
+				majHaloIndex(i);
 			}
 			potarBiais.setValue(0);
-			potarLR.setValue(0.1);
+			potarLR.setValue(0.5);
 			majSortie();
 		});
 
@@ -743,7 +787,7 @@
 			majSortie();
 		});
 		// learning rate
-		const potarLR = creerPotar('knob-lr', document.getElementById('learningRateLabel'), 0.001, 1, 0.005, 0.1, v => {
+		const potarLR = creerPotar('knob-lr', document.getElementById('learningRateLabel'), 0.001, 1, 0.005, 0.5, v => {
 			learningRate = v;
 		});
 
@@ -796,6 +840,7 @@
 					labels[i].textContent = poids[i].value;
 					const ang = -135 + (w + 0.5) * (270);
 					knobs[i].style.transform = `rotate(${ang}deg)`;
+					majHaloIndex(i);
 				}
 				biais += learningRate * err;
 				potarBiais.setValue(biais);
@@ -812,7 +857,7 @@
 		epochInput.type = 'number';
 		epochInput.min = 1;
 		epochInput.max = 1000;
-		epochInput.value = 5;
+		epochInput.value = 100;
 		epochInput.style.width = '60px';
 		epochInput.style.textAlign = 'center';
 		epochInput.style.marginTop = '10px';
@@ -874,6 +919,7 @@
 							labels[i].textContent = poids[i].value;
 							const ang = -135 + (w + 0.5) * 270;
 							knobs[i].style.transform = `rotate(${ang}deg)`;
+							majHaloIndex(i);
 						}
 						biais += learningRate * err;
 						potarBiais.setValue(biais);
@@ -882,7 +928,7 @@
 
 				// mise à jour UI et LR
 				const avgErr = totalErr / chiffres.length;
-				learningRate *= 0.9; // décroissance douce
+				learningRate *= 0.999; // décroissance douce
 				potarLR.setValue(learningRate);
 
 				currentEpoch++;