https://github.com/naren219/variable-editor
create variable images
https://github.com/naren219/variable-editor
fabricjs firebase nextjs playwright typescript
Last synced: 3 months ago
JSON representation
create variable images
- Host: GitHub
- URL: https://github.com/naren219/variable-editor
- Owner: Naren219
- Created: 2025-02-09T17:40:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-12T02:26:31.000Z (over 1 year ago)
- Last Synced: 2025-03-12T03:27:40.336Z (over 1 year ago)
- Topics: fabricjs, firebase, nextjs, playwright, typescript
- Language: TypeScript
- Homepage: https://variable-editor.vercel.app
- Size: 440 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
\
quick [demo](https://www.loom.com/share/050e3c8a4ae94727aaf74f4d9f4b10c9?sid=1f0074f6-67f5-4315-9aca-2b097ef144c8)
### purpose
A variable image editor that allows users to import and minimally design a static graphic, then select text, colors, images as variants, allowing for quick customizability.
### app flow
1. Fabric.js editor: test graphics (only SVG), colors, and text --> produces API url with parameters for variable values and stores full JSON schema in firebase firestore
2. generate page: parse the parameters and design the final image (uses firebase storage for image hosting)
3. API link that uses playwright to screenshot the generate page (in a remote webpage) with all parameter variables applied
### APIs
`/api`: retrieve a single image with changes specified in the URL. example:\
`https://variable-editor.vercel.app/api?projectId=myProject&graphicName=graph2.svg&topleft=someTitle&toptag=someTag&topRightImg=profile.svg`\
\
`/api/csv/`: retrieve many images with variables specified in a CSV. example:\
`https://variable-editor.vercel.app/api/csv?projectId=projectId&graphicName=graphicName&topleft=topleft&toptag=toptag&topRightImg=topRightImg`\
pass in CSV data into the body (with variables as headers). returns a list of generated images uploaded in firebase storage.
### challenges
#### precise color editing
potential approaches
* **computer vision segmentation** - convert SVG into raster image, detect color edges and assign different labels, map these segments onto vector image (could be pretty _hard_)
* **computer vision flood fill** - consistent segments regardless of the SVG structure
#### matching image placement between fabric.js canvas view and DOM
potential approaches
* scale factor so that the image is placed relative to board dimensions
### reference
#### modifying specific text elements
add index to each tagged text element (which are transformed into i-text objects after upload). then, identify the element to modify in `/generate` via the index of that text element