2026•Personal Project
Creative AI Studio
Interactive canvas tool built with React Flow where the user assembles node-based flows to generate images with AI. Each node has a type (product image, text, prompt, external link, generation), and the edges between nodes define the role of each input in the generation. The backend orchestrates async jobs with Gemini and persists results in PostgreSQL.
DURATION
Mar 2026 - Apr 2026
STATUS
Completed
Challenges
- Modeling edge roles between nodes to build prompts automatically
- Managing async jobs without blocking the canvas (polling every 2s)
- Defining nodeTypes outside the component to avoid remounts in React Flow
- Storing assetUrl in node.data JSON so the render loop doesn't query per node
Solutions
- Edge role system that the backend interprets to build the generation prompt
- Fire-and-forget API that returns a PENDING job and the frontend polls every 2 seconds
- nodeTypes defined as a constant outside the canvas component
- assetUrl field inside persisted node.data JSON along with assetId
Key Features
Interactive canvas with custom nodes and edges
6 node types: IMAGE_ASSET, PRODUCT_IMAGE, EXTERNAL_LINK, TEXT_NOTE, PROMPT_BLOCK, GENERATION
Image generation with Gemini 2.0 Flash
Async jobs with real-time polling
AI content extraction per node
Output reuse as a new reference node
Google OAuth + JWT auth
E2E testing with Playwright
Tech Stack
React 19React FlowTypeScriptViteTailwindExpressPrismaPostgreSQLGemini APIGoogle OAuthPassport.jsJWTDockerPlaywright
Impact and Outcomes
Visual canvas where non-technical users can build generation flows without writing prompts manually
Reusable outputs as reference inputs for new generations
Complete pipeline: inputs → automatic prompt → job → output → reuse