Grow-Up Reel (ai-memory-videos)
Live: https://theguysaccount.github.io/ai-memory-videos/ · Screens: desktop and phone · Example reel: Rembrandt, 22 to 63
Turn photos of one person into a grow-up video. You add photos from any years, and the browser does the rest:
- finds the face in each one with an on-device model;
- lines up the eyes;
- sorts the photos by the date inside each file;
- morphs each face into the next;
- adds age, year or date captions and generated music;
- encodes an MP4 for Reels, TikTok, Shorts or the family chat.
Nothing is uploaded, and there is no server. A Content Security Policy on every page stops the page from connecting to any other site, so the browser enforces the privacy promise rather than taking it on trust.
How it works
| Step | Where | Notes |
|---|
| Read the capture date | site/assets/js/exif.js, dates.js | EXIF from JPEG, HEIC/AVIF, PNG and WebP; dates in file names (IMG_20190512_…, 1974 school.jpg); manual dates and years |
| Find faces | site/assets/js/faces.js | MediaPipe face detector (full range, finds small faces in group shots), then the 478-point face landmarker on a crop around the chosen face. Faces are located, never identified. |
| Line up the eyes | site/assets/js/align.js | Similarity transform (scale, rotation, shift) that puts both eye centres on fixed points |
| Morph | site/assets/js/renderer.js | WebGL2: Delaunay mesh over ~114 landmarks, two rings and a border; triangles warp while the photos crossfade. Blurred fill from mipmaps. |
| Music | site/assets/js/music.js | Chord progressions arranged for synth voices and rendered with OfflineAudioContext; no samples |
| Encode | site/assets/js/encoder.js | WebCodecs into MP4 (H.264 + AAC, or Opus) via mp4-muxer; VP9/WebM if H.264 isn't available; MediaRecorder as a real-time fallback |
| UI | site/assets/js/app.js, site/partials/tool.html | Consent before any face is looked for; review grid of aligned faces; per-photo editor (choose a face, tap the eyes, set the date or year) |
Pages are generated by scripts/build.mjs from site/pages/*.html (landing pages around the tool) and content/guides/*.md (guides, published on their publish: date).
Run it locally
Node 20 or newer. No API keys.
npm ci
node scripts/build.mjs # → dist/ (BASE_URL defaults to http://127.0.0.1:4317)
node scripts/serve.mjs dist 4317 # open http://127.0.0.1:4317/
Test
npm test # unit + build tests: EXIF parsing, dates, captions, alignment, mesh, timeline, music, pages, links
node scripts/selftest.mjs # headless Chrome on the built site: pages, the sample reel, the upload path, no off-site requests
node scripts/selftest.mjs --url https://theguysaccount.github.io/ai-memory-videos/ # the same against the live site
node scripts/screens.mjs # screenshots → docs/screens/
CHROME=/path/to/chrome picks the browser binary. The self-test needs Google Chrome or Chromium.
Deploy
Every push to main runs .github/workflows/pages.yml. It runs the tests, builds, runs the headless end-to-end test on the build and deploys to GitHub Pages only if everything passed. It then submits the pages to IndexNow. The same workflow runs every Monday to publish guides whose date has come. See OPERATIONS.md for every automated job, how each fails safe, and the optional keys (custom domain, counts, money).
Refreshing vendored files
site/assets/vendor/ holds MediaPipe Tasks Vision 0.10.35 (Apache-2.0), its face models, mp4-muxer and webm-muxer (MIT). See site/assets/vendor/NOTICE.md for sources and why 0.10.35 is pinned: later 1.x releases add usage logging to a Google endpoint.
Licence
Code: MIT (LICENSE). Sample paintings: public domain (sources on the Rembrandt page). Vendored libraries keep their own licences.
