Running an AI image upscaler & sharpener 100% in the browser (TensorFlow.js)

ZephyrTran — Tue, 11 Aug 2026 03:47:29 +0000

I wanted to sharpen and upscale images without uploading them to some server. It turns out you can run the whole ML model right in the browser — the image never leaves the device. Here's what I learned shipping it as two free tools.

The stack

TensorFlow.js (WebGL backend) for inference
UpscalerJS as a thin wrapper around an ESRGAN super-resolution model
All loaded from a CDN — no build step, no backend

The core is one call: new Upscaler({ model }), then await upscaler.upscale(img, { patchSize: 64, padding: 4, progress }). The patchSize option is the important one — more on that below.

Gotchas I hit

Memory. Running 4× on a large image tries to allocate a huge tensor and the tab dies. The fix is patchSize — process the image in tiles and stitch them back, so memory stays bounded regardless of input size.

Model choice matters more than I expected. I benchmarked three ESRGAN variants on the same image: slim is fast (~2.5s on a small image) but slightly soft, medium had visible tiling artifacts (rejected), and thick was clearly the sharpest but ~3× slower. So I default to slim and offer thick as a "max detail" mode.

Lightweight upscalers smooth the image. ESRGAN-slim enlarges cleanly but the result can look soft. A small unsharp-mask pass afterward restores the bite without an obvious "sharpened" halo.

Sharpen vs upscale are different jobs. To make a sharpener that keeps the original size, I run the same model then draw the result back down to native dimensions — the AI detail survives the downscale, so you get a clearer image at the same size. That became the AI photo sharpener; the enlarge-2×/4× version is the AI image upscaler.

Why keep it client-side?

Privacy — the image is never uploaded. Great for documents, IDs, personal photos.
Cost — it's a static site on Cloudflare Pages, so there's no inference server to pay for.

The trade-off is a one-time model download and slower runs on weak phones, which I gate with size caps and a fast/max toggle.

Happy to answer anything about the TF.js side — what would you run in-browser next?

I built a 100% client-side image & PDF toolkit — no uploads, no server

ZephyrTran — Fri, 07 Aug 2026 07:05:15 +0000

I kept reaching for online tools to compress an image, convert a PDF, or grab audio from a video — and every one of them uploads your file to a server. For anything remotely personal, that felt wrong. So I built Snapvi: a set of free image / PDF / video tools that run entirely in the browser. Your file never leaves your device.

A few things I learned building it:

canvas + toBlob covers a surprising amount: format conversion (incl. WebP), resizing, cropping, collage — all client-side.
pdf-lib and pdf.js handle merge / split / compress / page-numbering / PDF↔image without a backend.
Web Audio decodeAudioData + a small JS MP3 encoder (lamejs) extracts audio from a video to MP3/WAV locally.
For the AI tools (background removal, image upscaler, sharpener) I run the models in-browser via TensorFlow.js — the image still never uploads. The trade-off is the model download + slower on weak phones, which I gate with size caps and a "fast vs max" toggle.
Lossless EXIF/GPS stripping is just parsing the JPEG APP segments and dropping them — no re-encode. Turned that into a metadata remover.

It's a static site on Cloudflare Pages, so hosting is basically free and there's no server to leak anything.

Happy to answer anything about the client-side approach — what would you want to see run in-browser next?

DEV Community: ZephyrTran

Running an AI image upscaler & sharpener 100% in the browser (TensorFlow.js)

The stack

Gotchas I hit

Why keep it client-side?

I built a 100% client-side image & PDF toolkit — no uploads, no server