neural-lab/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neural Lab — Yapay Sinir Ağı Laboratuvarı</title>
<meta name="description" content="Neural Lab — Küçük bir yapay sinir ağının gerçek forward pass ve backpropagation ile canlı öğrenmesini görselleştiren etkileşimli laboratuvar." />
<meta name="theme-color" content="#0a0e17" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230a0e17'/%3E%3Ccircle cx='18' cy='20' r='5' fill='%235eead4'/%3E%3Ccircle cx='18' cy='44' r='5' fill='%235eead4'/%3E%3Ccircle cx='46' cy='32' r='5' fill='%23f472b6'/%3E%3Cline x1='18' y1='20' x2='46' y2='32' stroke='%23818cf8' stroke-width='2'/%3E%3Cline x1='18' y1='44' x2='46' y2='32' stroke='%23818cf8' stroke-width='2'/%3E%3C/svg%3E" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
  <header class="topbar">
    <div class="brand">
      <span class="brand-dot"></span>
      <div class="brand-txt">
        <h1>NEURAL<span>LAB</span></h1>
        <p>Gerçek forward pass + backpropagation · tarayıcıda çalışır</p>
      </div>
    </div>
    <div class="topstats">
      <div class="stat"><span class="k">Epoch</span><b id="statEpoch">0</b></div>
      <div class="stat"><span class="k">Loss</span><b id="statLoss" class="loss">—</b></div>
      <div class="stat"><span class="k">Doğruluk</span><b id="statAcc" class="acc">—</b></div>
      <div class="stat"><span class="k">Durum</span><b id="statState" class="state">hazır</b></div>
    </div>
  </header>

  <main class="grid">
    <!-- SOL: Kontroller -->
    <section class="panel controls" aria-label="Kontroller">
      <h2 class="panel-title">Kontroller</h2>

      <div class="ctl">
        <label>Veri Seti</label>
        <div class="seg" id="segData">
          <button data-v="xor" class="on">XOR</button>
          <button data-v="circle">Circle</button>
          <button data-v="moons">Two Moons</button>
        </div>
      </div>

      <div class="ctl">
        <label>Aktivasyon (gizli)</label>
        <div class="seg" id="segAct">
          <button data-v="sigmoid" class="on">Sigmoid</button>
          <button data-v="tanh">Tanh</button>
          <button data-v="relu">ReLU</button>
        </div>
      </div>

      <div class="ctl">
        <label>Gizli Nöron (her katman) <b id="valHidden">8</b></label>
        <input type="range" id="rHidden" min="2" max="12" step="1" value="8" />
      </div>

      <div class="ctl">
        <label>Öğrenme Oranı <b id="valLr">0.30</b></label>
        <input type="range" id="rLr" min="0.01" max="2" step="0.01" value="0.30" />
      </div>

      <div class="ctl">
        <label>Gizli Katman Sayısı</label>
        <div class="seg" id="segLayers">
          <button data-v="1" class="on">1 Katman</button>
          <button data-v="2">2 Katman</button>
        </div>
      </div>

      <div class="ctl">
        <label>Optimizasyon</label>
        <div class="seg" id="segOpt">
          <button data-v="sgd" class="on">SGD</button>
          <button data-v="momentum">Momentum</button>
        </div>
      </div>

      <div class="actions">
        <button id="btnTrain" class="primary">▶ Eğit</button>
        <button id="btnStep">⏭ Tek Adım</button>
      </div>
      <div class="actions">
        <button id="btnReset">↺ Ağırlıkları Sıfırla</button>
        <button id="btnNewData">⟳ Yeni Veri</button>
      </div>
      <div class="actions">
        <button id="btnSpeed" class="ghost">⚡ Hız: x1</button>
      </div>

      <div class="legend">
        <div class="lg"><i class="pos"></i> Pozitif ağırlık</div>
        <div class="lg"><i class="neg"></i> Negatif ağırlık</div>
        <div class="lg"><i class="clsA"></i> Sınıf A</div>
        <div class="lg"><i class="clsB"></i> Sınıf B</div>
      </div>
      <p class="checkline" id="gradCheck">Gradyan kontrolü: hatasız</p>
    </section>

    <!-- ORTA: Ağ Görselleştirme -->
    <section class="panel netwrap" aria-label="Sinir ağı görselleştirmesi">
      <h2 class="panel-title">Ağ Topolojisi <span class="hint">çizgi rengi/yönü = ağırlık işareti &amp; büyüklüğü</span></h2>
      <div class="netcanvas">
        <svg id="net" viewBox="0 0 640 460" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Sinir ağı grafiği"></svg>
      </div>
      <div class="nodedetail" id="nodeDetail">Bir nörona dokun → aktivasyonunu gör</div>
    </section>

    <!-- SAĞ: Karar Sınırı + Grafikler -->
    <section class="panel vizwrap" aria-label="Karar sınırı ve metrikler">
      <h2 class="panel-title">Karar Sınırı <span class="hint">canlı tahmin ısı haritası</span></h2>
      <div class="dbwrap">
        <canvas id="db" width="440" height="440" aria-label="Karar sınırı ısı haritası"></canvas>
      </div>
      <div class="charts">
        <div class="chart">
          <span class="ctitle loss">Loss (BCE)</span>
          <canvas id="lossChart" width="420" height="120"></canvas>
        </div>
        <div class="chart">
          <span class="ctitle acc">Doğruluk %</span>
          <canvas id="accChart" width="420" height="120"></canvas>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>Neural Lab · Saf istemci-taraflı eğitim · Bağımlılık yok, CDN yok · Backend gerekmez</p>
  </footer>
</div>
<script src="app.js"></script>
</body>
</html>