bloombox

draw a flower. it becomes real. send it to someone.

live at https://wukath.github.io/bloombox/

how it works

• src/ is a small React app: a sketchpad, a note, and a share link.
• supabase/functions/bloom takes the sketch, asks Gemini (gemini-3.1-flash-image) to turn it into a photo of a real flower that keeps the drawing's shape and colors, stores both images, and returns a short id.
• /f/<id> shows the recipient the sketch, then crossfades to the real flower with the note.
• /garden is the commons: every flower (not the note) is planted into a shared photograph. The garden edge function renders each plot from its empty bed plus all of its flowers, ten per plot. To pull a flower out: select hide_bloom('<id>') in the SQL editor, then POST to the garden function with the x-gardener-key header to re-render.

No accounts. The Gemini key lives only in the edge function. Rate limited per IP and per day.

develop

npm install
cp .env.example .env.local   # fill in the supabase url + anon key
npm run dev

deploy

Pushing to main builds and deploys to GitHub Pages. The edge function deploys with:

supabase secrets set GEMINI_API_KEY=... GARDENER_SECRET=... --project-ref <ref>
supabase functions deploy bloom --no-verify-jwt --project-ref <ref>
supabase functions deploy garden --no-verify-jwt --project-ref <ref>

The schema is in supabase/migrations/.