Skip to content

Selfie Tier 1: client-side camera + bg-removal + compositing + share (#1512) - #1523

Merged
jung-thomas merged 19 commits into
mainfrom
worktree-selfie-tier1-spec
Aug 7, 2026
Merged

Selfie Tier 1: client-side camera + bg-removal + compositing + share (#1512)#1523
jung-thomas merged 19 commits into
mainfrom
worktree-selfie-tier1-spec

Conversation

@jung-thomas

Copy link
Copy Markdown
Contributor

Implements the Tier 1 slice of #1512 (#1513, #1514, #1515, #1519). The "Selfie with an Advocate" tool at /devtoberfest/selfie/ is now fully client-side — live camera capture, in-browser AI background removal, drag/scale/rotate compositing onto advocate frames, and download + Web Share. Removes the /community/upload_selfie server round-trip entirely; the photo never leaves the browser.

What changed

  • Vendored, self-hosted assets@imgly/background-removal (model isnet_quint8) + konva vendored at build time by scripts/vendor-imgly.cjs (chained into build:apps after vendor:mediapipe) into gitignored hugo/static/vendor/imgly/. No CDN loads (approuter CSP forbids them; verified no cdn/unpkg/jsdelivr/staticimgly host in the built island).
  • Component pipeline (hugo-apps/src/selfie/): Selfie.vue state machine (FramePicker → Capture → segment → Composer → ExportBar) over helpers camera.ts / segment.ts / compose.ts / share.ts.
  • Fail-soft everywhere — camera denial → file-upload fallback; segmentation failure → full photo with a friendly note, flow still completes; Konva init / frame-asset 404 → fallback emit; share unsupported → download.
  • No object-URL leaks — every createObjectURL is revoked (final-review hardening).
  • Deleted Uploader.vue, Editor.vue, upload.ts and their tests; layout drops data-api-upload.

Automated verification (done)

  • npm test -- selfie — 10 files / 22 tests green.
  • npm run build:apps — succeeds; hugo/static/js/selfie.js ~205kB (63kB gz); 23 vendored imgly assets emitted.
  • CDN-leak grep on the built island — clean.
  • e2e spec (test/e2e/selfie.test.js) rewritten for the client-side flow (self-skips without a base URL; runs in the post-DEV-deploy e2e CI job).
  • Suite-wide unit failures (srv-qa/*, ExploreGraph, recommendations, build-concepts) are pre-existing baseline failures — byte-identical to origin/main, not regressions from this branch.

Manual QA checklist — to complete against DEV before merge

CI cannot run the real camera or the segmentation model, so this is the actual-user-facing verification (Tom's #1 rule):

  • Camera permission prompt appears; live preview shows (mirrored).
  • "Take photo" captures; background removal runs with a visible progress %.
  • Cutout is draggable / scalable / rotatable over the frame; layering correct for a single-advocate frame AND a Group* frame.
  • Deny camera → file-upload fallback works end-to-end.
  • Force a segmentation failure (go offline after page load) → falls back to full photo with the friendly note; flow still completes.
  • Download produces a correct PNG; on mobile, Share opens the native sheet with the image.
  • Privacy note reads "never leaves your browser".

Deploy note

Purely client-side island (hugo-apps/hugo/static/js/) + a Hugo layout + vendored assets. Follows the standard content-inclusive deploy path; the vendored @imgly/konva tree is build-generated (gitignored) and produced by build:apps.

Fully client-side rebuild of the Selfie with an Advocate tool: live camera
capture (#1513), @imgly background removal (#1514), Konva drag/scale/rotate
compositing (#1515), and Web Share (#1519). Covers architecture, component
boundaries, error handling, performance, privacy, and testing.
@jung-thomas
jung-thomas merged commit 90689f4 into main Aug 7, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant