quick demo
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.
- 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
- generate page: parse the parameters and design the final image (uses firebase storage for image hosting)
- API link that uses playwright to screenshot the generate page (in a remote webpage) with all parameter variables applied
/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.
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
potential approaches
- scale factor so that the image is placed relative to board dimensions
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