OCR: auto-pick paddle/tesseract by device, with visible UI switch

[tautme]

Why

Phones split sharply on OCR perf: iOS Safari before 18 has no WebGPU and paddle on single-threaded WASM there is painfully slow; tesseract is the honest default. With WebGPU available (Android Chrome, recent desktops, iOS 18+), paddle wins on accuracy. We can choose at boot without asking the user — and let the user override when they disagree.

This is the "hybrid" we agreed on from the device-capability discussion: smart default + visible switch + honest labels.

What the user sees

A compact line at the top of the contribute upload card:

OCR: Paddle [auto] · 2.4s last run · [Switch to Tesseract]

• auto badge appears only when the boot cascade picked it for you. Disappears once you switch (you're "Using" it, not "Auto").
• 2.4s last run appears only after the first OCR completes — honest measured time, per-provider, persisted across sessions in localStorage under obm.ocr.timings.
• Switch to X is a ~40 px tap target. Click → persists the new choice (localStorage.obm.ocr) and rewrites any ?ocr= already in the URL so a shared link stays in sync.

What the boot does

Cascade, highest priority first:

1. ?ocr=<name> URL param — pinned for the session, persisted.
2. localStorage previous choice — from a prior manual switch.
3. navigator.gpu auto-pick — present → paddle, absent → tesseract.

Logged at load: OCR: auto-picked tesseract (no WebGPU).

I considered timing a real benchmark inference at boot but skipped it: ~500 ms–1 s cost for a signal that's only marginally better than the binary WebGPU check at the device classes we actually see. KISS.

New src/ocr/index.js exports

	Purpose
getActiveOcr()	{ name, source } for the UI indicator
getOcrTimings()	{ paddle?: ms, tesseract?: ms } — last measured run per provider
setOcrProviderByName(name, { persist, source })	Wire to the UI's switch button
resetOcrOverride()	Clear URL + storage + re-pick

Pre-existing setOcrProvider(fn) and splitOcrIntoTitles() unchanged.

Backward compatibility

• ?ocr=paddle / ?ocr=tesseract / ?ocr=default URL flags from PR Clarify OCR flag scope in README #17 still work, with ?ocr=default now meaning "reset to auto-pick."
• The paddle → tesseract fallback chain stays in the module as the resort for setOcrProvider(null); the boot cascade never actually selects it, but the escape hatch is intact.
• Existing tests untouched — splitOcrIntoTitles behavior identical; the 29 tests still pass.

Smartphone considerations baked in

• Picker is a single horizontal line that wraps on narrow screens (flex-wrap); the label and the switch button each have their own row when width is tight.
• 40 px min-height on the switch button (Apple HIG floor for secondary actions is 32; we're generous).
• No hover affordances — the picker reads the same on touch and mouse.
• No tooltips or popovers — the labels are honest enough not to need them.

Verification

• npm run lint — clean
• npm test — 29 / 29 pass
• npm run format:check — clean
• npm run build — clean
• Manually verified in this env that the boot log fires (test output shows OCR: auto-picked tesseract (no WebGPU).).
• Not verified on a real phone — needs your testing on a smartphone after merge. The behaviors to spot-check on-device:
  • iOS Safari (any version): boot log says "no WebGPU", picker shows "Tesseract auto".
  • Android Chrome: boot log says "WebGPU available", picker shows "Paddle auto".
  • Tap switch → picker updates inline, the next photo uses the new provider, localStorage.obm.ocr reflects it.
  • Reload: picker shows "Using X" (no more auto tag), respecting the stored choice.

Files

• src/ocr/index.js — refactor + new exports (~280 lines, ~80 changed)
• src/pages/contribute.js — picker render + wire + post-OCR refresh (~70 lines added)
• src/styles/contribute.css — picker styling (~54 lines added)
• src/ocr/README.md — documents the cascade

https://claude.ai/code/session_01AmQ9QPAF1yskmQs7wSnZYc

---

Generated by Claude Code

[tautme]

may need to try on branch first