1002 lines
37 KiB
JavaScript
1002 lines
37 KiB
JavaScript
/* ============================================================================
|
||
NEURALFLOW — Gerçek Zamanlı Sinir Ağı Simülatörü
|
||
Sıfır kütüphane · saf Canvas 2D · tüm matematik elle
|
||
============================================================================ */
|
||
"use strict";
|
||
|
||
/* ---------- Sabitler / durum ---------- */
|
||
const MAX_LOSS_POINTS = 360; // saklanan loss noktası üst sınırı
|
||
const PULSE_SPEED = 0.55; // puls ilerleme hızı (birim/sn … 1 birim).
|
||
const HEAT_REFRESH_EVERY = 6; // kaç framede bir heatmap yeniden çizilir
|
||
const GRADIENT_DECAY = 0.94; // node "gradyan ısısı" sönümü
|
||
|
||
/* Durum: kullanıcı arayüzünden gelen çizim/eğitim ayarları */
|
||
let state = {
|
||
trainRunning: false, // RUN modu
|
||
activation: 'sigmoid', // sigmoid | relu
|
||
learningRate: 0.1,
|
||
inputCount: 2,
|
||
hiddenNeurons: 4, // her gizli katman için nöron
|
||
hiddenLayers: 3, // gizli katman sayısı (1..3)
|
||
outputCount: 1,
|
||
};
|
||
state.layerConfig = [];
|
||
state.layerSizes = [];
|
||
state.layerLabels = [];
|
||
|
||
/* Ağ modeli */
|
||
let net = {
|
||
layers: [], // [{name, size}]
|
||
activations: [], // [] her katman aktivasyon dizisi
|
||
layerSum: [], // [] aktivasyondan önceki W*a+b (backprop kolaylığı)
|
||
weights: [], // [katmanIdx][hedefN][kaynakN] (katmanIdx>=1: giriş katmanı weights içinde yok)
|
||
biases: [], // [katmanIdx][hedefN] (katmanIdx>=1)
|
||
weightPulses: [], // animasyonlu ağırlık "nabzı": [{li,ri,from,to,…}]
|
||
nodeBackHeat: [], // [] her katmanın nöronuna "geri ısısı/alevi" oranı
|
||
nodeFwdHeat: [], // [] her katmanın nöronuna "ileri ısısı" (sinyal parlaması)
|
||
runningInput: [], // mevcut eğitim örneğinin girdi vektörü
|
||
runningTarget: [], // hedef çıktı (girdi katmanında etiket için kullanılabilir)
|
||
};
|
||
|
||
let lossHistory = []; // MSE geçmişi
|
||
let samplePointer = 0; // sürekli RUN modunda sıradaki eğitim örneğinin index'i
|
||
let animationId = null;
|
||
let lastTs = 0;
|
||
let frameCount = 0;
|
||
let epochCounter = 0;
|
||
|
||
/* CANVAS ctx'leri */
|
||
let neuralCv, neuralCtx;
|
||
let heatCv, heatCtx;
|
||
let lossCv, lossCtx;
|
||
|
||
/* Geometri: nöron konumları (her çerçevede modelden türetilir) */
|
||
let NODE_X = []; // [katman] x merkezi
|
||
let NODE_Y = []; // [katman][] nöron y konumu
|
||
|
||
/* ---------- DOM yardımcıları ---------- */
|
||
function $(id) { return document.getElementById(id); }
|
||
|
||
/* ============================================================================
|
||
AKTİVASYON & TÜREVLERİ (hep elle)
|
||
============================================================================ */
|
||
function sigmoid(x) {
|
||
if (x < -45) return 0;
|
||
if (x > 45) return 1;
|
||
return 1 / (1 + Math.exp(-x));
|
||
}
|
||
function sigmoidDerivative(activated) {
|
||
// activated katmanın ÇIKIŞ değeri (zaten aktivasyon uygulanmış)
|
||
return activated * (1 - activated);
|
||
}
|
||
function relu(x) { return x > 0 ? x : 0; }
|
||
function reluDerivative(x) {
|
||
// x = activasyona GİREN net girdi (sum). ReLU türevi.
|
||
return x > 0 ? 1 : 0;
|
||
}
|
||
|
||
/* Per-node activation + türev, katman çıktı değeri & düz net girdi üzerinden */
|
||
function activateNode(kind, x) {
|
||
if (kind === 'relu') return relu(x);
|
||
return sigmoid(x);
|
||
}
|
||
function derivativeOf(kind, output, netInput) {
|
||
if (kind === 'relu') return reluDerivative(netInput);
|
||
return sigmoidDerivative(output);
|
||
}
|
||
|
||
/* Küçük Gaussian benzeri rastgele ağırlık */
|
||
function randomWeight() {
|
||
return (Math.random() + Math.random() + Math.random()) / 1.5 - 1; // [-1..1]
|
||
}
|
||
function randomBias() {
|
||
return (Math.random() - 0.5) * 0.8;
|
||
}
|
||
|
||
/* ============================================================================
|
||
MİMARİ YÖNETİMİ
|
||
============================================================================ */
|
||
function layersConfig() {
|
||
// state -> katman listesi [{name,size}]
|
||
const cfg = [{ name: 'input', size: state.inputCount }];
|
||
for (let h = 1; h <= state.hiddenLayers; h++) {
|
||
cfg.push({ name: 'hidden' + h, size: state.hiddenNeurons });
|
||
}
|
||
cfg.push({ name: 'output', size: state.outputCount });
|
||
return cfg;
|
||
}
|
||
|
||
function buildNetwork() {
|
||
const cfg = layersConfig();
|
||
state.layerConfig = cfg;
|
||
state.layerSizes = cfg.map(function (l) { return l.size; });
|
||
state.layerLabels = cfg.map(function (l) { return l.name; });
|
||
|
||
net.layers = cfg.slice();
|
||
const L = cfg.length;
|
||
const acts = []; // katman sayısı kadar dizi
|
||
const sums = [];
|
||
const nbh = [];
|
||
const nfh = [];
|
||
for (let i = 0; i < L; i++) {
|
||
acts.push(new Array(cfg[i].size).fill(0));
|
||
sums.push(new Array(cfg[i].size).fill(0));
|
||
nbh.push(new Array(cfg[i].size).fill(0));
|
||
nfh.push(new Array(cfg[i].size).fill(0));
|
||
}
|
||
net.activations = acts;
|
||
net.layerSum = sums;
|
||
net.nodeBackHeat = nbh;
|
||
net.nodeFwdHeat = nfh;
|
||
|
||
// weights/biases: katman indeks 1..L-1 (çıktı ya da gizli katmanı üreten)
|
||
const W = [];
|
||
const B = [];
|
||
for (let k = 1; k < L; k++) {
|
||
const prev = cfg[k - 1].size;
|
||
const cur = cfg[k].size;
|
||
const m = [];
|
||
for (let j = 0; j < cur; j++) {
|
||
const row = [];
|
||
for (let i = 0; i < prev; i++) row.push(randomWeight());
|
||
m.push(row);
|
||
}
|
||
W.push(m);
|
||
const b = [];
|
||
for (let j = 0; j < cur; j++) b.push(randomBias());
|
||
B.push(b);
|
||
}
|
||
net.weights = W; // length = L-1
|
||
net.biases = B;
|
||
|
||
net.runningInput = new Array(cfg[0].size).fill(0);
|
||
net.runningTarget = new Array(cfg[L - 1].size).fill(0);
|
||
|
||
// puls & ısı listesini sıfırla
|
||
net.weightPulses = [];
|
||
}
|
||
|
||
function resetNetwork() {
|
||
buildNetwork();
|
||
lossHistory = [];
|
||
samplePointer = 0;
|
||
epochCounter = 0;
|
||
updateArchBars();
|
||
updateHUD();
|
||
}
|
||
|
||
/* ============================================================================
|
||
GERİ YAYILIM (backpropagation) — matematik elle
|
||
katman k için delta: önce çıktı katmanı
|
||
δ_out = (a - target) · act'(z)
|
||
sonra gizli katmanlar geriye doğru zincir kuralı:
|
||
δ_k = (W_{k+1}^T · δ_{k+1}) ⊙ act'(z_k)
|
||
Gradyanlar: ∇W_k = δ_k · a_{k-1}^T, ∇b_k = δ_k
|
||
============================================================================ */
|
||
function backprop(target) {
|
||
const L = state.layerSizes.length;
|
||
const acts = net.activations;
|
||
const sums = net.layerSum;
|
||
const delta = [];
|
||
for (let k = 0; k < L; k++) delta.push(new Float64Array(state.layerSizes[k]));
|
||
|
||
// ---- çıktı katmanı hatası ----
|
||
const out = acts[L - 1];
|
||
const dOut = delta[L - 1];
|
||
for (let j = 0; j < out.length; j++) {
|
||
const err = out[j] - target[j];
|
||
dOut[j] = err * derivativeOf(state.activation, out[j], sums[L - 1][j]);
|
||
}
|
||
|
||
// ---- gizli katmanlar geriye ----
|
||
for (let k = L - 2; k >= 1; k--) {
|
||
const Wnext = net.weights[k]; // (k)->(k+1)
|
||
const dCurr = delta[k];
|
||
const dNext = delta[k + 1];
|
||
const szNext = state.layerSizes[k + 1];
|
||
for (let i = 0; i < state.layerSizes[k]; i++) {
|
||
let sumErr = 0;
|
||
for (let j = 0; j < szNext; j++) sumErr += Wnext[j][i] * dNext[j];
|
||
dCurr[i] = sumErr * derivativeOf(state.activation, acts[k][i], sums[k][i]);
|
||
}
|
||
}
|
||
|
||
// nodeBackHeat'i gradyan ile "alevle"
|
||
for (let k = 1; k < L; k++) {
|
||
const dk = delta[k];
|
||
const heat = net.nodeBackHeat[k];
|
||
for (let j = 0; j < dk.length; j++) {
|
||
const mag = Math.abs(dk[j]);
|
||
if (mag > heat[j]) heat[j] = Math.min(1, heat[j] + mag * 3);
|
||
}
|
||
}
|
||
return delta;
|
||
}
|
||
|
||
/* ============================================================================
|
||
SGD GÜNCELLEMESİ — w -= lr·∇W , b -= lr·∇b
|
||
============================================================================ */
|
||
function applySGD(learningRate, delta) {
|
||
const L = state.layerSizes.length;
|
||
const acts = net.activations;
|
||
for (let k = 1; k < L; k++) {
|
||
const Wk = net.weights[k - 1];
|
||
const Bk = net.biases[k - 1];
|
||
const dk = delta[k];
|
||
const prev = acts[k - 1];
|
||
for (let j = 0; j < Wk.length; j++) {
|
||
const row = Wk[j];
|
||
for (let i = 0; i < row.length; i++) {
|
||
row[i] -= learningRate * dk[j] * prev[i];
|
||
}
|
||
Bk[j] -= learningRate * dk[j];
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ============================================================================
|
||
EĞİTİM ADIMI
|
||
============================================================================ */
|
||
function emitForwardSignals() {
|
||
// ileri yön sinyal puls'ları: katman k-1 -> k, mor/cyan, aktivasyon & |w| ile orantılı
|
||
const L = state.layerSizes.length;
|
||
const acts = net.activations;
|
||
const pulses = net.weightPulses;
|
||
for (let k = 1; k < L; k++) {
|
||
const prevY = NODE_Y[k - 1]; if (!prevY) continue;
|
||
const curY = NODE_Y[k]; if (!curY) continue;
|
||
const Wk = net.weights[k - 1];
|
||
const xA = NODE_X[k - 1], xB = NODE_X[k];
|
||
for (let j = 0; j < curY.length; j++) {
|
||
for (let i = 0; i < prevY.length; i++) {
|
||
const a = acts[k - 1][i];
|
||
const wgt = Wk[j][i];
|
||
const mag = a * Math.abs(wgt);
|
||
if (mag < 0.03 || pulses.length > 420) continue;
|
||
pulses.push({
|
||
li: k - 1, ri: k, i, j,
|
||
fromX: xA, fromY: prevY[i],
|
||
toX: xB, toY: curY[j],
|
||
from: i, to: o2n(k, j),
|
||
progress: 0, dir: 'fwd',
|
||
speed: 0.5 + Math.random() * 0.4 + mag * 2,
|
||
mag: Math.min(1, 0.2 + mag * 1.8),
|
||
hueRef: wgt >= 0 ? 285 : 330, // pozitif mor, negatif pembe
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ============================================================================
|
||
İLERİ YAYILIM (forward pass) — matematik elle
|
||
katman katman: z_k = W_k·a_{k-1} + b_k , a_k = act(z_k)
|
||
============================================================================ */
|
||
function forwardPass(inputArr) {
|
||
const L = state.layerSizes.length;
|
||
const acts = net.activations;
|
||
const sums = net.layerSum;
|
||
const kind = state.activation;
|
||
// girdi katmanı aktivasyonunu koy
|
||
const inSize = state.layerSizes[0];
|
||
for (let i = 0; i < inSize; i++) {
|
||
acts[0][i] = (i < inputArr.length) ? (inputArr[i] || 0) : 0;
|
||
}
|
||
for (let k = 1; k < L; k++) {
|
||
const curSize = state.layerSizes[k];
|
||
const prevSize = state.layerSizes[k - 1];
|
||
const Wk = net.weights[k - 1];
|
||
const Bk = net.biases[k - 1];
|
||
const prevA = acts[k - 1];
|
||
const curA = acts[k];
|
||
const curS = sums[k];
|
||
for (let j = 0; j < curSize; j++) {
|
||
let z = Bk[j];
|
||
const row = Wk[j];
|
||
for (let i = 0; i < prevSize; i++) z += row[i] * prevA[i];
|
||
curS[j] = z;
|
||
curA[j] = activateNode(kind, z);
|
||
}
|
||
}
|
||
return acts[L - 1];
|
||
}
|
||
|
||
/* Ortalama kare hata (MSE) — elle */
|
||
function meanSquaredError(target, output) {
|
||
const n = Math.min(target.length, output.length);
|
||
let s = 0;
|
||
for (let j = 0; j < n; j++) {
|
||
const d = output[j] - target[j];
|
||
s += d * d;
|
||
}
|
||
return n ? s / n : 0;
|
||
}
|
||
|
||
/* ============================================================================
|
||
EĞİTİM ÖRNEĞİ ÜRETİCİ — deterministik, tekrarlı döngü (öğrenilebilir)
|
||
Girdi sabit "desen havuzu"ndan, hedef türetilmiş yumuşak fonksiyondur.
|
||
Desen halkası tekrar ettiği için küçük ağlar bile zamanla uymayı öğrenir
|
||
→ loss çizgisi gerçekten düşer.
|
||
============================================================================ */
|
||
function nextSample() {
|
||
const nIn = state.inputCount;
|
||
const nOut = state.outputCount;
|
||
if (!nIn || nIn < 1) { state.inputCount = 2; return nextSample(); }
|
||
|
||
const i = samplePointer % 32; // kısa halka, tekrarlanır
|
||
const t = i / 32;
|
||
|
||
// 1) giriş deseni: bileşik sinusler → pürüzsüz ama ayırt edici girdi
|
||
const f1 = Math.sin(t * Math.PI * 2 * 1.0);
|
||
const f2 = Math.sin(t * Math.PI * 2 * 2.0 + 0.9);
|
||
const f3 = Math.sin(t * Math.PI * 4.0 + 0.4);
|
||
const ph = i * 2.399963; // altın oran tarama
|
||
|
||
const input = [];
|
||
for (let x = 0; x < nIn; x++) {
|
||
// her giriş biraz farklı fazlanmış dalga (0..1) + ince parazit
|
||
const raw = 0.5 * f1 + 0.28 * f2 * Math.cos(0.9 + x * ph) + 0.22 * f3;
|
||
input.push((raw * 0.5 + 0.5)); // [0,1] bandı
|
||
}
|
||
|
||
// 2) çıktı hedefi: girişten deterministik türetilmiş sinyal (0.05..0.95)
|
||
const target = [];
|
||
for (let y = 0; y < nOut; y++) {
|
||
const yk = y + 1;
|
||
// bileşik sinüs → sigmoid aralığına sıkıştır, öğrenilebilir ilişki
|
||
const sig =
|
||
Math.sin(input[0] * Math.PI * (1 + yk * 0.17) + yk * 0.6) * 0.5 +
|
||
Math.cos((nIn > 1 ? input[nIn - 1] : input[0]) * Math.PI * (0.5 + yk * 0.23)) * 0.5;
|
||
target.push(0.5 + 0.42 * sig); // (0.08, 0.92) → sigmoid çıktısı erişebilsin
|
||
}
|
||
|
||
return { input: input, target: target };
|
||
}
|
||
|
||
function trainStep() {
|
||
const sample = nextSample();
|
||
samplePointer++;
|
||
net.runningInput = sample.input.slice();
|
||
net.runningTarget = sample.target.slice();
|
||
|
||
forwardPass(sample.input);
|
||
emitForwardSignals();
|
||
const out = net.activations[state.layerSizes.length - 1].slice();
|
||
const loss = meanSquaredError(sample.target, out);
|
||
lossHistory.push(loss);
|
||
if (lossHistory.length > MAX_LOSS_POINTS) lossHistory.shift();
|
||
epochCounter++;
|
||
|
||
const delta = backprop(sample.target);
|
||
applySGD(state.learningRate, delta);
|
||
generateBackflowVisual(delta, sample.target, out);
|
||
updateHUD();
|
||
return loss;
|
||
}
|
||
|
||
/* "TRAIN STEP" butonu — tek adım + gradyan patlaması */
|
||
function onEpochStep() { trainStep(); }
|
||
|
||
/* ============================================================================
|
||
GERİ AKIŞ GÖRSELİ — gradyan büyüklüğüne göre sağdan sola turuncu alev
|
||
============================================================================ */
|
||
function generateBackflowVisual(delta, target, output) {
|
||
const L = state.layerSizes.length;
|
||
const pulses = net.weightPulses;
|
||
computeLayerXCache();
|
||
for (let k = L - 1; k >= 1; k--) {
|
||
const dk = delta[k];
|
||
const curY = NODE_Y[k];
|
||
const prevY = NODE_Y[k - 1];
|
||
const xA = columnXOf(k - 1);
|
||
const xB = columnXOf(k);
|
||
for (let j = 0; j < dk.length; j++) {
|
||
const heat = Math.abs(dk[j]);
|
||
if (heat < 0.02) continue;
|
||
for (let i = 0; i < prevY.length; i++) {
|
||
const w = net.weights[k - 1][j][i] || 0;
|
||
const mag = heat * (Math.abs(w) + 0.25);
|
||
if (mag < 0.006) continue;
|
||
if (pulses.length > 320) break;
|
||
pulses.push({
|
||
li: k - 1, ri: k,
|
||
i: i, j: j,
|
||
fromX: xA, fromY: prevY[i],
|
||
toX: xB, toY: curY[j],
|
||
from: i, to: o2n(k, j),
|
||
progress: 0, dir: 'bwd',
|
||
speed: 0.45 + Math.random() * 0.5 + mag,
|
||
mag: Math.min(1, mag),
|
||
hueRef: 20, // alev turuncusu
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* "to" hedefini node global index gibi kullanacak helper (sadece etiket) */
|
||
function o2n(k, j) { return k * 100 + j; }
|
||
|
||
/* ------------------ katman x konumu yardımcıları ------------------ */
|
||
let _layerXCache = [];
|
||
function computeLayerXCache() {
|
||
const n = state.layerSizes.length;
|
||
_layerXCache = [];
|
||
for (let k = 0; k < n; k++) _layerXCache.push((k + 0.5) / n);
|
||
}
|
||
function columnXOf(k) {
|
||
if (!_layerXCache.length) computeLayerXCache();
|
||
return _layerXCache[k];
|
||
}
|
||
|
||
/* ============================================================================
|
||
SİNYAL / PULS ANİMASYONU
|
||
============================================================================ */
|
||
function setLinkPulse(li, i, j, dir, intensity) {
|
||
// :harici denetçiler için hedeflenmiş bir puls başlatma API'si
|
||
const k = li + 1;
|
||
if (k >= state.layerSizes.length) return;
|
||
const prevY = NODE_Y[k - 1];
|
||
const curY = NODE_Y[k];
|
||
if (!prevY || !curY) return;
|
||
net.weightPulses.push({
|
||
li, ri: k, i, j,
|
||
fromX: columnXOf(k - 1), fromY: prevY[i],
|
||
toX: columnXOf(k), toY: curY[j],
|
||
from: i, to: o2n(k, j),
|
||
progress: 0, dir: dir || 'fwd',
|
||
speed: 0.5, mag: Math.min(1, intensity || 0.3),
|
||
hueRef: dir === 'bwd' ? 22 : 285,
|
||
});
|
||
}
|
||
|
||
function tickSignals(dt) {
|
||
// dt saniye
|
||
const pulses = net.weightPulses;
|
||
const alive = [];
|
||
for (let p = 0; p < pulses.length; p++) {
|
||
const pl = pulses[p];
|
||
pl.progress += dt * pl.speed;
|
||
if (pl.progress >= 1) { continue; } // ölü -> atla
|
||
alive.push(pl);
|
||
}
|
||
net.weightPulses = alive;
|
||
// kurallı sıfırlayıcı büyüme kısıtı yok
|
||
}
|
||
|
||
function growBackHeat() {
|
||
// frame bazlı nodeBackHeat sönümü
|
||
for (let k = 0; k < net.nodeBackHeat.length; k++) {
|
||
const arr = net.nodeBackHeat[k];
|
||
for (let j = 0; j < arr.length; j++) {
|
||
if (arr[j] > 0.004) arr[j] *= GRADIENT_DECAY; else arr[j] = 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
function growFwdHeat() {
|
||
for (let k = 0; k < net.nodeFwdHeat.length; k++) {
|
||
const arr = net.nodeFwdHeat[k];
|
||
for (let j = 0; j < arr.length; j++) {
|
||
if (arr[j] > 0.002) arr[j] *= 0.92; else arr[j] = 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ============================================================================
|
||
GEOMETRİ: nöron yerleşimi (canvas gerçek pikselinden bağımsız normalized 0..1)
|
||
============================================================================ */
|
||
function computeGeometry(width, height) {
|
||
const L = state.layerSizes.length;
|
||
NODE_X = [];
|
||
NODE_Y = [];
|
||
// padding
|
||
const padX = Math.min(46, width * 0.06);
|
||
const padY = Math.min(26, height * 0.07);
|
||
const drawW = Math.max(10, width - padX * 2);
|
||
const drawH = Math.max(10, height - padY * 2);
|
||
for (let k = 0; k < L; k++) {
|
||
const x = padX + drawW * (L === 1 ? 0.5 : k / (L - 1));
|
||
NODE_X.push(x);
|
||
const size = state.layerSizes[k];
|
||
const col = [];
|
||
if (size === 1) col.push(height / 2);
|
||
else for (let j = 0; j < size; j++) col.push(padY + drawH * (j / (size - 1)));
|
||
NODE_Y.push(col);
|
||
}
|
||
computeLayerXCache();
|
||
}
|
||
|
||
/* ============================================================================
|
||
ÇİZİM: ORTA (NÖRON AKIŞI) KANVASI
|
||
============================================================================ */
|
||
function drawNeuralCanvas() {
|
||
const cv = neuralCv;
|
||
if (!cv) return;
|
||
const w = cv.width, h = cv.height;
|
||
const g = neuralCtx;
|
||
g.clearRect(0, 0, w, h);
|
||
|
||
// zaman birikimi (yumuşak nabız/akış efektleri için)
|
||
const tSec = frameCount * 0.016;
|
||
|
||
// hafif ızgara arka plan deseni — çok hafif "nefes alan" canlılık
|
||
const breathe = 0.5 + 0.5 * Math.sin(tSec * 0.7);
|
||
g.strokeStyle = 'rgba(90,120,220,' + (0.04 + breathe * 0.03) + ')';
|
||
g.lineWidth = 1;
|
||
const step = 36;
|
||
for (let x = 0; x < w; x += step) { g.beginPath(); g.moveTo(x, 0); g.lineTo(x, h); g.stroke(); }
|
||
for (let y = 0; y < h; y += step) { g.beginPath(); g.moveTo(0, y); g.lineTo(w, y); g.stroke(); }
|
||
|
||
// süzülen "veri tozları" — yavaşça sağa süzülen neon parçacık sürüsü
|
||
for (let d = 0; d < 14; d++) {
|
||
const drift = ((d * 0.6180339887) + tSec * 0.045) % 1; // her biri farklı fazda akar
|
||
const wave = Math.sin(tSec * 0.3 + d * 1.7) * 10;
|
||
const dy = (((d * 53.7 + wave) % h) + h) % h;
|
||
const dx = drift * w;
|
||
const pal = d % 3;
|
||
const cc = pal === 0 ? '55,224,255' : pal === 1 ? '143,123,255' : '255,93,158';
|
||
const tw = 0.5 + 0.5 * Math.sin(tSec * 2.2 + d * 2.9); // hafif yanıp sönme
|
||
g.fillStyle = 'rgba(' + cc + ',' + (0.10 + tw * 0.12) + ')';
|
||
g.beginPath();
|
||
g.arc(dx, dy, 1.0 + (pal === 2 ? 0.9 : 0.3), 0, Math.PI * 2);
|
||
g.fill();
|
||
}
|
||
|
||
const L = state.layerSizes.length;
|
||
const acts = net.activations;
|
||
|
||
// ---- bağlantılar ----
|
||
for (let k = 1; k < L; k++) {
|
||
const prevY = NODE_Y[k - 1];
|
||
const curY = NODE_Y[k];
|
||
const Wk = net.weights[k - 1];
|
||
const px = NODE_X[k - 1];
|
||
const cx = NODE_X[k];
|
||
for (let j = 0; j < curY.length; j++) {
|
||
for (let i = 0; i < prevY.length; i++) {
|
||
const wgt = Wk[j][i];
|
||
const a = Math.abs(wgt);
|
||
const pos = wgt >= 0;
|
||
const alpha = 0.16 + a * 0.7;
|
||
g.strokeStyle = pos ? 'rgba(90,200,255,' + alpha + ')'
|
||
: 'rgba(255,90,110,' + alpha + ')';
|
||
g.lineWidth = 0.6 + a * 3.2;
|
||
const y1 = prevY[i], y2 = curY[j];
|
||
// hafif kavis
|
||
const mx = (px + cx) / 2;
|
||
const ctl = mx + (y2 - y1) * 0.4;
|
||
const ctlY = (y1 + y2) / 2;
|
||
g.beginPath();
|
||
g.moveTo(px, y1);
|
||
g.quadraticCurveTo(ctl, ctlY, cx, y2);
|
||
g.stroke();
|
||
|
||
// güçlü bağlantıların üstüne "akan sinyal dalgası" (canlılık)
|
||
if (a > 0.35) {
|
||
const cycle = (tSec * 0.9 + k * 0.6 + ((i + j) % 5) * 0.24) % 1;
|
||
if (cycle < 0.75) { // dalga kuyruğu kesilmesin diye sadece bir aralıkta göster
|
||
const sc = cycle / 0.75;
|
||
const qx = (1 - sc) * (1 - sc) * px + 2 * (1 - sc) * sc * ctl + sc * sc * cx;
|
||
const qy = (1 - sc) * (1 - sc) * y1 + 2 * (1 - sc) * sc * ctlY + sc * sc * y2;
|
||
const fade = (1 - sc) * alpha;
|
||
const wcol = pos ? '90,235,255' : '255,150,120';
|
||
const wg = g.createRadialGradient(qx, qy, 0, qx, qy, 6);
|
||
wg.addColorStop(0, 'rgba(' + wcol + ',' + (0.5 * fade + 0.2) + ')');
|
||
wg.addColorStop(1, 'rgba(' + wcol + ',0)');
|
||
g.fillStyle = wg;
|
||
g.beginPath(); g.arc(qx, qy, 6, 0, Math.PI * 2); g.fill();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---- puls topları (kaplamalı, renkli parlama) ----
|
||
const pulses = net.weightPulses;
|
||
for (let p = 0; p < pulses.length; p++) {
|
||
const pl = pulses[p];
|
||
// normalize konumları gerçek piksele çevir
|
||
let x1, y1, x2, y2;
|
||
const xCache = _layerXCache;
|
||
const li = pl.li, ri = pl.ri;
|
||
if (li < 0 || ri >= L) continue;
|
||
const px = NODE_X[li], cx = NODE_X[ri];
|
||
// puls kaynağı/hedefi nöron Y'lerinden (gerçek piksel)
|
||
const srcY = NODE_Y[li][pl.from];
|
||
const dstY = NODE_Y[ri][pl.to % 100];
|
||
// basit interpolasyon (progress) — kavis ihmal
|
||
const t = pl.progress;
|
||
const X = px + (cx - px) * t;
|
||
const Y = srcY + (dstY - srcY) * t;
|
||
let col;
|
||
if (pl.dir === 'bwd') {
|
||
col = 'hsla(' + pl.hueRef + ',100%,60%,' + (0.5 + pl.mag * 0.5) + ')';
|
||
} else {
|
||
col = 'hsla(' + pl.hueRef + ',100%,66%,' + (0.35 + pl.mag * 0.5) + ')';
|
||
}
|
||
const rad = 2 + pl.mag * 6;
|
||
const glow = g.createRadialGradient(X, Y, 0, X, Y, rad * 5);
|
||
glow.addColorStop(0, col);
|
||
glow.addColorStop(1, 'rgba(0,0,0,0)');
|
||
g.fillStyle = glow;
|
||
g.beginPath();
|
||
g.arc(X, Y, rad * 5, 0, Math.PI * 2);
|
||
g.fill();
|
||
g.fillStyle = col;
|
||
g.beginPath();
|
||
g.arc(X, Y, rad, 0, Math.PI * 2);
|
||
g.fill();
|
||
}
|
||
|
||
// ---- nöronlar (aktivasyona göre parlaklık) ----
|
||
for (let k = 0; k < L; k++) {
|
||
const x = NODE_X[k];
|
||
const arr = NODE_Y[k];
|
||
const fwd = net.nodeFwdHeat[k] || [];
|
||
const bck = net.nodeBackHeat[k] || [];
|
||
// katman etiketi
|
||
g.fillStyle = 'rgba(140,170,230,0.5)';
|
||
g.font = '11px Consolas, monospace';
|
||
g.textAlign = 'center';
|
||
const label = state.layerLabels[k] || '';
|
||
const isIn = k === 0, isOut = k === L - 1;
|
||
g.fillText((isIn ? 'GİRİŞ' : isOut ? 'ÇIKIŞ' : label.toUpperCase()), x, 16);
|
||
|
||
for (let j = 0; j < arr.length; j++) {
|
||
const r = isIn || isOut ? 11 : 8;
|
||
const a = acts[k][j]; // aktivasyon 0..1
|
||
const glow = fwd[j] || 0;
|
||
const back = bck[j] || 0;
|
||
|
||
// dış parlama
|
||
const coreLum = 0.5 + a * 0.9;
|
||
let rgb;
|
||
if (back > 0.05) {
|
||
const t = Math.min(1, back);
|
||
rgb = 'rgb(' + Math.round(255 * (0.5 + t * 0.5)) + ',' + Math.round(120 * (1 - t)) + ',' + Math.round(80 * (1 - t)) + ')';
|
||
} else {
|
||
const bl = Math.round(90 + coreLum * 210);
|
||
const gr = Math.round(60 + a * 200);
|
||
rgb = 'rgb(' + Math.round(50 + a * 80) + ',' + gr + ',' + bl + ')';
|
||
}
|
||
// zaman bazlı "canlı nabız": aktif nöron hafifçe büyür / parlar
|
||
const pulseK = 1 + (a * 0.22) * (0.5 + 0.5 * Math.sin(tSec * 3.4 + k * 1.3 + j * 0.7));
|
||
const glowR = r * 4 * (0.92 + pulseK * 0.08);
|
||
const galpha = back > 0.05 ? (0.45 + back * 0.45) : (0.32 + a * 0.5);
|
||
const radG = g.createRadialGradient(x, arr[j], 0, x, arr[j], glowR);
|
||
radG.addColorStop(0, back > 0.05 ? 'rgba(255,120,40,' + galpha + ')' : 'rgba(90,220,255,' + galpha + ')');
|
||
radG.addColorStop(1, 'rgba(0,0,0,0)');
|
||
g.fillStyle = radG;
|
||
g.beginPath(); g.arc(x, arr[j], glowR, 0, Math.PI * 2); g.fill();
|
||
|
||
// çekirdek (canlı parlama katmanı + parlayan ana gövde)
|
||
const coreR = r * (0.96 * pulseK);
|
||
const coreGlow = g.createRadialGradient(x, arr[j], 0, x, arr[j], coreR * 2.5);
|
||
coreGlow.addColorStop(0, 'rgba(255,255,255,' + (0.5 + a * 0.4) + ')');
|
||
coreGlow.addColorStop(0.5, back > 0.05 ? 'rgba(255,180,90,' + (0.5 + a * 0.3) + ')' : 'rgba(150,240,255,' + (0.45 + a * 0.4) + ')');
|
||
coreGlow.addColorStop(1, 'rgba(0,0,0,0)');
|
||
g.fillStyle = coreGlow;
|
||
g.beginPath(); g.arc(x, arr[j], coreR * 2.5, 0, Math.PI * 2); g.fill();
|
||
|
||
const grad = g.createRadialGradient(x - 2, arr[j] - 2, 1, x, arr[j], coreR);
|
||
grad.addColorStop(0, '#ffffff');
|
||
grad.addColorStop(0.4, back > 0.05 ? '#ffc880' : 'rgb(150,240,255)');
|
||
grad.addColorStop(1, 'rgba(25,55,115,0.95)');
|
||
g.fillStyle = grad;
|
||
g.beginPath(); g.arc(x, arr[j], coreR, 0, Math.PI * 2); g.fill();
|
||
// çekirdek dış ince halka (neon kontur)
|
||
g.strokeStyle = back > 0.05 ? 'rgba(255,180,90,' + (0.5 + back * 0.5) + ')' : 'rgba(140,240,255,' + (0.4 + a * 0.5) + ')';
|
||
g.lineWidth = 1 + a * 1.2;
|
||
g.beginPath(); g.arc(x, arr[j], coreR - 0.6, 0, Math.PI * 2); g.stroke();
|
||
|
||
// back ısı parlaması en dış halka
|
||
if (back > 0.05) {
|
||
g.strokeStyle = 'rgba(255,150,40,' + (0.3 + back * 0.6) + ')';
|
||
g.lineWidth = 1.5 + back * 2;
|
||
g.beginPath(); g.arc(x, arr[j], r + 3 + back * 8, 0, Math.PI * 2); g.stroke();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ============================================================================
|
||
ÇİZİM: SAĞ PANEL — AĞIRLIK ISILOĞ / GÖRSEL MATRİS
|
||
her bağlantı katmanı (k=1..L-1) için mini grid hücre
|
||
hücre boyutu pencere bağımlı; tüm katmanlar tek sütunda, üstte en girişçi
|
||
============================================================================ */
|
||
function drawHeatmap() {
|
||
const cv = heatCv; if (!cv) return;
|
||
const w = cv.width, h = cv.height;
|
||
const g = heatCtx;
|
||
g.clearRect(0, 0, w, h);
|
||
g.fillStyle = 'rgba(8,12,24,0.5)'; g.fillRect(0, 0, w, h);
|
||
|
||
const L = state.layerSizes.length;
|
||
if (L < 2) return;
|
||
// her layer-k matrisi: rows=cur(data) x cols=prev
|
||
// bir "matris şeridi"ne yerleştir, üstten alta
|
||
let yCursor = 12;
|
||
const cellPad = 3;
|
||
const labelH = 14;
|
||
for (let k = 1; k < L; k++) {
|
||
const cur = state.layerSizes[k];
|
||
const prevC = state.layerSizes[k - 1];
|
||
const mat = net.weights[k - 1];
|
||
// toplam matris alanı; max genişlik w-kaydol => cell
|
||
const padX = 4;
|
||
const availH = Math.max(20, Math.min(cur * (h - labelH) / (L - 1), h / 4.4) - cellPad * cur);
|
||
const availW = w - padX * 2;
|
||
const cw = Math.min(availW / Math.max(1, prevC), 22);
|
||
const ch = Math.min(availH / Math.max(1, cur), 22);
|
||
const cell = Math.min(cw, ch, 26);
|
||
const gridW = cell * prevC - cellPad * (prevC - 1);
|
||
const gridH = cell * cur - cellPad * (cur - 1);
|
||
let x0 = (w - gridW) / 2;
|
||
let y0 = yCursor + labelH;
|
||
|
||
// katman etiketi: "k: cur ← prev"
|
||
g.fillStyle = 'rgba(150,180,240,0.5)';
|
||
g.font = '9px Consolas, monospace';
|
||
g.textAlign = 'left';
|
||
const lab = state.layerLabels[k] + ' ' + cur + '←' + prevC;
|
||
g.fillText(lab.toUpperCase(), x0, yCursor + 10);
|
||
|
||
for (let j = 0; j < cur; j++) { // satır = hedef nöron
|
||
for (let i = 0; i < prevC; i++) { // kolon = kaynak nöron
|
||
const val = mat[j][i]; // -1..1
|
||
const a = Math.abs(val);
|
||
let col;
|
||
if (val >= 0) col = 'rgba(45,175,255,' + (0.15 + a * 0.85) + ')';
|
||
else col = 'rgba(255,80,100,' + (0.15 + a * 0.85) + ')';
|
||
g.fillStyle = col;
|
||
const px = x0 + i * (cell + cellPad);
|
||
const py = y0 + j * (cell + cellPad);
|
||
const rr = cell * 0.16;
|
||
roundRect(g, px, py, cell, cell, rr);
|
||
g.fill();
|
||
}
|
||
}
|
||
yCursor = y0 + gridH + 14;
|
||
}
|
||
}
|
||
|
||
function roundRect(g, x, y, w2, h2, r) {
|
||
g.beginPath();
|
||
g.moveTo(x + r, y);
|
||
g.arcTo(x + w2, y, x + w2, y + h2, r);
|
||
g.arcTo(x + w2, y + h2, x, y + h2, r);
|
||
g.arcTo(x, y + h2, x, y, r);
|
||
g.arcTo(x, y, x + w2, y, r);
|
||
g.closePath();
|
||
}
|
||
|
||
/* ============================================================================
|
||
ÇİZİM: ALT — LOSS GRAFİĞİ (neon eğri, kaydırmalı)
|
||
============================================================================ */
|
||
function plotLoss() {
|
||
const cv = lossCv; if (!cv) return;
|
||
const w = cv.width, h = cv.height;
|
||
const g = lossCtx;
|
||
g.clearRect(0, 0, w, h);
|
||
g.fillStyle = 'rgba(8,12,24,0.5)'; g.fillRect(0, 0, w, h);
|
||
g.strokeStyle = 'rgba(120,150,220,0.12)';
|
||
for (let gy = 0; gy < h; gy += h / 4) { g.beginPath(); g.moveTo(0, gy); g.lineTo(w, gy); g.stroke(); }
|
||
|
||
if (lossHistory.length < 2) return;
|
||
const maxP = Math.min(MAX_LOSS_POINTS, lossHistory.length);
|
||
// Y ölçek: dönemsel max (ilk 20 dahil)
|
||
let lo = Infinity, hi = -Infinity;
|
||
const from = Math.max(0, lossHistory.length - 260);
|
||
for (let i = from; i < lossHistory.length; i++) { const v = lossHistory[i]; if (v < lo) lo = v; if (v > hi) hi = v; }
|
||
if (!isFinite(hi) || hi - lo < 1e-6) { hi = lo + 1; }
|
||
lo = Math.max(0, lo - (hi - lo) * 0.1);
|
||
hi = hi + (hi - lo) * 0.1;
|
||
|
||
const data = lossHistory.slice(-maxP);
|
||
// neon çizgi + alan
|
||
const stepX = w / data.length;
|
||
const py = function (v) { return h - 8 - ((v - lo) / (hi - lo || 1)) * (h - 16); };
|
||
|
||
// alan dolgusu
|
||
const grad = g.createLinearGradient(0, 0, 0, h);
|
||
grad.addColorStop(0, 'rgba(255,77,158,0.28)');
|
||
grad.addColorStop(1, 'rgba(255,77,158,0)');
|
||
g.beginPath();
|
||
g.moveTo(0, py(data[0]));
|
||
for (let i = 0; i < data.length; i++) g.lineTo(i * stepX, py(data[i]));
|
||
g.lineTo(w, h); g.lineTo(0, h); g.closePath();
|
||
g.fillStyle = grad; g.fill();
|
||
|
||
// üst parlayan çizgi
|
||
g.beginPath();
|
||
g.moveTo(0, py(data[0]));
|
||
for (let i = 0; i < data.length; i++) g.lineTo(i * stepX, py(data[i]));
|
||
g.strokeStyle = 'rgba(255,110,190,0.15)';
|
||
g.lineWidth = 6; g.stroke();
|
||
g.strokeStyle = '#ff6eae';
|
||
g.lineWidth = 1.6;
|
||
g.shadowColor = '#ff6eae'; g.shadowBlur = 8;
|
||
g.stroke();
|
||
g.shadowBlur = 0;
|
||
|
||
// mevcut değer noktası
|
||
const lv = data[data.length - 1];
|
||
g.fillStyle = '#fff';
|
||
g.beginPath();
|
||
g.arc(w - stepX, py(lv), 2.4, 0, Math.PI * 2);
|
||
g.fill();
|
||
}
|
||
|
||
/* ============================================================================
|
||
CANVAS BOYUTLANDIRMA + HUD + ARK MİMARİ ÇUBUKLAR
|
||
============================================================================ */
|
||
function resizeCanvases() {
|
||
if (!neuralCv || !heatCv || !lossCv) return;
|
||
const dpr = window.devicePixelRatio || 1;
|
||
for (const cv of [neuralCv, heatCv, lossCv]) {
|
||
const r = cv.getBoundingClientRect();
|
||
cv.width = Math.max(20, Math.round(r.width * dpr));
|
||
cv.height = Math.max(20, Math.round(r.height * dpr));
|
||
cv.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
// not: yüksek-dpi'da piksel koordinat pikselleştirme: logikal piksel kullanıyoruz
|
||
// dpr ile CSS'e oranlı çizeceğiz: transform dpr yaptığımız için coordinates logikal kalıyor.
|
||
}
|
||
computeGeometry(neuralCv.clientWidth || neuralCv.parentElement.clientWidth, neuralCv.clientHeight || neuralCv.parentElement.clientHeight);
|
||
}
|
||
|
||
function updateHUD() {
|
||
const e = $('epochReadout'); if (e) e.textContent = epochCounter;
|
||
const lo = $('lossReadout');
|
||
if (lo) lo.textContent = lossHistory.length ? lossHistory[lossHistory.length - 1].toFixed(4) : '—';
|
||
const ae = $('actReadout'); if (ae) ae.textContent = state.activation;
|
||
}
|
||
|
||
function updateArchBars() {
|
||
const holder = $('archBars'); if (!holder) return;
|
||
holder.innerHTML = '';
|
||
const sizes = state.layerSizes;
|
||
const maxS = Math.max.apply(null, sizes);
|
||
for (let k = 0; k < sizes.length; k++) {
|
||
const b = document.createElement('div');
|
||
b.className = 'arch-bar';
|
||
const scale = sizes[k] / maxS;
|
||
b.style.height = (16 + scale * 26) + 'px';
|
||
b.textContent = sizes[k];
|
||
if (k === 0) b.style.background = 'linear-gradient(180deg,#6cf,#38e)';
|
||
else if (k === sizes.length - 1) b.style.background = 'linear-gradient(180deg,#ff7,#ff4d6d)';
|
||
holder.appendChild(b);
|
||
}
|
||
}
|
||
|
||
/* ============================================================================
|
||
ANA ANİMASYON DÖNGÜSÜ (requestAnimationFrame)
|
||
============================================================================ */
|
||
function requestAnimationFrameSim(ts) {
|
||
animationId = requestAnimationFrame(requestAnimationFrameSim);
|
||
const dt = lastTs ? Math.min((ts - lastTs) / 1000, 0.05) : 0.016;
|
||
lastTs = ts;
|
||
|
||
tickSignals(dt);
|
||
growBackHeat();
|
||
growFwdHeat();
|
||
tickAutoTrain();
|
||
|
||
// çizim
|
||
drawNeuralCanvas();
|
||
frameCount++;
|
||
if (frameCount % HEAT_REFRESH_EVERY === 0) drawHeatmap();
|
||
plotLoss();
|
||
updateHUD();
|
||
}
|
||
|
||
function startSim() {
|
||
if (animationId) return;
|
||
lastTs = 0;
|
||
animationId = requestAnimationFrame(requestAnimationFrameSim);
|
||
}
|
||
function stopSim() { if (animationId) { cancelAnimationFrame(animationId); animationId = null; } }
|
||
|
||
/* ============================================================================
|
||
KONTROL / UI BAĞLAMA
|
||
============================================================================ */
|
||
function applyActivation(choice) {
|
||
state.activation = (choice === 'relu') ? 'relu' : 'sigmoid';
|
||
updateActivationSeg();
|
||
}
|
||
|
||
function updateActivationSeg() {
|
||
const seg = $('activationSeg'); if (!seg) return;
|
||
const btns = seg.querySelectorAll('.seg-btn');
|
||
btns.forEach(function (b) {
|
||
b.classList.toggle('active', b.dataset.act === state.activation);
|
||
});
|
||
}
|
||
|
||
function onSliderChange() {
|
||
state.inputCount = intVal($('inputSlider'), 2);
|
||
state.hiddenNeurons = intVal($('hiddenSlider'), 4);
|
||
state.hiddenLayers = intVal($('hiddenCountSlider'), 3);
|
||
state.outputCount = intVal($('outputSlider'), 1);
|
||
state.learningRate = (intVal($('lrSlider'), 10)) / 100;
|
||
|
||
const io = $('inputOut'); if (io) io.textContent = state.inputCount;
|
||
const ho = $('hiddenOut'); if (ho) ho.textContent = state.hiddenNeurons;
|
||
const hco = $('hiddenCountOut'); if (hco) hco.textContent = state.hiddenLayers;
|
||
const oo = $('outputOut'); if (oo) oo.textContent = state.outputCount;
|
||
const lo2 = $('lrOut'); if (lo2) lo2.textContent = state.learningRate.toFixed(2);
|
||
|
||
buildNetwork();
|
||
updateArchBars();
|
||
updateHUD();
|
||
}
|
||
|
||
function intVal(el, d) {
|
||
if (!el) return d;
|
||
const v = parseInt(el.value, 10);
|
||
return isNaN(v) ? d : v;
|
||
}
|
||
|
||
/* RUN/PAUSE mantığı + otomatik forward-pass denemesi her frame */
|
||
function toggleRun() {
|
||
state.trainRunning = !state.trainRunning;
|
||
const b = $('runBtn'); if (b) b.classList.toggle('running', state.trainRunning);
|
||
}
|
||
|
||
function tickAutoTrain() {
|
||
// startSim üzerindeki ana döngüde çağrılır — sürekli RUN modunda her frame trainStep
|
||
if (!state.trainRunning) return;
|
||
if (frameCount % 4 === 0) trainStep();
|
||
}
|
||
|
||
/* ============================================================================
|
||
BAŞLATMA / DOM
|
||
============================================================================ */
|
||
function bindUI() {
|
||
const sliders = ['inputSlider', 'hiddenSlider', 'hiddenCountSlider', 'outputSlider', 'lrSlider'];
|
||
sliders.forEach(function (s) {
|
||
const el = $(s); if (el) el.addEventListener('input', onSliderChange);
|
||
});
|
||
|
||
const runBtn = $('runBtn');
|
||
if (runBtn) runBtn.addEventListener('click', toggleRun);
|
||
const stepBtn = $('stepBtn');
|
||
if (stepBtn) stepBtn.addEventListener('click', onEpochStep);
|
||
const resetBtn = $('resetBtn');
|
||
if (resetBtn) resetBtn.addEventListener('click', resetNetwork);
|
||
|
||
const seg = $('activationSeg');
|
||
if (seg) seg.addEventListener('click', function (ev) {
|
||
const t = ev.target.closest('.seg-btn');
|
||
if (t && t.dataset.act) applyActivation(t.dataset.act);
|
||
});
|
||
|
||
window.addEventListener('resize', function () {
|
||
resizeCanvases();
|
||
drawHeatmap();
|
||
plotLoss();
|
||
});
|
||
}
|
||
|
||
function init() {
|
||
neuralCv = $('neuralCanvas');
|
||
heatCv = $('heatCanvas');
|
||
lossCv = $('lossCanvas');
|
||
if (neuralCv) neuralCtx = neuralCv.getContext('2d');
|
||
if (heatCv) heatCtx = heatCv.getContext('2d');
|
||
if (lossCv) lossCtx = lossCv.getContext('2d');
|
||
|
||
onSliderChange(); // layerSizes + ilk buildNetwork
|
||
buildNetwork();
|
||
bindUI();
|
||
resizeCanvases();
|
||
updateActivationSeg();
|
||
updateHUD();
|
||
updateArchBars();
|
||
drawHeatmap();
|
||
plotLoss();
|
||
startSim();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', init);
|