How nonith-rao/frameingoa works
FrameInGoa is a browser-based builder-pass and social-graphic generator, backed by a Python portrait-cutout service. Users upload photos, which the client normalizes and previews; the Next.js proxy requests a transparent cutout, then the client composes card, profile-picture, or team artwork for export or sharing. The README also documents PSD-based ID-card templates and graceful full-photo fallback. The main UI is a single component; its internal responsibilities are shown separately at that shared path. Detailed UI wiring is inferred only where the README describes it.
Main entry points: FrameInGoa.jsx Photo treatment state · route.ts Cutout proxy · main.py Segmentation service · page.tsx Home page
Components 16
Web experience
- Home page
web/app/page.tsx - Generator UI
web/components/FrameInGoa.jsx - Photo input
web/components/FrameInGoa.jsx - Photo normalization
web/components/FrameInGoa.jsx - Photo treatment state
web/components/FrameInGoa.jsx
Cutout processing
- Cutout proxy
web/app/api/cutout/route.ts - Segmentation service
bgservice/main.py
Graphic composition
- Card template
web/public/card-template/template.json - ID card renderer
web/components/FrameInGoa.jsx - PFP renderer
web/components/FrameInGoa.jsx - Team renderer
web/components/FrameInGoa.jsx - Canvas output
web/components/FrameInGoa.jsx
Output
- Export and share
web/components/FrameInGoa.jsx
Other components
- Photo creator
- rembg model
- Browser APIs
Connections 19
- Photo creator → Home page: opens
- Home page → Generator UI: renders
- Photo creator → Photo input: uploads
- Photo input → Photo normalization: decodes
- Photo normalization → Photo treatment state: sets preview
- Photo normalization → Cutout proxy: sends JPEG
- Cutout proxy → Segmentation service: forwards file
- Segmentation service → rembg model: segments image
- Segmentation service → Cutout proxy: returns PNG
- Cutout proxy → Photo treatment state: supplies cutout
- Photo treatment state → ID card renderer: provides photo
- Photo treatment state → PFP renderer: provides photo
- Photo treatment state → Team renderer: provides photos
- Card template → ID card renderer: configures layout
- ID card renderer → Canvas output: draws card
- PFP renderer → Canvas output: draws PFP
- Team renderer → Canvas output: draws team
- Canvas output → Export and share: exports graphic
- Export and share → Browser APIs: downloads or copies