ok

2026-09-26 18:50:28 +02:00
commit e9533f7ae7
4 changed files with 1090 additions and 0 deletions
@@ -0,0 +1,93 @@
+<!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>