e90951c277
Three minutes of GPU work is fine once and intolerable on every page load, so the gallery now builds once and comes back from IndexedDB after that. The key is the part worth getting right. A cache you clear by hand is worse than no cache: it will eventually show last week's pixels while you are judging this morning's change, and it will look like a render, so you will believe it. Here the key is a fingerprint of every file under src/, collected through import.meta.glob so it covers the shaders, the identity, the look generator, the engine and the descriptors without naming any of them — the file that invalidates a render is exactly the one nobody remembers to list. Edit anything and the entry stops matching and the page rebuilds without being asked. Thumbnails are WebP blobs rather than raw pixels: sixty-five scenes at six frames of 256x144 is 57MB raw, and measured, the compressed form is 4.1MB for the whole library. Saving a build evicts every other one, so the store cannot grow without bound. The spinner is a CSS animation on purpose. Building blocks the main thread in bursts and a JS-driven spinner would freeze mid-turn, which reads as a hang exactly when the page most needs to look alive. Verified rather than assumed, six behaviours: the fingerprint is stable across calls; a build round-trips through storage and decodes to a real image (51% non-black); a different fingerprint misses; saving a new key evicts the old; and appending one comment to one scene file moved the fingerprint from 125-f842b05e to 125-c056d7b9, which is the invalidation working end to end. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
245 lines
9.9 KiB
HTML
245 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>flow-state · gallery</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: 78ch; 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; }
|
|
.ctx { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 11px; color: #6b7280; }
|
|
.ctx span { background: #11141b; padding: 3px 7px; border-radius: 3px; }
|
|
|
|
/* Building blocks the main thread in bursts, so the spinner is a CSS
|
|
animation — it keeps turning through the GPU work where a JS-driven one
|
|
would freeze and look like a hang. */
|
|
.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.flat { border-color: #ef4444; }
|
|
.row.thin { border-color: #eab308; }
|
|
.row.good { border-color: #22c55e; }
|
|
.head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
|
|
.name { font-size: 14px; color: #e6eaf2; }
|
|
.fam { color: #6b7280; }
|
|
.score { color: #9aa3b5; }
|
|
.meter { display: inline-block; width: 130px; height: 7px; background: #1a1e28; border-radius: 4px; overflow: hidden; vertical-align: middle; }
|
|
.meter i { display: block; height: 100%; background: #4ade80; }
|
|
.row.flat .meter i { background: #ef4444; }
|
|
.row.thin .meter i { background: #eab308; }
|
|
.blocks { color: #5c6577; font-size: 11px; }
|
|
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
|
|
.thumbs figure { margin: 0; }
|
|
.thumbs canvas { width: 100%; display: block; background: #05070a; border-radius: 2px; aspect-ratio: 16 / 9; }
|
|
.thumbs figcaption { font-size: 10px; color: #565f70; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.err { color: #f87171; }
|
|
@media (max-width: 1100px) { .thumbs { grid-template-columns: repeat(3, 1fr); } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>flow-state · gallery</h1>
|
|
<p class="lede">
|
|
Every visualizer rendered six times, once per song, each with that song's
|
|
complete identity — its cast, ink, lattice, palette and sampled parameters.
|
|
A scene whose six frames are interchangeable is one the song cannot change.
|
|
Sorted least-varied first, scored on the same structural descriptor the
|
|
variety harness uses, with colour excluded so six palettes cannot disguise
|
|
one image. <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="variety">sort: least varied first</option>
|
|
<option value="name">sort: by name</option>
|
|
<option value="family">sort: by family</option>
|
|
</select>
|
|
<span id="status">checking cache…</span>
|
|
<div class="ctx" id="ctx"></div>
|
|
<div id="progress"><i></i></div>
|
|
</div>
|
|
|
|
<div id="out"></div>
|
|
|
|
<script type="module">
|
|
import { buildGallery, galleryContexts, THUMB } from '/src/checks/gallery.js';
|
|
import {
|
|
sourceFingerprint, loadGallery, saveGallery, clearGallery,
|
|
pixelsToBlob, blobToCanvas,
|
|
} from '/src/checks/gallery-cache.js';
|
|
|
|
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 = []; // { name, family, role, variety, byBlock, blobs, error }
|
|
let contexts = [];
|
|
|
|
const grade = (v) => (v < 0.05 ? 'flat' : v < 0.10 ? 'thin' : 'good');
|
|
|
|
function draw() {
|
|
const mode = sortSel.value;
|
|
const sorted = rows.slice().sort((a, b) => (
|
|
mode === 'name' ? a.name.localeCompare(b.name)
|
|
: mode === 'family' ? (a.family.localeCompare(b.family) || a.variety - b.variety)
|
|
: a.variety - b.variety));
|
|
|
|
out.innerHTML = '';
|
|
for (const row of sorted) {
|
|
const el = document.createElement('div');
|
|
el.className = `row ${grade(row.variety)}`;
|
|
const blocks = Object.entries(row.byBlock || {})
|
|
.map(([k, v]) => `${k} ${v.toFixed(3)}`).join(' · ');
|
|
el.innerHTML = `
|
|
<div class="head">
|
|
<span class="name">${row.name}</span>
|
|
<span class="fam">${row.family}${row.role === 'accent' ? ' · accent' : ''}</span>
|
|
<span class="score">
|
|
<span class="meter"><i style="width:${Math.min(100, row.variety * 500)}%"></i></span>
|
|
${row.variety.toFixed(3)}
|
|
</span>
|
|
<span class="blocks">${row.error ? `<span class="err">${row.error}</span>` : blocks}</span>
|
|
</div>
|
|
<div class="thumbs"></div>`;
|
|
const grid = el.querySelector('.thumbs');
|
|
(row.blobs || []).forEach((blob, i) => {
|
|
const fig = document.createElement('figure');
|
|
const canvas = document.createElement('canvas');
|
|
fig.appendChild(canvas);
|
|
const cap = document.createElement('figcaption');
|
|
cap.textContent = contexts[i] ? contexts[i].name : '';
|
|
cap.title = contexts[i] ? contexts[i].identity : '';
|
|
fig.appendChild(cap);
|
|
grid.appendChild(fig);
|
|
// Decoded lazily and in the background; sixty-five rows of six is
|
|
// 390 images and decoding them all synchronously stalls the page.
|
|
blobToCanvas(canvas, blob);
|
|
});
|
|
out.appendChild(el);
|
|
}
|
|
}
|
|
|
|
sortSel.addEventListener('change', draw);
|
|
|
|
function summarise(built) {
|
|
const flat = rows.filter((r) => r.variety < 0.05).length;
|
|
return `${rows.length} scenes · ${flat} barely change across songs` +
|
|
(built ? ` · built ${new Date(built).toLocaleString()}` : '');
|
|
}
|
|
|
|
async function build(fingerprint) {
|
|
bar.classList.add('building');
|
|
rebuildBtn.disabled = true;
|
|
rows = [];
|
|
out.innerHTML = '';
|
|
|
|
status.className = '';
|
|
status.textContent = 'analysing six songs…';
|
|
await new Promise((r) => setTimeout(r, 0));
|
|
|
|
contexts = galleryContexts(6).map((c) => ({ ...c }));
|
|
document.getElementById('ctx').innerHTML = contexts
|
|
.map((c) => `<span title="${c.identity}">${c.name}</span>`).join('');
|
|
|
|
const started = Date.now();
|
|
const built = await buildGallery({
|
|
contexts,
|
|
onScene: (done, total, name) => {
|
|
status.textContent = `rendering ${done}/${total} · ${name}`;
|
|
progress.style.width = `${(done / total) * 100}%`;
|
|
},
|
|
});
|
|
|
|
status.textContent = 'compressing…';
|
|
await new Promise((r) => setTimeout(r, 0));
|
|
rows = [];
|
|
for (const row of built) {
|
|
const blobs = [];
|
|
for (const pixels of row.thumbs) {
|
|
blobs.push(await pixelsToBlob(pixels, THUMB.width, THUMB.height));
|
|
}
|
|
rows.push({
|
|
name: row.module.name,
|
|
family: row.module.family,
|
|
role: row.module.role || 'stage',
|
|
variety: row.variety,
|
|
byBlock: row.byBlock,
|
|
error: row.error,
|
|
blobs,
|
|
});
|
|
}
|
|
|
|
const payload = {
|
|
fingerprint,
|
|
built: Date.now(),
|
|
contexts: contexts.map((c) => ({ name: c.name, identity: c.identity })),
|
|
rows,
|
|
};
|
|
const stored = await saveGallery(fingerprint, payload);
|
|
|
|
bar.classList.remove('building');
|
|
rebuildBtn.disabled = false;
|
|
draw();
|
|
status.textContent = `${summarise(payload.built)} in ${((Date.now() - started) / 1000).toFixed(0)}s` +
|
|
(stored ? '' : ' · not cached (storage unavailable)');
|
|
window.__GALLERY__ = rows.map((r) => ({ name: r.name, variety: r.variety, error: r.error }));
|
|
}
|
|
|
|
async function main() {
|
|
const fingerprint = sourceFingerprint();
|
|
const cached = await loadGallery(fingerprint);
|
|
|
|
if (cached) {
|
|
rows = cached.rows;
|
|
contexts = cached.contexts;
|
|
document.getElementById('ctx').innerHTML = contexts
|
|
.map((c) => `<span title="${c.identity}">${c.name}</span>`).join('');
|
|
draw();
|
|
status.className = 'cached';
|
|
status.textContent = `cached · ${summarise(cached.built)}`;
|
|
window.__GALLERY__ = rows.map((r) => ({ name: r.name, variety: r.variety, error: r.error }));
|
|
return;
|
|
}
|
|
// No entry for this source. Something under src/ changed since the last
|
|
// build — or there has never been one — so rebuild without being asked.
|
|
await build(fingerprint);
|
|
}
|
|
|
|
rebuildBtn.addEventListener('click', async () => {
|
|
await clearGallery();
|
|
await build(sourceFingerprint());
|
|
});
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|