Browser Image Upscaling: How We Got 4 Super-Resolution 14 Faster — Then Made It Slower on Purpose

说明与用途

ClearPix 将 2048 px 图像放大时间从 9 s 缩短到约 1 s，并通过可调 2‑像素盒滤波器消除过度锐化和 JPEG 噪点。

问题

Upscaling 2048px photos in-browser was slow (≈9 s) and produced over‑sharpened, artifact‑amplified results.

结果

Speed improved from 9 s to ~1 s; sharpening dial (k=0.8) reduced over‑sharpening and increased PSNR/SSIM, making output more faithful to ground truth.

工作流

• Benchmark per‑stage timing and quality metrics (PSNR, SSIM, high‑frequency ratio).
• Profile stages: model inference 62 %, canvas paste 36 %, format conversion 1 %.
• Remove redundant Math.max/Math.min clamping in pixel copy loop, saving 22 % time.
• Attempt pipeline overlap; find no benefit after clamping fix.
• Test larger tiles; find no GPU benefit.
• Experiment with half‑resolution input + ×2 upscaling; discard due to quality loss.
• Add separable 2‑pixel box filter with gain k; sweep k and select k=0.8 to reduce hallucination and improve metrics.
• Expose k as a slider (0.6–1.0) for user preference.
• Deploy final pipeline: clamp input, tile 256px with 8px overlap, run 2.4 MB fp16 model on WebGPU, paste centers, apply sharpening dial.

证据

upscaling a 2048px photo took nine seconds, even on the WebGPU path

来源

the results looked over‑cooked — skin turned plastic, edges grew light halos, and if your source was a JPEG, the compression blocks came back louder than before

来源

model inference was 62% of wall time, sure — but pasting results back into the output canvas was 36%

来源

Deleting the redundant math took three lines and bought 88ms → 68.4ms per image (−22%)

来源

k = 0.8 — giving back 20% of the output's high‑frequency energy — improved PSNR on photos (+0.33dB on people, +0.44dB on texture, +0.27dB on edges)

来源