From drawing algorithms to a tool anyone can try.

The product boundary

The public studio focuses on one complete task: turning a photograph into vector artwork. It brings together background removal, drawing controls, preview, and download without requiring an account. The broader project includes Python drawing implementations; this browser studio makes four styles directly accessible.

A shared workflow keeps the interaction familiar as the algorithm changes. Each style exposes two focused controls alongside common settings for detail, contrast, line weight, color, and seed. Moderate defaults provide a starting point without asking visitors to understand the implementation first.

Architecture: keep the image on the device

A React and TypeScript interface sends image-processing and generation tasks to a Web Worker. The worker decodes and normalizes the image, runs an ONNX background-removal model through WebAssembly, and derives tone and edge maps for the drawing algorithms. It returns a cutout or SVG along with progress and result information.

The site ships as static assets on AWS Amplify. Model and runtime assets are served from the same site, and the worker disables remote model loading. There is no runtime image-processing API. This avoids a server-side image storage lifecycle while putting inference and geometry work on the visitor’s device.

A deliberate performance tradeoff

Local processing comes with a cost: the first image needs a roughly 44 MB model download, and memory and speed depend on the browser and device. The UI explains the initial download, reports progress, and surfaces model-loading and memory failures.

The model loads when a visitor supplies a photo. Processing runs away from the main interface thread, and the WebAssembly runtime uses a single thread for broad static-host compatibility. High-detail artwork can still take time and produce files that are expensive to edit.

Shared inputs, distinct drawing strategies

The generators share processed image maps and a common options and result contract. Spiral FM modulates a center-out spiral. Scribble accumulates a seeded looping path. Circle art fits adaptive rings. Triangle art builds an outlined Delaunay mesh from adaptive points.

Seeds make controlled comparisons possible. Geometry budgets put bounds on the work, and the FM implementation splits large output into adjoining path chunks. These choices balance the visual character of each algorithm with browser limits and the needs of downstream SVG editors.

Quality at the boundaries

The upload workflow validates file type and size. Generated SVG is checked against an allowed set of elements before download. Model assets are pinned and verified by checksum during preparation so a build does not silently pick up a different model.

Unit tests cover image maps, generation, determinism, and SVG validation. Browser tests exercise the page and, in the full model workflow, background removal and downloads for all four styles. The production packager validates assets and smoke-tests a container before deployment.

Delivery and discoverability

The public pages are rendered to HTML during the build, then the browser attaches interactive behavior to that content. This keeps static hosting while letting visitors and crawlers read the guides and project context before JavaScript runs.

Page-specific metadata, canonical URLs, and a generated sitemap describe the published pages. The deployment workflow packages the site, deploys it through Amplify, and checks the public HTTPS endpoint. The result is a working product that can be explored alongside its engineering decisions.

Connect with the builder

For professional background and conversations about engineering management or staff engineering opportunities, connect with Mahfouz on LinkedIn. This project offers a concrete starting point for discussing architecture, scope, reliability, and the tradeoffs involved in delivering an interactive tool.