DoodleBooth

DoodleBooth turns a photo into a playful, hand-drawn avatar or a six-panel doodle collage. It is an Astro 5 web app deployed to Cloudflare Workers and powered by the PicX image API.

• Live demo: doodlebooth.lol
• Source repository: github.com/Type-Think-AI/doodlebooth
• Demo video: Add a public video link (maximum three minutes) before submitting.

Project description

Problem

A personal photo is not always the most expressive or shareable way to represent someone online. Making a polished illustrated avatar normally requires drawing skills, design software, or a complicated image-editing workflow.

Solution

DoodleBooth turns that workflow into a small, friendly booth: choose a photo, choose a visual theme, and ask PicX to reinterpret the subject as doodle art. The app keeps the interaction focused on creating, viewing, downloading, and sharing the result.

Key features

• Upload an image by file picker, drag and drop, or a live camera capture.
• Choose Pastel, Neon, Sunset, or Mono visual direction.
• Create a normal square doodle avatar from the uploaded photo.
• Create a wide 3-by-2 doodle collage with six expressions and poses.
• Create a wide full-body action collage with six dynamic poses.
• Generate a surprise character without uploading a photo.
• View results in a full-screen lightbox, browse saved results, and remove moodboard items.
• Download results and share through WhatsApp, X, or a copied link.
• Keep the local moodboard in browser storage only; no account or database is required by DoodleBooth.
• Provide accessible labels, keyboard interactions, reduced-motion behavior, privacy information, and terms pages.

How Kiro was used

Kiro was used as the development copilot throughout the competition-period build. The work was directed and reviewed by the project author; Kiro helped with planning, implementation, migration, debugging, and validation across the following areas:

1. Shaped the product flow and acceptance criteria for a one-screen photo-to-doodle booth.
2. Helped migrate the interaction from a component-oriented prototype to Astro markup plus a framework-agnostic TypeScript controller.
3. Implemented and iterated on the PicX upload/edit/generate flow, including validation, loading states, retries, and error handling.
4. Added the camera capture path, theme picker, collage prompt builders, surprise generation, lightbox, local moodboard, download fallback, and share controls.
5. Reviewed responsive/accessibility details, metadata, privacy/terms copy, and Cloudflare Worker packaging.
6. Used the Kiro project files in .kiro/ to preserve the implementation scope, project conventions, and hackathon submission record.

Kiro-generated output was reviewed, adapted, and tested rather than submitted as unreviewed output. The final source, product decisions, visual direction, prompts, and acceptance checks remain the responsibility of the project author.

Setup

Requirements

• Node.js 22 or newer
• pnpm 11 or newer
• A PicX API key with uploads:write, images:edit, and images:generate scopes for live generation
• Wrangler authentication only when deploying to Cloudflare

Install and run locally

pnpm install
pnpm dev

Open http://localhost:4321.

DoodleBooth does not require an account. To test AI generation, open Settings, paste a PicX API key, and select an image. The key is kept in the browser's local storage and is sent only through the app's two API requests to PicX. Use a test or disposable key and clear it from browser storage after testing. No test username or password is required.

Build and validate

pnpm exec tsc --noEmit
pnpm build
pnpm exec wrangler deploy --dry-run

The combined project check is also available:

pnpm check

Deploy

The Cloudflare Worker configuration is in wrangler.json. The current deployment name is doodlebooth-ui; the app uses the ASSETS binding produced by the Astro Cloudflare adapter and does not bind D1 or R2.

pnpm deploy

Do not put a PicX key in source control, wrangler.json, or a committed environment file.

Usage and data flow

Choose/capture photo
  → browser validates image (image MIME type, non-empty, <= 20 MB)
  → POST /api/upload
  → PicX managed asset URL
  → choose generation mode
  → POST /api/generate
  → PicX image edit or generation result
  → view, save locally, download, or share

• Photo-based modes upload the image to PicX managed assets before generation.
• The generated image URL is returned from PicX and displayed by the browser.
• The moodboard stores up to 24 generated URLs in localStorage on the current device.
• DoodleBooth has no login, user database, or server-side moodboard.
• The PicX API key is entered in the browser Settings dialog and is not included in this repository.
• Review /privacy and /terms before using real personal photos.

Costs, limits, and usage restrictions

• DoodleBooth itself has no subscription, payment flow, or application fee.
• Live AI upload and generation use the visitor's PicX account and are subject to PicX model pricing, account credits, quotas, and rate limits. These values can change, so check the current PicX API dashboard before testing.
• DoodleBooth does not implement an application-level rate limiter. Do not automate, flood, or abuse the upload/generate endpoints.
• Client and server validation reject non-image files, empty files, and images larger than 20 MB.
• The app makes one PicX upload request when a photo is selected and one generation request per generation action. Retrying or choosing another mode may create another provider request.
• Do not upload images or content that you do not have permission to process. Do not submit harmful, illegal, explicit, confidential, or sensitive material.
• Camera access requires browser permission and a secure context (or localhost). If camera access is unavailable, use the file picker.
• PicX may retain managed assets and generated results according to its own service terms and retention behavior; remove managed assets from PicX when no longer needed.

Testing instructions

Automated checks

From the repository root:

pnpm install
pnpm exec tsc --noEmit
pnpm build
pnpm exec wrangler deploy --dry-run

Manual smoke test

1. Start the app with pnpm dev.
2. Confirm the homepage loads and the sample rail, theme picker, upload controls, and settings button are visible.
3. Open Settings, enter a valid PicX test key, and close the dialog.
4. Upload a small image or use Take a photo. Confirm the preview and upload status appear.
5. Try Convert to normal doodle, Create my doodle collage, and Create full-body action collage. Confirm each result renders.
6. Try No photo? Surprise me to exercise the text-to-image path.
7. Confirm result lightbox navigation, Download, Try another, WhatsApp/X share links, copy link, and moodboard add/remove behavior.
8. Confirm invalid file types, empty files, files over 20 MB, missing keys, blocked camera permission, and failed API responses show a recoverable message.
9. Test keyboard focus and reduced motion (prefers-reduced-motion: reduce) in the browser.
10. Clear the PicX key and moodboard from browser storage after testing with personal or temporary data.

There are no shared test credentials because the app has no account system. A judge who wants to exercise live AI generation needs a PicX test key; provide one through the hackathon submission channel only if required, never in this repository or video.

Third-party attribution

• Astro and the official Astro Cloudflare adapter — application framework and Worker build integration.
• TypeScript — application language and type checking.
• Cloudflare Workers and Wrangler — hosting, asset serving, deployment, and observability configuration.
• PicX AI (picx-ai SDK and PicX HTTP API) — managed image uploads and image generation/editing.
• DataFast — production analytics script included by the site layout; its use is disclosed in the privacy page.
• Atkinson Hyperlegible font files in public/fonts/ — included under their upstream font licence.
• Icons and doodle sample artwork in the UI are project-authored inline SVGs; no external image dataset is bundled.

All third-party services, libraries, fonts, and APIs remain subject to their respective current licences and terms. The project does not commit API keys, credentials, private keys, or other secrets.

Project structure

• src/pages/index.astro — DoodleBooth page shell and controls
• src/scripts/doodle.ts — browser interaction, camera, local moodboard, upload, generation, download, and sharing flow
• src/pages/api/upload.ts — PicX managed-assets upload proxy with 20 MB validation
• src/pages/api/generate.ts — PicX image generation/edit proxy
• src/lib/doodle-constants.ts — themes, prompts, limits, and sample data
• src/lib/doodle-avatar.ts — pure SVG avatar builders for decorative samples
• src/styles/doodle.css — DoodleBooth styling and motion
• src/layouts/AppLayout.astro — metadata, Open Graph tags, structured data, analytics, and global shell
• src/pages/privacy.astro / src/pages/terms.astro — privacy and usage disclosures
• .kiro/ — Kiro configuration and development/submission records
• wrangler.json — Cloudflare Worker configuration

Hackathon submission checklist

Before submitting, confirm that:

• The GitHub repository is public and the root .kiro/ directory is included.
• The live demo is accessible without a payment or login.
• The demo video is public or unlisted-with-link, accurately shows the submitted build, explains the problem/solution/features, explains Kiro usage, and is no longer than three minutes.
• The final written description and video match the behavior documented here.
• Any PicX test key needed by judges is supplied privately through the submission platform and can be revoked.
• Team members and contributions are listed in the submission form if this is a team submission.
• No secrets or unlicensed third-party material are committed.

See the official Kiro hackathon rules for the complete submission, eligibility, originality, demo, and judging requirements.