Files
RecipesCam/docker
3dtours 97bdf605e2 web: import the camera's RAW, and grade it like the phone
The studio took JPEG, PNG and HEIC and nothing else, so a photographer's own
negatives never reached it. A RAW now loads the way any other file does —
`isRawName` reads the extension off a 24-entry list, the file goes into OPFS
under one slot (`current_image.raw`, beside `current_image.name`, so a reload
finds it again) and `rawDevelop` runs it through LibRaw-wasm: half size, 16-bit
output, camera white balance and the camera's own 3x3 matrix, in bands of 2M
pixels so a 30MB file never holds a second copy of itself. `example-sony.ARW`
(30.3MB) lands as a 3120x2084 picture, no page error.

DEHAZE joins the FX tab, where Lightroom keeps it: a chip off the same
PARAM_DEFS entry (`dehaze`, 0..10) so nothing new renders chips, and the pass is
the dark channel prior — `atmosphericLight` reads A off a 32x32 draw of the
photo, `DEHAZE_SKSL` takes omega up to 0.95 over a floor of 0.1 — measured at
71.8% of the stage's pixels moved between 0 and 10.

The gradient mask grows the six knobs the phone's has: HIGHLIGHT, SHADOW,
WHITE, BLACK, CLARITY and DEHAZE. The mask's falloff is a smoothstep rather than
a line, and CLARITY/DEHAZE inside a mask get a blurred copy of the photo plus
the air A as a second child of the mask shader — so a mask's clarity is clarity
and not a flat brightness lift. The column shows all nine rulers; CLARITY 9
moves 42.2% of the stage, DEHAZE 9 moves 27.9%.

CLARITY stops reading the whole photo per pixel: the single pass that sampled a
15x15 box 225 times is now the three passes the same math wants — 1x15, then
15x1, then a blend, `orig + (orig - B) * 3.2` — about 30 reads. Both signs work
(77.4% of the stage moves at +10, 79.6% at -10), and the negative branch keeps
its mist as it was.

The pointer reviews a look before it is taken: resting on a PHOTO STYLE chip or
a recipe chip lays that look on the photo while it stays there and gives it back
the moment it leaves — byte-identical, measured on four of them (24.9%, 23.8%,
24.5%, 25.3% of the stage moves on, 0.00% off) — while the recipe, the UNDO
stack and the session stay on the look the click left. A hovered look brings its
colour alone: the masks, the dust spots and the mosaic of the photo being edited
ride along, or a pointer crossing a chip row would rub them off. A PRO sim is
left out, since a hover that showed its look would hand over what the click
gates.

Probes: e2e-raw-verify, e2e-dehaze-mask, e2e-mask-verify, e2e-clarity-verify,
e2e-hover-preview2.
2026-09-26 18:18:22 +07:00
..

RecipesCam web — self-contained stack

A Docker-hosted web build of RecipesCam. Everything it needs is in this folder: move it to another machine, run two commands, and the app is up. It does not need the React Native project around it.

cp .env.example .env
docker compose up -d --build
# → http://localhost:8090

What runs where

Service Image Role
frontend nginx:1.27-alpine (built by frontend/Dockerfile) Static SPA + /api/ reverse proxy
api node:22-slim (built by backend/Dockerfile) Accounts + saved recipes, SQLite on ./data

frontend resolves api through Docker's embedded DNS and proxies /api/* to it — that is why the API container is named api and why it is not published on the host. Only ${WEB_PORT:-8090} is exposed.

Photos never leave the browser. The CanvasKit render pipeline (grade, frame, watermarks, JPEG encode) runs in the visitor's tab; the API only stores recipes as JSON.

Layout

docker-compose.yml      the stack
.env.example            WEB_PORT
data/                   SQLite (created on first run, gitignored)
backend/                Fastify + better-sqlite3 API, own Dockerfile
frontend/               Vite + React + CanvasKit SPA, own Dockerfile + nginx.conf
  shared/               vendored copies of the app's types + utils (see below)
  src/engine/           skiaShim.ts (CanvasKit) + exportEngine.ts (render pipeline)
                        + session.ts (localStorage/IndexedDB studio persistence)

Vendored files

frontend/shared/{types/index.ts,utils/*.ts} are byte-identical copies of src/types/index.ts and ten src/utils/*.ts files from the React Native project (@shopify/react-native-skia is aliased to src/engine/skiaShim.ts in vite.config.ts + tsconfig.json, so those files compile unchanged):

cinemaShader colorUtils defaultRecipes exifWrite frameUtils jpegDpi paramDefs recipeShare skiaImage toneShader.

The landing page needs no CDN: frontend/public/assets/fonts/*.woff2 are the seven self-hosted faces behind the three font groups the Themes menu offers (Plus Jakarta Sans / Inter / JetBrains Mono, Fraunces / Be Vietnam Pro / Courier Prime, Be Vietnam Pro / Space Mono — all SIL OFL, pulled from Google Fonts, vietnamese + latin + latin-ext subsets), and frontend/public/assets/samples/s*.jpg are the six placeholder negatives the film strip, preset tester and QR card show (swap them for real graded stills whenever we have them). Its one foreign request is the QR image from api.qrserver.com, which degrades to an empty slot offline.

When the app changes one of them, copy it back in — the renderer is only "parity" for as long as these stay in sync:

cd <repo>/docker/frontend/shared/utils
cp <repo>/src/utils/<name>.ts .

Operations

docker compose logs -f api        # API log
docker compose restart api        # after backend/src changes (rebuild: --build)
docker compose down               # stop; ./data survives

Backup is the ./data folder — that is the whole database.

Checks

curl -s http://localhost:8090/api/health          # {"ok":true}
curl -sI http://localhost:8090/                   # 200, index.html

Then open the UI, drop a photo in, and confirm the preview shows the picture and EXPORT downloads a JPEG that opens. The preview going solid black while the export still reports a plausible size is the one failure mode worth knowing: it means the CanvasKit GPU surfaces lost their shared GrDirectContext (see frontend/src/engine/skiaShim.ts), and with no GPU the raster fallback renders the same pipeline correctly, just slower.