martijn.diersmann@pm.me
94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AI Lab — de kracht van een AI-agent</title>
|
|
<meta name="description" content="AI Lab: een zelfstandige demo met een live lerend neuraal netwerk, generative art en het verhaal van de AI die dit bouwde." />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="hero container">
|
|
<p class="hero-badge">100% in de browser · geen internet · geen installatie</p>
|
|
<h1 class="hero-title">AI <span>Lab</span></h1>
|
|
<p class="hero-sub">Alles op deze pagina is door een <strong>AI-agent</strong> geprogrammeerd — in één sessie, zonder voorbeeldcode. Bewonder, speel, en test zelf waartoe een AI in staat is.</p>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<!-- Terminal -->
|
|
<section class="panel" id="terminal">
|
|
<div class="panel-head">
|
|
<span class="dot"></span>
|
|
<h2>Cline — het verhaal</h2>
|
|
<span class="tag">terminal</span>
|
|
</div>
|
|
<div class="term-body" id="termBody" aria-live="polite"></div>
|
|
<div class="term-foot">
|
|
<button class="btn ghost" id="termReplay" style="display:none">▶ Opnieuw afspelen</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Network -->
|
|
<section class="panel" id="network">
|
|
<div class="panel-head">
|
|
<span class="dot cyan"></span>
|
|
<h2>Neuraal netwerk dat écht leert</h2>
|
|
<span class="tag">JS · backpropagation</span>
|
|
</div>
|
|
<div class="nn-stats" id="nnStats">initialiseren…</div>
|
|
<div class="nn-grid">
|
|
<figure class="canvas-frame">
|
|
<figcaption>De beslisgrens wordt live scherper</figcaption>
|
|
<canvas id="nnCanvas" width="460" height="320"></canvas>
|
|
</figure>
|
|
<figure class="canvas-frame">
|
|
<figcaption>De fout (loss) daalt</figcaption>
|
|
<canvas id="lossCanvas" width="460" height="320"></canvas>
|
|
</figure>
|
|
</div>
|
|
<div class="nn-controls">
|
|
<div class="btn-row">
|
|
<button class="btn dataset active" data-set="XOR">XOR</button>
|
|
<button class="btn dataset" data-set="CIRKEL">Cirkel</button>
|
|
<button class="btn dataset" data-set="SPIRAAL">Spiraal</button>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn accent" id="nnPause">⏸ Pauze</button>
|
|
<button class="btn" id="nnReset">↻ Herstart</button>
|
|
</div>
|
|
<label class="slider">
|
|
<span>Snelheid</span>
|
|
<input type="range" id="nnSpeed" min="1" max="300" value="40" />
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Art -->
|
|
<section class="panel" id="art">
|
|
<div class="panel-head">
|
|
<span class="dot violet"></span>
|
|
<h2>Generative art</h2>
|
|
<span class="tag">canvas · flow field</span>
|
|
</div>
|
|
<div class="art-wrap">
|
|
<canvas id="artCanvas"></canvas>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn accent" id="artNew">✦ Nieuw kunstwerk</button>
|
|
<button class="btn" id="artPause">⏸ Pauze</button>
|
|
<button class="btn" id="artPng">⬇ Opslaan als PNG</button>
|
|
</div>
|
|
<p class="hint">Beweeg met je muis over het kunstwerk — de deeltjes reageren.</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer container">
|
|
<p>AI Lab · gebouwd door een AI-agent (Cline). Elke pixel en elk cijfer hierboven is runtime gegenereerd.</p>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|