3a0cf26e6c
A full build is a couple of minutes of GPU work, and the page spent all of it showing an empty screen and then everything at once. The interesting failure — a strip whose frames could be shuffled without anyone noticing — is visible in the first row, so waiting for the seventeenth to look at the first is a needlessly slow way to find it out. Rows are appended as they land, in bank order, and re-sorted once at the end when there is finally something to sort by. One row renderer handles both raw pixels, which is what exists mid-build, and the compressed blobs the cache holds afterwards, so what you watch appear is what you keep. The song is announced BEFORE its render rather than only after it, too: synthesising and rendering one is tens of seconds, and a page that says nothing until the first one lands looks broken for exactly as long as that takes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
280 lines
12 KiB
HTML
280 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>flow-state · filmstrip</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
body {
|
|
margin: 0; padding: 20px 24px 60px;
|
|
background: #0b0d12; color: #d6dae3;
|
|
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
h1 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #7d8698; margin: 0 0 4px; }
|
|
a { color: #7dd3fc; }
|
|
.lede { color: #8b94a7; max-width: 84ch; margin: 0 0 14px; }
|
|
.bar { position: sticky; top: 0; z-index: 5; background: #0b0d12; padding: 10px 0 12px; border-bottom: 1px solid #1c2030; margin-bottom: 16px; }
|
|
button, select {
|
|
background: #171b24; color: #d6dae3; border: 1px solid #2a3040;
|
|
padding: 5px 10px; font: inherit; border-radius: 3px; cursor: pointer;
|
|
}
|
|
button:hover:not(:disabled) { border-color: #4a5468; }
|
|
button:disabled { opacity: .5; cursor: default; }
|
|
#status { color: #8b94a7; margin-left: 10px; }
|
|
#status.cached { color: #4ade80; }
|
|
|
|
.spinner {
|
|
display: none; width: 13px; height: 13px; vertical-align: -2px;
|
|
border: 2px solid #2a3040; border-top-color: #7dd3fc; border-radius: 50%;
|
|
animation: spin .8s linear infinite; margin-right: 6px;
|
|
}
|
|
.building .spinner { display: inline-block; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
#progress { height: 2px; background: #1a1e28; margin-top: 8px; border-radius: 2px; overflow: hidden; display: none; }
|
|
.building #progress { display: block; }
|
|
#progress i { display: block; height: 100%; width: 0; background: #7dd3fc; transition: width .2s; }
|
|
|
|
.row { margin-bottom: 22px; border-left: 3px solid #232838; padding-left: 12px; }
|
|
.row.static { border-color: #ef4444; }
|
|
.row.churn { border-color: #eab308; }
|
|
.row.arc { border-color: #22c55e; }
|
|
.row.broken { border-color: #a855f7; background: #150e1c; }
|
|
.head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
|
|
.name { font-size: 14px; color: #e6eaf2; }
|
|
.meta { color: #6b7280; font-size: 11px; }
|
|
.num { color: #9aa3b5; }
|
|
.num b { color: #d6dae3; font-weight: normal; }
|
|
.story { color: #a5b4fc; font-size: 11px; }
|
|
.watch { font-size: 11px; text-decoration: none; }
|
|
.watch:hover { text-decoration: underline; }
|
|
.err { color: #f87171; }
|
|
|
|
/* The strip scrolls sideways rather than wrapping: a filmstrip that wraps
|
|
stops being a filmstrip, and reading it left to right IS the measurement. */
|
|
.strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
|
|
.strip figure { margin: 0; flex: 0 0 auto; width: 168px; }
|
|
.strip canvas { width: 100%; display: block; background: #05070a; border-radius: 2px; aspect-ratio: 16 / 9; }
|
|
.strip figcaption { font-size: 10px; color: #565f70; margin-top: 3px; line-height: 1.35; }
|
|
.strip .t { color: #8b94a7; }
|
|
.strip .sc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.moment { color: #fbbf24; }
|
|
/* The climax is the one frame worth finding at a glance. */
|
|
figure.climax canvas { outline: 2px solid #fbbf24; outline-offset: -2px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>flow-state · filmstrip</h1>
|
|
<p class="lede">
|
|
Every song in the bank, one frame every <span id="everyLabel">30</span> seconds,
|
|
left to right. The gallery asks whether a scene looks the same in every song;
|
|
this asks whether a song looks the same as <em>itself</em> four minutes later.
|
|
A strip whose frames could be shuffled without anyone noticing is a video with
|
|
no arc, however busy it is.
|
|
<strong>drift</strong> is how far the video gets from itself and
|
|
<strong>direction</strong> is whether that distance grows with time — churn
|
|
scores the first and not the second. The climax frame is outlined.
|
|
<a href="/debug.html">← all debug tools</a>
|
|
</p>
|
|
|
|
<div class="bar" id="bar">
|
|
<span class="spinner"></span>
|
|
<button id="rebuild">rebuild</button>
|
|
<select id="sort">
|
|
<option value="direction">sort: least direction first</option>
|
|
<option value="drift">sort: least drift first</option>
|
|
<option value="name">sort: bank order</option>
|
|
<option value="plot">sort: by plot</option>
|
|
</select>
|
|
<span id="status">checking cache…</span>
|
|
<div id="progress"><i></i></div>
|
|
</div>
|
|
|
|
<div id="out"></div>
|
|
|
|
<script type="module">
|
|
import { buildFilmstrip, songNames, STRIP, DEFAULT_EVERY, DEFAULT_DURATION } from '/src/checks/filmstrip.js';
|
|
import { blit } from '/src/checks/blit.js';
|
|
import { hashString } from '/src/engine/rng.js';
|
|
import {
|
|
sourceFingerprint, loadGallery, saveGallery,
|
|
pixelsToBlob, blobToCanvas,
|
|
} from '/src/checks/gallery-cache.js';
|
|
|
|
const params = new URLSearchParams(location.search);
|
|
const every = Number(params.get('every')) || DEFAULT_EVERY;
|
|
const duration = Number(params.get('duration')) || DEFAULT_DURATION;
|
|
const only = params.get('song') ? params.get('song').split(',') : null;
|
|
|
|
document.getElementById('everyLabel').textContent = every;
|
|
|
|
const bar = document.getElementById('bar');
|
|
const out = document.getElementById('out');
|
|
const status = document.getElementById('status');
|
|
const sortSel = document.getElementById('sort');
|
|
const progress = document.querySelector('#progress i');
|
|
const rebuildBtn = document.getElementById('rebuild');
|
|
|
|
let rows = [];
|
|
|
|
// Read against the arcless reference the variety report prints: around zero is
|
|
// a video that is as unlike itself after ten seconds as after four minutes.
|
|
const grade = (row) => (row.error ? 'broken'
|
|
: row.direction < 0.15 ? 'static'
|
|
: row.direction < 0.45 ? 'churn' : 'arc');
|
|
|
|
// Nine stills are an argument about a video, and the only reply to them is the
|
|
// video. The app takes the bank's wav straight from `?song=`, and the seed is
|
|
// the one renderSong() uses — hashed off the name — so what plays is the take
|
|
// the strip measured rather than a fresh draw that happens to share a title.
|
|
const watchLink = (name) =>
|
|
`/?song=${encodeURIComponent(name)}&seed=${hashString(name)}`;
|
|
|
|
/**
|
|
* One song's row.
|
|
*
|
|
* Shots arrive as raw pixels while the build is running and as compressed blobs
|
|
* once it has finished (and on every later sort, out of the cache). Both are
|
|
* drawn here rather than in two places, because the whole point of painting
|
|
* during the build is that what you see then is what you keep.
|
|
*/
|
|
function renderRow(row) {
|
|
const el = document.createElement('div');
|
|
el.className = `row ${grade(row)}`;
|
|
el.innerHTML = `
|
|
<div class="head">
|
|
<span class="name">${row.name}</span>
|
|
<a class="watch" href="${watchLink(row.name)}" target="_blank"
|
|
title="play this song in the app, on the seed this strip was rendered with">watch ▸</a>
|
|
<span class="meta">${row.bpm ?? '?'} bpm · ${row.sections ?? '?'} sections · ${row.director || ''}</span>
|
|
<span class="num">direction <b>${(row.direction ?? 0).toFixed(2)}</b> · drift <b>${(row.drift ?? 0).toFixed(3)}</b></span>
|
|
<span class="story">${row.error ? `<span class="err">${row.error}</span>` : (row.storyLine || '')}</span>
|
|
</div>
|
|
<div class="strip"></div>`;
|
|
const strip = el.querySelector('.strip');
|
|
for (const shot of row.shots || row.frames || []) {
|
|
const fig = document.createElement('figure');
|
|
if (shot.moment === 'climax') fig.className = 'climax';
|
|
const canvas = document.createElement('canvas');
|
|
fig.appendChild(canvas);
|
|
const cap = document.createElement('figcaption');
|
|
const mm = Math.floor(shot.time / 60);
|
|
const ss = String(Math.round(shot.time % 60)).padStart(2, '0');
|
|
cap.innerHTML =
|
|
`<span class="t">${mm}:${ss}</span> ${shot.kind}` +
|
|
(shot.moment ? ` <span class="moment">${shot.moment}</span>` : '') +
|
|
`<span class="sc">${shot.scene}</span>` +
|
|
`<span class="sc">j ${shot.journey.toFixed(2)} · t ${shot.tension.toFixed(2)}</span>`;
|
|
fig.appendChild(cap);
|
|
strip.appendChild(fig);
|
|
if (shot.pixels) {
|
|
// Straight from the render, mid-build. Synchronous and cheap — it is
|
|
// one song's nine frames, not the whole bank's.
|
|
blit(canvas, shot.pixels, STRIP.width, STRIP.height);
|
|
} else {
|
|
// Decoded lazily: seventeen songs of nine frames is 150 images and
|
|
// decoding them synchronously stalls the page.
|
|
blobToCanvas(canvas, shot.blob);
|
|
}
|
|
}
|
|
return el;
|
|
}
|
|
|
|
function draw() {
|
|
const mode = sortSel.value;
|
|
const order = songNames();
|
|
const sorted = rows.slice().sort((a, b) => (
|
|
mode === 'name' ? order.indexOf(a.name) - order.indexOf(b.name)
|
|
: mode === 'drift' ? a.drift - b.drift
|
|
: mode === 'plot' ? ((a.story?.plot || '').localeCompare(b.story?.plot || '') || a.direction - b.direction)
|
|
: a.direction - b.direction));
|
|
|
|
out.innerHTML = '';
|
|
for (const row of sorted) out.appendChild(renderRow(row));
|
|
}
|
|
|
|
sortSel.addEventListener('change', draw);
|
|
|
|
function summarise(built) {
|
|
const flat = rows.filter((r) => !r.error && r.direction < 0.15).length;
|
|
const meanDir = rows.length
|
|
? rows.reduce((a, r) => a + (r.direction || 0), 0) / rows.length : 0;
|
|
return `${rows.length} songs · every ${every}s of ${duration}s · ` +
|
|
`mean direction ${meanDir.toFixed(2)} · ${flat} with no direction` +
|
|
(built ? ` · built ${new Date(built).toLocaleString()}` : '');
|
|
}
|
|
|
|
// The cache key carries the sampling parameters as well as the source, so
|
|
// changing `?every=` does not silently show you the previous spacing's pixels.
|
|
const cacheKey = () => `filmstrip:${every}:${duration}:${only ? only.join(',') : 'all'}:${sourceFingerprint()}`;
|
|
|
|
async function build() {
|
|
bar.classList.add('building');
|
|
rebuildBtn.disabled = true;
|
|
rows = [];
|
|
out.innerHTML = '';
|
|
|
|
const total = (only || songNames()).length;
|
|
const built = await buildFilmstrip({
|
|
duration, every, names: only,
|
|
// Painted as they land, in bank order, rather than after the whole run.
|
|
// A full build is a couple of minutes of GPU work and the interesting
|
|
// failure — a strip whose frames could be shuffled — is visible in the
|
|
// first row. Waiting for the seventeenth to look at the first is a
|
|
// needlessly slow way to find that out. Re-sorted once at the end, when
|
|
// there is finally something to sort by.
|
|
onSongStart: (done, of, name) => {
|
|
status.textContent = `rendering ${name}… (${done}/${of})`;
|
|
progress.style.width = `${((done - 1) / of) * 100}%`;
|
|
},
|
|
onSong: (done, of, row) => {
|
|
progress.style.width = `${(done / of) * 100}%`;
|
|
out.appendChild(renderRow(row));
|
|
},
|
|
});
|
|
|
|
// Compress once, here, rather than holding 150 raw frames: the strips are
|
|
// stored and redrawn from these blobs on every sort.
|
|
for (const row of built) {
|
|
rows.push({
|
|
...row,
|
|
frames: undefined,
|
|
shots: await Promise.all((row.frames || []).map(async (f) => ({
|
|
time: f.time, kind: f.kind, scene: f.scene, act: f.act,
|
|
tension: f.tension, journey: f.journey, moment: f.moment,
|
|
blob: await pixelsToBlob(f.pixels, STRIP.width, STRIP.height),
|
|
}))),
|
|
});
|
|
}
|
|
|
|
bar.classList.remove('building');
|
|
rebuildBtn.disabled = false;
|
|
const stamp = Date.now();
|
|
status.textContent = summarise(stamp);
|
|
status.className = '';
|
|
draw();
|
|
await saveGallery(cacheKey(), { built: stamp, rows });
|
|
return total;
|
|
}
|
|
|
|
async function load() {
|
|
const cached = await loadGallery(cacheKey());
|
|
if (cached && cached.rows && cached.rows.length) {
|
|
rows = cached.rows;
|
|
status.textContent = summarise(cached.built);
|
|
status.className = 'cached';
|
|
draw();
|
|
return;
|
|
}
|
|
await build();
|
|
}
|
|
|
|
rebuildBtn.addEventListener('click', () => build());
|
|
|
|
// Dev handle, so a headless run can wait for the build and read the numbers
|
|
// without scraping the DOM.
|
|
window.__FILMSTRIP__ = { get rows() { return rows; } };
|
|
load().then(() => { window.__FILMSTRIP_DONE__ = true; });
|
|
</script>
|
|
</body>
|
|
</html>
|