150 lines
5.5 KiB
HTML
150 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NEURALFLOW — Gerçek Zamanlı Sinir Ağı Simülatörü</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='6' cy='16' r='4' fill='%2337e0ff'/%3E%3Ccircle cx='26' cy='6' r='4' fill='%23ff5d9e'/%3E%3Ccircle cx='26' cy='26' r='4' fill='%23ff5d9e'/%3E%3Cline x1='8' y1='14' x2='23' y2='7' stroke='%238f7bff' stroke-width='2'/%3E%3Cline x1='8' y1='18' x2='23' y2='25' stroke='%238f7bff' stroke-width='2'/%3E%3C/svg%3E">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="logo-mark"></span>
|
||
<h1>NEURAL<span>FLOW</span></h1>
|
||
<span class="tagline">canlı yapay sinir ağı</span>
|
||
</div>
|
||
<div class="hud">
|
||
<div class="hud-cell">
|
||
<span class="hud-label">EPOCH</span>
|
||
<span class="hud-value" id="epochReadout">0</span>
|
||
</div>
|
||
<div class="hud-cell accent">
|
||
<span class="hud-label">LOSS</span>
|
||
<span class="hud-value" id="lossReadout">—</span>
|
||
</div>
|
||
<div class="hud-cell">
|
||
<span class="hud-label">AKTİVASYON</span>
|
||
<span class="hud-value" id="actReadout">sigmoid</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="workspace">
|
||
<!-- SOL: Katman Editörü -->
|
||
<aside class="panel editor-panel" id="editorPanel">
|
||
<div class="panel-title">
|
||
<span class="t-bullet"></span> KATMAN EDİTÖRÜ
|
||
</div>
|
||
|
||
<div class="slider-group">
|
||
<div class="slider-head">
|
||
<label for="inputSlider">GİRİŞ NÖRON</label>
|
||
<output id="inputOut">2</output>
|
||
</div>
|
||
<input type="range" id="inputSlider" min="1" max="8" value="2" step="1">
|
||
<div class="slider-scale">
|
||
<span>1</span><span>4</span><span>8</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-group">
|
||
<div class="slider-head">
|
||
<label for="hiddenSlider">GİZLİ KATMAN NÖRON</label>
|
||
<output id="hiddenOut">4</output>
|
||
</div>
|
||
<input type="range" id="hiddenSlider" min="1" max="8" value="4" step="1">
|
||
<div class="slider-scale">
|
||
<span>1</span><span>4</span><span>8</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-group">
|
||
<div class="slider-head">
|
||
<label for="hiddenCountSlider">GİZLİ KATMAN SAYISI</label>
|
||
<output id="hiddenCountOut">3</output>
|
||
</div>
|
||
<input type="range" id="hiddenCountSlider" min="1" max="3" value="3" step="1">
|
||
<div class="slider-scale">
|
||
<span>1</span><span>2</span><span>3</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-group">
|
||
<div class="slider-head">
|
||
<label for="outputSlider">ÇIKIŞ NÖRON</label>
|
||
<output id="outputOut">1</output>
|
||
</div>
|
||
<input type="range" id="outputSlider" min="1" max="8" value="1" step="1">
|
||
<div class="slider-scale">
|
||
<span>1</span><span>4</span><span>8</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-group lr-group">
|
||
<div class="slider-head">
|
||
<label for="lrSlider">ÖĞRENME ORANI</label>
|
||
<output id="lrOut">0.10</output>
|
||
</div>
|
||
<input type="range" id="lrSlider" min="5" max="90" value="10" step="1">
|
||
<div class="slider-scale">
|
||
<span>0.05</span><span>0.50</span><span>0.90</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="activation-row">
|
||
<span class="act-label">AKTİVASYON</span>
|
||
<div class="segmented" id="activationSeg">
|
||
<button class="seg-btn active" data-act="sigmoid">SIGMOID</button>
|
||
<button class="seg-btn" data-act="relu">RELU</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button id="runBtn" class="ctrl-btn run">▶ <span>RUN</span></button>
|
||
<button id="stepBtn" class="ctrl-btn step">⚡ <span>TRAIN STEP</span></button>
|
||
<button id="resetBtn" class="ctrl-btn reset">⟳ <span>RESET</span></button>
|
||
</div>
|
||
|
||
<div class="arch-preview">
|
||
<span class="arch-label">MİMARİ</span>
|
||
<div id="archBars" class="arch-bars"></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ORTA: Sinir Ağı Kanvası -->
|
||
<section class="net-section panel">
|
||
<div class="net-head">
|
||
<span class="panel-title-sm net-layer-hint">NÖRON AKIŞI — soldan sağa sinyal, sağdan sola gradyan</span>
|
||
</div>
|
||
<canvas id="neuralCanvas"></canvas>
|
||
<div class="legend">
|
||
<span class="lg-item"><i class="swatch pos"></i> pozitif ağırlık</span>
|
||
<span class="lg-item"><i class="swatch neg"></i> negatif ağırlık</span>
|
||
<span class="lg-item"><i class="swatch fwd"></i> ileri sinyal</span>
|
||
<span class="lg-item"><i class="swatch bwd"></i> gradyan / hataya dönen alev</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SAĞ: Ağırlık Isı Haritası -->
|
||
<aside class="panel heat-panel" id="heatPanel">
|
||
<div class="panel-title">
|
||
<span class="t-bullet warm"></span> AĞIRLIK MATRİSİ
|
||
</div>
|
||
<canvas id="heatCanvas"></canvas>
|
||
<div class="heat-scale">
|
||
<span class="hs-neg">negatif</span>
|
||
<div class="heat-gradient-bar"></div>
|
||
<span class="hs-pos">pozitif</span>
|
||
</div>
|
||
<div class="panel-title sub">
|
||
<span class="t-bullet"></span> LOSS — MSE (epoch)
|
||
</div>
|
||
<canvas id="lossCanvas"></canvas>
|
||
</aside>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|