Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227#!/usr/bin/env node// captions-train.mjs — GENERIC phrase-karaoke caption layer. ONE sentence/phrase// is shown at a time, held STILL while it's read; each word colors in// left-to-right (character-by-character) in the slide's accent color as it is// spoken; when the phrase finishes the WHOLE phrase slides up and the next rises// in from below. "slide · speak · slide · speak." Plus the bottom segmented// progress bar. Nothing moves while a word is being spoken.//// Usage: node marketing/bin/captions-train.mjs <campaign-dir> [--start S --frames N]//// NOTE: node-canvas/freetype cannot rasterize the YWFT "WebFont" TTF (renders// .notdef tofu) → each word is pre-rendered to a PNG via ImageMagick (cream +// per-slide-colored), drawn downscaled (crisp at any size).import { createCanvas, loadImage } from "canvas";import { readFileSync, mkdirSync, existsSync } from "node:fs";import { spawn, spawnSync, execSync } from "node:child_process";import { dirname, resolve } from "node:path";import { fileURLToPath, pathToFileURL } from "node:url";import * as progress from "../../pop/lib/render-progress.mjs";
const REPO = resolve(dirname(fileURLToPath(import.meta.url)), "../..");const FONT = `${process.env.HOME}/Library/Fonts/ywft-processing-bold.ttf`;const W = 1920, H = 1080, FPS = 30;
const argv = process.argv.slice(2);const flag = (k) => { const i = argv.indexOf(k); return i >= 0 ? argv[i + 1] : null; };const campArg = argv.find((a) => !a.startsWith("--"));if (!campArg) { console.error("usage: captions-train.mjs <campaign-dir> [--start S --frames N]"); process.exit(2); }const campDir = resolve(process.cwd(), campArg);const { default: cfg } = await import(pathToFileURL(`${campDir}/campaign.mjs`).href);
const TMP = `/tmp/wsvideo-${cfg.name}`; mkdirSync(TMP, { recursive: true });const WORDDIR = `${TMP}/words`; mkdirSync(WORDDIR, { recursive: true });const OUT = `${TMP}/captions.mov`;const CREAM = cfg.palette?.cream || "#fcf7c5";const SHADOW = cfg.palette?.shadow || "#000000";const DEF_COLOR = cfg.palette?.green || "#3dff88";
const C = { renderPx: 112, phrasePx: 76, maxLineW: 1740, wordGap: 26, lineH: 104, phraseDy: 132, bandY: 0.83, phraseSmooth: 0.20, fadeSpan: 1.2, lead: 0.18, ...(cfg.caption || {}),};const BAND_Y = Math.round(H * C.bandY);const sc = C.phrasePx / C.renderPx;const clamp01 = (t) => t < 0 ? 0 : t > 1 ? 1 : t;const smoothstep = (t) => { t = clamp01(t); return t * t * (3 - 2 * t); };
// ── segments + per-slide colors (needed before word PNGs, to color each word) ─const segs = JSON.parse(readFileSync(`${REPO}/recap/out/segments.json`, "utf8"));const DURATIONsegs = Math.max(...segs.map((s) => s.endSec));const COLORS = cfg.colors || {};const hexRgb = (h) => { h = h.replace("#", ""); return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]; };const segColorHex = (t) => { const s = segs.find((x) => t >= x.startSec && t < x.endSec) || segs[segs.length - 1]; return COLORS[s.name] || DEF_COLOR; };const EXTRACTS = cfg.extracts || {};const extractWins = segs.filter((s) => EXTRACTS[s.name]).map((s) => [s.startSec, s.endSec]);const inExtract = (t) => extractWins.some(([a, b]) => t >= a && t < b);
// ── word PNG (ImageMagick, YWFT + baked hard shadow), cream + colored ────────function wordPng(out, text, fill) { const oy = 7, ox = 6; const args = ["-background", "none", "-fill", fill, "-font", FONT, "-pointsize", String(C.renderPx), `label:${text}`, "(", "+clone", "-background", SHADOW, "-shadow", `100x0+${ox}+${oy}`, ")", "+swap", "-background", "none", "-layers", "merge", "+repage", out]; const r = spawnSync("magick", args, { encoding: "utf8" }); if (r.status !== 0) { console.error("magick failed:", text, r.stderr); process.exit(1); } const [w, h] = execSync(`magick identify -format "%w %h" ${out}`).toString().trim().split(" ").map(Number); return { w, h };}
const raw = JSON.parse(readFileSync(`${REPO}/recap/out/words.json`, "utf8"));const FIX = [[/^[“”'"`]+|[“”'"`]+$/g, ""], ...(cfg.textFixes || []).map(([p, r, f]) => [new RegExp(p, f || ""), r])];const clean = (t) => FIX.reduce((s, [a, b]) => s.replace(a, b), t).trim();const words = raw.map((w) => ({ text: clean(w.text), from: w.fromMs / 1000, to: w.toMs / 1000, rawText: w.text })) .filter((w) => w.text.length > 0);
console.log(`▸ [${cfg.name}] pre-rendering word PNGs (cream + per-slide color)…`);const cache = new Map();async function load(text, fill) { const key = `${text}|${fill}`; let e = cache.get(key); if (!e) { const safe = text.replace(/[^a-zA-Z0-9]/g, "_").slice(0, 20) + "_" + [...text + fill].reduce((a, c) => a + c.charCodeAt(0), 0); const png = `${WORDDIR}/${safe}.png`; const dim = existsSync(png) ? (() => { const [a, b] = execSync(`magick identify -format "%w %h" ${png}`).toString().trim().split(" ").map(Number); return { w: a, h: b }; })() : wordPng(png, text, fill); e = { ...dim, img: await loadImage(png) }; cache.set(key, e); } return e;}for (const w of words) { w.color = segColorHex(w.from); const cr = await load(w.text, CREAM); const co = await load(w.text, w.color); w.imgCream = cr.img; w.imgColor = co.img; w.iw = cr.w; w.ih = cr.h; w.dw = cr.w * sc;}
const DURATION = Math.max(words.length ? words[words.length - 1].to + 0.6 : 1, DURATIONsegs);
// ── bottom segmented progress bar ────────────────────────────────────const BAR_H = 12, BAR_Y = H - BAR_H;function drawProgressBar(ctx, t) { const playedX = Math.max(0, t) / DURATION * W; for (let i = 0; i < segs.length; i++) { const s = segs[i]; const x0 = i === 0 ? 0 : (s.startSec / DURATION) * W; const x1 = i === segs.length - 1 ? W : (s.endSec / DURATION) * W; const [r, g, b] = hexRgb(COLORS[s.name] || DEF_COLOR); ctx.globalAlpha = 1; ctx.fillStyle = `rgba(${Math.round(r * 0.16)},${Math.round(g * 0.16)},${Math.round(b * 0.16)},0.85)`; ctx.fillRect(x0, BAR_Y, x1 - x0, BAR_H); const fx1 = Math.min(x1, playedX); if (fx1 > x0) { ctx.fillStyle = `rgba(${r},${g},${b},0.96)`; ctx.fillRect(x0, BAR_Y, fx1 - x0, BAR_H); } ctx.fillStyle = "rgba(255,253,242,0.35)"; ctx.fillRect(x1 - 1, BAR_Y, 1, BAR_H); }}
// bottom-right timecode in YWFT — render the WHOLE "M:SS / M:SS" string per// second as ONE ImageMagick image (correct YWFT kerning, pop-style), pick per// frame. Windowed to the render range so previews stay fast.const totMM = Math.floor(DURATION / 60), totSS = String(Math.floor(DURATION % 60)).padStart(2, "0");const TC_PX = 56;const _sf = flag("--start") ? Math.round(Number(flag("--start")) * FPS) : 0;const _nf = flag("--frames") ? Number(flag("--frames")) : (Math.ceil(DURATION * FPS) - _sf);const tcByS = {};for (let s = Math.floor(_sf / FPS); s <= Math.min(Math.floor(DURATION), Math.ceil((_sf + _nf) / FPS)); s++) { const label = `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")} / ${totMM}:${totSS}`; const png = `${WORDDIR}/tc_${s}.png`; if (!existsSync(png)) { const r = spawnSync("magick", ["-background", "none", "-fill", CREAM, "-font", FONT, "-pointsize", String(TC_PX), `label:${label}`, "(", "+clone", "-background", SHADOW, "-shadow", "100x0+4+5", ")", "+swap", "-background", "none", "-layers", "merge", "+repage", png], { encoding: "utf8" }); if (r.status !== 0) { console.error("tc failed", label); process.exit(1); } } tcByS[s] = await loadImage(png);}function drawTimecode(ctx, t) { const img = tcByS[Math.min(Math.max(0, Math.floor(t)), Math.floor(DURATION))]; if (!img) return; ctx.globalAlpha = 0.95; ctx.drawImage(img, W - img.width - 34, BAR_Y - 18 - img.height); ctx.globalAlpha = 1;}
// ── group words into phrases (sentence / clause sized) + layout ──────// group into phrases that ALWAYS fit ONE line: break on sentence end, or before// a word would overflow maxLineW (never wrap to a second row).const endRe = /[.?!]["”]?$/;const phrases = [];let cur = [], curW = 0;for (const w of words) { if (cur.length && curW + C.wordGap + w.dw > C.maxLineW) { phrases.push(cur); cur = []; curW = 0; } curW += (cur.length ? C.wordGap : 0) + w.dw; cur.push(w); if (endRe.test(w.rawText.trim())) { phrases.push(cur); cur = []; curW = 0; }}if (cur.length) phrases.push(cur);// single-line layout: centre each phrase horizontallyfor (const ph of phrases) { const tot = ph.reduce((a, w) => a + w.dw, 0) + C.wordGap * (ph.length - 1); let x = -tot / 2; for (const w of ph) { w.cx = x + w.dw / 2; w.line = 0; x += w.dw + C.wordGap; } ph.nLines = 1; ph.start = ph[0].from;}// advance to a phrase slightly before its first word so the slide settles in the// gap (the word is then read while STILL).function targetIdx(t) { let i = 0; for (let k = 0; k < phrases.length; k++) if (t >= phrases[k].start - C.lead) i = k; return i; }
// ── render ───────────────────────────────────────────────────────────const startFrame = flag("--start") ? Math.round(Number(flag("--start")) * FPS) : 0;const nFrames = flag("--frames") ? Number(flag("--frames")) : (Math.ceil(DURATION * FPS) - startFrame);
const canvas = createCanvas(W, H);const ctx = canvas.getContext("2d");ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high";
const ff = spawn("ffmpeg", ["-hide_banner", "-loglevel", "error", "-y", "-f", "rawvideo", "-pix_fmt", "bgra", "-s", `${W}x${H}`, "-r", String(FPS), "-i", "-", "-c:v", "qtrle", OUT], { stdio: ["pipe", "inherit", "inherit"] });console.log(`▸ phrase-karaoke · ${phrases.length} phrases · ${DURATION.toFixed(1)}s · ${nFrames} frames -> ${OUT}`);progress.begin({ type: "video", label: `${cfg.name} captions · ${nFrames} frames` });
let frame = startFrame, phScroll = null;function drawFrame() { const t = frame / FPS; ctx.clearRect(0, 0, W, H);
if (!inExtract(t)) { const ti = targetIdx(t); phScroll = phScroll === null ? ti : phScroll + (ti - phScroll) * C.phraseSmooth; const lo = Math.max(0, Math.floor(phScroll) - 1), hi = Math.min(phrases.length - 1, Math.ceil(phScroll) + 1); for (let j = lo; j <= hi; j++) { const ph = phrases[j]; const fade = smoothstep(1 - Math.abs(j - phScroll) / C.fadeSpan); if (fade <= 0.01) continue; const baseY = BAND_Y + (j - phScroll) * C.phraseDy; for (const w of ph) { const dh = w.ih * sc, x = W / 2 + w.cx, y = baseY + (w.line - (ph.nLines - 1) / 2) * C.lineH; const dx = x - w.dw / 2, dy = y - dh / 2; const spoken = t >= w.to, active = t >= w.from && t < w.to; if (spoken) { // fully read → accent color ctx.globalAlpha = 0.97 * fade; ctx.drawImage(w.imgColor, dx, dy, w.dw, dh); } else if (active) { // colouring in, left→right (char by char) const p = clamp01((t - w.from) / Math.max(0.001, w.to - w.from)); ctx.globalAlpha = fade; ctx.drawImage(w.imgCream, dx, dy, w.dw, dh); ctx.save(); ctx.beginPath(); ctx.rect(dx, dy, w.dw * p, dh); ctx.clip(); ctx.drawImage(w.imgColor, dx, dy, w.dw, dh); ctx.restore(); } else { // not yet read → dim cream ctx.globalAlpha = 0.32 * fade; ctx.drawImage(w.imgCream, dx, dy, w.dw, dh); } } } ctx.globalAlpha = 1; } drawProgressBar(ctx, t); drawTimecode(ctx, t);
const ok = ff.stdin.write(Buffer.from(canvas.toBuffer("raw"))); frame++; const done = frame - startFrame; progress.update((done / nFrames) * 100, { done, total: nFrames }); if (frame >= startFrame + nFrames) { ff.stdin.end(); return; } if (ok) drawFrame(); else ff.stdin.once("drain", drawFrame);}ff.on("close", (code) => { progress.end(); console.log(code === 0 ? `✓ ${OUT}` : `✗ ffmpeg exit ${code}`); });drawFrame();