feat(playground/modes): ModeShell + runtime + switcher scaffolding (meml-yt7)
Stream 9 (part 1/2) — shared infrastructure for the per-mode TSX layer.
- ModeShell.tsx: common chrome (header, voice-space PillToggle, audio
start/stop, control axes, training controls, drawer, status line).
Modes only have to author primary input + output JSX.
- mode-runtime.ts: useModeRuntime(schema) hook. Owns input pipeline,
WASM ML calls, output pipeline, and a 50ms-throttled engine-host
bridge. Exposes setInput/processedOutputs/training/audio surfaces
so mode TSX stays declarative.
- mode-helpers.ts: schema → SliderBank config + Float32Array →
slider-range value mapping. Pure functions.
- ModeSwitcher.tsx: top-of-page <select> wired to modeStore.
ModeShell and the runtime read controlStore (Boldness/Memory/Precision)
to derive learning rate + RL noise cap so axes affect training without
needing per-mode plumbing.
This commit is contained in:
w1n5t0n
parent
3021552a38
commit
ebd5dba4c0
6 changed files with 845 additions and 0 deletions
162
playground/src/modes/ModeShell.module.css
Normal file
162
playground/src/modes/ModeShell.module.css
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
.shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto auto;
|
||||
gap: var(--sp-4);
|
||||
min-height: 100%;
|
||||
padding: var(--sp-4);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding-bottom: var(--sp-3);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--fg-mute);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.audioToggle {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.audioBtn {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-1);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.audioBtn.on {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.audioBtn:hover {
|
||||
background: var(--bg-3);
|
||||
}
|
||||
|
||||
.voiceSpaces {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.voiceSpacesLabel {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--fg-mute);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px);
|
||||
gap: var(--sp-4);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.primaryArea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-2);
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.outputArea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3);
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-2);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: var(--sp-4);
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding: var(--sp-3);
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-2);
|
||||
}
|
||||
|
||||
.controlAxes {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.trainingPanel {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.drawerToggleBar {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawerToggleBtn {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-1);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
cursor: pointer;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--fg-mute);
|
||||
}
|
||||
|
||||
.drawerToggleBtn:hover {
|
||||
color: var(--fg);
|
||||
background: var(--bg-3);
|
||||
}
|
||||
|
||||
.statusLine {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--fg-dim);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.frozen {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.notReady {
|
||||
color: var(--warn);
|
||||
}
|
||||
193
playground/src/modes/ModeShell.tsx
Normal file
193
playground/src/modes/ModeShell.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
/**
|
||||
* ModeShell — common scaffolding shared by every concrete mode.
|
||||
*
|
||||
* Provides:
|
||||
* - Header (mode name, optional voice-space PillToggle, audio start/stop).
|
||||
* - Primary input area (joystick / xy-pad / audio analyser, mode-supplied).
|
||||
* - Output area (sliders / output bars, mode-supplied).
|
||||
* - Control axes bar (Boldness/Memory/Precision wired to controlStore).
|
||||
* - Training controls (wired to the mode runtime).
|
||||
* - Optional right-side drawer for mode-specific settings.
|
||||
*
|
||||
* Modes only have to author the primary input + output JSX. Everything
|
||||
* else is owned here so behaviour stays consistent across modes.
|
||||
*/
|
||||
|
||||
import { Component, createSignal, JSX, Show, For } from 'solid-js';
|
||||
import { TrainingControls } from '../primitives/TrainingControls';
|
||||
import { ControlAxis } from '../primitives/ControlAxis';
|
||||
import { PillToggle } from '../primitives/PillToggle';
|
||||
import { Drawer } from '../primitives/Drawer';
|
||||
import { controlStore } from '../stores/control-store';
|
||||
import type { ModeRuntime } from './mode-runtime';
|
||||
import type { ModeSchema } from './generated';
|
||||
import styles from './ModeShell.module.css';
|
||||
|
||||
export interface ModeShellProps {
|
||||
schema: ModeSchema;
|
||||
runtime: ModeRuntime;
|
||||
/** Primary input renderer (joystick / xy-pad / etc.). */
|
||||
primaryInput: () => JSX.Element;
|
||||
/** Output / visualisation area. */
|
||||
outputArea: () => JSX.Element;
|
||||
/** Optional drawer body for mode-specific settings. */
|
||||
drawerContent?: () => JSX.Element;
|
||||
drawerTitle?: string;
|
||||
/** Active voice space index (only used if schema.voice_spaces is non-empty). */
|
||||
activeVoiceSpace?: () => number;
|
||||
onVoiceSpaceChange?: (idx: number) => void;
|
||||
}
|
||||
|
||||
export const ModeShell: Component<ModeShellProps> = (props) => {
|
||||
const [drawerOpen, setDrawerOpen] = createSignal(false);
|
||||
const showVoiceSpaces = () =>
|
||||
props.schema.ui.show_voice_space_selector && props.schema.voice_spaces.length > 0;
|
||||
|
||||
const voiceSpaceOptions = () =>
|
||||
props.schema.voice_spaces.map((label, idx) => ({
|
||||
value: String(idx),
|
||||
label,
|
||||
}));
|
||||
|
||||
return (
|
||||
<section class={styles.shell} aria-label={`${props.schema.mode_id} mode`}>
|
||||
<header class={styles.header}>
|
||||
<div>
|
||||
<h2 class={styles.title}>{formatModeName(props.schema.mode_id)}</h2>
|
||||
<p class={styles.subtitle}>
|
||||
{props.schema.ml.input_size} in → {props.schema.ml.output_size} out
|
||||
{' · '}
|
||||
engine: <code>{props.schema.engine_id}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={showVoiceSpaces()}>
|
||||
<div class={styles.voiceSpaces}>
|
||||
<span class={styles.voiceSpacesLabel}>Voice space</span>
|
||||
<PillToggle
|
||||
options={voiceSpaceOptions()}
|
||||
value={() => String(props.activeVoiceSpace?.() ?? 0)}
|
||||
onChange={(v) => props.onVoiceSpaceChange?.(Number(v))}
|
||||
ariaLabel="Voice space"
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class={styles.audioToggle}>
|
||||
<Show
|
||||
when={props.runtime.audio.started()}
|
||||
fallback={
|
||||
<button
|
||||
type="button"
|
||||
class={styles.audioBtn}
|
||||
onClick={() => void props.runtime.audio.start()}
|
||||
aria-label="Start audio engine"
|
||||
>
|
||||
▶ Start audio
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class={`${styles.audioBtn} ${styles.on}`}
|
||||
onClick={() => void props.runtime.audio.stop()}
|
||||
aria-label="Stop audio engine"
|
||||
>
|
||||
⏹ Stop audio
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={props.drawerContent}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.drawerToggleBtn}
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
aria-label="Open settings drawer"
|
||||
>
|
||||
⚙
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class={styles.body}>
|
||||
<div class={styles.primaryArea}>{props.primaryInput()}</div>
|
||||
<div class={styles.outputArea}>{props.outputArea()}</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.controls}>
|
||||
<div class={styles.controlAxes}>
|
||||
<For each={AXES}>
|
||||
{(axis) => (
|
||||
<ControlAxis
|
||||
label={axis.label}
|
||||
endpoints={axis.endpoints}
|
||||
value={() => controlStore.state[axis.key]}
|
||||
onChange={(v) => controlStore.setAxis(axis.key, v)}
|
||||
preset={() => controlStore.state.presetId}
|
||||
onDoubleTap={() => controlStore.clearOffsets(axis.key)}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<div class={styles.trainingPanel}>
|
||||
<TrainingControls
|
||||
onTrain={() => props.runtime.trainOnCurrent()}
|
||||
onRandomize={() => props.runtime.randomize()}
|
||||
onThumbsUp={() => props.runtime.thumbsUp()}
|
||||
onThumbsDown={() => props.runtime.thumbsDown()}
|
||||
onUndo={() => {
|
||||
// Stream 9 ships without undo wiring — no-op until session-store
|
||||
// gets a snapshot/pop method exposed via the runtime. Stubbed
|
||||
// so the button still appears.
|
||||
}}
|
||||
exampleCount={() => props.runtime.training.examples()}
|
||||
lastLoss={() => props.runtime.training.lastLoss()}
|
||||
busy={() => props.runtime.training.busy()}
|
||||
canUndo={() => false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class={styles.statusLine}>
|
||||
<Show when={!props.runtime.ready()}>
|
||||
<span class={styles.notReady}>Loading WASM ML…</span>{' '}
|
||||
</Show>
|
||||
<Show when={props.runtime.frozen()}>
|
||||
<span class={styles.frozen}>frozen</span>{' '}
|
||||
</Show>
|
||||
<span>
|
||||
input ({props.runtime.pipedInput()[0].toFixed(2)},
|
||||
{' '}
|
||||
{props.runtime.pipedInput()[1].toFixed(2)})
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<Show when={props.drawerContent}>
|
||||
<Drawer
|
||||
open={drawerOpen()}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
side="right"
|
||||
title={props.drawerTitle ?? 'Mode settings'}
|
||||
width={420}
|
||||
>
|
||||
{props.drawerContent!()}
|
||||
</Drawer>
|
||||
</Show>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const AXES = [
|
||||
{ key: 'boldness' as const, label: 'Boldness', endpoints: ['Caution', 'Bold'] as const },
|
||||
{ key: 'memory' as const, label: 'Memory', endpoints: ['Amnesia', 'Elephant'] as const },
|
||||
{ key: 'precision' as const, label: 'Precision', endpoints: ['Raw', 'Precise'] as const },
|
||||
];
|
||||
|
||||
function formatModeName(id: string): string {
|
||||
return id
|
||||
.split('_')
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
export default ModeShell;
|
||||
43
playground/src/modes/ModeSwitcher.module.css
Normal file
43
playground/src/modes/ModeSwitcher.module.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) var(--sp-4);
|
||||
background: var(--bg-1);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--fg-mute);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.select {
|
||||
background: var(--bg-2);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-1);
|
||||
padding: var(--sp-1) var(--sp-3);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.select:focus {
|
||||
outline: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--fg-dim);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: var(--warn);
|
||||
}
|
||||
54
playground/src/modes/ModeSwitcher.tsx
Normal file
54
playground/src/modes/ModeSwitcher.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* ModeSwitcher — top-level select that picks the active mode.
|
||||
*
|
||||
* Writes through `modeStore.switchMode(id)` so persistence + the bus event
|
||||
* fire correctly. Reads the current selection back from the store so it
|
||||
* stays in sync with persisted state on first paint.
|
||||
*
|
||||
* Audio engine switching is handled inside the mode runtime (each mode
|
||||
* routes its own engine_id through `EngineHost.setEngine` when started).
|
||||
*/
|
||||
|
||||
import { Component, createMemo, For, Show } from 'solid-js';
|
||||
import { modeStore } from '../stores/mode-store';
|
||||
import { MODE_REGISTRY, getModeById } from './index';
|
||||
import styles from './ModeSwitcher.module.css';
|
||||
|
||||
export const ModeSwitcher: Component = () => {
|
||||
const activeId = () => modeStore.state.activeModeId ?? MODE_REGISTRY[0]!.id;
|
||||
const active = createMemo(() => getModeById(activeId()));
|
||||
|
||||
return (
|
||||
<div class={styles.bar} role="region" aria-label="Mode selector">
|
||||
<span class={styles.label}>Mode</span>
|
||||
<select
|
||||
class={styles.select}
|
||||
value={activeId()}
|
||||
onChange={(e) => modeStore.switchMode(e.currentTarget.value)}
|
||||
aria-label="Select active mode"
|
||||
>
|
||||
<For each={MODE_REGISTRY}>
|
||||
{(m) => (
|
||||
<option value={m.id}>
|
||||
{m.label}
|
||||
{m.placeholder ? ' (TODO)' : ''}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</select>
|
||||
<span
|
||||
class={styles.description}
|
||||
classList={{ [styles.placeholder]: !!active().placeholder }}
|
||||
>
|
||||
{active().description}
|
||||
</span>
|
||||
<Show when={active().placeholder}>
|
||||
<span class={styles.placeholder} aria-hidden="true">
|
||||
⚠
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModeSwitcher;
|
||||
54
playground/src/modes/mode-helpers.ts
Normal file
54
playground/src/modes/mode-helpers.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Helpers shared across mode TSX files. Pure functions; no Solid state.
|
||||
*/
|
||||
|
||||
import type { Param } from './generated/types';
|
||||
import type { SliderConfig } from '../primitives/SliderBank';
|
||||
import type { CurveName } from '../output/curves';
|
||||
|
||||
/**
|
||||
* Convert a schema param list into SliderConfig entries that the SliderBank
|
||||
* primitive understands. Sliders are grouped by the schema's `group` field
|
||||
* so the bank renders collapsible sections.
|
||||
*/
|
||||
export function paramsToSliderConfig(params: ReadonlyArray<Param>): SliderConfig[] {
|
||||
let lastGroup: string | null = null;
|
||||
return params.map((p) => {
|
||||
const isNewGroup = p.group !== lastGroup;
|
||||
lastGroup = p.group;
|
||||
const cfg: SliderConfig = {
|
||||
id: p.name,
|
||||
label: p.label,
|
||||
min: p.min,
|
||||
max: p.max,
|
||||
curve: p.curve as CurveName,
|
||||
};
|
||||
if (isNewGroup) cfg.section = formatGroupName(p.group);
|
||||
return cfg;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Map a Float32Array (length = N) of normalized values [0,1] to a flat
|
||||
* array sized to match the slider config (already in min/max range).
|
||||
*/
|
||||
export function outputsToSliderValues(
|
||||
outputs: Float32Array,
|
||||
params: ReadonlyArray<Param>,
|
||||
): number[] {
|
||||
const out: number[] = [];
|
||||
for (let i = 0; i < params.length; ++i) {
|
||||
const v = outputs[i] ?? 0;
|
||||
const p = params[i]!;
|
||||
out.push(p.min + v * (p.max - p.min));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function formatGroupName(group: string): string {
|
||||
if (!group) return '';
|
||||
return group
|
||||
.split(/[_\s]+/)
|
||||
.map((p) => p.charAt(0).toUpperCase() + p.slice(1))
|
||||
.join(' ');
|
||||
}
|
||||
339
playground/src/modes/mode-runtime.ts
Normal file
339
playground/src/modes/mode-runtime.ts
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
/**
|
||||
* Mode runtime — shared wiring between mode TSX components and the
|
||||
* playground's stores / WASM ML / audio engine host.
|
||||
*
|
||||
* Every mode does the same dance:
|
||||
* 1. Hold a primary 2D input position (joystick / xy-pad / external feed).
|
||||
* 2. Push it through the input pipeline.
|
||||
* 3. Forward the processed (x, y) to the WASM MLP as input channels [0..N].
|
||||
* Modes with input_size > 2 zero-pad the unused channels.
|
||||
* 4. Pull the WASM outputs (Float32Array of 126), slice to the schema's
|
||||
* `output_size`, and run them through the output pipeline.
|
||||
* 5. Throttle + ship the processed slice to the AudioWorklet engine.
|
||||
*
|
||||
* To keep mode TSX files small and consistent, this module exposes a hook
|
||||
* `useModeRuntime(schema)` that owns the lifecycle and exposes reactive
|
||||
* accessors plus the `setInput(x, y)` driver. Modes only have to render a
|
||||
* primary input that calls `runtime.setInput(x, y)` and the runtime takes
|
||||
* care of everything downstream.
|
||||
*/
|
||||
|
||||
import { createEffect, createSignal, onCleanup, onMount } from 'solid-js';
|
||||
|
||||
import { mlStore, modeStore, controlStore } from '../stores';
|
||||
import { inputStore } from '../stores/input-store';
|
||||
import { outputStore } from '../stores/output-store';
|
||||
import { processInput, defaultInputState, type InputState } from '../input/pipeline';
|
||||
import {
|
||||
processOutput,
|
||||
defaultOutputState,
|
||||
type OutputState,
|
||||
} from '../output/pipeline';
|
||||
import { EngineHost } from '../audio/engine-host';
|
||||
import type { EngineId } from '../ml/types';
|
||||
import type { ModeSchema } from './generated';
|
||||
|
||||
/**
|
||||
* Throttle interval for engine param updates (ms). 50ms ≈ 20fps which
|
||||
* matches the legacy playground's C15 update cadence.
|
||||
*/
|
||||
const ENGINE_PARAM_THROTTLE_MS = 50;
|
||||
|
||||
/** A single shared EngineHost. Audio only starts on user gesture. */
|
||||
let engineHost: EngineHost | null = null;
|
||||
function getEngineHost(): EngineHost {
|
||||
if (!engineHost) engineHost = new EngineHost();
|
||||
return engineHost;
|
||||
}
|
||||
|
||||
export interface ModeRuntime {
|
||||
/** Driver — call from joystick/xy-pad/etc. */
|
||||
setInput: (x: number, y: number) => void;
|
||||
|
||||
/** Most recent processed input (after pipeline). */
|
||||
pipedInput: () => readonly [number, number];
|
||||
|
||||
/** Whether the input is currently frozen by zoom. */
|
||||
frozen: () => boolean;
|
||||
|
||||
/** Raw 126-output ML vector (live). */
|
||||
rawOutputs: () => Float32Array;
|
||||
|
||||
/** Output-sliced + pipeline-processed vector (length = schema.output_size). */
|
||||
processedOutputs: () => Float32Array;
|
||||
|
||||
/** True iff WASM has loaded and the MLP is ready. */
|
||||
ready: () => boolean;
|
||||
|
||||
/** Audio host control. */
|
||||
audio: {
|
||||
started: () => boolean;
|
||||
start: () => Promise<void>;
|
||||
stop: () => Promise<void>;
|
||||
setMuted: (muted: boolean) => void;
|
||||
};
|
||||
|
||||
/** Loss / training plumbing surfaced from mlStore. */
|
||||
training: {
|
||||
busy: () => boolean;
|
||||
examples: () => number;
|
||||
lastLoss: () => number | null;
|
||||
lossHistory: () => ReadonlyArray<number>;
|
||||
};
|
||||
|
||||
/** Trigger a sync train + push the current pipeline-processed sample. */
|
||||
trainOnCurrent: () => void;
|
||||
|
||||
/** RL callbacks. */
|
||||
thumbsUp: () => void;
|
||||
thumbsDown: () => void;
|
||||
randomize: () => void;
|
||||
}
|
||||
|
||||
interface RuntimeOptions {
|
||||
/** Override the engine id (defaults to schema.engine_id). */
|
||||
engineOverride?: EngineId;
|
||||
/** Skip starting the audio engine even on user gesture. */
|
||||
audioDisabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the runtime for a given mode schema. Call from inside a Solid
|
||||
* component (uses createSignal/onCleanup).
|
||||
*/
|
||||
export function useModeRuntime(
|
||||
schema: ModeSchema,
|
||||
opts: RuntimeOptions = {},
|
||||
): ModeRuntime {
|
||||
// ----- WASM init ---------------------------------------------------------
|
||||
const [ready, setReady] = createSignal(mlStore.state.ready);
|
||||
|
||||
// Lazy initialise WASM. Idempotent across remounts.
|
||||
void mlStore
|
||||
.initialize(schema.ml.input_size, schema.ml.output_size)
|
||||
.then(() => setReady(true))
|
||||
.catch((err) => {
|
||||
// Best-effort; UI keeps running without ML.
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[mode-runtime] mlStore.initialize failed:', err);
|
||||
});
|
||||
|
||||
// ----- Mode-store side effects ------------------------------------------
|
||||
// Make sure the active mode in the store matches what's actually rendered.
|
||||
if (modeStore.state.activeModeId !== schema.mode_id) {
|
||||
modeStore.switchMode(schema.mode_id);
|
||||
}
|
||||
|
||||
// ----- Input pipeline state --------------------------------------------
|
||||
const [pipedInput, setPipedInput] = createSignal<readonly [number, number]>([0.5, 0.5]);
|
||||
const [frozen, setFrozen] = createSignal(false);
|
||||
let inputState: InputState = defaultInputState();
|
||||
let lastFrameMs = performance.now();
|
||||
|
||||
const setInput = (rawX: number, rawY: number): void => {
|
||||
const now = performance.now();
|
||||
const dt = Math.max(0.001, (now - lastFrameMs) / 1000);
|
||||
lastFrameMs = now;
|
||||
|
||||
const result = processInput([rawX, rawY], inputStore.config, inputState, dt);
|
||||
inputState = result.state;
|
||||
inputStore.__setLiveState(result.state);
|
||||
setPipedInput([result.x, result.y]);
|
||||
setFrozen(result.frozen);
|
||||
|
||||
if (!ready()) return;
|
||||
// Push input to the MLP. Channels beyond [x,y] are zeroed out — modes
|
||||
// with input_size > 2 currently aren't fed extra inputs (audio analysis
|
||||
// wiring is a stream-10 task).
|
||||
const inSz = schema.ml.input_size;
|
||||
mlStore.setInput(0, result.x);
|
||||
if (inSz > 1) mlStore.setInput(1, result.y);
|
||||
for (let i = 2; i < inSz; ++i) mlStore.setInput(i, 0);
|
||||
mlStore.process();
|
||||
};
|
||||
|
||||
// ----- Output pipeline state -------------------------------------------
|
||||
let outputState: OutputState = defaultOutputState();
|
||||
const sliceLen = schema.ml.output_size;
|
||||
const [processedOutputs, setProcessedOutputs] = createSignal<Float32Array>(
|
||||
new Float32Array(sliceLen),
|
||||
{ equals: false }, // always notify even when buffer is reused in-place
|
||||
);
|
||||
|
||||
// Run the output pipeline whenever raw outputs change.
|
||||
const rawOutputsAccessor = mlStore.outputs;
|
||||
let lastOutFrameMs = performance.now();
|
||||
|
||||
const recomputeOutputs = () => {
|
||||
const raw = rawOutputsAccessor();
|
||||
if (raw.length === 0) return;
|
||||
const now = performance.now();
|
||||
const dtMs = Math.max(1, now - lastOutFrameMs);
|
||||
lastOutFrameMs = now;
|
||||
// Slice to mode's output_size up front.
|
||||
const slice = raw.length === sliceLen ? raw : raw.subarray(0, sliceLen);
|
||||
const result = processOutput(slice as Float32Array, outputStore.config, outputState, dtMs);
|
||||
outputState = result.state;
|
||||
setProcessedOutputs(result.processed);
|
||||
};
|
||||
|
||||
// Trigger recompute on any raw-output change.
|
||||
createEffect(() => {
|
||||
rawOutputsAccessor();
|
||||
recomputeOutputs();
|
||||
});
|
||||
|
||||
// ----- Engine wiring (audio) -------------------------------------------
|
||||
const host = getEngineHost();
|
||||
const [audioStarted, setAudioStarted] = createSignal(host.isStarted);
|
||||
let pendingParams: Float32Array | null = null;
|
||||
let throttleTimer: number | null = null;
|
||||
|
||||
const flushParams = () => {
|
||||
throttleTimer = null;
|
||||
if (!pendingParams || !host.isStarted) {
|
||||
pendingParams = null;
|
||||
return;
|
||||
}
|
||||
// Copy because EngineHost transfers the buffer.
|
||||
const copy = new Float32Array(pendingParams);
|
||||
pendingParams = null;
|
||||
try {
|
||||
host.setParams(copy);
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('[mode-runtime] setParams failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleParamFlush = (params: Float32Array) => {
|
||||
pendingParams = params;
|
||||
if (throttleTimer === null) {
|
||||
throttleTimer = window.setTimeout(flushParams, ENGINE_PARAM_THROTTLE_MS);
|
||||
}
|
||||
};
|
||||
|
||||
// Pipe processedOutputs into the engine host whenever they change.
|
||||
createEffect(() => {
|
||||
const out = processedOutputs();
|
||||
if (out.length === 0) return;
|
||||
if (!host.isStarted) return;
|
||||
scheduleParamFlush(out);
|
||||
});
|
||||
|
||||
const engineId = (opts.engineOverride ?? (schema.engine_id as EngineId));
|
||||
|
||||
const startAudio = async (): Promise<void> => {
|
||||
if (opts.audioDisabled) return;
|
||||
try {
|
||||
await host.start(engineId);
|
||||
setAudioStarted(true);
|
||||
// Push the current outputs immediately on start.
|
||||
const out = processedOutputs();
|
||||
if (out.length > 0) host.setParams(new Float32Array(out));
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[mode-runtime] audio start failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const stopAudio = async (): Promise<void> => {
|
||||
try {
|
||||
await host.stop();
|
||||
} finally {
|
||||
setAudioStarted(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Switch engine if mode changes engine_id (e.g. on remount).
|
||||
onMount(() => {
|
||||
if (host.isStarted) host.setEngine(engineId);
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
if (throttleTimer !== null) {
|
||||
clearTimeout(throttleTimer);
|
||||
throttleTimer = null;
|
||||
}
|
||||
pendingParams = null;
|
||||
});
|
||||
|
||||
// ----- Training helpers -------------------------------------------------
|
||||
const trainOnCurrent = () => {
|
||||
if (!ready()) return;
|
||||
const lr = controlStore.resolveParams()['learningRate'];
|
||||
const lrNum = typeof lr === 'number' ? lr : schema.ml.default_learning_rate;
|
||||
mlStore.train(lrNum, schema.ml.default_max_iterations, 0.001);
|
||||
};
|
||||
|
||||
const thumbsUp = () => {
|
||||
if (!ready()) return;
|
||||
// Push a label = current pipeline-processed slice as the target at the
|
||||
// current input. This matches the legacy "thumbs up = remember the
|
||||
// current sound at this position" semantics.
|
||||
const [x, y] = pipedInput();
|
||||
const out = processedOutputs();
|
||||
if (out.length === 0) return;
|
||||
const features = new Array(schema.ml.input_size).fill(0);
|
||||
features[0] = x;
|
||||
if (features.length > 1) features[1] = y;
|
||||
const labels = Array.from(out);
|
||||
mlStore.addExample(features, labels);
|
||||
trainOnCurrent();
|
||||
};
|
||||
|
||||
const thumbsDown = () => {
|
||||
if (!ready()) return;
|
||||
const params = controlStore.resolveParams();
|
||||
const cap = typeof params['noiseCap'] === 'number'
|
||||
? (params['noiseCap'] as number)
|
||||
: 0.12;
|
||||
const spread = schema.ml.default_spread;
|
||||
mlStore.moveWeights(cap, spread);
|
||||
// Re-run inference at current input so the visual updates.
|
||||
const [x, y] = pipedInput();
|
||||
setInput(x, y);
|
||||
};
|
||||
|
||||
const randomize = () => {
|
||||
if (!ready()) return;
|
||||
mlStore.drawWeights(schema.ml.default_spread);
|
||||
const [x, y] = pipedInput();
|
||||
setInput(x, y);
|
||||
};
|
||||
|
||||
return {
|
||||
setInput,
|
||||
pipedInput,
|
||||
frozen,
|
||||
rawOutputs: rawOutputsAccessor,
|
||||
processedOutputs,
|
||||
ready,
|
||||
audio: {
|
||||
started: audioStarted,
|
||||
start: startAudio,
|
||||
stop: stopAudio,
|
||||
setMuted: (muted) => host.setMuted(muted),
|
||||
},
|
||||
training: {
|
||||
busy: () => mlStore.state.training,
|
||||
examples: () => mlStore.state.exampleCount,
|
||||
lastLoss: () => mlStore.state.lastLoss,
|
||||
lossHistory: () => mlStore.state.lossHistory,
|
||||
},
|
||||
trainOnCurrent,
|
||||
thumbsUp,
|
||||
thumbsDown,
|
||||
randomize,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Disposes the shared EngineHost. Test helper — production never calls this.
|
||||
*/
|
||||
export function __disposeEngineHost(): void {
|
||||
if (engineHost) {
|
||||
engineHost.dispose();
|
||||
engineHost = null;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue