Actual app: 9:16 center crop retains 2/4 selected regions; padding retains all four. Photo: NASA / James Blair.
Actual app: inspect AI detections, add the missed region, and confirm review before export. Photo: NASA / James Blair.

Inspiration

Turning a wide group photo into a vertical post can cut someone out. A centered crop is simple, but it ignores where people stand. An automatic face detector alone is also insufficient: it can miss the very person the crop should preserve.

What it does

FrameFair combines real image AI with an explicit review step. Load a photo, find faces, inspect the original, and add or remove protection regions. Compare a center crop with a result that contains the selected regions. If those regions cannot fit the chosen aspect ratio, the app preserves the whole source with solid padding. It does not generate replacement image content.

Choose 1:1, 4:5, or 9:16, adjust the region margin, review the result, and export a PNG. Changes to the image, regions, ratio, or margin reset the review confirmation. Numeric rectangle controls provide an alternative to drawing with a pointer.

How we built it

The application was freshly authored for Banana Hacks on October 10, 2026. Vanilla JavaScript, HTML, and CSS handle the interface and canvas export. TensorFlow.js runs the pretrained MediaPipe face detector on the browser's CPU. Deterministic geometry chooses a shifted crop or padding around the reviewed regions. The model was not trained by this project.

Photos are processed in browser memory. First use downloads public runtime and model resources; this is not an offline-first-load claim. No API key or paid inference service is required.

Challenges and results

The key challenge was making a missed detection visible rather than presenting an automatic crop as authoritative. In the NASA sample, the model detected three front-facing faces and missed a fourth. After manually adding that region, the 9:16 center crop retained two of four selected regions; padding retained all four. A 1080 × 1920 PNG export was verified. This is one observed example, not a detection-accuracy benchmark.

What we learned and what's next

Useful automation can propose a framing decision while leaving its assumptions inspectable. Next steps are broader testing across group layouts, lighting, and device performance, plus clearer review cues for small or occluded faces. Protection applies only to selected rectangles and does not guarantee that everyone was detected.

Resources and AI disclosure

Codex AI assisted the application, documentation, and tests. TensorFlow.js, TensorFlow Models face-detection, and MediaPipe are credited in THIRD_PARTY.md. The demonstration photograph is credited to NASA / James Blair; no endorsement is implied. No earlier competition project was reused.

The demo is an edited walkthrough of actual application screens with synthetic macOS narration, not a continuous screen recording.

Source: https://github.com/estona815/framefair