DEV Community: visiohex

I built a browser-only tool to remove visible Gemini watermarks

visiohex — Sat, 18 Apr 2026 14:13:22 +0000

I built a small tool called WatermarkZero to handle one specific case: the visible Gemini watermark that shows up in the bottom-right corner of supported Gemini-generated images.

Site: https://watermarkzero.org/

Repo: https://github.com/liuyan-wjy/watermarkzero

Most tools I found went in one of three directions:

they cropped the corner
they pushed the file through a remote server
they were vague about what they actually supported

I wanted something narrower and more explicit.

What WatermarkZero does

WatermarkZero runs in the browser and focuses on the visible Gemini mark only. You upload a JPG, PNG, or WebP image, preview the result, and download the cleaned version without sending the file to a backend.

That constraint shaped the whole project. I was not trying to build a general watermark remover. I wanted a tool with a clear boundary and a workflow that people could understand in a few seconds.

Why local processing mattered

Image tools often ask you to upload files before they explain anything. That works for some use cases, but it feels wrong for screenshots, drafts, or personal images that you do not want sitting on a third-party server.

So I kept the core flow local:

image selection happens in the browser
processing happens in the browser
downloading happens in the browser

That also forced me to keep the UX honest. If the restoration is weak on a certain image, you see it right away.

Scope matters more than hype

One thing I tried to avoid was pretending this works on everything.

WatermarkZero is built for:

the visible Gemini watermark
supported Gemini-generated images
cases where you want to keep the full frame instead of cropping the corner

It is not built for:

hidden watermarking systems like SynthID
every kind of logo or watermark on the internet
guaranteed success on every textured corner or gradient-heavy image

That narrower scope made the product better. It also made the copy easier to write, because I did not have to blur the edges.

What I shipped

The current version includes:

local browser processing
before/after examples
downloadable output
support for JPG, PNG, and WebP
a few support pages that explain how it works and where it fails

I also spent time on the boring parts:

mobile layout
simple analytics
Cloudflare deployment
clear FAQ and privacy pages

The harder cases

The hardest inputs are the ones you would expect:

fabric folds
leaves and plant textures
soft gradients
detailed corners where the visible mark overlaps real image detail

Those cases are useful because they tell you whether the result looks restored or just blurred over.

If you want to try it

The tool is here:

https://watermarkzero.org/

If you test it, I would love to hear where it breaks down. Failure cases are more useful than generic praise on a tool this narrow.

I built a spoiler-safe NYT Connections helper with Astro and Cloudflare

visiohex — Tue, 14 Apr 2026 09:14:09 +0000

I recently built Connections Hint Today, a spoiler-safe helper for NYT Connections.

The original idea was pretty simple: most Connections helper pages solve the wrong problem.

They are useful if you want the answer right now, but a lot of them jump straight to spoilers. That works for panic-click traffic, but it does not feel great if you still want to solve the board yourself. I wanted something that behaved more like a coach than an answer dump.

So I built a small site around that idea:

light hints first
stronger hints only if needed
archive pages for review
Sports Edition support
short explanation and trap notes for each group

The site is live here:

https://connections-hint.today/

And the repo is here:

https://github.com/liuyan-wjy/connections-coach

The product idea

The most important product decision was to treat “help” and “spoiler” as two different things.

If you play Connections regularly, you usually do not want a giant answer page. You want a nudge. Maybe you are stuck between two groupings. Maybe you know one category is structural but cannot see it yet. Maybe the purple group is clearly some kind of phrase pattern, but you are not sure which one.

That is a very different user need from “just show me the answer”.

So the site uses a layered model:

Light hint
Medium hint
Strong hint
Reveal answer and explanation

That sounds small, but it changes the whole tone of the product. Once I committed to that, the rest of the site became easier to shape: archive pages, strategy pages, and even the result analyzer all needed to support the same idea of helping without flattening the puzzle.

Why Astro + Cloudflare

This project is a pretty good fit for the Astro + Cloudflare stack.

I wanted:

static-first pages for SEO
fast page loads
simple deployment
low ops overhead
enough server-side logic to ingest and publish daily puzzle data automatically

Astro gave me a clean content-heavy frontend without dragging in a lot of complexity. Cloudflare gave me a surprisingly compact deployment model:

Cloudflare Pages for the site
Workers for the ingest pipeline
D1 for puzzle storage
Browser Rendering as a fallback for dynamic Sports Edition capture

That combination let me keep the public site lightweight while still handling the scheduled automation behind the scenes.

The ingestion problem

The most interesting part of the project turned out not to be the UI. It was the ingest pipeline.

The main Connections board and the Sports Edition do not behave the same way. The main edition was fairly straightforward once I found the right live daily endpoint. Sports was messier.

At first, I tried to capture Sports data through browser automation. That worked some of the time, but it was not stable enough for a daily publishing flow. The browser connection would occasionally time out, which is exactly the kind of failure you do not want in a project that is supposed to update on its own every day.

The fix was to change the ingestion strategy:

use a direct GraphQL request first
keep browser capture only as fallback
write both main and sports puzzles into D1
mark them as published only when the payload is valid

Once that was in place, daily publishing became much more reliable.

Rule-based copy generation

Another interesting challenge was content generation.

I did not want every puzzle page to say the same thing with a new date stamped on it. At the same time, I also did not want to rely on live AI generation for every daily update. That would increase cost, add latency, and make the output less predictable.

So I built a rule-based copy layer instead.

Right now the generation works more like a lightweight editorial engine:

detect whether a group is direct, structural, phrase-based, or sports-specific
generate different hint and explanation styles based on that category shape
vary summary copy by puzzle type
keep the tone consistent across the site

It is not trying to imitate a human writer perfectly. It is trying to be useful, stable, and a little less repetitive than a pure template system.

That tradeoff feels right for this stage of the project.

SEO and information architecture

Because this is a search-heavy product, structure mattered a lot from the start.

I did not want the site to be just a single /today page. That would make it too dependent on one expiring keyword pattern.

Instead, I split it into a few clear surfaces:

/today for fast daily usage
/puzzle/{id} as the canonical puzzle pages
/archive for review
/sports for Sports Edition
strategy pages for evergreen traffic

I also made /today noindex,follow and pointed canonical to the actual puzzle detail page. That gave the site a cleaner search shape and reduced duplication risk.

What I learned

A few things stood out while building this:

1. The real product is not the answer page

The answer page gets the initial traffic, but the real product is the habit loop around it.

If someone comes back for archive review, strategy pages, or Sports Edition, that is much more valuable than a one-time click for today’s board.

2. Small automation details matter more than flashy features

The site became meaningfully better once the daily ingest was reliable. That mattered more than adding another feature.

3. Distribution rules matter

Communities that seem like an obvious fit are not always friendly to direct links. Some puzzle communities treat any link to a current-board helper as a spoiler, even if the page is intentionally spoiler-safe.

That means the product and the distribution strategy have to be designed together.

4. AI is optional

A lot of projects like this immediately jump to “just use AI for the content”. I think that is often the wrong first move.

For this project, deterministic rules got me much farther than I expected. They are cheaper, easier to test, and easier to reason about when something goes wrong.

What is next

The next things I want to improve are:

better puzzle-specific commentary
more evergreen strategy content
stronger archive depth
clearer post-game analysis

I also want to keep refining the copy so it feels less like a generated system and more like a compact field guide for repeat players.

If you build content-heavy side projects, I would be curious how you think about this tradeoff:

When do you keep a site deterministic, and when do you add AI into the publishing path?

What Is AutoResearch by Andrej Karpathy? A Clearer Guide for First-Time Readers

visiohex — Wed, 25 Mar 2026 08:59:55 +0000

What Is AutoResearch by Andrej Karpathy? A Clearer Guide for First-Time Readers

Karpathy's autoresearch repository has been getting a lot of attention recently.

A lot of people are searching for:

autoresearch github
karpathy autoresearch
autoresearch ai

But if you're seeing the project for the first time, the raw GitHub repository can still feel a bit dense.

So I built a small unofficial guide site to make the project easier to understand before diving into the source code.

What AutoResearch Is

At a high level, AutoResearch is an open-source project that lets AI agents run repeated ML training experiments inside a compact codebase.

Instead of manually editing everything yourself, the idea is to let an agent:

modify training logic
run short experiments
compare results
iterate

That makes it interesting not just as a repo, but as a preview of a different way to do ML experimentation.

Why People Care About It

A few things make the project stand out:

it comes from Andrej Karpathy
it is small enough to inspect
it fits into the current wave of interest around coding agents
it creates a more readable “research loop” than a giant ML stack

For developers and AI builders, it is the kind of repo that becomes popular very quickly because it is both practical and conceptually interesting.

Why I Made a Separate Guide

A GitHub README is great if you already know what you're looking for.

But many searchers are not actually asking for source code first. They are asking:

what this repo does
where to start
whether it can run on smaller hardware
whether cloud GPUs make more sense
how it differs from similarly named projects

That is why I turned it into a small explainer site.

What I Published

I broke the topic into a few pages:

Homepage / overview: Open Repo Guide
GitHub explainer: AutoResearch GitHub Guide
Step-by-step tutorial: AutoResearch Tutorial
Hardware limitations: Run AutoResearch on Mac or Smaller GPUs
Neutral infra guide: Best GPU Cloud Options for AutoResearch

What I’m Testing

This is also a small experiment for me.

I’m exploring whether a simple content site can grow by taking fast-rising GitHub repositories and turning them into clearer, more beginner-friendly explainer pages.

Not official product sites.
More like independent project guides for people discovering these repos through search.

Feedback Welcome

If you’ve looked at autoresearch, I’d love to know:

what confused you most when you first saw it
whether this kind of explainer page is actually useful
which GitHub repos would be worth covering next

I Built a Free AI Instagram Bio Generator in 10 Days — Here's What I Learned

visiohex — Wed, 18 Mar 2026 02:10:44 +0000

I spent way too long staring at a blank Instagram bio box last month. 150 characters. How hard could it be?

Turns out, pretty hard. So I built a tool to solve it.

👉 SocialBioGen — generate 3–5 personalized, emoji-packed Instagram
bios in under 3 seconds. No signup required.

## The Problem

Writing a 150-character bio that:

Captures your personality or brand
Uses emoji tastefully
Actually makes people want to follow you

...is surprisingly difficult. Most people end up with either a generic "Coffee lover ☕ | NYC" or just
leave it blank.

I searched for tools and found mostly clunky, ad-heavy generators that required email signups just to
see results. So I built my own.

## How It Works

Choose your type — Personal, Business, or Creator
Describe yourself in a few words
Pick a vibe — Professional, Funny, Aesthetic, Minimalist, Bold, or Cute
Get 3–5 ready-to-copy bios in under 3 seconds

  Input:  "Travel lover, coffee addict, based in NYC"
  Vibe:   Funny
  Type:   Personal

  Output:
  → ✈️  Fueled by coffee & flight miles | NYC chaos survivor ☕
  → Professional napper between flights 🌍 NYC base, world playground
  → Lost in every city, found in every café ☕✈️  NYC HQ

## Tech Stack

Next.js 15 (App Router) — SSR + SSG for SEO
OpenRouter API — LLM calls (GPT-4o-mini, ~$0.001/request)
Neon PostgreSQL — rate limiting + user credits
PayPal SDK — one-time payments, no subscription complexity
Vercel — zero-ops deployment

Total infra cost: < $5/month at moderate traffic.

## The SEO Play: Programmatic Pages

Beyond the main generator, I built 50+ niche landing pages:

/instagram-bio-for/travel — Travel Instagram Bio Generator
/instagram-bio-for/fitness — Fitness Instagram Bio Generator
/instagram-bio-for/photographers — ...you get the idea

Each page has 20+ pre-generated bio examples + the live AI generator. Built with
generateStaticParams() in Next.js — the entire content cost < $1 in API calls to generate upfront.

One bug I hit: revalidate = 3600 (ISR) conflicted with next-intl's setRequestLocale, throwing
a DYNAMIC_SERVER_USAGE 500 error in production. Fixed by switching to dynamic = 'force-static' —
same pattern used in the Next.js docs pages.

## Monetization

Free tier: 5 generations/day, no signup.

Paid:
| Plan | Price | Credits |
|------|-------|---------|
| Starter | $4.99 | 100 |
| Pro | $9.99 | 300 |
| Lifetime | $19.99 | Unlimited |

Credits never expire. The Lifetime deal is the anchor — once you see $9.99 vs $19.99, unlimited forever
feels obvious.

## What I'd Do Differently

Start with the SEO pages, not the generator. The pSEO landing pages will drive organic traffic long-term. I built the generator first and the SEO layer second.
Ship earlier. I spent 2 extra days polishing the UI before launch. Nobody cares about perfect spacing on day 1.
Rate limit by browser fingerprint, not just IP. Shared IPs (offices, universities) can exhaust limits for unrelated users.

## Try It

🔗 https://www.socialbiogen.net

Free to use, no signup. Would love your feedback — especially on bio quality and edge cases where the
AI gives weird results.

What's your Instagram bio right now? Drop it in the comments 👇

I Built a DLSS 5 GPU Compatibility Checker with Next.js 14 (and what I learned about AI rendering)

visiohex — Wed, 18 Mar 2026 02:09:05 +0000

NVIDIA announced DLSS 5 at GTC on March 16, 2026 — and the internet immediately exploded with questions: "Does my GPU support it? Is my RTX 4090 going to be left out?"

I couldn't find a clean, reliable answer anywhere. So I built one.

👉 dlss5.net — a free GPU compatibility checker for DLSS 5

## What is DLSS 5, actually?

This tripped me up while building the site. A lot of sources were confusing DLSS 5 with Multi Frame Generation (MFG) — but they're completely different things:

| Version | Key Feature | Focus |
|---------|-------------|-------|
| DLSS 3 | Frame Generation (1 AI frame) | Performance |
| DLSS 4 | Multi Frame Generation 4X | Performance |
| DLSS 4.5 | Dynamic MFG 6X | Performance |
| DLSS 5 | Neural Rendering | Visual Fidelity |

DLSS 5's core feature is Real-time Neural Rendering — AI analyzes scene semantics (hair, skin, fabric, lighting) and generates photoreal material responses in real time. Jensen Huang called it "the GPT moment for graphics."

It runs on top of DLSS 4.5, not instead of it.

## What I built

The tool lets you type any GPU name and instantly see:

DLSS 5 status: Confirmed / Possible / Unlikely / Not Supported
Current DLSS 4/4.5 performance data (since DLSS 5 isn't out yet)
DLSS version comparison table
Upgrade recommendations if your GPU isn't confirmed

## Tech stack

Next.js 14 (App Router, fully static)
TypeScript + Tailwind CSS + shadcn/ui
Fuse.js for fuzzy GPU name search
Recharts for FPS benchmark charts
Deployed on Vercel

The GPU data lives in a JSON file — easy to update when NVIDIA releases
official specs closer to the Fall 2026 launch.

## Interesting data decisions

RTX 5060 / 5060 Ti: I initially marked these as "Confirmed" since they're
RTX 50 series. But the GTC demo ran DLSS 5 on two RTX 5090s — one for the game,
one dedicated to the AI model. The RTX 5060 has only 8GB VRAM. I changed both
to "Unlikely" until NVIDIA publishes official minimum specs.

Min. GPU requirement: NVIDIA's official FAQ literally says "Minimum GPU
specifications are pending model optimizations and will be provided closer to release."
So the table says TBD, not "RTX 50 confirmed."

RTX 20/30 series: These support DLSS 3.5 (Super Resolution + Ray Reconstruction),
not just Super Resolution. Ray Reconstruction shipped with DLSS 3.5 and is
backwards-compatible.

## What's next

DLSS 5 launches Fall 2026. I'll update the site as NVIDIA releases:

Official minimum GPU specs
Game support list updates
Actual benchmark data

The site also has a Portuguese version (dlss5.net/pt)
— "dlss 5 quais placas" turned out to be a trending search query, so Brazilian
gamers were clearly looking for this too.

If you're a gamer wondering about your GPU, check it out: dlss5.net

Feedback welcome — especially if you spot any data errors. DLSS versioning is
genuinely confusing and I want to keep this accurate.

I Built a Free Resume Bullet Rewriter for ATS (Action Verbs for Resume)

visiohex — Wed, 04 Mar 2026 08:28:21 +0000

I recently launched PowerVerb: resumeactionverbs.com

It’s a resume bullet rewriter focused on turning weak lines into stronger, ATS-friendly resume bullets using better action verbs for resume writing.

If you’re searching for resume action verbs, power verbs for resume, or a fast way to rewrite “Responsible for…” bullets, this tool is built for that exact use case.

Why I built a resume bullet rewriter

Most tools either over-generate or produce generic text.

I wanted a practical resume action verbs tool that is:

fast
cost-efficient
less likely to hallucinate
useful for real job applications

Core features

Rewrite one bullet into 3 ATS-friendly versions
Suggest better resume action verbs by role (engineering, product, marketing, sales)
Detect weak/repetitive wording
Save and reuse recent rewrites
Daily free quota + paid credits/subscription

Tech stack

Frontend: Next.js (App Router)
DB/Auth: Supabase
Rewrite engine: Rule engine + OpenRouter fallback
Payments: PayPal (orders + subscriptions + webhook idempotency)
Deploy: Vercel
DNS/CDN: Cloudflare

Why “rule-first + AI-assisted”?

Initially, I used AI for everything. It worked, but costs and latency were unstable, and weak-verb checks were overkill for LLMs.

So I split the system:

Deterministic rules for repetition checking + weak verb detection
AI only for rewrite generation (with strict constraints)

This reduced token usage and made UX feel much faster.

Output quality guardrails

The rewrite prompt enforces:

don’t invent numbers
don’t invent responsibilities
keep original facts
return strict JSON schema

Then I post-process:

dedupe variations
enforce exactly 3 outputs
fallback to local rule rewrite when model output is invalid

This combo dramatically improved consistency.

Credits/quota logic (important lesson)

One subtle bug I fixed: deduction order.

I originally deducted paid credits first, which felt wrong for users with daily free quota.

Now the order is:

daily free quota
subscription credits
purchased credits

That single logic change removed a lot of confusion and support issues.

UX fixes that mattered more than expected

Two tiny changes improved trust a lot:

Copy button feedback (Copy -> Copied)
Reuse Output auto-scrolls back to editor and shows Loaded

Without visible feedback, users think the app is broken—even when logic works.

SEO and launch notes

I shipped:

role-based long-tail landing pages
sitemap + robots
canonical + OG metadata
favicon + structured metadata cleanup

Then submitted sitemap to Google Search Console and started testing channels like HN Show.

What I’d improve next

JD-aware rewrite mode (align bullet to job description)
batch rewrite mode
better analytics mapping (GA4 event taxonomy + funnel reporting)
export formats (DOCX/Notion/JSON)

Final thought

If you’re building an AI writing product, my biggest takeaway is:

Put deterministic logic in front of AI whenever possible.

It makes your product cheaper, faster, and easier to trust.

If you want, I can share a follow-up post with my exact event taxonomy and payment webhook idempotency setup.

How I Built an AI-Powered APA Citation Generator with Next.js, Supabase, and PayPal

visiohex — Thu, 26 Feb 2026 08:12:24 +0000

If you have ever tried to cite random web pages in APA style, you know the pain:

missing authors
missing publication dates
inconsistent metadata
lots of manual fixing after "auto generation"

I built APA Citation Generator to solve that specific workflow:

accept a URL or DOI
extract metadata with rule-first parsing
use AI only for missing fields
output APA reference + in-text citation
clearly mark confidence and review warnings

Live demo: https://apacitationgenerator.online

Why I built this

Most citation tools work great on clean sources, but fail on real-world pages. In practice, users still need to:

open the page manually
find author/date by hand
patch placeholders like (n.d.)

My goal was not "generate everything with AI".
My goal was to build a fast, reviewable citation pipeline where users can trust what is extracted and quickly fix what is uncertain.

Tech stack

Frontend/App: Next.js 16 (App Router)
DB/Auth: Supabase (custom apa schema, Google OAuth)
AI: OpenRouter (Gemini model fallback chain)
Payments: PayPal (one-time credit packs + subscription)
Deploy: Vercel
Domain/DNS: Cloudflare

Core architecture

1) Input classification

User input is classified as either:

Anything else is rejected early with explicit errors.

2) Rule-first metadata extraction

For URLs, I first parse metadata from HTML:

og:title
og:site_name
article:published_time
common author/date tags

For DOI, I query Crossref.

3) AI completion only for missing fields

If critical fields are missing, I send a trimmed text snapshot to AI and ask for strict JSON output:

authors
publicationDate
title
containerTitle

This kept latency low and reduced hallucination risk versus full-AI generation.

4) APA formatter + confidence model

The formatter creates:

full reference
in-text citation

Then a confidence score is calculated from available fields and inference flags.
Low-confidence outputs are labeled Needs Review with specific warnings.

Monetization model

I used a mixed model:

free daily quota
paid credit packs
monthly Pro subscription

This works better than a hard paywall for utility tools.
Users can test value first, then upgrade for volume.

SEO strategy (early stage)

Primary keyword: "APA Citation Generator".

Then I added related landing pages and long-tail clusters:

no author citation
no date citation
DOI to APA
in-text citation guides

I also shipped:

sitemap
robots
metadata/canonical
structured data (FAQ/Breadcrumb/SoftwareApplication)

What I had to harden before launch

After initial release, I did a security pass and fixed a few important issues:

SSRF protections on URL fetch
block localhost/internal hosts/private IP ranges
restrict ports
safe redirect handling
OAuth callback open redirect
allow only internal next paths
Edit API authorization
verify auth + ownership before updating saved citation jobs
Quota/credit race conditions
switched to compare-and-set style updates for concurrent safety
CSP + security headers
nonce-based CSP
frame/content/referrer protections
Lead form anti-bot
honeypot + timing checks + per-IP daily limit
optional Cloudflare Turnstile support

Lessons learned

Rule-first + AI fallback beats AI-only for this use case.
Explain uncertainty in UI. Users accept imperfection when they can see why.
Monetization should follow workflow friction, not just pageviews.
Security hardening early saves painful migrations later.

Current limitations

still focused on URL + DOI flows
some edge cases need manual verification (as expected in citation work)
content and internal-link SEO still improving

What’s next

better source-specific parsing heuristics
export formats (BibTeX/Word)
stronger account history and saved references UX
deeper analytics for conversion and retention

If you build in the education/productivity SEO space, I’d love feedback on two things:

Which citation edge cases break most often in your experience?
Which growth loop would you prioritize first: browser extension, exports, or team collaboration?

I’m happy to share implementation details if anyone wants to replicate this architecture.

I Built an AI Baby Meme Generator with a Two-Stage Prompt Pipeline — Here's How It Works

visiohex — Wed, 11 Feb 2026 09:15:07 +0000

Last month I shipped babymeme.art — a free AI baby meme generator with 7 preset styles. You pick a style like "Gangster" or "Cursed," type something like "eating pizza," and get a meme-ready image in under 5 seconds.

Here's the full technical breakdown of how it works, the two-stage prompt pipeline I designed, and what I learned building it.

The Architecture

User Input ("eating pizza")
       │
       ▼
┌─────────────────────┐
│  Style Template      │  ← 7 preset prompt templates
│  prefix + input +    │
│  suffix              │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  Stage 1: Gemini     │  ← Prompt enhancement via OpenRouter
│  (prompt engineer)   │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  Stage 2: Flux.1     │  ← Image generation via fal.ai
│  Schnell (4 steps)   │
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  Canvas API          │  ← Client-side meme text overlay
│  (Impact font)       │
└─────────────────────┘

Tech stack: Next.js 14 (App Router), TypeScript, Tailwind CSS, Supabase (auth + credits), PayPal (payments), Vercel (hosting).

The Prompt Template System

The core insight: users are lazy. They type "pizza" or "eating pizza" — not a detailed 100-word prompt. So I built 7 style templates that wrap their input into a complete, high-quality prompt.

Each template has a prefix and suffix:

// lib/styles.ts
{
  id: 'gangster',
  promptPrefix: 'Hilarious photo of a tough-looking toddler with
    an exaggerated gangster attitude, wearing oversized designer
    sunglasses, heavy gold chains, a tiny leather jacket,
    making a serious tough-guy face while',
  promptSuffix: ', fisheye lens shot, 90s hip hop music video
    aesthetic, dramatic flash photography, high contrast,
    absurd humor, viral meme quality, 8k.',
}

The prompt builder sandwiches user input between them:

// lib/promptBuilder.ts
export function buildPrompt({ userInput, style }) {
  let processedInput = userInput.trim();

  // Handle lazy single-word input
  if (!processedInput.includes(' ')) {
    processedInput = `doing ${processedInput}`;
  }

  return {
    prompt: `${style.promptPrefix} ${processedInput}${style.promptSuffix}`,
    negativePrompt: style.negativePrompt
  };
}

So when a user types "eating pizza" with the Gangster style, the actual prompt becomes:

"Hilarious photo of a tough-looking toddler with an exaggerated gangster attitude, wearing oversized designer sunglasses, heavy gold chains, a tiny leather jacket, making a serious tough-guy face while eating pizza, fisheye lens shot, 90s hip hop music video aesthetic, dramatic flash photography, high contrast, absurd humor, viral meme quality, 8k."

Seven styles, each with a distinct visual personality:

Style	Vibe
Gangster	90s hip hop, gold chains, fisheye lens
Cursed	Security camera, uncanny valley, VHS grain
Giant Knitted	Crochet wool kaiju in miniature city
Dramatic Crying	Oscar-worthy performance, tears flying
Chubby	Michelin rolls, soft pastel, adorable
Cyberpunk	Neon, holographic, sci-fi
Pixar	3D render, Disney character style

Stage 1: Gemini Prompt Enhancement

The style template gets the job done, but a second pass with an LLM makes it noticeably better. I pipe the assembled prompt through Gemini 2.0 Flash (free tier via OpenRouter) for enhancement:

// lib/image-generation/gemini-enhancer.ts
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
  headers: {
    'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    model: 'google/gemini-2.0-flash-exp:free',
    messages: [{
      role: 'system',
      content: `You are an expert prompt engineer for Flux image
        generation models. Enhance this prompt. Keep it under
        120 words. Return ONLY the enhanced prompt.
        ALWAYS include: "five fingers on each hand,
        anatomically correct hands"
        NEVER use negative phrasing — Flux doesn't support it.`
    }, {
      role: 'user',
      content: basePrompt
    }]
  })
});

Key decisions here:

Free model — Gemini 2.0 Flash Exp on OpenRouter costs nothing. For a prompt enhancement pass, you don't need GPT-4.
120-word cap — Flux Schnell handles shorter prompts better. Longer prompts tend to confuse it.
No negative phrasing — Flux doesn't support negative prompts the way Stable Diffusion does. Instead of "no extra fingers," you say "five fingers on each hand." This took me a while to figure out.
Graceful fallback — If Gemini fails, I just use the original template prompt. The system never blocks on enhancement failure.

Stage 2: Flux.1 Schnell on fal.ai

For image generation, I went with Flux.1 Schnell via fal.ai's API:

// lib/image-generation/fal-flux-client.ts
const response = await fetch('https://fal.run/fal-ai/flux/schnell', {
  headers: {
    'Authorization': `Key ${process.env.FAL_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    prompt: finalPrompt,
    image_size: 'landscape_4_3',
    num_inference_steps: 4,
    num_images: 1,
    enable_safety_checker: true,
  }),
});

Why Flux Schnell?

Speed — 4 inference steps, generates in 2-3 seconds
Quality — Surprisingly good for meme-style images
Cost — Around $0.003 per image on fal.ai
No negative prompt needed — Simpler API surface

I originally planned to use Replicate, but fal.ai's cold start times were better for my use case. When every second counts in a consumer app, that matters.

Client-Side Meme Text with Canvas API

After generation, users can add classic meme text (white Impact font, black stroke). This runs entirely client-side:

// lib/memeCanvas.ts — simplified
export function renderMemeToCanvas(
  canvas: HTMLCanvasElement,
  image: HTMLImageElement,
  options: { topText: string; bottomText: string }
) {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  const fontSize = Math.floor(canvas.width / 14);
  ctx.font = `bold ${fontSize}px Impact, sans-serif`;
  ctx.textAlign = 'center';
  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'black';
  ctx.lineWidth = fontSize / 6;

  // Draw with stroke first, then fill (classic meme style)
  if (options.topText) {
    ctx.strokeText(options.topText.toUpperCase(), canvas.width / 2, fontSize + 10);
    ctx.fillText(options.topText.toUpperCase(), canvas.width / 2, fontSize + 10);
  }
}

One gotcha: cross-origin images. The AI-generated images come from fal.ai's CDN, so you must set crossOrigin = 'anonymous' when loading them into the canvas — otherwise toDataURL() throws a security error on download.

const img = new Image();
img.crossOrigin = 'anonymous'; // This line saves you 2 hours of debugging
img.src = imageUrl;

Content Safety Layer

With any AI image generator, content filtering is non-negotiable. I built a three-layer system:

Layer 1: Keyword blocklist — Catches obvious banned terms before they hit the API.

Layer 2: Context-aware replacement — For the Gangster style, if someone types "gun," it auto-replaces to "water gun" instead of blocking outright. Fewer frustrated users, same safety outcome.

Layer 3: fal.ai's built-in safety checker — enable_safety_checker: true as the final guardrail.

export function autoReplaceWords(input: string, styleId: string): string {
  if (styleId === 'gangster') {
    return input.replace(/\bgun\b/gi, 'water gun')
                .replace(/\bweapon\b/gi, 'toy weapon');
  }
  return input;
}

Credit System with Atomic Operations

Users get 5 free credits on signup, can buy packages ($2.99/50 credits), or subscribe to Pro ($9.99/month for 300 credits). The credit deduction uses Supabase RPC for atomicity:

-- Credits are deducted before generation starts
-- If generation fails, credits are refunded
const creditResult = await useCredit(user.id);

if (!creditResult.success) {
  return NextResponse.json(
    { error: creditResult.error },
    { status: 402 } // Payment Required
  );
}

// ... generate image ...

if (!imageResult.success) {
  // Refund on failure
  await refundCredit(user.id, creditResult.credit_type);
}

Priority order: subscription credits > free credits > purchased credits. This way purchased credits (which never expire) are the last to be consumed.

SEO for Programmatic Pages

Each of the 7 styles gets its own page at /styles/[slug] with unique metadata, JSON-LD structured data, and content:

// app/styles/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const style = getStyleBySlug(params.slug);
  return {
    title: style.seoTitle,
    description: style.seoDescription,
    openGraph: {
      images: [{ url: `/api/og?style=${style.id}` }],
    },
  };
}

The OG images are generated dynamically at the edge using Next.js ImageResponse:

// app/api/og/route.tsx
export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const style = request.nextUrl.searchParams.get('style');
  return new ImageResponse(
    <div style={{ /* gradient background, emoji, title */ }}>
      {styleEmojis[style]} {styleNames[style]}
    </div>,
    { width: 1200, height: 630 }
  );
}

This gives every style page a unique social share image without storing any static files.

What I'd Do Differently

1. Start with fal.ai from day one. I initially set up Replicate, then switched to fal.ai for faster cold starts. Wasted a day on the migration.

2. Use an LLM for content filtering instead of keyword lists. Keyword blocklists have false positives ("assassin" contains "ass"). An LLM-based classifier would be smarter, but costs more per request.

3. Add image caching earlier. Same prompt + same style = same image. Could save a lot on API costs with a simple hash-based cache.

Numbers After 2 Weeks

Built and deployed in ~12 days
7 style templates
~3 second average generation time
Cost per image: ~$0.003 (fal.ai) + ~$0 (Gemini free tier)
Deployed on Vercel free tier

Try It

babymeme.art — 5 free credits, no credit card required. Pick a style, type something funny, get a meme.

If you're building something with AI image generation, the two-stage pipeline (LLM enhancement + fast diffusion model) is worth trying. The quality difference between a raw user prompt and an LLM-enhanced one is significant, and using a free model for enhancement keeps the cost near zero.

Have questions about the architecture or prompt engineering? Drop a comment below.