Add self-contained docker/ stack for the web UI

`docker/` now holds the whole web build — frontend (Vite + React + CanvasKit), backend (Fastify + SQLite) and the compose file — so the folder can be moved to another machine and run without the React Native project: cd docker && cp .env.example .env && docker compose up -d --build Only `${WEB_PORT:-8090}` is published; nginx serves the SPA and proxies /api to the `api` container over Docker's DNS. Photos never reach the server. The shared render code is vendored into `docker/frontend/shared/` and aliased to a CanvasKit shim, so the app's own frameUtils/toneShader/jpegDpi run unchanged. Fix the all-black render on GPU surfaces: `MakeWebGLCanvasSurface` creates a separate WebGL context per call, and a texture from one context cannot be sampled by a surface on another — so any pass that drew a snapshot onto a second surface (output sharpen, screen sharpen, polaroid/wallframe cards) came out solid black, while the raster fallback was correct. Use one shared GrDirectContext + MakeRenderTarget instead. Verified in headless Chromium against the running stack: 12MP JPEG in, preview mean=120.5 sd=60.5, export 2048x1536 mean=107.2 sd=62.1, JFIF density 300/300, EXIF present, no console errors; health/signup/login/me/recipes all 2xx through the nginx proxy.
2026-09-17 17:43:03 +07:00
parent 608901bd0f
commit 8c6e7930db
57 changed files with 9359 additions and 2 deletions
@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+
+// One column, one open slider row at a time — the same shape as the app's
+// AdjustmentPanel: a chip row per group, and the tapped chip's row opens
+// underneath it.
+export interface ChipDef {
+  key: string;
+  label: string;
+  value?: string;
+  active?: boolean;
+  pro?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export interface SliderDef {
+  key: string;
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  display: string;
+  onChange: (value: number) => void;
+  onClose: () => void;
+}
+
+export function ChipRow({ chips }: { chips: ChipDef[] }) {
+  return (
+    <div className="chip-row">
+      {chips.map((chip) => (
+        <button
+          key={chip.key}
+          type="button"
+          className={`chip${chip.active ? ' on' : ''}`}
+          aria-pressed={!!chip.active}
+          disabled={chip.disabled}
+          onClick={chip.onClick}
+        >
+          {chip.label}
+          {chip.value ? <span className="val">{chip.value}</span> : null}
+          {chip.pro ? <span className="pro">PRO</span> : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function SliderRow({ slider }: { slider: SliderDef }) {
+  return (
+    <div className="slider-row">
+      <div className="head">
+        <span>{slider.label}</span>
+        <b>{slider.display}</b>
+      </div>
+      <input
+        type="range"
+        min={slider.min}
+        max={slider.max}
+        step={slider.step}
+        value={slider.value}
+        onChange={(e) => slider.onChange(Number(e.target.value))}
+      />
+      <div className="chip-row">
+        <button type="button" className="chip ghost" onClick={slider.onClose}>—</button>
+      </div>
+    </div>
+  );
+}
+
+export function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section>
+      <h2>{title}</h2>
+      {children}
+    </section>
+  );
+}