Akhouri Anmol Kumar

Posted on Nov 1

Are You a Web Developer or a Browser Expert? 7 Tests I Failed Building a Photo Editor That Never Uploads Your Photos

#webdev #javascript #tutorial #ai

Description: On-device AI, WASM threads, target-size compression, inpainting and 3D LUTs in a single HTML file. 7 real lessons from building APIC Web.

Most web developers can build a form, fetch an API and center a div.

Browser experts know what the browser refuses to do, what happens on a phone instead of your laptop, and how to ship real software with no server at all.

I found out which one I was while building APIC Web: a free photo editor, background remover, object remover, converter and compressor where your photos never leave your device. No upload queue, no backend, and the whole thing is one HTML file hosted on GitHub Pages.

Every test below is a real bug or design decision from that build. Score yourself honestly. 👇

Test 1: Why did my AI step silently never finish on phones?

APIC runs AI models in the browser with ONNX Runtime Web (WebAssembly). Multi-threaded WASM needs SharedArrayBuffer, and that needs special response headers (COOP/COEP). A plain static host like GitHub Pages doesn't send them, so crossOriginIsolated is false.

On desktop, the runtime usually degrades gracefully. On phones it often doesn't, and the AI step just hangs with no error. The fix was to stop relying on the fallback:

// Static hosts can't send COOP/COEP, so threads aren't available.
// Force the one configuration that behaves the same everywhere.
ort.env.wasm.numThreads = 1;
ort.env.wasm.proxy = false;

const session = await ort.InferenceSession.create(modelBytes, {
  executionProviders: ['wasm'],
  enableCpuMemArena: false,
  enableMemPattern: false,
});

Where headers are available, APIC checks self.crossOriginIsolated before asking for more than one thread.

Developer: "It works on my laptop."
Expert: knows that "falls back gracefully" is a claim to test on a real phone, not a promise.

Test 2: Can you tell a slow download from a dead one?

APIC's AI models are big: 5 MB (Lite), 44 MB (Fast), 176 MB (Maximum) for background removal, and about 208 MB for the highest-quality object remover. A fixed 30-second timeout would kill every slow phone connection.

So the timeout is stall-based: abort only if no bytes arrive for 40 seconds. A huge model on bad Wi-Fi is allowed to take as long as it needs. A dead link is not. After that it goes into the Cache API so the second run is instant:

const CACHE = 'apic-models-v1';
const cache = await caches.open(CACHE);

let hit = await cache.match(url);
if (hit) return hit.arrayBuffer();           // cached: no download

const bytes = await downloadWithStallTimeout(url);   // abort only if the stream goes quiet
await cache.put(url, new Response(bytes));   // wrapped in try/catch: private mode & quota can fail
return bytes;

And if a model can't load at all, the tool steps down instead of failing: Ultra (LaMa) → MI-GAN → a quick patch fill.

Developer: fetch() with a timeout.
Expert: measures progress, caches the result, and always has a plan B.

Test 3: Can your app hit "under 200 KB" without guessing?

Upload forms say "max 200 KB" and users play quality-slider roulette. APIC's Compress tool does a binary search on JPEG quality instead:

async function findQualityForTarget(canvas, targetBytes) {
  let lo = 0.05, hi = 0.98, best = null;
  for (let i = 0; i < 7; i++) {
    const mid = (lo + hi) / 2;
    const blob = await toBlob(canvas, 'image/jpeg', mid);
    if (blob.size <= targetBytes) { best = { blob, q: mid }; lo = mid; }  // fits: try higher quality
    else { hi = mid; }                                                   // too big: go lower
  }
  return best;
}

Seven encodes find the highest quality that still fits. If even the lowest quality is too big, APIC shrinks the image by about 20% and searches again, up to 8 times. If it still can't make it, it tells you the real size instead of pretending.

Developer: quality = 0.7 and hope.
Expert: turns a guess into a search and is honest when the answer is "can't".

Test 4: Why did my transparent PNG turn black as a JPEG?

JPEG has no alpha channel. When a canvas with transparent pixels is encoded as JPEG, those pixels come out black. After background removal (which creates lots of transparency), that's a nasty surprise.

The fix is to paint white first, then draw the image on top:

function flattenToWhite(src) {
  const out = document.createElement('canvas');
  out.width = src.width; out.height = src.height;
  const ctx = out.getContext('2d');
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, out.width, out.height);
  ctx.drawImage(src, 0, 0);
  return out;
}

APIC also tells you which formats keep transparency (PNG, WebP) and which don't, right in the Convert panel.

Developer: assumes a canvas is just pixels.
Expert: knows every output format has rules about alpha.

Test 5: Do you process the whole image, or only what changed?

Removing an object means running an inpainting model (LaMa, a Fourier-convolution network, or the lighter MI-GAN). LaMa works on a fixed 512×512 window, so feeding it a 12-megapixel photo would be slow and blurry.

APIC only processes the area around your brush:

Take a region around the mask (at least 512 native pixels when the photo allows).
Run the model on just that crop.
Feather the edge with box blurs, colour-match the fill to its surroundings, and re-add film grain so it doesn't look "too clean".
Paste it back.

Small edit, small compute, and the rest of your photo is untouched.

Developer: runs the model on the full image.
Expert: shrinks the problem first, then blends the result back so nobody can see the seam.

Test 6: Can you export your whole colour grade as a `.cube` LUT?

APIC has curves, an 8-band HSL mixer and 3-way colour grading. People wanted to use those grades in DaVinci Resolve or Premiere. A .cube file is a 3D lookup table: for every input colour, what colour comes out.

The trick: you don't need to reverse-engineer your pipeline. Feed an identity grid of colours through the same pixel function, and write down what comes out:

const N = 33;                       // 33×33×33 lattice
const buf = new Uint8ClampedArray(N * N * N * 4);
let i = 0;
for (let b = 0; b < N; b++)
  for (let g = 0; g < N; g++)
    for (let r = 0; r < N; r++) {   // red changes fastest, as .cube requires
      buf[i++] = Math.round(r / (N - 1) * 255);
      buf[i++] = Math.round(g / (N - 1) * 255);
      buf[i++] = Math.round(b / (N - 1) * 255);
      buf[i++] = 255;
    }

processPixels(buf, gradeWithoutSpatialEffects);   // same code that edits your photo

const lines = ['TITLE "APIC grade"', 'LUT_3D_SIZE 33',
               'DOMAIN_MIN 0.0 0.0 0.0', 'DOMAIN_MAX 1.0 1.0 1.0', ''];
for (let j = 0; j < buf.length; j += 4)
  lines.push(`${(buf[j]/255).toFixed(6)} ${(buf[j+1]/255).toFixed(6)} ${(buf[j+2]/255).toFixed(6)}`);

One catch: a LUT can only hold colour operations. Clarity, sharpen, vignette and grain depend on neighbouring pixels, so they're excluded and the UI says so.

Developer: exports a screenshot of the look.
Expert: samples the function itself.

Test 7: Why does your resized image look soft?

ctx.drawImage(img, 0, 0, smallW, smallH);   // one big jump: soft, aliased

Shrinking a large image in one drawImage call looks muddy. APIC's Resize tool halves the image step by step until it's within 2× of the target, then does one final pass:

function highQualityResize(src, targetW, targetH) {
  let cur = src, w = src.width, h = src.height;
  while (w > targetW * 2 || h > targetH * 2) {
    const nw = Math.max(targetW, Math.round(w / 2));
    const nh = Math.max(targetH, Math.round(h / 2));
    const step = document.createElement('canvas');
    step.width = nw; step.height = nh;
    const c = step.getContext('2d');
    c.imageSmoothingEnabled = true;
    c.imageSmoothingQuality = 'high';
    c.drawImage(cur, 0, 0, nw, nh);
    cur = step; w = nw; h = nh;
  }
  // ...then one last high-quality pass onto the exact target size
}

Developer: drawImage once and move on.
Expert: knows the order of operations changes the result.

Bonus: How do you ship a Web Worker inside a single HTML file?

No build step, no separate worker.js. APIC keeps the worker's source as a string, turns it into a Blob and starts it from a Blob URL:

const SRC = `/* worker code as a string */`;
const worker = new Worker(
  URL.createObjectURL(new Blob([SRC], { type: 'application/javascript' }))
);

Heavy inpainting runs off the main thread, and the whole app is still one file you can host anywhere.

Try it yourself

APIC is built by Akhouri Systems. It runs in your browser, and your images are never uploaded. The only thing the browser downloads is the AI model files (from Hugging Face), cached after the first run. Being upfront about the trade-offs: editing needs no account, you sign in with one tap on Google only when you export, and the web version shows one small banner ad to stay free. The offline PC app has none.

App	What it is	Lessons it proves	Get it
🖼️ APIC Web	Edit, pro colour tools, remove objects, remove backgrounds with AI, resize, convert, compress, 15-network social presets, batch ZIP	Tests 1-7	Open APIC Web
💻 APIC for PC	Windows version, runs fully offline, no account	The desktop twin	Download (zip)

If you're learning how the browser works outside a tutorial, open it, drop a photo, then open DevTools and see what's going on under the hood. That's the fastest way I know to level up.

Your score

0-2 tests known: You're a web developer. Great start, now break something on a real phone.
3-5: Solid. You've shipped something real.
6-7: You're a browser expert. Come argue with me in the comments.

Which test did you fail first? Mine was [the AI step that worked on desktop and silently hung on phones]. Tell me yours below 👇

Top comments (70)

Puneet Kumar Mishra • Nov 1

Nice Post!!