How it works

This demo uses the live device camera or desktop simulator view as a viewfinder. Choose a crop size, tap the viewfinder to place the square (it starts centered), and press Enhance. The page awaits deviceCamera.captureSnapshot({outputFormat: 'imageData'}) for the current full camera frame, then crops the selected square locally.

The crop is split into overlapping 128 px tiles, processed sequentially by LiteRT.js with the Real-ESRGAN general-x4v3 model, and stitched back together using the non-overlapping core of each tile. The result stays on-device and can be compared with a bilinear before image.

WebGPU is preferred. If WebGPU is unavailable or fails the startup self-check, the demo falls back to WASM and reports that slower backend in the status line. In phone AR, XR Blocks snapshots the WebXR raw camera-access texture that ARCore provides during the XR frame.

Credits

Real-ESRGAN by Xintao Wang et al. is BSD-3-Clause. The LiteRT conversion is provided by litert-community on Hugging Face, and LiteRT.js is Apache-2.0.