DEV Community: Jasper Smith

I built an AI people remover that never downscales your photo (Next.js + Cloudflare Workers)

Jasper Smith — Tue, 29 Sep 2026 13:32:35 +0000

Most "AI photo cleanup" tools have a dirty secret: you upload a 24-megapixel photo, and you get back something closer to 1–2 megapixels. The model works at a fixed resolution, so the whole image gets resized, regenerated and quietly degraded — even the parts you never touched.

I wanted a tool to remove people from photo online without that trade-off, so I built one: People Remover. You brush over a tourist, a photobomber or an ex, the AI fills the area, and you download a PNG that is exactly the same width and height as your original.

This post covers the architecture and the one trick that makes it work.

The core idea: generate small, composite big

Inpainting models are good at inventing plausible background. They are not good at preserving 6000×4000 pixels of detail they didn't need to touch. So I split the job in two:

The model gets the full frame plus a black-and-white mask (white = edit, black = keep) and generates at 1K (Standard) or 2K (HD Repair).
The browser keeps the original decoded pixels, scales the model output back up to the original dimensions, and copies in only the masked pixels.

Everything outside the brush stays identical to what the browser decoded from your file. Only the area you painted changes.

Here's a simplified version of the compositing step:

async function composite(
  original: ImageBitmap,   // full-resolution source
  generated: ImageBitmap,  // model output at 1K/2K
  mask: ImageBitmap        // white = replace, black = keep
): Promise<Blob> {
  const { width, height } = original;
  const canvas = new OffscreenCanvas(width, height);
  const ctx = canvas.getContext('2d')!;

  // 1. Start from the untouched original.
  ctx.drawImage(original, 0, 0);

  // 2. Build a layer that is "generated pixels, clipped to the mask".
  const layer = new OffscreenCanvas(width, height);
  const lctx = layer.getContext('2d')!;
  lctx.drawImage(generated, 0, 0, width, height); // upscale to original size
  lctx.globalCompositeOperation = 'destination-in';
  lctx.drawImage(mask, 0, 0, width, height);      // keep only masked area

  // 3. Paint that layer over the original.
  ctx.drawImage(layer, 0, 0);

  return canvas.convertToBlob({ type: 'image/png' });
}

The real version handles a few more things: the mask needs an alpha channel (not just luminance) for destination-in, antialiased edges give a narrow transition so you don't see a hard seam, and repeated edits build on the last full-size composite rather than the original.

Why HD Repair is not "AI upscaling"

A common question: if the output is full size anyway, what does the 2K mode buy you? The answer is detail inside the brushed area. At 1K, a person you removed from a 6000px-wide photo is regenerated at roughly a sixth of the native resolution, then stretched. At 2K you get twice the detail in each direction. On small photos (under ~1000px on the long side) Standard already matches the source, so HD makes no difference. It's never a whole-image upscale — untouched pixels are never regenerated.

The stack

Next.js 15 deployed to Cloudflare Workers via @opennextjs/cloudflare
D1 (SQLite at the edge) for accounts, jobs and a credit ledger
R2 for uploads, masks and results, accessed through the S3 SDK
Stripe for one-time credit packs and monthly plans
Google OAuth as the only sign-in

No image processing happens on the server. The Worker validates uploads, creates a job with the model provider, polls it, and copies the result into R2. The heavy pixel work runs in the user's browser.

Things that bit me

Idempotency matters more than you think. Mobile networks drop requests all the time. Every removal carries a client-generated UUID requestId. If the same ID arrives twice, the server returns the existing job instead of charging again or creating a second model task.

Refunds need to be transactional. A generation can fail at the provider after the credits are deducted. Confirmed failures refund the exact charge once, recorded in the ledger. Temporary polling or download errors, on the other hand, stay retryable and don't refund — otherwise a flaky connection turns into free credits.

Save the final composite separately. The browser uploads the merged, original-size PNG back to the server after compositing. If that upload fails, the browser keeps the composite in memory and offers a save-only retry that never charges another edit.

Canvas has memory limits, especially on phones. A 25-megapixel photo decoded into RGBA is 100 MB of raw pixels, and iOS Safari will happily refuse a canvas that big. I cap input at 25 MP / 20 MB and show an explicit error instead of silently producing a broken file.

Metadata is gone. Output is PNG, and EXIF/ICC data isn't kept. Some people see that as a privacy bonus; photographers who care about color profiles should know it up front.

What you can use it for

The same brush-and-fill pipeline works for more than people:

Removing strangers from travel shots — I wrote a step-by-step guide on how to remove people from photos with real before/after masks, including why you should always brush the shadow too.
Cleaning up clutter: bins, cables, signs, cars. That's the dedicated tool to remove object from photo.
Date stamps, watermark-free captions on your own images, screenshot text: remove text from image.

If you mostly edit on your phone, I also compared the built-in options (iPhone Clean Up, Google Photos Magic Eraser, Samsung Galaxy AI) in this roundup of free remove people from photo apps. The short version: the built-in tools are great if your phone supports them; a browser tool helps when it doesn't, or when you need the full-resolution file.

Try it / tell me what breaks

People Remover gives you 2 free credits without signing in (one Standard edit), and 4 more on your first Google sign-in. No watermark, no app install, full-resolution download.

I'd genuinely like feedback from other devs, especially on:

Mask edge blending — any better approaches than an antialiased brush + alpha clip?
Handling very large images on mobile without hitting canvas limits (tiling? createImageBitmap with resize options?)
Anyone running similar async job flows on Workers + D1 — how are you handling polling after the user closes the tab?

Drop a comment. Happy to go deeper on any part of this.

I Built an AI Video Generator with Next.js and Got My First Paid User in 3 Months

Jasper Smith — Sat, 25 Jul 2026 16:56:57 +0000

I Built an AI Video Generator with Next.js and Got My First Paid User in 3 Months

I'm a frontend developer working at a bank in Shenzhen. By day I write React components. By night, I've been building Froging AI — an AI video generator that turns images and text into videos in minutes.

Three months ago I knew nothing about AI video APIs. Last week, I got my first paid order. Here’s how it happened.

The Stack

I wanted to ship fast and keep costs low. My stack:

Next.js 14 (App Router) — frontend + API routes in one repo
Supabase — Auth, PostgreSQL, and storage
Vercel — deployment, zero DevOps
Creem — payments (one-time + subscriptions)
Replicate / Minimax / 海螺AI — video generation APIs

Why not Python? I'm a frontend dev. Next.js API routes handle async queueing just fine. I didn't want to learn a new deployment pipeline. Ship fast, iterate faster.

What It Does

Froging AI has two core features:

Image to Video
Upload a photo, add a prompt, and the AI animates it into a short video clip. Good for product demos, social content, and creative experiments.

Text to Video
Describe a scene in plain English and get a generated video back in minutes. No camera, no editing software.

Under the hood, I'm routing requests to different providers based on model availability and cost. Replicate's open-source models (Wan-2.1, etc.) for cheap experiments. Minimax and 海螺AI for higher-quality outputs. The user doesn’t pick the model — the system optimizes for speed and quality automatically.

The First Dollar

On July 13th, I woke up to an email from Creem: "You received a payment."

It was $4.99. One user bought the Starter plan.

That small amount changed everything. Before that, I was optimizing SEO, tweaking landing page colors, and watching Google Analytics like a hawk. After that, I realized: the only metric that matters is whether someone is willing to pay.

The user came from organic search. I had spent weeks writing blog posts, submitting to AI directories, and building backlinks. No ads. Just content and patience.

3 Things I Learned

1. Start with one feature, not ten

My original plan was an "all-in-one AI creative suite" — image generation, video generation, editing tools, the works. I stripped it down to video only. If I had waited for the full vision, I'd still be coding instead of charging.

2. SEO is a patience game

I stopped Google Ads after burning through budget with zero conversions. Switched to long-tail SEO: "image to video AI free", "text to video generator no signup". Slow traffic, but free and compounding.

3. Payment integration is part of the product

I spent too much time perfecting the UI before integrating Creem. The moment payments went live, my mindset shifted from "hobby project" to "business." Do it early. Even if nobody pays, the infrastructure being ready changes how you build.

What's Next

Image generation is on the roadmap (finally expanding beyond video)
Better mobile experience (most traffic is mobile)
More video models — I'm watching Kling 2.6 and Veo-3 closely

Try It

If you're curious, Froging AI is live. You can generate a few videos for free without signing up.

If you're also building a side project, drop a comment. I read every one.

Tags: #ai #webdev #nextjs #saas #sideproject #startup #indiedev

Building an AI Image Detector with Next.js: Lessons from Shipping Fast

Jasper Smith — Tue, 30 Jun 2026 16:13:44 +0000

I recently shipped AI Picture Checker — a free online AI Image Detector that identifies whether a photo was generated by AI and, more importantly, which model created it (Midjourney, DALL·E, Gemini, Flux, etc.).

Here is what I learned from building and launching it in under two weeks.

The Problem

Most AI image detectors give you a vague "AI vs Real" percentage. That is fine for curiosity, but useless when you are moderating user uploads or verifying a news photo. You need to know:

Is this actually synthetic?
Which generator was used?
Is it a deepfake or a fully generated image?

Existing tools either hide results behind paywalls or require accounts before you can even test them.

The Stack

Next.js 14 (App Router) + TypeScript
Supabase — Auth, Postgres, and file storage
Vercel — Edge functions and global CDN
Detection models — Ensemble of Hive AI API + custom CLIP-based classifier
Sharp — Client-side image preprocessing before upload

One Technical Lesson

Do not trust a single model.

During testing, one commercial API scored 96% accuracy on Midjourney v6 images but dropped to 62% on Gemini-generated photos. Inpainted images (real photo + AI-edited regions) fooled it completely.

The fix was an ensemble approach:

Run multiple detectors in parallel
Weight scores by model confidence
Fall back to metadata checks (C2PA signatures) when available

This pushed the blended accuracy above 90% across the board, though it increased the per-request cost to roughly $0.005–$0.008.

The SEO Play

I launched the landing page before the detection API was fully integrated. Why? To start indexing immediately.

I published a dozen blog posts targeting long-tail keywords — AI Image Detector, AI Picture Checker, check if image is AI generated, deepfake detection online — and pointed internal links to the main tool.

Three months later, organic traffic is the primary growth channel. For solo developers, content-first, feature-second is a viable launch strategy.

Try It

You can check if an image is AI-generated at aipicturechecker.com. No signup is required for the first few checks. Upload a JPG, PNG, or WebP (up to 10MB) and get results in seconds.

If you find an image that fools the detector, drop a link in the comments — I use edge cases like that to retrain the model.

Resources

AI Picture Checker — Free AI Image Detector with source attribution
Hive Moderation — Enterprise detection API
C2PA — Content authenticity standards

Building AI tools at LuTa Tech. Follow for more write-ups on shipping fast, Next.js architecture, and generative media.

Gemini Omni Video Generator: Create Cinematic AI Videos with Veo

Jasper Smith — Sat, 23 May 2026 16:40:27 +0000

Introducing Gemini Omni Video Generator

AI video creation has just taken a massive leap forward. Gemini Omni Video Generator is a powerful AI-powered platform that lets you create stunning cinematic videos from simple text prompts and images — powered by Google's Veo models.

What Can You Create?

Cinematic Videos — Generate high-quality, movie-like scenes from text descriptions
Image-to-Video Animations — Bring your static images to life with fluid motion
Short-Form Social Content — Create engaging clips for Instagram, TikTok, and YouTube Shorts
Marketing Videos — Produce professional promotional content in seconds
Creative Storytelling — Visualize narratives with AI-generated scenes

Why Gemini Omni?

Built on top of Google's Gemini Omni and Veo AI models, this platform delivers:

Fast, professional AI video production
Simple, intuitive workflows
High-quality output with realistic motion
No complex editing skills required

Who Is It For?

Whether you're a content creator, marketer, or part of a content team, Gemini Omni Video Generator streamlines your video production pipeline. No more spending hours on animation — describe what you want, and let AI bring your vision to life.

Get Started

Ready to create your first AI video? Visit geminiomnivideo.io and start generating cinematic content in seconds.

We Built an AI Image-to-Video Generator in 2026: Architecture, Challenges, and Lessons Learned

Jasper Smith — Tue, 07 Apr 2026 13:05:46 +0000

TL;DR

We just launched AI Image to Video, a free tool that transforms static images into professional videos using AI. Built by LuTa Tech, it's designed for developers and creators who need quick, high-quality video content without complex editing workflows.

Try it here 👉 https://www.aiimagetovideo.video/

The Problem

As developers building content tools, we kept hitting the same wall: video creation is hard.

Whether you're building a landing page, creating social media content, or prototyping an app, you need video assets. But traditional video editing requires:

Expensive software (After Effects, Premiere Pro)
Steep learning curves
Hours of manual work

We wanted something as simple as:

Upload an image
Write a prompt ("make the ocean waves move")
Get a video in seconds

So we built it.

The Architecture

Frontend Stack

React + TypeScript - Type safety for complex canvas operations
WebGL/Canvas API - Real-time preview and image processing
Tailwind CSS - Rapid UI development

AI/Backend

Python FastAPI - High-performance async video processing
Diffusion Models - Custom fine-tuned models for motion generation
FFmpeg - Video encoding and optimization
AWS S3 + CloudFront - Asset storage and global CDN delivery

The Tricky Parts

1. Browser-side Image Processing
Handling large images (4K+) in the browser without crashing tabs was challenging. We implemented:

Web Workers for off-main-thread processing
Progressive image loading
Canvas tiling for memory efficiency

2. Prompt Engineering for Motion
Getting AI to understand "how things should move" requires careful prompt structuring. We built a prompt enhancement layer that translates user inputs into model-optimized instructions.

3. Video Encoding in the Cloud
Balancing quality vs. processing time vs. cost. We ended up with a tiered system:

Fast preview (480p, 5s generation)
High quality (1080p, 30s generation)

What We Built

AI Image to Video lets you:

✅ Upload any image (JPG, PNG, WebP)
✅ Describe motion with natural language ("gentle waves", "falling leaves")
✅ Get MP4 output in seconds
✅ Use it for free (with reasonable limits for server costs)

Use cases we've seen:

E-commerce product demos
Social media content creation
Game asset generation
Prototyping video concepts

About LuTa Tech

This project is built by LuTa Tech, a small team focused on making AI creative tools accessible to developers and creators.

We're not trying to replace professional video editors. Instead, we're building the "quick prototype to video" layer that every developer needs in their toolkit.

Check out our other projects at luta-tech.com

Try It & Give Feedback

The tool is live and free to try: https://www.aiimagetovideo.video/

For developers:

We have an API coming soon (join the waitlist on the site)
If you're building something similar, happy to share more technical details in the comments

What's next?

Video-to-video translation
Batch processing API
Open-source some of our preprocessing tools

Drop your thoughts in the comments! What would you use this for?

This post is not sponsored. Just sharing a tool we built that might help fellow developers.