- use python backend with an actual DDPM model

- progress status
- add more controls
- simple compact UI

README.md

@@ -0,0 +1,23 @@
+# Diffusion Lab
+
+The reverse process runs the pretrained `google/ddpm-celebahq-256` model through Hugging Face Diffusers. This is an unconditional CelebA-HQ face generator: reverse sampling starts with random Gaussian noise and does not denoise the uploaded image. The upload is used only by the browser-side forward-noising demonstration.
+
+## Run
+
+Use Python 3.10 or newer. Install a PyTorch build appropriate for your machine first if its default install needs a platform-specific wheel, then install the app dependencies and start the server:
+
+```sh
+python -m venv .venv
+source .venv/bin/activate
+python -m pip install -r requirements.txt
+python server.py
+```
+
+Open <http://127.0.0.1:8000>. The first generation downloads the model weights into `models/`; later runs use that cache. The backend prefers CUDA, then Apple Silicon MPS, then CPU. Model inference uses all 1,000 DDPM steps and sends the selected intermediate images to the browser as they are produced.
+
+To generate and display one image without starting the server, run:
+
+```sh
+python generate.py
+python generate.py --seed 1234
+```

app.js

@@ -1,325 +1,164 @@
 const TOTAL_STEPS = 1000;
-const CHECKPOINTS = [0, 50, 100, 200, 350, 500, 700, 1000];
+const MODEL_NAME = 'google/ddpm-celebahq-256';
+const DEFAULT_CHECKPOINTS = [0, 50, 100, 200, 350, 500, 700, 1000];
 const SIZE = 192;
 const PIXEL_COUNT = SIZE * SIZE * 3;
-
 const elements = {
-  sourceCanvas: document.querySelector('#source-canvas'),
-  stateCanvas: document.querySelector('#state-canvas'),
-  outputCanvas: document.querySelector('#output-canvas'),
-  sourceName: document.querySelector('#source-name'),
-  stateKicker: document.querySelector('#state-kicker'),
-  stateCorner: document.querySelector('#state-corner'),
-  stateTitle: document.querySelector('#state-title'),
-  stateSubtitle: document.querySelector('#state-subtitle'),
-  outputStamp: document.querySelector('#output-stamp'),
-  outputTitle: document.querySelector('#output-title'),
-  outputSubtitle: document.querySelector('#output-subtitle'),
-  stepSlider: document.querySelector('#step-slider'),
-  stepReadout: document.querySelector('#step-readout'),
-  checkpointStrip: document.querySelector('#checkpoint-strip'),
-  playButton: document.querySelector('#play-button'),
-  imageUpload: document.querySelector('#image-upload'),
-  explanationTitle: document.querySelector('#explanation-title'),
-  explanationCopy: document.querySelector('#explanation-copy'),
-  scrubberLeft: document.querySelector('#scrubber-left'),
-  scrubberRight: document.querySelector('#scrubber-right'),
+  timestepsInput: document.querySelector('#timesteps-input'), applyTimesteps: document.querySelector('#apply-timesteps'),
+  seedInput: document.querySelector('#seed-input'), randomizeSeed: document.querySelector('#randomize-seed'), configError: document.querySelector('#config-error'), diffusionTrack: document.querySelector('#diffusion-track'),
+  denoisingTrack: document.querySelector('#denoising-track'), imageUpload: document.querySelector('#image-upload'), modelStatus: document.querySelector('#model-status'),
+  forwardProgressLabel: document.querySelector('#forward-progress-label'), reverseProgressLabel: document.querySelector('#reverse-progress-label'),
 };
-
+let checkpoints = [...DEFAULT_CHECKPOINTS];
 let sourcePixels = new Float32Array(PIXEL_COUNT);
-let forwardNoise = new Float32Array(PIXEL_COUNT);
 let forwardStates = [];
-let reverseStates = [];
-let activeMode = 'forward';
-let activeCheckpoint = 0;
-let animationTimer = null;
+let reverseStates = new Map();
 let imageLabel = 'Still life 01';
+let forwardRevealCount = 1;
+let forwardCompleted = false;
+let reverseNoiseState = null;
+let reverseInputMode = 'seed';
+let animationTimer = null;
+let generationController = null;
+let generationBusy = false;
+const progressStartedAt = { forward: null, reverse: null };
 const schedule = makeSchedule();
 
 function makeSchedule() {
-  const betas = new Float64Array(TOTAL_STEPS);
-  const alphas = new Float64Array(TOTAL_STEPS);
-  const alphaBars = new Float64Array(TOTAL_STEPS);
-  let product = 1;
-  for (let step = 0; step < TOTAL_STEPS; step += 1) {
-    betas[step] = 0.0001 + (0.02 - 0.0001) * step / (TOTAL_STEPS - 1);
-    alphas[step] = 1 - betas[step];
-    product *= alphas[step];
-    alphaBars[step] = product;
-  }
-  return { betas, alphas, alphaBars };
+  const alphaBars = new Float64Array(TOTAL_STEPS); let product = 1;
+  for (let step = 0; step < TOTAL_STEPS; step += 1) { const beta = .0001 + (.02 - .0001) * step / (TOTAL_STEPS - 1); product *= 1 - beta; alphaBars[step] = product; }
+  return alphaBars;
 }
-
 function randomNormal(seed) {
   let state = seed >>> 0;
-  return () => {
-    state = (state + 0x6D2B79F5) | 0;
-    let value = state;
-    value = Math.imul(value ^ value >>> 15, value | 1);
-    value ^= value + Math.imul(value ^ value >>> 7, value | 61);
-    const uniform = ((value ^ value >>> 14) >>> 0) / 4294967296;
-    return Math.sqrt(-2 * Math.log(Math.max(uniform, 1e-7))) * Math.cos(2 * Math.PI * uniform);
-  };
+  return () => { state = (state + 0x6D2B79F5) | 0; let value = state; value = Math.imul(value ^ value >>> 15, value | 1); value ^= value + Math.imul(value ^ value >>> 7, value | 61); const uniform = ((value ^ value >>> 14) >>> 0) / 4294967296; return Math.sqrt(-2 * Math.log(Math.max(uniform, 1e-7))) * Math.cos(2 * Math.PI * uniform); };
 }
-
 function makeSourceArt() {
-  const canvas = document.createElement('canvas');
-  canvas.width = SIZE;
-  canvas.height = SIZE;
-  const context = canvas.getContext('2d');
-  const sky = context.createLinearGradient(0, 0, SIZE, SIZE);
-  sky.addColorStop(0, '#dce7db');
-  sky.addColorStop(0.58, '#b8c7ad');
-  sky.addColorStop(1, '#a2b5a0');
-  context.fillStyle = sky;
-  context.fillRect(0, 0, SIZE, SIZE);
-  context.fillStyle = '#e9d6b5';
-  context.beginPath();
-  context.arc(147, 44, 24, 0, Math.PI * 2);
-  context.fill();
-  context.fillStyle = '#52765f';
-  context.beginPath();
-  context.moveTo(0, 137);
-  context.quadraticCurveTo(50, 91, 99, 137);
-  context.quadraticCurveTo(145, 109, 192, 132);
-  context.lineTo(192, 192);
-  context.lineTo(0, 192);
-  context.closePath();
-  context.fill();
-  context.fillStyle = '#315b48';
-  context.beginPath();
-  context.moveTo(0, 159);
-  context.quadraticCurveTo(61, 127, 112, 164);
-  context.quadraticCurveTo(155, 143, 192, 157);
-  context.lineTo(192, 192);
-  context.lineTo(0, 192);
-  context.closePath();
-  context.fill();
-  context.fillStyle = '#d8795d';
-  context.beginPath();
-  context.ellipse(92, 144, 24, 31, -0.22, 0, Math.PI * 2);
-  context.fill();
-  context.fillStyle = '#e8a37c';
-  context.beginPath();
-  context.ellipse(84, 136, 14, 21, -0.22, 0, Math.PI * 2);
-  context.fill();
-  context.fillStyle = '#496c52';
-  context.beginPath();
-  context.ellipse(103, 111, 21, 10, -0.62, 0, Math.PI * 2);
-  context.fill();
-  context.beginPath();
-  context.ellipse(77, 109, 16, 8, 0.52, 0, Math.PI * 2);
-  context.fill();
-  context.strokeStyle = '#f6ebd3';
-  context.lineWidth = 2;
-  context.beginPath();
-  context.moveTo(27, 171);
-  context.quadraticCurveTo(62, 158, 89, 178);
-  context.stroke();
-  context.fillStyle = '#f6ebd3';
-  for (const [x, y, radius] of [[35, 45, 2], [53, 67, 1.5], [159, 83, 2], [127, 36, 1.5], [171, 118, 1.5]]) {
-    context.beginPath();
-    context.arc(x, y, radius, 0, Math.PI * 2);
-    context.fill();
-  }
-  return canvas;
+  const canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d');
+  const sky = context.createLinearGradient(0, 0, SIZE, SIZE); sky.addColorStop(0, '#dce7db'); sky.addColorStop(.58, '#b8c7ad'); sky.addColorStop(1, '#a2b5a0'); context.fillStyle = sky; context.fillRect(0, 0, SIZE, SIZE);
+  context.fillStyle = '#e9d6b5'; context.beginPath(); context.arc(147, 44, 24, 0, Math.PI * 2); context.fill();
+  context.fillStyle = '#52765f'; context.beginPath(); context.moveTo(0, 137); context.quadraticCurveTo(50, 91, 99, 137); context.quadraticCurveTo(145, 109, 192, 132); context.lineTo(192, 192); context.lineTo(0, 192); context.fill();
+  context.fillStyle = '#315b48'; context.beginPath(); context.moveTo(0, 159); context.quadraticCurveTo(61, 127, 112, 164); context.quadraticCurveTo(155, 143, 192, 157); context.lineTo(192, 192); context.lineTo(0, 192); context.fill();
+  context.fillStyle = '#d8795d'; context.beginPath(); context.ellipse(92, 144, 24, 31, -.22, 0, Math.PI * 2); context.fill(); context.fillStyle = '#e8a37c'; context.beginPath(); context.ellipse(84, 136, 14, 21, -.22, 0, Math.PI * 2); context.fill();
+  context.fillStyle = '#496c52'; context.beginPath(); context.ellipse(103, 111, 21, 10, -.62, 0, Math.PI * 2); context.fill(); context.beginPath(); context.ellipse(77, 109, 16, 8, .52, 0, Math.PI * 2); context.fill(); return canvas;
 }
-
 function canvasPixels(canvas) {
-  const context = canvas.getContext('2d', { willReadFrequently: true });
-  const rgba = context.getImageData(0, 0, SIZE, SIZE).data;
-  const pixels = new Float32Array(PIXEL_COUNT);
-  for (let pixelIndex = 0; pixelIndex < SIZE * SIZE; pixelIndex += 1) {
-    for (let channel = 0; channel < 3; channel += 1) {
-      pixels[pixelIndex * 3 + channel] = rgba[pixelIndex * 4 + channel] / 127.5 - 1;
-    }
-  }
+  const rgba = canvas.getContext('2d', { willReadFrequently: true }).getImageData(0, 0, SIZE, SIZE).data; const pixels = new Float32Array(PIXEL_COUNT);
+  for (let pixel = 0; pixel < SIZE * SIZE; pixel += 1) for (let channel = 0; channel < 3; channel += 1) pixels[pixel * 3 + channel] = rgba[pixel * 4 + channel] / 127.5 - 1;
   return pixels;
 }
-
 function pixelsToCanvas(pixels, canvas) {
-  const context = canvas.getContext('2d');
-  const image = context.createImageData(SIZE, SIZE);
-  for (let index = 0; index < PIXEL_COUNT; index += 1) {
-    image.data[Math.floor(index / 3) * 4 + index % 3] = Math.round((Math.max(-1, Math.min(1, pixels[index])) + 1) * 127.5);
-  }
-  for (let index = 3; index < image.data.length; index += 4) image.data[index] = 255;
-  context.putImageData(image, 0, 0);
+  const context = canvas.getContext('2d'); const image = context.createImageData(SIZE, SIZE);
+  for (let index = 0; index < PIXEL_COUNT; index += 1) image.data[Math.floor(index / 3) * 4 + index % 3] = Math.round((Math.max(-1, Math.min(1, pixels[index])) + 1) * 127.5);
+  for (let index = 3; index < image.data.length; index += 4) image.data[index] = 255; context.putImageData(image, 0, 0);
 }
-
-function computeTrajectories() {
-  const random = randomNormal(82341);
-  forwardNoise = new Float32Array(PIXEL_COUNT);
-  for (let index = 0; index < PIXEL_COUNT; index += 1) forwardNoise[index] = random();
-
-  forwardStates = CHECKPOINTS.map((step) => {
-    if (step === 0) return new Float32Array(sourcePixels);
-    const alphaBar = schedule.alphaBars[step - 1];
-    const signalScale = Math.sqrt(alphaBar);
-    const noiseScale = Math.sqrt(1 - alphaBar);
-    const state = new Float32Array(PIXEL_COUNT);
-    for (let index = 0; index < PIXEL_COUNT; index += 1) {
-      state[index] = signalScale * sourcePixels[index] + noiseScale * forwardNoise[index];
-    }
-    return state;
-  });
-
-  const reverseRandom = randomNormal(9713);
-  reverseStates = new Array(CHECKPOINTS.length);
-  let current = new Float32Array(forwardStates[forwardStates.length - 1]);
-  reverseStates[CHECKPOINTS.length - 1] = new Float32Array(current);
-
-  for (let checkpoint = CHECKPOINTS.length - 2; checkpoint >= 0; checkpoint -= 1) {
-    const highStep = CHECKPOINTS[checkpoint + 1];
-    const lowStep = CHECKPOINTS[checkpoint];
-    const alphaBar = schedule.alphaBars[highStep - 1];
-    const alphaBarPrevious = lowStep === 0 ? 1 : schedule.alphaBars[lowStep - 1];
-    const effectiveAlpha = alphaBar / alphaBarPrevious;
-    const effectiveBeta = 1 - effectiveAlpha;
-    const denominator = 1 - alphaBar;
-    const originalWeight = Math.sqrt(alphaBarPrevious) * effectiveBeta / denominator;
-    const currentWeight = Math.sqrt(effectiveAlpha) * (1 - alphaBarPrevious) / denominator;
-    const variance = effectiveBeta * (1 - alphaBarPrevious) / denominator;
-    const noiseScale = Math.sqrt(variance);
-    const previous = new Float32Array(PIXEL_COUNT);
-    for (let index = 0; index < PIXEL_COUNT; index += 1) {
-      previous[index] = originalWeight * sourcePixels[index] + currentWeight * current[index] + noiseScale * reverseRandom();
-    }
-    current = previous;
-    reverseStates[checkpoint] = new Float32Array(current);
+function drawState(canvas, state) { const context = canvas.getContext('2d'); context.clearRect(0, 0, SIZE, SIZE); if (state instanceof HTMLCanvasElement) context.drawImage(state, 0, 0, SIZE, SIZE); else if (state instanceof Float32Array) pixelsToCanvas(state, canvas); }
+function computeForwardStates() {
+  const random = randomNormal(readSeed()); const noise = new Float32Array(PIXEL_COUNT); for (let index = 0; index < PIXEL_COUNT; index += 1) noise[index] = random();
+  forwardStates = checkpoints.map((step) => { if (step === 0) return new Float32Array(sourcePixels); const alphaBar = schedule[step - 1]; const state = new Float32Array(PIXEL_COUNT); for (let index = 0; index < PIXEL_COUNT; index += 1) state[index] = Math.sqrt(alphaBar) * sourcePixels[index] + Math.sqrt(1 - alphaBar) * noise[index]; return state; });
+}
+function makeNoiseState(seed) { const random = randomNormal(seed); const state = new Float32Array(PIXEL_COUNT); for (let index = 0; index < PIXEL_COUNT; index += 1) state[index] = random(); return state; }
+function stateToPng(state) { const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 256; const small = document.createElement('canvas'); small.width = SIZE; small.height = SIZE; drawState(small, state); canvas.getContext('2d').drawImage(small, 0, 0, 256, 256); return canvas.toDataURL('image/png'); }
+function setModelStatus(message) { if (elements.modelStatus) elements.modelStatus.textContent = message; }
+function resampleNoise() {
+  const values = new Uint32Array(1); crypto.getRandomValues(values); const seed = values[0] & 0x7fffffff; elements.seedInput.value = String(seed); reverseInputMode = 'seed'; reverseNoiseState = makeNoiseState(seed); reverseStates = new Map(); resetProgress('reverse'); setModelStatus(`Resampled Gaussian noise · seed ${seed}.`); renderTracks();
+}
+function useForwardNoise() {
+  if (!forwardCompleted) return; reverseInputMode = 'forward'; reverseNoiseState = new Float32Array(forwardStates.at(-1)); reverseStates = new Map(); resetProgress('reverse'); setModelStatus('Using the final forward-process noise as the reverse input.'); renderTracks();
+}
+function makeActionButton(label, id, action) { const button = document.createElement('button'); button.type = 'button'; button.id = id; button.className = 'process-button'; button.textContent = label; button.addEventListener('click', action); return button; }
+function makeCard(step, state, type, index) {
+  const card = document.createElement('article'); card.className = 'stage-card'; card.dataset.step = String(step); const actionSlot = document.createElement('div'); actionSlot.className = 'action-slot';
+  if (type === 'forward' && index >= forwardRevealCount) card.classList.add('is-pending');
+  if (type === 'forward' && index === 0) actionSlot.append(makeActionButton('Diffuse', 'diffuse-button', runDiffusion));
+  if (type === 'forward' && index === checkpoints.length - 1) { actionSlot.classList.add('status-right'); actionSlot.append(elements.forwardProgressLabel); }
+  if (type === 'reverse' && index === 0) actionSlot.append(elements.reverseProgressLabel);
+  if (type === 'reverse' && index === checkpoints.length - 1) {
+    actionSlot.classList.add('reverse-actions');
+    actionSlot.append(makeActionButton('Denoise', 'denoise-button', generateReverse));
   }
+  const canvasWrap = document.createElement('div'); canvasWrap.className = 'stage-canvas'; const canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; drawState(canvas, state); canvasWrap.append(canvas);
+  if (type === 'forward' && index === 0) { const change = document.createElement('button'); change.className = 'change-image'; change.type = 'button'; change.textContent = 'Change image'; change.addEventListener('click', () => elements.imageUpload.click()); canvasWrap.append(change); }
+  if (type === 'reverse' && index === checkpoints.length - 1) { const noiseActions = document.createElement('div'); noiseActions.className = 'noise-actions'; noiseActions.append(makeActionButton('Resample', 'resample-button', resampleNoise), makeActionButton('Forward noise', 'forward-noise-button', useForwardNoise)); canvasWrap.append(noiseActions); }
+  const caption = document.createElement('div'); caption.className = 'stage-caption';
+  const titleText = type === 'forward' && index === 0 ? imageLabel : step === 0 ? 'Generated face' : step === TOTAL_STEPS ? 'Gaussian noise' : '';
+  if (titleText) { const title = document.createElement('strong'); title.textContent = titleText; caption.append(title); }
+  const time = document.createElement('span'); time.textContent = `t = ${step}`; caption.append(time);
+  const preview = document.createElement('div'); preview.className = 'hover-preview'; const previewCanvas = document.createElement('canvas'); previewCanvas.width = 256; previewCanvas.height = 256; if (state) { const context = previewCanvas.getContext('2d'); context.imageSmoothingEnabled = true; if (state instanceof HTMLCanvasElement) context.drawImage(state, 0, 0, 256, 256); else { const temporary = document.createElement('canvas'); temporary.width = SIZE; temporary.height = SIZE; drawState(temporary, state); context.drawImage(temporary, 0, 0, 256, 256); } } preview.append(previewCanvas);
+  canvas.addEventListener('mouseenter', () => { const rect = canvasWrap.getBoundingClientRect(); preview.style.left = `${Math.max(8, Math.min(window.innerWidth - 264, rect.left + rect.width / 2 - 128))}px`; preview.style.top = `${Math.max(8, Math.min(window.innerHeight - 264, rect.top + rect.height / 2 - 128))}px`; preview.classList.add('is-visible'); });
+  canvas.addEventListener('mouseleave', () => preview.classList.remove('is-visible'));
+  card.append(actionSlot, canvasWrap, caption, preview); return card;
 }
-
-function renderCheckpointStrip() {
-  elements.checkpointStrip.replaceChildren();
-  CHECKPOINTS.forEach((step, index) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'checkpoint';
-    button.dataset.index = String(index);
-    button.setAttribute('aria-label', `Show checkpoint at step ${step}`);
-    const canvas = document.createElement('canvas');
-    canvas.width = SIZE;
-    canvas.height = SIZE;
-    const label = document.createElement('span');
-    label.textContent = step === 0 ? 't = 0' : `t = ${step}`;
-    button.append(canvas, label);
-    button.addEventListener('click', () => selectCheckpoint(index));
-    elements.checkpointStrip.append(button);
-  });
+function renderTracks() {
+  elements.diffusionTrack.style.setProperty('--stage-count', checkpoints.length);
+  elements.denoisingTrack.style.setProperty('--stage-count', checkpoints.length);
+  elements.diffusionTrack.replaceChildren(...checkpoints.map((step, index) => makeCard(step, forwardStates[index], 'forward', index)));
+  elements.denoisingTrack.replaceChildren(...checkpoints.map((step, index) => makeCard(step, reverseStates.get(step) || (step === TOTAL_STEPS ? reverseNoiseState : null), 'reverse', index)));
+  const button = document.querySelector('#denoise-button'); if (button) { button.disabled = generationBusy; button.textContent = generationBusy ? 'Denoising…' : 'Denoise'; }
+  const forwardNoiseButton = document.querySelector('#forward-noise-button'); if (forwardNoiseButton) { forwardNoiseButton.disabled = generationBusy || !forwardCompleted; forwardNoiseButton.title = forwardCompleted ? 'Use the last forward-process image' : 'Run Diffuse first'; }
+  const resampleButton = document.querySelector('#resample-button'); if (resampleButton) resampleButton.disabled = generationBusy;
 }
-
-function render() {
-  const step = CHECKPOINTS[activeCheckpoint];
-  const primaryStates = activeMode === 'forward' ? forwardStates : reverseStates;
-  const activeState = primaryStates[activeCheckpoint];
-  const outputState = reverseStates[activeCheckpoint];
-  pixelsToCanvas(sourcePixels, elements.sourceCanvas);
-  pixelsToCanvas(activeState, elements.stateCanvas);
-  pixelsToCanvas(outputState, elements.outputCanvas);
-
-  elements.sourceName.textContent = imageLabel;
-  elements.stateKicker.textContent = activeMode === 'forward' ? '02 / ADDING NOISE' : '02 / REMOVING NOISE';
-  elements.stateCorner.textContent = `t = ${step}`;
-  elements.stateTitle.textContent = step === 0 ? 'Original image' : activeMode === 'forward' ? 'Noisy image' : 'Denoised estimate';
-  elements.stateSubtitle.textContent = step === 0 ? 'No noise added yet' : activeMode === 'forward' ? `${Math.round((1 - schedule.alphaBars[step - 1]) * 100)}% noise variance` : 'Oracle x₀ prediction';
-  elements.outputTitle.textContent = step === 0 ? 'Original image' : 'Reverse estimate';
-  elements.outputSubtitle.textContent = step === 0 ? 'Reference image' : `Reverse chain at t = ${step}`;
-  elements.outputStamp.textContent = step === 0 ? 'x₀' : `${Math.round((1 - schedule.alphaBars[step - 1]) * 100)}% NOISE`;
-  elements.stepReadout.innerHTML = `STEP ${step} <b>/ ${TOTAL_STEPS}</b>`;
-  elements.stepSlider.value = String(activeCheckpoint);
-  elements.scrubberLeft.textContent = activeMode === 'forward' ? 'CLEAN IMAGE' : 'START FROM NOISE';
-  elements.scrubberRight.textContent = activeMode === 'forward' ? 'PURE NOISE' : 'RECOVER SIGNAL';
-  elements.explanationTitle.textContent = activeMode === 'forward' ? 'Forward process' : 'Reverse process';
-  elements.explanationCopy.textContent = activeMode === 'forward'
-    ? 'At each step, a little Gaussian noise is mixed into the image. The schedule controls how quickly the original signal disappears; jump between checkpoints to see the structure dissolve.'
-    : 'Each reverse checkpoint samples the DDPM posterior between displayed timesteps. This educational run knows the original image and uses it as an oracle x₀ estimate; a trained model would estimate that signal from the noisy state.';
-  elements.checkpointStrip.querySelectorAll('.checkpoint').forEach((button, index) => {
-    button.classList.toggle('active', index === activeCheckpoint);
-    const thumbState = activeMode === 'forward' ? forwardStates[index] : reverseStates[index];
-    pixelsToCanvas(thumbState, button.querySelector('canvas'));
-  });
+function formatDuration(seconds) {
+  if (!Number.isFinite(seconds)) return '?';
+  const whole = Math.max(0, Math.round(seconds)); const hours = Math.floor(whole / 3600); const minutes = Math.floor(whole % 3600 / 60); const remainder = whole % 60;
+  return hours ? `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}` : `${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`;
 }
-
-function selectCheckpoint(index) {
-  activeCheckpoint = Math.max(0, Math.min(CHECKPOINTS.length - 1, index));
-  render();
+function resetProgress(kind) { progressStartedAt[kind] = null; setProgress(kind, 0); }
+function beginProgress(kind) { progressStartedAt[kind] = performance.now(); setProgress(kind, 0); }
+function setProgress(kind, completedSteps) {
+  const completed = Math.max(0, Math.min(TOTAL_STEPS, Math.round(completedSteps))); const label = kind === 'forward' ? elements.forwardProgressLabel : elements.reverseProgressLabel;
+  const elapsed = progressStartedAt[kind] === null ? 0 : (performance.now() - progressStartedAt[kind]) / 1000; const rate = elapsed > 0 && completed > 0 ? completed / elapsed : 0; const remaining = rate > 0 ? (TOTAL_STEPS - completed) / rate : Infinity;
+  const text = `${completed}/${TOTAL_STEPS} [${formatDuration(elapsed)}<${completed === TOTAL_STEPS ? '00:00' : formatDuration(remaining)}, ${rate > 0 ? rate.toFixed(2) : '?'}it/s]`; label.value = text; label.textContent = text;
 }
-
-function setMode(mode) {
-  activeMode = mode;
-  document.querySelectorAll('.segment').forEach((button) => {
-    const selected = button.dataset.mode === mode;
-    button.classList.toggle('active', selected);
-    button.setAttribute('aria-pressed', String(selected));
-  });
-  render();
+function stopAnimation() { if (animationTimer) window.clearInterval(animationTimer); animationTimer = null; document.querySelectorAll('.stage-card.is-active').forEach((card) => card.classList.remove('is-active')); }
+function runDiffusion() {
+  try { computeForwardStates(); elements.configError.textContent = ''; } catch (error) { elements.configError.textContent = error.message; return; }
+  stopAnimation(); forwardCompleted = false; forwardRevealCount = 1; beginProgress('forward'); renderTracks(); const cards = [...elements.diffusionTrack.querySelectorAll('.stage-card')]; cards[0].classList.add('is-active');
+  const duration = Math.max(1000, (checkpoints.length - 1) * 650); const startedAt = performance.now(); let activeIndex = 0;
+  animationTimer = window.setInterval(() => {
+    const completed = Math.min(TOTAL_STEPS, Math.floor((performance.now() - startedAt) / duration * TOTAL_STEPS)); setProgress('forward', completed);
+    let nextIndex = activeIndex; while (nextIndex + 1 < checkpoints.length && checkpoints[nextIndex + 1] <= completed) nextIndex += 1;
+    if (nextIndex !== activeIndex) { cards[activeIndex].classList.remove('is-active'); for (let index = activeIndex + 1; index <= nextIndex; index += 1) cards[index].classList.remove('is-pending'); cards[nextIndex].classList.add('is-active'); activeIndex = nextIndex; forwardRevealCount = nextIndex + 1; }
+    if (completed >= TOTAL_STEPS) { forwardCompleted = true; setProgress('forward', TOTAL_STEPS); stopAnimation(); renderTracks(); }
+  }, 50);
 }
-
-function setPlaying(playing) {
-  if (animationTimer) window.clearInterval(animationTimer);
-  animationTimer = null;
-  elements.playButton.querySelector('.play-icon').classList.toggle('hidden', playing);
-  elements.playButton.querySelector('.pause-icon').classList.toggle('hidden', !playing);
-  elements.playButton.setAttribute('aria-label', playing ? 'Pause animation' : 'Play animation');
-  elements.playButton.title = playing ? 'Pause animation' : 'Play animation';
-  if (playing) {
-    animationTimer = window.setInterval(() => {
-      const next = activeCheckpoint + (activeMode === 'forward' ? 1 : -1);
-      if (next < 0 || next >= CHECKPOINTS.length) {
-        setPlaying(false);
-        return;
-      }
-      selectCheckpoint(next);
-    }, 850);
-  }
+function parseTimesteps() {
+  const values = elements.timestepsInput.value.split(',').map((part) => part.trim()).filter(Boolean).map(Number);
+  if (values.length < 2 || values.some((value) => !Number.isInteger(value) || value < 0 || value > TOTAL_STEPS)) throw new Error('Enter at least two whole numbers between 0 and 1000.');
+  const unique = [...new Set(values)].sort((a, b) => a - b); if (unique[0] !== 0 || unique.at(-1) !== TOTAL_STEPS) throw new Error('Include both 0 and 1000 so each process has a start and end.'); if (unique.length > 12) throw new Error('Use no more than 12 timesteps.'); return unique;
 }
-
-function loadImage(image, label) {
-  const context = elements.sourceCanvas.getContext('2d');
-  context.clearRect(0, 0, SIZE, SIZE);
-  const scale = Math.max(SIZE / image.width, SIZE / image.height);
-  const width = image.width * scale;
-  const height = image.height * scale;
-  context.drawImage(image, (SIZE - width) / 2, (SIZE - height) / 2, width, height);
-  sourcePixels = canvasPixels(elements.sourceCanvas);
-  imageLabel = label;
-  activeCheckpoint = 0;
-  computeTrajectories();
-  renderCheckpointStrip();
-  render();
+function readSeed() {
+  const value = Number(elements.seedInput.value.trim());
+  if (!Number.isSafeInteger(value) || value < 0 || value > 2147483647) throw new Error('Seed must be a whole number from 0 to 2147483647.');
+  return value;
 }
-
-document.querySelectorAll('.segment').forEach((button) => button.addEventListener('click', () => {
-  setPlaying(false);
-  setMode(button.dataset.mode);
-}));
-elements.playButton.addEventListener('click', () => setPlaying(!animationTimer));
-elements.stepSlider.addEventListener('input', (event) => {
-  setPlaying(false);
-  selectCheckpoint(Number(event.target.value));
-});
-document.querySelector('#step-back').addEventListener('click', () => {
-  setPlaying(false);
-  selectCheckpoint(activeCheckpoint - 1);
-});
-document.querySelector('#step-forward').addEventListener('click', () => {
-  setPlaying(false);
-  selectCheckpoint(activeCheckpoint + 1);
-});
-elements.imageUpload.addEventListener('change', (event) => {
-  const file = event.target.files?.[0];
-  if (!file) return;
-  const image = new Image();
-  image.onload = () => {
-    loadImage(image, file.name.replace(/\.[^.]+$/, ''));
-    URL.revokeObjectURL(image.src);
-  };
-  image.src = URL.createObjectURL(file);
-});
-
-const starterImage = makeSourceArt();
-sourcePixels = canvasPixels(starterImage);
-computeTrajectories();
-renderCheckpointStrip();
-render();
+function applyTimesteps() {
+  try { const next = parseTimesteps(); stopAnimation(); if (generationController) generationController.abort(); checkpoints = next; reverseStates = new Map(); reverseInputMode = 'seed'; reverseNoiseState = makeNoiseState(readSeed()); forwardRevealCount = 1; forwardCompleted = false; computeForwardStates(); resetProgress('forward'); resetProgress('reverse'); elements.timestepsInput.value = checkpoints.join(', '); elements.configError.textContent = ''; setModelStatus('Timesteps updated. Select Denoise to run the model.'); renderTracks(); }
+  catch (error) { elements.configError.textContent = error.message; }
+}
+function decodeFrame(data) { return new Promise((resolve, reject) => { const image = new Image(); image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; canvas.getContext('2d').drawImage(image, 0, 0); resolve(canvas); }; image.onerror = () => reject(new Error('The backend returned an unreadable image frame.')); image.src = `data:image/jpeg;base64,${data}`; }); }
+async function generateReverse() {
+  if (generationBusy) return;
+  let seed;
+  try { seed = readSeed(); elements.configError.textContent = ''; } catch (error) { elements.configError.textContent = error.message; return; }
+  stopAnimation(); generationController = new AbortController(); generationBusy = true; reverseStates = new Map(); resetProgress('reverse'); setModelStatus('Loading model weights if needed, then sampling 1,000 reverse steps…'); renderTracks();
+  try {
+    const initialImage = reverseInputMode === 'forward' ? stateToPng(reverseNoiseState) : null;
+    const response = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ checkpoints, seed, initial_image: initialImage }), signal: generationController.signal }); if (!response.ok || !response.body) throw new Error(`Backend request failed (${response.status}).`);
+    const reader = response.body.getReader(); const decoder = new TextDecoder(); let pending = '';
+    while (true) { const { value, done } = await reader.read(); pending += decoder.decode(value || new Uint8Array(), { stream: !done }); const lines = pending.split('\n'); pending = lines.pop(); for (const line of lines) if (line.trim()) await handleModelEvent(JSON.parse(line)); if (done) break; }
+    if (pending.trim()) await handleModelEvent(JSON.parse(pending));
+  } catch (error) { if (error.name !== 'AbortError') setModelStatus(`Model error: ${error.message}`); }
+  finally { generationBusy = false; generationController = null; renderTracks(); }
+}
+async function handleModelEvent(event) {
+  if (event.type === 'status') setModelStatus(`Loading ${event.model} on the first generation…`);
+  if (event.type === 'progress') { const completed = event.total - event.step; if (progressStartedAt.reverse === null) beginProgress('reverse'); setProgress('reverse', completed); setModelStatus(`Denoising · ${completed}/${event.total} steps complete.`); }
+  if (event.type === 'frame') { reverseStates.set(event.step, await decodeFrame(event.image)); setProgress('reverse', TOTAL_STEPS - event.step); setModelStatus(`Real model inference · received t = ${event.step}.`); renderTracks(); const card = elements.denoisingTrack.querySelector(`[data-step="${event.step}"]`); if (card) { document.querySelectorAll('#denoising-track .is-active').forEach((item) => item.classList.remove('is-active')); card.classList.add('is-active'); } }
+  if (event.type === 'complete') { setProgress('reverse', TOTAL_STEPS); setModelStatus(`Generated with ${MODEL_NAME} on ${event.device.toUpperCase()} · seed ${event.seed}.`); } if (event.type === 'error') throw new Error(event.message);
+}
+function loadImage(image, label) { const canvas = document.createElement('canvas'); canvas.width = SIZE; canvas.height = SIZE; const context = canvas.getContext('2d'); const scale = Math.max(SIZE / image.width, SIZE / image.height); const width = image.width * scale; const height = image.height * scale; context.drawImage(image, (SIZE - width) / 2, (SIZE - height) / 2, width, height); sourcePixels = canvasPixels(canvas); imageLabel = label; reverseInputMode = 'seed'; reverseNoiseState = makeNoiseState(readSeed()); forwardRevealCount = 1; forwardCompleted = false; resetProgress('forward'); computeForwardStates(); renderTracks(); }
+elements.applyTimesteps.addEventListener('click', applyTimesteps); elements.timestepsInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') applyTimesteps(); });
+elements.randomizeSeed.addEventListener('click', () => { resampleNoise(); elements.configError.textContent = ''; forwardRevealCount = 1; forwardCompleted = false; resetProgress('forward'); computeForwardStates(); renderTracks(); });
+elements.imageUpload.addEventListener('change', (event) => { const file = event.target.files?.[0]; if (!file) return; const image = new Image(); image.onload = () => { loadImage(image, file.name.replace(/\.[^.]+$/, '')); URL.revokeObjectURL(image.src); }; image.src = URL.createObjectURL(file); });
+sourcePixels = canvasPixels(makeSourceArt()); computeForwardStates(); reverseNoiseState = makeNoiseState(readSeed()); resetProgress('forward'); resetProgress('reverse'); renderTracks();

generate.py

@@ -0,0 +1,146 @@
+import argparse
+import secrets
+import threading
+from pathlib import Path
+
+from PIL import Image
+
+
+ROOT = Path(__file__).resolve().parent
+MODEL_ID = "google/ddpm-celebahq-256"
+CHECKPOINTS = (0, 50, 100, 200, 350, 500, 700, 1000)
+
+_MODEL_LOCK = threading.Lock()
+_PIPELINE = None
+_TORCH = None
+_DEVICE = None
+
+
+def load_model():
+    """Load and cache the diffusion pipeline, returning it and its device."""
+    global _PIPELINE, _TORCH, _DEVICE
+
+    if _PIPELINE is None:
+        try:
+            import torch
+            from diffusers import DDPMPipeline
+        except ImportError as error:
+            raise RuntimeError(
+                "Diffusers dependencies are missing from this Python environment. "
+                "Install them with `python -m pip install -r requirements.txt`. "
+                f"Import detail: {error}"
+            ) from error
+
+        if torch.cuda.is_available():
+            device = "cuda"
+        elif hasattr(torch.backends, "mps") and torch.backends.mps.is_available():
+            device = "mps"
+        else:
+            device = "cpu"
+
+        print(f"Using device: {device}")
+        pipeline = DDPMPipeline.from_pretrained(MODEL_ID, cache_dir=ROOT / "models")
+        pipeline.to(device)
+        _TORCH = torch
+        _DEVICE = device
+        _PIPELINE = pipeline
+
+    return _PIPELINE, _TORCH, _DEVICE
+
+
+def is_model_loaded():
+    return _PIPELINE is not None
+
+
+def sample_to_image(sample):
+    """Convert a model sample tensor into a PIL image."""
+    image = sample[0].detach().float().cpu().clamp(-1, 1)
+    image = ((image + 1) * 127.5).round().byte().permute(1, 2, 0).numpy()
+    return Image.fromarray(image, mode="RGB")
+
+
+def generate_images(seed, checkpoints=CHECKPOINTS, initial_image=None):
+    """Yield every remaining-step count and an image at requested checkpoints."""
+    with _MODEL_LOCK:
+        pipeline, torch, device = load_model()
+        scheduler = pipeline.scheduler
+        training_steps = scheduler.config.num_train_timesteps
+        scheduler.set_timesteps(training_steps, device=device)
+        generator = torch.Generator(device=device).manual_seed(seed)
+        unet = pipeline.unet
+        sample_size = unet.config.sample_size
+        if isinstance(sample_size, (tuple, list)):
+            height, width = sample_size
+        else:
+            height = width = sample_size
+        if initial_image is None:
+            sample = torch.randn(
+                (1, unet.config.in_channels, height, width),
+                generator=generator,
+                device=device,
+                dtype=unet.dtype,
+            ) * scheduler.init_noise_sigma
+        else:
+            import numpy as np
+
+            pixels = np.asarray(initial_image.convert("RGB").resize((width, height))).copy()
+            sample = torch.from_numpy(pixels).permute(2, 0, 1).unsqueeze(0)
+            sample = sample.to(device=device, dtype=unet.dtype) / 127.5 - 1
+
+        yield (
+            training_steps,
+            sample_to_image(sample) if training_steps in checkpoints else None,
+        )
+
+        with torch.inference_mode():
+            for index, timestep in enumerate(scheduler.timesteps):
+                model_output = unet(sample, timestep).sample
+                sample = scheduler.step(
+                    model_output,
+                    timestep,
+                    sample,
+                    generator=generator,
+                ).prev_sample
+                remaining_steps = training_steps - index - 1
+                image = sample_to_image(sample) if remaining_steps in checkpoints else None
+                yield remaining_steps, image
+
+
+def generate_image(seed):
+    """Generate and return the final image for a seed."""
+    final_image = None
+    for _, image in generate_images(seed, checkpoints=(0,)):
+        if image is not None:
+            final_image = image
+    if final_image is None:
+        raise RuntimeError("The diffusion pipeline did not produce an image.")
+    return final_image
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Generate a CelebA-HQ face image.")
+    parser.add_argument(
+        "--seed",
+        type=int,
+        default=None,
+        help="Random seed (defaults to a randomly generated seed)",
+    )
+    args = parser.parse_args()
+    seed = args.seed if args.seed is not None else secrets.randbelow(2**31)
+    if seed < 0 or seed >= 2**63:
+        parser.error("seed must be between 0 and 2^63 - 1")
+
+    print(f"Generating with seed: {seed}")
+    image = generate_image(seed)
+
+    import matplotlib.pyplot as plt
+
+    plt.imshow(image)
+    plt.title(f"{MODEL_ID} — seed {seed}")
+    plt.axis("off")
+    plt.tight_layout()
+    plt.show()
+
+
+if __name__ == "__main__":
+    main()

index.html

@@ -13,118 +13,53 @@
 <body>
   <div class="app-shell">
     <header class="topbar">
-      <a class="brand" href="#top" aria-label="Diffusion Lab home">
-        <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
-        <span>diffusion<span class="brand-light">lab</span></span>
-      </a>
-      <div class="topbar-right">
-        <span class="live-dot" aria-hidden="true"></span>
-        <span>INTERACTIVE NOTE 01</span>
-        <span class="topbar-rule"></span>
-        <span>DDPM / 2020</span>
-      </div>
+      <a class="brand" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>diffusion<span class="brand-light">lab</span></span></a>
+      <div class="topbar-right"><span class="live-dot"></span></div>
     </header>
-
     <main id="top">
-      <section class="intro">
-        <div class="intro-copy">
-          <p class="eyebrow"><span>01</span> THE GENERATIVE LOOP</p>
-          <h1>Noise in.<br><span>Signal out.</span></h1>
-          <p class="dek">A diffusion model learns to undo a little noise at a time. Follow one image through the forward process, then watch the reverse chain find its way back.</p>
-        </div>
-        <div class="equation-note" aria-label="Forward diffusion equation">
-          <span class="equation-label">ONE STEP FORWARD</span>
-          <span class="equation">x<sub>t</sub> = √α̅<sub>t</sub> x<sub>0</sub> + √(1 − α̅<sub>t</sub>) ε</span>
-          <span class="equation-foot">signal fades <b>→</b> Gaussian noise grows</span>
-        </div>
-      </section>
-
-      <section class="workbench" aria-label="Diffusion process explorer">
-        <div class="workbench-head">
-          <div class="section-title">
-            <span class="section-index">A</span>
-            <div>
-              <p class="eyebrow">IMAGE EXPLORER</p>
-              <h2>One image, two directions</h2>
-            </div>
+      <section class="control-panel lab-panel" aria-labelledby="controls-title">
+        <h1 id="controls-title">Configure</h1>
+        <div class="config-rows">
+          <div class="config-row">
+            <label for="model-input">Model</label>
+            <input id="model-input" type="text" value="google/ddpm-celebahq-256" readonly>
           </div>
-          <div class="controls">
-            <div class="segmented" role="group" aria-label="Process direction">
-              <button class="segment active" data-mode="forward" aria-pressed="true">Forward</button>
-              <button class="segment" data-mode="reverse" aria-pressed="false">Reverse</button>
-            </div>
-            <button id="play-button" class="icon-button" aria-label="Play animation" title="Play animation">
-              <svg class="play-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M6.5 4.7v10.6L15 10z"/></svg>
-              <svg class="pause-icon hidden" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 4.5h3.2v11H5.5zm5.8 0h3.2v11h-3.2z"/></svg>
-            </button>
+          <div class="config-row">
+            <label for="timesteps-input">Timesteps</label>
+            <input id="timesteps-input" type="text" value="0, 50, 100, 200, 350, 500, 700, 1000" spellcheck="false" aria-describedby="timesteps-help config-error">
+            <button id="apply-timesteps" type="button">Apply</button>
           </div>
-        </div>
-
-        <div class="process-track">
-          <article class="image-panel source-panel">
-            <div class="panel-topline"><span>01 / SOURCE</span><span class="panel-tag">x<sub>0</sub></span></div>
-            <div class="canvas-wrap source-wrap"><canvas id="source-canvas" width="192" height="192" aria-label="Source image"></canvas>
-              <label class="upload-control" for="image-upload" title="Choose an image">
-                <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 13V3m0 0L6.5 6.5M10 3l3.5 3.5M4 12.5v3A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-3"/></svg>
-                <span>Change image</span>
-              </label>
-              <input id="image-upload" type="file" accept="image/*" hidden>
-            </div>
-            <div class="panel-caption"><strong id="source-name">Still life 01</strong><span>your starting signal</span></div>
-          </article>
-
-          <div class="flow-arrow" aria-hidden="true"><span></span></div>
-
-          <article class="image-panel state-panel">
-            <div class="panel-topline"><span id="state-kicker">02 / ADDING NOISE</span><span class="panel-tag" id="state-tag">x<sub>t</sub></span></div>
-            <div class="canvas-wrap state-wrap"><canvas id="state-canvas" width="192" height="192" aria-label="Current diffusion state"></canvas>
-              <span class="state-corner" id="state-corner">t = 0</span>
-            </div>
-            <div class="panel-caption"><strong id="state-title">Original image</strong><span id="state-subtitle">No noise added yet</span></div>
-          </article>
-
-          <div class="flow-arrow reverse-arrow" aria-hidden="true"><span></span></div>
-
-          <article class="image-panel output-panel">
-            <div class="panel-topline"><span>03 / RECONSTRUCTED</span><span class="panel-tag">x<sub>0</sub></span></div>
-            <div class="canvas-wrap output-wrap"><canvas id="output-canvas" width="192" height="192" aria-label="Reverse denoising result"></canvas>
-              <span class="output-stamp" id="output-stamp">READY</span>
-            </div>
-            <div class="panel-caption"><strong id="output-title">Reverse estimate</strong><span id="output-subtitle">Play reverse to begin</span></div>
-          </article>
-        </div>
-
-        <div class="scrubber-row">
-          <button id="step-back" class="step-button" aria-label="Previous checkpoint" title="Previous checkpoint"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m12.5 4.5-5.5 5.5 5.5 5.5"/></svg></button>
-          <div class="scrubber-main">
-            <div class="scrubber-labels"><span id="scrubber-left">CLEAN IMAGE</span><span id="step-readout">STEP 0 <b>/ 1000</b></span><span id="scrubber-right">PURE NOISE</span></div>
-            <input id="step-slider" type="range" min="0" max="7" value="0" step="1" aria-label="Diffusion checkpoint">
-            <div class="tick-row" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
+          <div class="config-row">
+            <button id="randomize-seed" class="row-label-button" type="button" title="Generate a new random seed">Seed</button>
+            <input id="seed-input" type="text" inputmode="numeric" value="42" spellcheck="false" aria-describedby="seed-help config-error">
+          </div>
+          <div class="config-help">
+            <span id="timesteps-help">Timesteps: comma-separated values from 0 to 1000.</span>
+            <span id="seed-help">Select Seed for a new random value.</span>
           </div>
-          <button id="step-forward" class="step-button" aria-label="Next checkpoint" title="Next checkpoint"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7.5 4.5 5.5 5.5-5.5 5.5"/></svg></button>
+          <p id="config-error" class="field-error" role="alert"></p>
         </div>
-
-        <div class="checkpoint-strip" id="checkpoint-strip" aria-label="Diffusion checkpoints"></div>
       </section>
-
-      <section class="lower-grid">
-        <div class="process-explainer">
-          <p class="eyebrow"><span>B</span> WHAT YOU'RE SEEING</p>
-          <h2 id="explanation-title">Forward process</h2>
-          <p id="explanation-copy">At each step, a little Gaussian noise is mixed into the image. The schedule controls how quickly the original signal disappears; jump between checkpoints to see the structure dissolve.</p>
-        </div>
-        <div class="legend-panel">
-          <div class="legend-heading"><span>PROCESS KEY</span><span>DDPM / ε-prediction</span></div>
-          <div class="legend-item"><span class="legend-swatch signal"></span><span><b>Signal</b> — original image information</span></div>
-          <div class="legend-item"><span class="legend-swatch noise"></span><span><b>Noise</b> — sampled from N(0, I)</span></div>
-          <div class="legend-item"><span class="legend-swatch estimate"></span><span><b>Estimate</b> — reverse-step reconstruction</span></div>
-          <p class="model-note">EDUCATIONAL SIMULATION <span>·</span> reverse steps use the reference image as an oracle x<sub>0</sub> estimate. Real DDPMs learn to predict noise with a neural network.</p>
+      <section class="process-panel lab-panel" aria-labelledby="diffusion-title">
+        <div class="process-heading"><div class="panel-heading"><div>
+							<h2 id="diffusion-title">Forward process: image to noise</h2>
+					</div></div>
+					<span class="equation">x<sub>t</sub> = √α̅<sub>t</sub> x<sub>0</sub> + √(1 − α̅<sub>t</sub>) ε</span>
+				</div>
+        <output id="forward-progress-label" class="step-progress">0/1000</output>
+        <div id="diffusion-track" class="image-track" aria-label="Forward diffusion checkpoints"></div>
+      </section>
+      <section class="process-panel lab-panel" aria-labelledby="denoising-title">
+        <div class="process-heading"><div class="panel-heading"><div>
+							<h2 id="denoising-title">Reverse process: noise to face</h2></div></div>
+          <p class="reverse-equation">x<sub>t−1</sub> = 1/√α<sub>t</sub> (x<sub>t</sub> − β<sub>t</sub>/√(1−α̅<sub>t</sub>) ε<sub>θ</sub>(x<sub>t</sub>,t)) + σ<sub>t</sub>z</p>
         </div>
+        <output id="reverse-progress-label" class="step-progress">0/1000</output>
+        <div id="denoising-track" class="image-track" aria-label="Reverse denoising checkpoints"></div>
       </section>
     </main>
-
-    <footer><span>DIFFUSION LAB <span class="footer-dot">/</span> A SMALL STUDY IN GENERATIVE MODELS</span><span>β<sub>t</sub> LINEAR <span class="footer-dot">·</span> 1,000 TIMESTEPS</span></footer>
   </div>
+  <input id="image-upload" type="file" accept="image/*" hidden>
   <script src="app.js" defer></script>
 </body>
 </html>

requirements.txt

@@ -0,0 +1,5 @@
+diffusers>=0.30.0
+matplotlib>=3.8.0
+Pillow>=10.0.0
+safetensors>=0.4.0
+torch>=2.1.0

server.py

@@ -0,0 +1,122 @@
+import base64
+import binascii
+import json
+import mimetypes
+import secrets
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from io import BytesIO
+from pathlib import Path
+from urllib.parse import urlparse
+
+from generate import CHECKPOINTS, MODEL_ID, generate_images, is_model_loaded, load_model
+
+
+ROOT = Path(__file__).resolve().parent
+
+
+def encode_frame(image):
+    buffer = BytesIO()
+    image.save(buffer, format="JPEG", quality=86)
+    return base64.b64encode(buffer.getvalue()).decode("ascii")
+
+
+def generate_frames(seed, checkpoints=CHECKPOINTS, initial_image=None):
+    yield {"type": "status", "status": "loading", "model": MODEL_ID}
+
+    try:
+        for step, image in generate_images(seed, checkpoints=checkpoints, initial_image=initial_image):
+            yield {"type": "progress", "step": step, "total": 1000}
+            if image is not None:
+                yield {"type": "frame", "step": step, "image": encode_frame(image)}
+
+        _, _, device = load_model()
+        yield {"type": "complete", "seed": seed, "device": device}
+    except Exception as error:
+        yield {"type": "error", "message": str(error)}
+
+
+class DiffusionHandler(BaseHTTPRequestHandler):
+    def send_bytes(self, status, content_type, body):
+        self.send_response(status)
+        self.send_header("Content-Type", content_type)
+        self.send_header("Content-Length", str(len(body)))
+        self.send_header("Cache-Control", "no-store")
+        self.end_headers()
+        self.wfile.write(body)
+
+    def do_GET(self):
+        path = urlparse(self.path).path
+        if path == "/api/health":
+            body = json.dumps({"model": MODEL_ID, "loaded": is_model_loaded()}).encode()
+            self.send_bytes(200, "application/json", body)
+            return
+
+        relative_path = "index.html" if path == "/" else path.lstrip("/")
+        if relative_path not in {"index.html", "app.js", "styles.css"}:
+            self.send_error(404)
+            return
+
+        file_path = ROOT / relative_path
+        content_type = mimetypes.guess_type(file_path.name)[0] or "application/octet-stream"
+        self.send_bytes(200, content_type, file_path.read_bytes())
+
+    def do_POST(self):
+        if urlparse(self.path).path != "/api/generate":
+            self.send_error(404)
+            return
+
+        try:
+            length = int(self.headers.get("Content-Length", "0"))
+            request = json.loads(self.rfile.read(length) or b"{}")
+            seed = int(request.get("seed", secrets.randbelow(2**31)))
+            if seed < 0 or seed >= 2**63:
+                raise ValueError("Seed must be between 0 and 2^63 - 1.")
+            checkpoints = request.get("checkpoints", CHECKPOINTS)
+            if (
+                not isinstance(checkpoints, list)
+                or not 2 <= len(checkpoints) <= 12
+                or any(type(step) is not int or step < 0 or step > 1000 for step in checkpoints)
+            ):
+                raise ValueError("Checkpoints must be a list of 2 to 12 integers from 0 to 1000.")
+            checkpoints = tuple(sorted(set(checkpoints)))
+            if checkpoints[0] != 0 or checkpoints[-1] != 1000:
+                raise ValueError("Checkpoints must include 0 and 1000.")
+            initial_image = None
+            encoded_image = request.get("initial_image")
+            if encoded_image is not None:
+                if not isinstance(encoded_image, str) or len(encoded_image) > 3_000_000:
+                    raise ValueError("The forward-noise image is invalid or too large.")
+                from PIL import Image
+
+                encoded_image = encoded_image.partition(",")[2]
+                initial_image = Image.open(BytesIO(base64.b64decode(encoded_image, validate=True)))
+                initial_image.load()
+        except (ValueError, TypeError, json.JSONDecodeError, binascii.Error, OSError) as error:
+            self.send_bytes(400, "application/json", json.dumps({"error": str(error)}).encode())
+            return
+
+        self.send_response(200)
+        self.send_header("Content-Type", "application/x-ndjson; charset=utf-8")
+        self.send_header("Cache-Control", "no-store")
+        self.send_header("X-Accel-Buffering", "no")
+        self.end_headers()
+        try:
+            for event in generate_frames(seed, checkpoints, initial_image):
+                self.wfile.write((json.dumps(event) + "\n").encode())
+                self.wfile.flush()
+        except (BrokenPipeError, ConnectionResetError):
+            pass
+
+    def log_message(self, format_string, *args):
+        print(f"{self.address_string()} - {format_string % args}")
+
+
+class DiffusionServer(ThreadingHTTPServer):
+    daemon_threads = True
+
+
+if __name__ == "__main__":
+    server = DiffusionServer(("127.0.0.1", 8000), DiffusionHandler)
+    print(f"Diffusion Lab: http://{server.server_address[0]}:{server.server_address[1]}")
+    print(f"Model: {MODEL_ID} (loaded on first generation request)")
+    server.serve_forever()

styles.css

@@ -1,179 +1,70 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
-
-:root {
-  color-scheme: light;
-  --paper: #f3f2ec;
-  --surface: #fbfaf6;
-  --ink: #222b25;
-  --muted: #778078;
-  --line: #d8d9d0;
-  --green: #315b48;
-  --green-bright: #9ace82;
-  --coral: #db7358;
-  --mono: 'DM Mono', monospace;
-  --sans: 'DM Sans', sans-serif;
-  --display: 'Space Grotesk', sans-serif;
-}
-
-* { box-sizing: border-box; }
-html { min-width: 320px; background: var(--paper); }
-body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--paper); }
-button, input { font: inherit; }
-button { color: inherit; }
-.app-shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 0 6.1%; background-color: var(--paper); background-image: radial-gradient(#59644d12 .7px, transparent .7px); background-size: 8px 8px; }
-.topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
-.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 16px var(--display); letter-spacing: 0; }
-.brand-light { color: var(--muted); font-weight: 500; }
-.brand-mark { width: 24px; height: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-9deg); }
-.brand-mark i { display: block; border-radius: 2px; background: var(--green); }
-.brand-mark i:nth-child(2) { background: #91b680; }
-.brand-mark i:nth-child(3) { background: var(--coral); }
-.brand-mark i:nth-child(4) { background: #d8a26d; }
-.topbar-right { display: flex; align-items: center; gap: 11px; color: #68736b; font: 10px var(--mono); letter-spacing: 0; }
-.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #82ad6b; box-shadow: 0 0 0 3px #82ad6b22; }
-.topbar-rule { height: 13px; border-left: 1px solid #c4c7bd; margin: 0 4px; }
-main { padding-bottom: 48px; }
-.intro { display: grid; grid-template-columns: 1fr minmax(270px, 390px); align-items: end; gap: 48px; padding: 54px 0 42px; }
-.eyebrow { margin: 0; color: var(--muted); font: 10px var(--mono); letter-spacing: 0; }
-.eyebrow > span { margin-right: 10px; color: var(--coral); }
-h1 { margin: 17px 0 12px; font: 600 clamp(44px, 5vw, 68px)/.99 var(--display); letter-spacing: 0; }
-h1 span { color: var(--green); }
-.dek { max-width: 490px; margin: 0; color: #616b63; font-size: 14px; line-height: 1.7; }
-.equation-note { border-left: 2px solid var(--coral); padding: 5px 0 5px 20px; display: grid; gap: 11px; margin-bottom: 7px; }
-.equation-label, .equation-foot { color: var(--muted); font: 10px var(--mono); }
-.equation { color: var(--green); font: 500 17px var(--display); white-space: nowrap; }
-.equation sub { font-size: 10px; }
-.equation-foot b { color: var(--coral); padding: 0 5px; }
-.workbench { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px #48523c0b; padding: 22px 25px 19px; }
-.workbench-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
-.section-title { display: flex; align-items: center; gap: 13px; }
-.section-index { width: 34px; height: 34px; border: 1px solid #d2d8cc; border-radius: 50%; display: grid; place-items: center; color: var(--green); font: 11px var(--mono); }
-.section-title .eyebrow { font-size: 9px; margin-bottom: 3px; }
-h2 { margin: 0; font: 600 20px var(--display); letter-spacing: 0; }
-.controls { display: flex; align-items: center; gap: 10px; }
-.segmented { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); background: #f3f2ed; border-radius: 4px; }
-.segment { min-height: 31px; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; color: #687169; cursor: pointer; font: 11px var(--mono); }
-.segment.active { color: white; background: var(--green); }
-.icon-button, .step-button { display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: background .18s, border-color .18s; }
-.icon-button { width: 38px; height: 38px; border-radius: 50%; }
-.icon-button:hover, .step-button:hover { border-color: var(--green); background: #eff3eb; }
-.icon-button svg { width: 19px; height: 19px; fill: var(--green); }
-.icon-button .pause-icon { fill: none; stroke: var(--green); stroke-width: 1.7; }
-.hidden { display: none; }
-.process-track { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 8px; }
-.image-panel { min-width: 0; }
-.panel-topline { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; color: var(--muted); font: 9px var(--mono); }
-.panel-tag { color: var(--green); border: 1px solid #d5dbd0; padding: 3px 7px; border-radius: 2px; }
-.panel-tag sub { font-size: 8px; }
-.canvas-wrap { position: relative; overflow: hidden; background: #e8e5da; border: 1px solid #dedfd7; aspect-ratio: 1.52; }
-.canvas-wrap canvas { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; }
-.state-wrap { background: #c5c8bb; }
-.output-wrap { background: #d9e2d6; }
-.upload-control { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; min-height: 29px; padding: 0 9px; color: var(--ink); background: #fbfaf6ed; border: 1px solid #ffffffb8; border-radius: 3px; cursor: pointer; font: 9px var(--mono); transition: background .18s; }
-.upload-control:hover { background: white; }
-.upload-control svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.state-corner, .output-stamp { position: absolute; left: 8px; bottom: 8px; padding: 5px 7px; color: white; background: #26362dbd; font: 9px var(--mono); }
-.output-stamp { left: auto; right: 8px; color: var(--green); background: #f7fbf1e8; border: 1px solid #ffffffad; }
-.panel-caption { min-height: 45px; padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
-.panel-caption strong { overflow: hidden; color: var(--ink); font: 600 12px var(--display); text-overflow: ellipsis; white-space: nowrap; }
-.panel-caption span { color: var(--muted); font: 9px var(--mono); }
-.flow-arrow { display: grid; place-items: center; }
-.flow-arrow span { width: 19px; height: 1px; position: relative; background: #c3c8bd; }
-.flow-arrow span::after { content: ''; position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid #929b8f; border-right: 1px solid #929b8f; transform: rotate(45deg); }
-.reverse-arrow span { transform: rotate(180deg); }
-.scrubber-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 13px; align-items: center; margin-top: 8px; }
-.step-button { width: 32px; height: 32px; border-radius: 50%; }
-.step-button svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.scrubber-labels { display: flex; justify-content: space-between; align-items: center; color: #8b928a; font: 8px var(--mono); }
-.scrubber-labels #step-readout { color: var(--green); font-size: 10px; }
-.scrubber-labels #step-readout b { color: #899188; font-weight: 400; }
-#step-slider { appearance: none; display: block; width: 100%; height: 14px; margin: 8px 0 0; background: transparent; cursor: pointer; }
-#step-slider::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--green-bright), #d7d8ce 0%); border-radius: 2px; }
-#step-slider::-moz-range-track { height: 3px; background: #d7d8ce; border-radius: 2px; }
-#step-slider::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 2px solid var(--surface); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
-#step-slider::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
-.tick-row { display: flex; justify-content: space-between; padding: 1px 5px 0; }
-.tick-row span { width: 1px; height: 4px; background: #c7cbc1; }
-.checkpoint-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
-.checkpoint { min-width: 0; padding: 4px; text-align: left; background: #f5f4ef; border: 1px solid #e4e4dd; border-radius: 3px; cursor: pointer; transition: border-color .2s, transform .2s; }
-.checkpoint:hover { transform: translateY(-2px); border-color: #a8b8a2; }
-.checkpoint.active { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
-.checkpoint canvas { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; background: #e7e5dc; }
-.checkpoint span { display: block; overflow: hidden; margin-top: 5px; color: #69736b; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
-.checkpoint.active span { color: var(--green); }
-.lower-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; padding: 35px 6px 5px; }
-.process-explainer { max-width: 500px; }
-.process-explainer h2 { margin: 9px 0 7px; font-size: 19px; }
-.process-explainer > p:last-child { max-width: 530px; margin: 0; color: #667168; font-size: 12px; line-height: 1.7; }
-.legend-panel { border-left: 1px solid var(--line); padding-left: 22px; }
-.legend-heading { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 13px; color: var(--muted); font: 9px var(--mono); }
-.legend-heading span:last-child { color: var(--green); }
-.legend-item { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #6d766f; font-size: 10px; }
-.legend-item b { color: var(--ink); font-weight: 600; }
-.legend-swatch { width: 9px; height: 9px; border-radius: 2px; }
-.legend-swatch.signal { background: var(--green); }
-.legend-swatch.noise { background: var(--coral); }
-.legend-swatch.estimate { background: #91b680; }
-.model-note { margin: 15px 0 0; padding-top: 10px; border-top: 1px solid #e1e2da; color: #818981; font: 9px/1.6 var(--mono); }
-.model-note sub { font-size: 7px; }
-.model-note span { color: var(--coral); padding: 0 3px; }
-footer { min-height: 52px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #7e877f; font: 8px var(--mono); }
-.footer-dot { color: var(--coral); padding: 0 4px; }
-
-@media (min-width: 1200px) {
-  .app-shell { padding-right: 7.4%; padding-left: 7.4%; }
-  .workbench { padding: 25px 30px 21px; }
-  .canvas-wrap { aspect-ratio: 1.64; }
-}
-@media (max-width: 760px) {
-  .app-shell { padding: 0 5%; }
-  .topbar { height: 64px; }
-  .topbar-right { gap: 7px; font-size: 8px; }
-  .intro { grid-template-columns: 1fr; gap: 22px; padding: 38px 0 29px; }
-  h1 { font-size: 53px; }
-  .dek { font-size: 13px; }
-  .equation-note { padding-left: 14px; gap: 8px; }
-  .equation { font-size: 15px; }
-  .workbench { padding: 17px 14px 15px; }
-  .workbench-head { align-items: flex-start; }
-  .section-title { gap: 9px; }
-  h2 { font-size: 17px; }
-  .section-index { width: 30px; height: 30px; }
-  .controls { gap: 6px; }
-  .segment { padding: 0 8px; font-size: 10px; }
-  .icon-button { width: 34px; height: 34px; }
-  .process-track { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 6px; }
-  .process-track .output-panel { grid-column: 1; }
-  .process-track .reverse-arrow { display: none; }
-  .process-track .output-panel { margin-top: 6px; }
-  .process-track .state-panel { grid-column: 3; grid-row: 1; }
-  .process-track .source-panel { grid-column: 1; grid-row: 1; }
-  .flow-arrow:not(.reverse-arrow) { grid-column: 2; grid-row: 1; }
-  .process-track .output-panel { grid-column: 1 / 4; grid-row: 2; width: calc(50% - 10px); }
-  .process-track .output-panel .canvas-wrap { aspect-ratio: 1.52; }
-  .panel-topline { font-size: 8px; }
-  .panel-caption strong { font-size: 11px; }
-  .panel-caption span { font-size: 8px; }
-  .checkpoint-strip { gap: 5px; margin-top: 12px; }
-  .checkpoint { padding: 3px; }
-  .checkpoint span { font-size: 7px; }
-  .scrubber-row { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 7px; }
-  .step-button { width: 28px; height: 28px; }
-  .scrubber-labels { font-size: 7px; }
-  .scrubber-labels #step-readout { font-size: 9px; }
-  .lower-grid { grid-template-columns: 1fr; gap: 22px; padding: 27px 3px 5px; }
-  .legend-panel { border-left: 0; border-top: 1px solid var(--line); padding: 17px 0 0; }
-}
-@media (max-width: 410px) {
-  .topbar-right { font-size: 7px; gap: 5px; }
-  .brand { font-size: 14px; }
-  .brand-mark { width: 21px; height: 21px; }
-  .workbench-head { flex-wrap: wrap; }
-  .controls { margin-left: auto; }
-  .canvas-wrap { aspect-ratio: 1.2; }
-  .process-track .output-panel { width: calc(60% - 7px); }
-  .panel-caption { min-height: 42px; }
-  .panel-caption span { white-space: normal; }
-  .checkpoint span { font-size: 6px; }
-  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 0; }
-}
+:root { color-scheme: light; --paper:#f3f2ec; --surface:#fbfaf6; --ink:#222b25; --muted:#778078; --line:#d8d9d0; --green:#315b48; --lime:#9ace82; --coral:#db7358; --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --display:'Space Grotesk',sans-serif; }
+* { box-sizing:border-box; }
+html { min-width:320px; background:var(--paper); }
+body { margin:0; color:var(--ink); font-family:var(--sans); background:var(--paper); }
+button,input { font:inherit; }
+button { color:inherit; }
+.app-shell { max-width:1440px; min-height:100vh; margin:auto; padding:0 6%; background-image:radial-gradient(#59644d12 .7px,transparent .7px); background-size:8px 8px; }
+.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
+.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font:700 16px var(--display); }
+.brand-light { color:var(--muted); font-weight:500; }
+.brand-mark { width:24px; height:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; transform:rotate(-9deg); }
+.brand-mark i { border-radius:2px; background:var(--green); }.brand-mark i:nth-child(2){background:#91b680}.brand-mark i:nth-child(3){background:var(--coral)}.brand-mark i:nth-child(4){background:#d8a26d}
+.topbar-right { display:flex; align-items:center; gap:11px; color:#68736b; font:10px var(--mono); }
+.live-dot { width:7px; height:7px; border-radius:50%; background:#82ad6b; box-shadow:0 0 0 3px #82ad6b22; }.topbar-rule{height:13px;border-left:1px solid #c4c7bd;margin:0 4px}
+main { display:grid; gap:22px; padding:34px 0 42px; }
+.lab-panel { padding:24px 26px; border:1px solid var(--line); background:var(--surface); box-shadow:0 12px 34px #48523c0a; }
+.control-panel { display:block; }
+.control-panel h1 { margin-bottom:18px; font-size:20px; }
+.panel-heading { display:flex; align-items:center; gap:13px; min-width:0; }
+.section-index { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid #d2d8cc; border-radius:50%; color:var(--green); font:11px var(--mono); }
+.eyebrow { margin:0 0 4px; color:var(--muted); font:9px var(--mono); letter-spacing:.04em; }
+h1,h2 { margin:0; font:600 20px var(--display); } h1{font-size:18px}
+.config-rows { max-width:820px; display:grid; gap:8px; }
+.config-row { display:grid; grid-template-columns:110px minmax(0,1fr) 70px; align-items:center; min-height:40px; }
+.config-row label,.row-label-button { align-self:stretch; display:flex; align-items:center; padding:0 12px; border:1px solid #cfd3c9; border-right:0; border-radius:3px 0 0 3px; color:var(--green); background:#f0f2eb; font:10px var(--mono); }
+.config-row input { min-width:0; width:100%; height:40px; padding:0 12px; color:var(--ink); border:1px solid #cfd3c9; border-radius:0 3px 3px 0; outline:none; background:white; font:11px var(--mono); }
+.config-row input:focus { position:relative; border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
+.config-row input[readonly] { color:#687169; background:#f8f7f2; }
+.config-row #model-input,.config-row #seed-input { grid-column:2 / 4; }
+.config-row:has(#apply-timesteps) input { border-radius:0; }
+.config-row #apply-timesteps,.process-button { border:1px solid var(--green); color:white; background:var(--green); cursor:pointer; font:10px var(--mono); }
+.config-row #apply-timesteps { align-self:stretch; border-radius:0 3px 3px 0; }
+.config-row #apply-timesteps:hover,.process-button:hover:not(:disabled){background:#244737}
+.row-label-button { cursor:pointer; text-align:left; }
+.row-label-button:hover { color:white; background:var(--green); }
+.config-help { display:flex; justify-content:space-between; gap:20px; padding-left:110px; color:var(--muted); font:8px/1.5 var(--mono); }
+.field-error { min-height:12px; margin:0; padding-left:110px; color:#b34e38; font:8px/1.5 var(--mono); }
+.equation-note { display:grid; gap:9px; padding:5px 0 5px 18px; border-left:2px solid var(--coral); }
+.equation-label { color:var(--muted); font:9px var(--mono); }.equation{color:var(--green);font:500 15px var(--display);white-space:nowrap}.equation sub{font-size:9px}
+.process-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:18px; }
+.process-heading>p { max-width:330px; margin:0; color:var(--muted); text-align:right; font:10px/1.5 var(--mono); }
+.process-heading .reverse-equation { max-width:520px; color:var(--green); font:500 13px/1.6 var(--display); }
+.reverse-equation sub { font-size:8px; }
+.step-progress { flex:0 0 auto; padding:6px 10px; border:1px solid #d6dacf; border-radius:3px; color:var(--coral); background:#f5f4ef; font:500 11px var(--mono); white-space:nowrap; }
+.image-track { display:grid; grid-template-columns:repeat(var(--stage-count,8),minmax(100px,1fr)); gap:10px; overflow-x:auto; padding:2px 2px 10px; }
+.stage-card { position:relative; min-width:100px; transition:opacity .2s,transform .2s; }
+.stage-card.is-pending .stage-canvas canvas { opacity:0; }
+.stage-card.is-pending .stage-canvas::after { content:'WAITING'; position:absolute; inset:0; display:grid; place-items:center; color:#92998f; font:8px var(--mono); }
+.action-slot { position:relative; z-index:2; height:34px; display:flex; align-items:flex-start; gap:5px; }
+.action-slot.reverse-actions { width:max-content; left:100%; transform:translateX(-100%); }
+.action-slot.status-right { width:max-content; left:100%; transform:translateX(-100%); }
+.process-button { min-width:76px; height:28px; padding:0 12px; border-radius:3px; }
+.reverse-actions .process-button { min-width:auto; padding:0 8px; font-size:8px; white-space:nowrap; }
+.process-button:disabled { opacity:.6; cursor:progress; }
+.stage-canvas { position:relative; overflow:hidden; aspect-ratio:1; border:1px solid #dedfd7; background:linear-gradient(135deg,#e7e5dc,#d9ddd4); transition:border-color .2s,box-shadow .2s; }
+.stage-canvas canvas { display:block; width:100%; height:100%; object-fit:cover; }
+.stage-card.is-active { transform:translateY(-3px); }.stage-card.is-active .stage-canvas{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral),0 8px 20px #db735824}
+.change-image { position:absolute; right:6px; bottom:6px; min-height:25px; padding:0 7px; border:1px solid #ffffffb8; border-radius:3px; background:#fbfaf6e8; cursor:pointer; font:8px var(--mono); }
+.noise-actions { position:absolute; right:6px; bottom:6px; z-index:2; display:flex; gap:4px; }
+.noise-actions .process-button { min-width:auto; height:25px; padding:0 7px; border-color:#ffffffb8; color:var(--ink); background:#fbfaf6e8; font-size:7px; }
+.noise-actions .process-button:hover:not(:disabled) { color:white; background:var(--green); }
+.stage-caption { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:25px; padding-top:7px; }.stage-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10px var(--display)}.stage-caption span{flex:0 0 auto;margin-left:auto;color:var(--green);font:600 13px var(--mono)}.stage-caption span:only-child{margin-right:auto}
+.hover-preview { position:fixed; z-index:50; display:none; width:256px; height:256px; padding:0; border:2px solid var(--surface); background:#e7e5dc; box-shadow:0 12px 38px #25312852; pointer-events:none; }
+.hover-preview canvas { display:block; width:256px; height:256px; }
+.hover-preview.is-visible { display:block; }
+.model-status { margin:8px 0 0; padding-top:10px; border-top:1px solid #e1e2da; color:#737d74; font:9px/1.5 var(--mono); }
+.model-note { padding:4px 7px; color:#818981; font:9px/1.6 var(--mono); }.model-note span{display:block;margin-bottom:3px;color:var(--green)}
+footer { min-height:52px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:#7e877f; font:8px var(--mono); }.footer-dot{color:var(--coral);padding:0 4px}
+@media(max-width:900px){.image-track{grid-template-columns:repeat(var(--stage-count,8),minmax(112px,1fr))}}
+@media(max-width:620px){.app-shell{padding:0 4%}.topbar{height:64px}.topbar-right{font-size:7px;gap:6px}.lab-panel{padding:18px 14px}.config-row{grid-template-columns:82px minmax(0,1fr) 58px}.config-help{padding-left:82px;flex-direction:column;gap:2px}.field-error{padding-left:82px}.process-heading{align-items:flex-start;flex-direction:column;gap:10px}.process-heading>p{text-align:left}.image-track{grid-template-columns:repeat(var(--stage-count,8),124px)}footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:5px}}