# nonith-rao/frameingoa architecture

> Architecture diagram of the GitHub repository nonith-rao/frameingoa, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nonith-rao/frameingoa
- Repository: https://github.com/nonith-rao/frameingoa

## Overview

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: [`web/components/FrameInGoa.jsx`](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx) (Photo treatment state), [`web/app/api/cutout/route.ts`](https://github.com/nonith-rao/frameingoa/blob/main/web/app/api/cutout/route.ts) (Cutout proxy), [`bgservice/main.py`](https://github.com/nonith-rao/frameingoa/blob/main/bgservice/main.py) (Segmentation service), [`web/app/page.tsx`](https://github.com/nonith-rao/frameingoa/blob/main/web/app/page.tsx) (Home page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_home["Home page<br/>[page.tsx]"]
  node_generator["Generator UI<br/>[FrameInGoa.jsx]"]
  node_photo_input["Photo input<br/>[FrameInGoa.jsx]"]
  node_normalize["Photo normalization<br/>[FrameInGoa.jsx]"]
  node_photo_state["Photo treatment state<br/>[FrameInGoa.jsx]"]
end

subgraph group_cutout["Cutout processing"]
  node_cutout_proxy["Cutout proxy<br/>[route.ts]"]
  node_bg_service["Segmentation service<br/>[main.py]"]
end

subgraph group_composition["Graphic composition"]
  node_template["Card template<br/>[template.json]"]
  node_card_renderer["ID card renderer<br/>[FrameInGoa.jsx]"]
  node_pfp_renderer["PFP renderer<br/>[FrameInGoa.jsx]"]
  node_team_renderer["Team renderer<br/>[FrameInGoa.jsx]"]
  node_canvas_output["Canvas output<br/>[FrameInGoa.jsx]"]
end

subgraph group_export["Output"]
  node_export_share["Export and share<br/>[FrameInGoa.jsx]"]
end

node_visitor(("Photo creator"))
node_rembg{{"rembg model"}}
node_browser["Browser APIs"]

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_generator
node_visitor -->|"uploads"| node_photo_input
node_photo_input -->|"decodes"| node_normalize
node_normalize -->|"sets preview"| node_photo_state
node_normalize -->|"sends JPEG"| node_cutout_proxy
node_cutout_proxy -->|"forwards file"| node_bg_service
node_bg_service -->|"segments image"| node_rembg
node_bg_service -->|"returns PNG"| node_cutout_proxy
node_cutout_proxy -->|"supplies cutout"| node_photo_state
node_photo_state -->|"provides photo"| node_card_renderer
node_photo_state -->|"provides photo"| node_pfp_renderer
node_photo_state -->|"provides photos"| node_team_renderer
node_template -->|"configures layout"| node_card_renderer
node_card_renderer -->|"draws card"| node_canvas_output
node_pfp_renderer -->|"draws PFP"| node_canvas_output
node_team_renderer -->|"draws team"| node_canvas_output
node_canvas_output -->|"exports graphic"| node_export_share
node_export_share -->|"downloads or copies"| node_browser

click node_home "https://github.com/nonith-rao/frameingoa/blob/main/web/app/page.tsx"
click node_generator "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_photo_input "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_normalize "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_cutout_proxy "https://github.com/nonith-rao/frameingoa/blob/main/web/app/api/cutout/route.ts"
click node_bg_service "https://github.com/nonith-rao/frameingoa/blob/main/bgservice/main.py"
click node_photo_state "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_template "https://github.com/nonith-rao/frameingoa/blob/main/web/public/card-template/template.json"
click node_card_renderer "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_pfp_renderer "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_team_renderer "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_canvas_output "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"
click node_export_share "https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_generator,node_photo_input,node_normalize,node_photo_state,node_browser toneBlue
class node_cutout_proxy,node_bg_service toneAmber
class node_template,node_card_renderer,node_pfp_renderer,node_team_renderer,node_canvas_output toneMint
class node_export_share toneRose
class node_visitor,node_rembg toneIndigo
```

## Components

### Web experience

- [Home page](https://github.com/nonith-rao/frameingoa/blob/main/web/app/page.tsx): `web/app/page.tsx`
- [Generator UI](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [Photo input](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [Photo normalization](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [Photo treatment state](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`

### Cutout processing

- [Cutout proxy](https://github.com/nonith-rao/frameingoa/blob/main/web/app/api/cutout/route.ts): `web/app/api/cutout/route.ts`
- [Segmentation service](https://github.com/nonith-rao/frameingoa/blob/main/bgservice/main.py): `bgservice/main.py`

### Graphic composition

- [Card template](https://github.com/nonith-rao/frameingoa/blob/main/web/public/card-template/template.json): `web/public/card-template/template.json`
- [ID card renderer](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [PFP renderer](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [Team renderer](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`
- [Canvas output](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`

### Output

- [Export and share](https://github.com/nonith-rao/frameingoa/blob/main/web/components/FrameInGoa.jsx): `web/components/FrameInGoa.jsx`

### Other components

- **Photo creator**
- **rembg model**
- **Browser APIs**

## Connections

- 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