Pokušaj ovo: (1) Učini model „lijenim” — spusti bias na ≈ −2,5 pa makar i uz oblake i prognozu kaže „ostavi ga”.
(2) Neka samo prognoza odlučuje — postavi w1 = w2 = 0, a w3 visok, pa pomiči samo prognozu.
);
}
/* ============================================================
WIDGET 2 — TRENIRAJ MREŽU KORAK-PO-KORAK (XOR 2-2-1)
============================================================ */
const XOR_X = [[0, 0], [0, 1], [1, 0], [1, 1]];
const XOR_Y = [0, 1, 1, 0];
function freshNet(useDefault) {
if (useDefault) return {
W1: [[-0.7313, 0.6949], [0.5275, -0.4899]], b1: [-0.0091, -0.101],
W2: [0.3032, 0.5774], b2: -0.8123,
};
const r = () => (Math.random() * 2 - 1);
return { W1: [[r(), r()], [r(), r()]], b1: [r(), r()], W2: [r(), r()], b2: r() };
}
function forwardOne(net, x) {
const hin = [net.W1[0][0] * x[0] + net.W1[1][0] * x[1] + net.b1[0],
net.W1[0][1] * x[0] + net.W1[1][1] * x[1] + net.b1[1]];
const h = [sigm(hin[0]), sigm(hin[1])];
const oin = net.W2[0] * h[0] + net.W2[1] * h[1] + net.b2;
const o = sigm(oin);
return { h, o };
}
function epoch(net, lr) {
const dW1 = [[0, 0], [0, 0]], db1 = [0, 0], dW2 = [0, 0]; let db2 = 0, loss = 0;
for (let k = 0; k < 4; k++) {
const x = XOR_X[k], y = XOR_Y[k];
const { h, o } = forwardOne(net, x);
loss += (o - y) * (o - y);
const dOut = (o - y) * o * (1 - o);
dW2[0] += dOut * h[0]; dW2[1] += dOut * h[1]; db2 += dOut;
const dh = [dOut * net.W2[0] * h[0] * (1 - h[0]), dOut * net.W2[1] * h[1] * (1 - h[1])];
for (let j = 0; j < 2; j++) { dW1[0][j] += dh[j] * x[0]; dW1[1][j] += dh[j] * x[1]; db1[j] += dh[j]; }
}
const n = { W1: net.W1.map(r => r.slice()), b1: net.b1.slice(), W2: net.W2.slice(), b2: net.b2 };
for (let i = 0; i < 2; i++) for (let j = 0; j < 2; j++) n.W1[i][j] -= lr * dW1[i][j] / 4;
for (let j = 0; j < 2; j++) n.b1[j] -= lr * db1[j] / 4;
n.W2[0] -= lr * dW2[0] / 4; n.W2[1] -= lr * dW2[1] / 4; n.b2 -= lr * db2 / 4;
return { net: n, loss: loss / 4 };
}
function BackpropTrainer() {
const cv = useRef(null);
const [net, setNet] = useState(() => freshNet(true));
const [step, setStep] = useState(0);
const [loss, setLoss] = useState(() => {
let l = 0; const n0 = freshNet(true);
for (let k = 0; k < 4; k++) { const { o } = forwardOne(n0, XOR_X[k]); l += (o - XOR_Y[k]) ** 2; }
return l / 4;
});
const [hist, setHist] = useState([]);
const [lr, setLr] = useState(2.0);
const [running, setRunning] = useState(false);
const raf = useRef(null);
const netRef = useRef(net);
netRef.current = net;
const preds = useMemo(() => XOR_X.map(x => forwardOne(net, x).o), [net]);
const doSteps = useCallback((count) => {
let n = netRef.current, l = 0;
const newHist = [];
for (let i = 0; i < count; i++) { const r = epoch(n, lr); n = r.net; l = r.loss; newHist.push(l); }
netRef.current = n;
setNet(n); setLoss(l);
setStep(s => s + count);
setHist(h => [...h, ...newHist].slice(-600));
}, [lr]);
useEffect(() => {
if (!running) return;
const tick = () => {
doSteps(12);
if (netRef.current && (() => {
let l = 0; for (let k = 0; k < 4; k++) { const { o } = forwardOne(netRef.current, XOR_X[k]); l += (o - XOR_Y[k]) ** 2; } return l / 4;
})() < 0.008) { setRunning(false); return; }
raf.current = requestAnimationFrame(tick);
};
raf.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf.current);
}, [running, doSteps]);
const reset = (useDefault) => {
setRunning(false);
const n = freshNet(useDefault); netRef.current = n; setNet(n);
let l = 0; for (let k = 0; k < 4; k++) { const { o } = forwardOne(n, XOR_X[k]); l += (o - XOR_Y[k]) ** 2; }
setLoss(l / 4); setStep(0); setHist([]);
};
useEffect(() => {
const ctx = cv.current.getContext("2d");
const W = 720, H = 320; ctx.clearRect(0, 0, W, H);
// --- left: network diagram ---
const ix = [70, 70], iy = [90, 210], hx = [250, 250], hy = [90, 210], ox = 410, oy = 150;
const edge = (x1, y1, x2, y2, wv) => {
ctx.strokeStyle = wv >= 0 ? "#2a5d57" : "#8a3a1f";
ctx.lineWidth = 0.8 + Math.min(7, Math.abs(wv) * 1.4);
ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
};
for (let i = 0; i < 2; i++) for (let j = 0; j < 2; j++) edge(ix[i] + 22, iy[i], hx[j] - 22, hy[j], net.W1[i][j]);
for (let j = 0; j < 2; j++) edge(hx[j] + 22, hy[j], ox - 22, oy, net.W2[j]);
const node = (x, y, txt, sub) => {
ctx.fillStyle = "#fbf7ec"; ctx.strokeStyle = "#6b4f1d"; ctx.lineWidth = 2;
ctx.beginPath(); ctx.arc(x, y, 22, 0, 7); ctx.fill(); ctx.stroke();
ctx.fillStyle = "#1a1814"; ctx.font = "600 13px Source Serif 4"; ctx.textAlign = "center";
ctx.fillText(txt, x, y + 4);
if (sub) { ctx.fillStyle = "#6f6754"; ctx.font = "10px JetBrains Mono"; ctx.fillText(sub, x, y - 30); }
};
node(ix[0], iy[0], "x1", "ulaz"); node(ix[1], iy[1], "x2", "ulaz");
node(hx[0], hy[0], "h1", "skriveni"); node(hx[1], hy[1], "h2", "");
node(ox, oy, preds.length ? preds[0].toFixed(2) : "", "izlaz");
// --- right: loss curve ---
const gx = 470, gy = 30, gw = 230, gh = 200;
ctx.strokeStyle = "#b8ab8e"; ctx.lineWidth = 1; ctx.strokeRect(gx, gy, gw, gh);
ctx.fillStyle = "#6f6754"; ctx.font = "11px JetBrains Mono"; ctx.textAlign = "left";
ctx.fillText("pogreška (MSE) kroz korake", gx, gy - 8);
const maxL = Math.max(0.28, ...hist, loss);
const series = hist.length ? hist : [loss];
ctx.strokeStyle = "#8a3a1f"; ctx.lineWidth = 2; ctx.beginPath();
series.forEach((l, i) => {
const px = gx + (series.length === 1 ? 0 : i / (series.length - 1) * gw);
const py = gy + gh - clamp(l / maxL, 0, 1) * gh;
i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);
});
ctx.stroke();
ctx.fillStyle = "#3a352c"; ctx.font = "600 13px Source Serif 4"; ctx.textAlign = "right";
ctx.fillText("MSE = " + loss.toFixed(4), gx + gw, gy + gh + 18);
}, [net, preds, hist, loss]);
let hint = "Klikni „Korak” da vidiš jedan ciklus učenja, ili „Pokreni do kraja”. Prati krivulju pogreške — treba padati.";
if (loss < 0.02) hint = "Mreža je naučila XOR! Pogledaj tablicu: sve četiri predikcije sad su blizu točnih odgovora (0, 1, 1, 0). Jedan neuron to NE bi mogao — tek skriveni sloj nauči ovaj „zakrivljeni” obrazac.";
else if (loss > 0.2 && step > 0) hint = "Pogreška još stoji na visokom platou (~0,25) — mreža još nije „provalila” obrazac. To je normalno; nastavi korake ili pokreni do kraja i gledaj nagli pad.";
else if (step > 0) hint = "Pogreška pada — mreža sad razdvaja primjere. Backpropagation je upravo ovo: izmjeri pogrešku, podijeli odgovornost unatrag, ispravi svaku težinu malčice.";
return (
);
const aucTxt = a => a >= 0.9 ? "izvrstan" : a >= 0.8 ? "dobar" : a >= 0.7 ? "osrednji" : a >= 0.6 ? "slab" : "≈ nasumičan";
let hint = "Pomiči prag i gledaj kako se mijenja ravnoteža između promašaja (FN) i lažnih uzbuna (FP).";
if (t < 0.4) hint = "Nizak prag: hvataš gotovo sve pozitivne (visok recall), ali dižeš i mnogo lažnih uzbuna (niska preciznost).";
else if (t > 0.62) hint = "Visok prag: gotovo svaka uzbuna je prava (visoka preciznost), ali ti pravi pozitivni proklize (raste FN, pada recall).";
return (
prag odlučivanja · matrica zabune · ROC
setT(+e.target.value)} />
Pozitivna klasa = {info.poz}, negativna = {info.neg}.
ovaj ({models.good.auc.toFixed(2)}) osrednji ({models.medium.auc.toFixed(2)}) nasumičan ({models.random.auc.toFixed(2)})
)}
Crna točka je tvoj trenutni prag — pomicanjem klizača ona klizi po krivulji. Što je krivulja bliža
gornjem lijevom kutu, model bolje razdvaja klase. AUC = 0,5 (dijagonala) znači pogađanje novčićem.
Oprez: kod jako nebalansiranih podataka (malo pozitivnih) ROC zna izgledati lijepo iako model
nije osobito koristan — tada je PR-krivulja (precision–recall) često iskreniji pokazatelj.
prosječna apsolutna greška — sve greške jednako važne
MSE
prosječna kvadratna greška — velike greške kažnjava nesrazmjerno
RMSE
korijen iz MSE — u istim jedinicama kao y, ali i dalje osjetljiv na outliere
R²
koliko varijance model objašnjava: 1 = savršeno, 0 = kao prosjek, <0 = gore
Povuci jednu točku daleko od dijagonale (ili klikni „Dodaj outlier”). Gledaj: MAE poraste umjereno, ali
MSE i RMSE skoče naglo — jer kvadriraju grešku. R² padne. Zato je MSE/RMSE osjetljiv na outliere, a MAE robustan.
);
}
/* ============================================================
KVIZ
============================================================ */
const QUIZ = [
{ q: "Model za rijetku bolest uvijek kaže „zdrav” i postiže 97% točnosti. Zašto je svejedno loš?",
a: ["Jer je accuracy uvijek nepouzdana metrika", "Jer kod nebalansiranih klasa visoka točnost skriva da model ne hvata nijedan stvarni slučaj (recall = 0)", "Jer mu je preciznost previsoka"],
correct: 1, why: "Kad je pozitivnih jako malo, „uvijek negativno” daje visoku točnost, a recall je 0 — nijedan bolesnik nije uhvaćen. Zato gledamo recall i preciznost." },
{ q: "U backpropagationu, što se događa s pojedinom težinom nakon što mreža izmjeri pogrešku?",
a: ["Postavi se na nulu i kreće ispočetka", "Ispravi se malčice, razmjerno tome koliko je ta težina pridonijela pogrešci", "Sve se težine promijene jednako"],
correct: 1, why: "Pogreška se propagira unatrag i svaka težina dobije ispravak razmjeran svom doprinosu pogrešci — male, postupne korekcije, ne restart." },
{ q: "Banka želi uhvatiti što više prijevara, a lažna uzbuna znači samo dodatni telefonski poziv. Koju metriku maksimiziraju i kako pomiču prag?",
a: ["Preciznost; dižu prag", "Recall; spuštaju prag", "Accuracy; ostavljaju prag na 0,5"],
correct: 1, why: "Skupa je propuštena prijevara (FN), pa žele visok recall. Spuštanjem praga hvataju više pozitivnih (recall ↑), uz cijenu više lažnih uzbuna." },
{ q: "Dodaš jedan veliki outlier u regresiju. Koja se metrika najmanje promijeni?",
a: ["MAE", "MSE", "RMSE"],
correct: 0, why: "MSE i RMSE kvadriraju grešku pa veliki outlier nesrazmjerno napuhnu. MAE zbraja apsolutne greške, pa reagira blaže — zato je robusniji na outliere." },
];
function Quiz() {
const [answered, setAnswered] = useState({});
const [score, setScore] = useState(0);
const pick = (qi, oi) => {
if (answered[qi] !== undefined) return;
const ok = oi === QUIZ[qi].correct;
setAnswered(a => ({ ...a, [qi]: oi }));
if (ok) setScore(s => s + 1);
};
const done = Object.keys(answered).length === QUIZ.length;
return (
{QUIZ.map((item, qi) => (
{qi + 1}. {item.q}
{item.a.map((txt, oi) => {
const picked = answered[qi];
let cls = "opt";
if (picked !== undefined) {
if (oi === item.correct) cls += " correct";
else if (oi === picked) cls += " wrong";
}
return ;
})}
Cijeli današnji susret vrti se oko jedne riječi — greška. Neuronska mreža
uči tako što ispravlja vlastite greške, a evaluacija je vještina mjerenja grešaka koje su ostale.
Ovdje pojmove ne čitaš nego ih pomičeš, treniraš i gledaš kako reagiraju.
🧠 Neuron i mreža🔁 Backpropagation🎯 Metrike i prag📐 ROC i regresija
Pregled
Dvije polovice, jedna nit
Prvo gradimo intuiciju o tome kako mreža uči (neuron → mreža → backpropagation),
a zatim kako procjenjujemo je li naučila dobro. Važna razlika koju nosi cijeli susret:
treniranje mijenja model (mijenja težine), dok evaluacija ne mijenja model — ona samo
mjeri kako se ponaša na podacima koje nikad nije vidio.
🧠
Neuron
Ponderirana suma ulaza + prag, pa aktivacija. Igraj se težinama i gledaj odluku.
→ Igraonica neurona
🔁
Učenje
Mreža pogađa, mjeri pogrešku i ispravlja težine unatrag. Treniraj je korak po korak.
→ Backpropagation uživo
🎯
Mjerenje
Confusion matrica, prag, ROC i regresijske metrike — svaka mjeri drugu vrstu greške.
→ Evaluacija modela
Dio 1 · neuron
Što je zapravo neuron?
Umjetni neuron nije čarolija: uzme nekoliko ulaza, svakom da težinu (koliko mu vjeruje),
zbroji ih, doda sklonost (bias) i kroz aktivacijsku funkciju izbaci odluku. Zamisli odluku
„hoću li ponijeti kišobran?”. Pomiči težine i bias — kad je zbroj z iznad praga, lampica se pali.
Dio 2 · backpropagation
Kako mreža uči iz grešaka
Jedan neuron ne može sve. Ova malena mreža (2 ulaza → 2 skrivena neurona → 1 izlaz) uči
XOR — pravilo „točno jedan od dva ulaza je 1”. Klikaj Korak i prati ciklus:
mreža pogađa, izmjeri pogrešku, podijeli odgovornost za pogrešku unatrag i
ispravi svaku težinu malčice. Krivulja pogreške najprije stoji, pa naglo padne — to je trenutak
kad mreža „provali” obrazac.
Dio 3 · podsjetnik
Premalo i previše naučeno
Prije nego što mjerimo, moramo znati na čemu mjerimo. Model uvijek testiramo na
podacima koje nije vidio (npr. podjela 80% za učenje, 20% za test), jer cilj nije zapamtiti nego
generalizirati. Dvije tipične bolesti:
Stanje
Greška na učenju
Greška na testu
Što se događa
Underfitting (premalo naučeno)
velika
velika
Model je prejednostavan (visoka pristranost) — ne hvata ni obrazac u podacima za učenje.
Taman (dobra ravnoteža)
mala
mala
Model je naučio obrazac, a ne šum — dobro radi i na novim podacima.
Overfitting (previše naučeno)
vrlo mala
velika
Model je „nabubao” podatke za učenje, uključujući šum (visoka varijanca) — pada na novima.
Zlatno pravilo: velik jaz između male greške na učenju i velike greške na testu
je znak overfittinga. Lijek: jednostavniji model, više podataka ili rezanje složenosti.
Dio 4 · evaluacija klasifikacije
Matrica zabune, prag i ROC
Klasifikator zapravo daje vjerojatnost (score 0–1), a mi biramo prag iznad
kojeg slučaj proglašavamo pozitivnim. Pomicanjem praga mijenjamo ravnotežu pogrešaka. Izaberi scenarij,
pomiči prag i gledaj kako se uživo mijenjaju matrica zabune, sve četiri metrike i točka na ROC krivulji.
Dio 5 · evaluacija regresije
Kad model predviđa broj
Kod regresije ne brojimo pogotke nego mjerimo koliko smo promašili. Svaka metrika
gleda grešku drukčije. Povuci točke (ili dodaj outlier) i otkrij zašto se MAE i RMSE razilaze.
Provjeri se
Kratki kviz
Četiri pitanja, odgovor odmah. Klikni na opciju koju misliš da je točna.
Želiš dalje? Sve ovo radi se „za prave” u Orange Data Mining: widget
Neural Network trenira mrežu, a Test & Score i ROC Analysis daju
točno ove metrike i krivulje — samo na cijelim skupovima (Iris, student-performance, mushrooms). To je sljedeća vježba.