feat(setup): "Test ANPR" probe on ANPR-enabled cameras

Adds a bottom-of-modal "Test ANPR" button (shown only when a camera's
Plate recognition opt-in is checked) that captures a live snapshot off
the camera and runs it through the vision service, reporting the plate
read + confidence + elapsed time, or which stage failed.

- New POST /api/setup/test-anpr: builds the camera from the unsaved
  config (no DB write/device change, like /test), captures a snapshot,
  runs vision.analyze. Fail-soft like the runtime path (snapshot.ts):
  camera/vision failures are reported results, never a 500.
- Thread the existing VisionClient into setupRoutes; add an isCamera()
  type guard to @parking/devices.
- Web: testAnpr() client + AnprTestResult; button, hint, result line.
- i18n keys in sq + en (Catalog parity).

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
2026-06-22 00:02:31 +02:00
parent 66c1291578
commit 742653aefb
7 changed files with 193 additions and 8 deletions
+59
View File
@@ -7,8 +7,10 @@ import {
fetchBackendIps,
fetchCatalog,
fetchState,
testAnpr,
testDevice,
unassignDevice,
type AnprTestResult,
type Assignment,
type BackendIpCandidate,
type Catalog,
@@ -352,6 +354,10 @@ function DeviceForm({
const [tested, setTested] = useState<TestResult | null>(null);
const [testing, setTesting] = useState(false);
const [testError, setTestError] = useState<string | null>(null);
// ANPR probe (camera + anpr on): snapshot → vision analyze, reported below.
const [anprResult, setAnprResult] = useState<AnprTestResult | null>(null);
const [anprTesting, setAnprTesting] = useState(false);
const [anprError, setAnprError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const [found, setFound] = useState<DiscoveredDevice[] | null>(null);
@@ -442,6 +448,8 @@ function DeviceForm({
setTested(null);
setTestError(null);
setSaveError(null);
setAnprResult(null);
setAnprError(null);
}
async function test() {
@@ -458,6 +466,23 @@ function DeviceForm({
}
}
// End-to-end ANPR probe: capture a frame off this camera and run the vision service
// on it, reporting plate + time (or the failure stage). Only meaningful for an
// ANPR-enabled camera; never blocks save.
async function testAnprNow() {
if (!selected) return;
setAnprTesting(true);
setAnprError(null);
setAnprResult(null);
try {
setAnprResult(await testAnpr(selected.id, mergedScalarConfig()));
} catch (e) {
setAnprError((e as Error).message);
} finally {
setAnprTesting(false);
}
}
async function save() {
if (!selected) return;
// Bound devices must point at a controller relay (binding is optional in the
@@ -641,6 +666,40 @@ function DeviceForm({
</div>
)}
{/* CAMERA + ANPR on: a bottom-of-modal end-to-end probe — capture a frame and
run the vision service on it, reporting the plate read + how long it took. */}
{isCamera && anpr && (
<div className="mt-3 rounded-term border border-term-border bg-term-bg p-2">
<button type="button" className="btn btn-sm" onClick={testAnprNow} disabled={anprTesting}>
{anprTesting ? t("setup.anprTesting") : t("setup.testAnpr")}
</button>
<p className="hint mt-1">{t("setup.testAnprHint")}</p>
{anprError && <p className="mt-2 text-[12px] text-term-red">{t("setup.testFailed", { error: anprError })}</p>}
{anprResult &&
(anprResult.ok ? (
<div className="mt-2 text-[12px] text-term-green">
{t("setup.anprOk", {
plate: anprResult.plate,
confidence: Math.round(anprResult.confidence * 100),
ms: anprResult.tookMs,
})}
{anprResult.lowConfidence && (
<span className="ml-1 text-term-amber">{t("setup.anprLowConfidence")}</span>
)}
</div>
) : (
<div className="mt-2 text-[12px] text-term-amber">
⚠ {t(`setup.anprFail.${anprResult.reason}`, { defaultValue: anprResult.reason })}
{anprResult.detail && <span className="text-term-muted"> — {anprResult.detail}</span>}
{anprResult.tookMs != null && (
<span className="text-term-muted"> ({t("setup.anprTookMs", { ms: anprResult.tookMs })})</span>
)}
</div>
))}
</div>
)}
{backendIps && backendIps.length > 0 && (
<div className="mt-3">
<div className="field max-w-md">