-
-
the result screen with the golden retriever sticker, the three caption options, and the Download, Share and Copy buttons.
-
the "Turn your pet into a sticker." landing page with the four example stickers.
-
GIF
the animated reveal. It starts on the uploaded photo of the sleeping golden retriever, then the sticker slaps on.
Inspiration
Sticker packs are generic, and a proper meme of your own dog or friend takes design skill and time most people don't have. My group chats run on stickers, and I wanted ones made from our actual photos. I also wanted to find out whether a fun consumer app could ship with safety built in from day one.
What it does
MemeMe turns a photo of you, a friend (with consent) or your pet into a die-cut meme sticker in about 20 seconds. You pick one of 5 vibes (Funny, Cute, Classic Meme, Wholesome, Dramatic) and one of 4 styles (Cartoon, Chibi, Pixel Art, or Keep Photo). MemeMe matches the photo to a meme format, writes three caption options, and exports a 512x512 transparent PNG ready for Telegram or WhatsApp. You can edit captions inline, download or share a sticker, and grab a whole session as a zip.
How I built it
MemeMe is a Next.js 16 app (React 19, TypeScript, Tailwind CSS 4) deployed on Vercel. Each photo goes through a chain of steps:
- Safety gate and analysis. One Gemini vision call returns a structured safety report and a neutral description of the subject.
- Template matcher. Code filters my own dataset of 28 hand-written meme formats, then Gemini ranks the top 3.
- Caption writer. Gemini fills only the template's slots, with a tone set by the chosen vibe.
- Caption moderator. A regex blocklist (with l33t normalisation) plus a separate Gemini classifier check every caption.
- Sticker stylizer. An OpenRouter image model redraws the subject in the chosen style, in parallel with steps 2 to 4.
- Die-cut and compositor. The browser cuts out the subject, adds a white outline, and draws all text on a canvas.
AI integration
The AI does more than wrap one prompt. Vision, ranking, writing, moderation and image generation each have their own job, and the meme dataset grounds the output so formats are recognisable instead of free-form. Every Gemini call uses constrained JSON output and every response is validated with zod. The allow or block decision is made in code, never by trusting a model's boolean.
AI safety
- Safety gate first: blocks likely minors, public figures, explicit content, violence and photos with no clear subject. When the model is unsure about age, it blocks.
- Two moderation layers on every generated caption and every user edit, with regeneration and then hand-written fallbacks.
- Prompt injection: text inside an image is treated as data, never instructions, and is flagged and logged.
- Privacy: photos are resized and re-encoded on the device (strips EXIF and GPS), processed in memory, and never stored.
- Consent checkbox and a visible AI-generated label on every sticker.
- Abuse limits: per-IP rate limits, a 4 MB body limit, and a hard credit cap on the image API key.
- Safety eval: a 12-case suite (minors, celebrity, prompt injection, slurs, malformed model output, rate limiting and more). All 12 pass.
Challenges I ran into
- Image models render text badly, so all captions are drawn in code with real fonts. They stay crisp and editable.
- Anyone can upload any photo, so safety had to come first, not last.
- Image generation can fail or refuse. MemeMe falls back to a die-cut photo sticker instead of an error.
- Background removal assumes a plain white background, so there is a rounded-square fallback.
- Gemini's free tier caps requests per minute, which limits how many stickers the app can make at once.
Accomplishments that I'm proud of
The first time the whole pipeline ran end to end: the progress ticks resolved one by one, then the sticker slapped onto the screen with a shine sweep. It finally felt like a real product. Seeing the safety eval pass 12 out of 12 was a close second.
What I learned
The app improved whenever I leaned on my own dataset and plain code instead of asking a model to do everything. Safety works better as a design decision at the start than as a patch at the end.
Known limitations
Age and celebrity detection come from a general vision model and can be wrong in both directions. The in-memory rate limit resets on redeploy. The AI-generated label is drawn into the PNG and can be cropped out.
What's next
A persistent sticker library and export straight to a Telegram sticker pack.
Built With
- framer-motion
- gemini-api
- html5
- jszip
- next.js
- openrouter
- react
- tailwindcss
- typescript
- vercel
- vitest
- zod
Log in or sign up for Devpost to join the conversation.