Selfie Tier 1: client-side camera + bg-removal + compositing + share (#1512) - #1523
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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_selfieserver round-trip entirely; the photo never leaves the browser.What changed
@imgly/background-removal(modelisnet_quint8) +konvavendored at build time byscripts/vendor-imgly.cjs(chained intobuild:appsaftervendor:mediapipe) into gitignoredhugo/static/vendor/imgly/. No CDN loads (approuter CSP forbids them; verified nocdn/unpkg/jsdelivr/staticimglyhost in the built island).hugo-apps/src/selfie/):Selfie.vuestate machine (FramePicker → Capture → segment → Composer → ExportBar) over helperscamera.ts/segment.ts/compose.ts/share.ts.fallbackemit; share unsupported → download.createObjectURLis revoked (final-review hardening).Uploader.vue,Editor.vue,upload.tsand their tests; layout dropsdata-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.test/e2e/selfie.test.js) rewritten for the client-side flow (self-skips without a base URL; runs in the post-DEV-deploye2eCI job).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):
Group*frame.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/konvatree is build-generated (gitignored) and produced bybuild:apps.