ImaginAI - Free Ghibli Image Transformer

This is an AI tool which converts original image to Ghibli style images, and it also deletes your original image from the server.

Comment

Inspiration

I’ve been a lifelong admirer of Studio Ghibli’s hand‑painted worlds—how a single frame can feel like a living, breathing story. At the same time, I noticed a gap in consumer‑grade AI tools: they often lock your images behind long‑term storage or sacrifice style quality for speed. ImaginAI was born at the intersection of those passions: to let anyone reimagine their own memories in a Ghibli‑inspired aesthetic, while making privacy a first‑class citizen.

What it does

  • Instant Style Transfer: Upload any photo and, in under 5 seconds, receive a Studio Ghibli–style illustration, complete with the soft color palettes and brushstroke textures fans know and love.
  • Privacy‑First Workflow: All uploads and outputs live in a secure Supabase bucket with a 30‑second TTL—no images or metadata persist longer than you need.
  • Usage Quotas & Tiers: Free users get 5 transforms per week; Pro subscribers unlock up to 20. Quotas are enforced both client‑side and server‑side to prevent overuse.
  • Seamless UX: Real‑time progress overlays, toast notifications for errors, and instant re‑download links make the whole process feel polished and reliable.

How I built it

  1. Bootstrapped with Bolt.new: Leveraged quick scaffolding for a React + Tailwind project—giving instant hot‑reload, TypeScript support, and basic routing.
  2. Modular Frontend Components: Created reusable pieces (UploadForm, ProcessingOverlay, ResultCard, SubscriptionManager) to keep concerns isolated and tests straightforward.
  3. Client‑Side Optimization: Used the Canvas API and image‑compression libraries to resize uploads to ≤2 MB before sending, reducing latency and API costs.
  4. Supabase Backend:
  • Auth & Storage: Managed user accounts and file hosting via Supabase Auth and Storage with row‑level security policies.
  • Migrations: Employed SQL migrations to evolve tables for users, plans, and logs safely over time.
    1. AI Inference Wrapper: Built a small serverless function that accepts uploads, anonymizes filenames, calls the style‑transfer model endpoint, and streams results back.
    2. Stripe Integration: Configured customer portals, checkout sessions, and webhook handlers to manage upgrades, downgrades, and real‑time quota adjustments.

Challenges I ran into

  • Edge‑Case Images: Panoramas or extremely high‑res photos occasionally crashed the inference API. I had to implement robust aspect‑ratio checks and client‑side downscaling.
  • Cache Invalidation: Ensuring CDNs and browser caches didn’t hold onto images past the 30‑second window required careful header configuration.
  • Quota Syncing: Coordinating Stripe webhooks, Supabase triggers, and frontend state so that plan changes immediately reflected in available transforms took several iterations to get bullet‑proof.
  • Migration Safety: Rolling out schema changes without brief downtime meant writing idempotent SQL and testing migrations on staging data of varying shapes.

Accomplishments that I’m proud of

  • Sub‑5‑Second Turnaround: Tuning the model pipeline so that even on moderately sized images, users see results in under five seconds—a critical factor for engagement.
  • Zero‑Data‑Retention Guarantee: Architecting a fully serverless flow where no image lives longer than 30 seconds, and validating this via audit scripts.
  • Clean, Responsive UI: Delivering a mobile‑first design that feels just as polished on phones as on desktops, with smooth transitions and accessible markup.
  • Successful Beta Launch: Gathering feedback from 50+ early testers, iterating on usability, and resolving 100% of reported bugs before public release.

What I learned

  • Deep React Patterns: Custom hooks, context providers, and suspense boundaries can transform how you structure data‑driven UIs.
  • Serverless Best Practices: How to write lightweight, secure edge functions for real‑time image processing without spinning up a heavy backend.
  • Stripe & Supabase Synergy: The interplay between billing webhooks and database triggers taught me the importance of idempotency and state reconciliation.
  • Privacy Engineering: Building for real user privacy—beyond buzzwords—requires end‑to‑end thinking, from CDN headers to automatic deletion jobs.

What’s next for ImaginAI

  • Expanded Style Library: Adding alternative art directions (e.g., watercolor, pixel art, noir) so users can choose from a gallery of curated aesthetic presets.
  • Batch & GIF Support: Allowing multi‑image uploads to generate animated sequences or collages in a unified style.
  • Mobile App Companion: A native iOS/Android wrapper for on‑the‑go transforms with push notifications when your stylized images are ready.
  • Community Gallery & Sharing: An opt‑in space where users can showcase their creations, comment on favorites, and vote for “Style of the Month.”
  • AI‑Assisted Enhancements: Integrating face‑aware retouching to ensure portraits maintain natural expressions and avoid algorithmic artifacts.

I’m excited to continue refining ImaginAI into the go‑to playground for anyone who wants to see their world through a Ghibli lens—one delightful transform at a time.

Share this project:

Updates