playground: add expandable visual mode and docs

README.md

@@ -13,3 +13,5 @@ python3 -m http.server
 ```
 
 Train a neural network to map joystick positions to generative visuals through interactive machine learning. Two learning modes: direct example mapping and reinforcement learning with thumbs up/down feedback.
+
+The playground UI includes an **Expand** toggle on the visual surface so you can make the canvas nearly full-screen while compressing parameter/control panels into a minimal strip beneath it.

playground/README.md

@@ -0,0 +1,37 @@
+# NISPS Playground
+
+Browser-based interactive demo of the NISPS ML engine.
+
+## Run locally
+
+```bash
+python3 -m http.server
+# Open http://localhost:8000
+```
+
+Run the command from the `playground/` directory.
+
+## What it does
+
+- Maps 2D joystick input (X/Y) through an MLP to 20 visualization parameters.
+- Renders a flow-field particle visualization on a Canvas2D surface.
+- Supports two learning modes:
+  - **Examples**: add explicit input/output pairs and train.
+  - **RL Feedback**: give thumbs up/down while exploring outputs.
+
+## UI controls
+
+- **Expand / Collapse** button on the canvas: makes the visual surface nearly full-screen and compresses lower controls into a minimal view.
+- **Presets**: quick demo mappings (`Calm/Chaos`, `Rainbow`, `Vortex`).
+- **Help** (`?`) overlay: in-app usage guide.
+- **Follow mode**: double-click joystick in RL mode to toggle no-hold interaction.
+- **Keyboard in Follow mode (RL)**: `2` = thumbs up, `1` = thumbs down.
+- **Gamepad in RL**: `RB` = thumbs up, `LB` = thumbs down.
+
+## Files
+
+- `index.html` - page structure.
+- `css/style.css` - layout and visual styling.
+- `js/app.js` - app wiring and interaction logic.
+- `js/ui/` - visualizer, joystick, controls, parameter display.
+- `js/nisps/` - JavaScript MLP + IML core.

playground/css/style.css

@@ -37,6 +37,15 @@ html, body {
   margin: 0 auto;
 }
 
+.header,
+.visual-container,
+.param-container,
+.controls-area,
+.presets,
+.expand-visual-btn {
+  transition: all 0.2s ease;
+}
+
 /* Header */
 .header {
   display: flex;
@@ -70,6 +79,30 @@ html, body {
   min-height: 0;
 }
 
+.expand-visual-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  background: rgba(26, 26, 26, 0.82);
+  border: 1px solid #333;
+  color: #9f9f9f;
+  border-radius: 12px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 6px 10px;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.expand-visual-btn:active,
+.expand-visual-btn[aria-pressed="true"] {
+  border-color: var(--accent-dim);
+  color: var(--accent);
+  background: rgba(0, 255, 136, 0.15);
+}
+
 .visual-container canvas {
   width: 100%;
   height: 100%;
@@ -171,6 +204,97 @@ html, body {
   border-top: 1px solid #222;
 }
 
+.app.expanded {
+  grid-template-rows: auto minmax(0, 1fr) 58px 102px 0;
+}
+
+.app.expanded .header {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.app.expanded .header h1 {
+  font-size: 13px;
+  color: #9a9a9a;
+}
+
+.app.expanded .presets {
+  top: 6px;
+  left: 6px;
+  gap: 4px;
+}
+
+.app.expanded .preset-pill {
+  font-size: 10px;
+  padding: 3px 7px;
+  color: #868686;
+}
+
+.app.expanded .param-container {
+  padding: 4px 10px;
+  overflow: hidden;
+  opacity: 0.78;
+}
+
+.app.expanded .param-row {
+  height: 17px;
+}
+
+.app.expanded .param-track {
+  height: 5px;
+}
+
+.app.expanded .draggable .param-track {
+  height: 9px;
+}
+
+.app.expanded .param-label,
+.app.expanded .param-value {
+  font-size: 9px;
+}
+
+.app.expanded .controls-area {
+  padding: 6px 10px;
+  gap: 8px;
+  overflow: hidden;
+  opacity: 0.82;
+}
+
+.app.expanded #joystick-container {
+  width: 94px;
+  height: 94px;
+  overflow: hidden;
+}
+
+.app.expanded #joystick-container canvas {
+  transform: scale(0.58);
+  transform-origin: top left;
+}
+
+.app.expanded .controls-mode-toggle,
+.app.expanded .controls-actions {
+  margin-bottom: 4px;
+}
+
+.app.expanded .btn,
+.app.expanded .mode-btn {
+  font-size: 10px;
+  padding: 5px 10px;
+  border-radius: 6px;
+}
+
+.app.expanded .btn-good,
+.app.expanded .btn-bad {
+  font-size: 14px;
+  padding: 5px 12px;
+}
+
+.app.expanded .controls-status,
+.app.expanded .metrics-grid,
+.app.expanded .loss-plot-wrap {
+  display: none;
+}
+
 #joystick-container {
   flex-shrink: 0;
 }

playground/index.html

@@ -25,6 +25,7 @@
         <button class="preset-pill" onclick="loadPreset('rainbow-sweep')">Rainbow</button>
         <button class="preset-pill" onclick="loadPreset('vortex')">Vortex</button>
       </div>
+      <button id="expand-visual-btn" class="expand-visual-btn" type="button" title="Expand visual area" aria-pressed="false">Expand</button>
     </div>
 
     <!-- Parameter bars -->

playground/js/app.js

@@ -25,6 +25,9 @@ let gamepadButtonsPrev = [];
 let gamepadConnected = false;
 let gamepadLastAxes = [0.5, 0.5];
 let followMode = false;
+let visualExpanded = false;
+let appRoot;
+let expandVisualBtn;
 
 // --- Init ---
 function init() {
@@ -32,6 +35,9 @@ function init() {
   iml.setLogger(msg => console.log('[NISPS]', msg));
 
   // Visualizer
+  appRoot = document.querySelector('.app');
+  expandVisualBtn = document.getElementById('expand-visual-btn');
+
   const canvas = document.getElementById('visual-canvas');
   visualizer = new FlowFieldVisualizer(canvas);
 
@@ -63,10 +69,14 @@ function init() {
 
   // Resize handling
   window.addEventListener('resize', () => {
-    visualizer.resize();
-    visualizer.initParticles();
+    resizeVisualizerSurface();
   });
 
+  if (expandVisualBtn) {
+    expandVisualBtn.addEventListener('click', () => setVisualExpanded(!visualExpanded));
+    updateExpandButtonState();
+  }
+
   // Help overlay
   const helpBtn = document.getElementById('help-btn');
   const helpOverlay = document.getElementById('help-overlay');
@@ -215,6 +225,11 @@ function onModeChange(mode) {
 }
 
 function onKeyDown(e) {
+  if (e.key === 'Escape' && visualExpanded) {
+    setVisualExpanded(false);
+    return;
+  }
+
   if (!followMode || learningMode !== 'rl' || e.repeat) return;
   if (e.key === '1' || e.code === 'Numpad1') {
     e.preventDefault();
@@ -225,6 +240,33 @@ function onKeyDown(e) {
   }
 }
 
+function resizeVisualizerSurface() {
+  visualizer.resize();
+  visualizer.initParticles();
+}
+
+function updateExpandButtonState() {
+  if (!expandVisualBtn) return;
+  expandVisualBtn.textContent = visualExpanded ? 'Collapse' : 'Expand';
+  expandVisualBtn.title = visualExpanded ? 'Collapse visual area' : 'Expand visual area';
+  expandVisualBtn.setAttribute('aria-pressed', visualExpanded ? 'true' : 'false');
+}
+
+function setVisualExpanded(expanded) {
+  visualExpanded = expanded;
+  if (appRoot) {
+    appRoot.classList.toggle('expanded', visualExpanded);
+  }
+  updateExpandButtonState();
+
+  // Let CSS layout settle before resizing the drawing surface.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      resizeVisualizerSurface();
+    });
+  });
+}
+
 // --- Presets ---
 window.loadPreset = function(name) {
   iml.clearDataset();