diff --git a/index.html b/index.html
index f1cb00b..af395f4 100644
--- a/index.html
+++ b/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 @@
-
0.10
+
0.50
Taux d'apprentissage
@@ -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++;