feat: SQLite persistence, non-blocking inference, modular frontend

Backend:
- Persist alert events and robot delivery counters in SQLite (data/app.db,
  YOLO_DB_PATH override); EventStore keeps its interface, DeliveryStatsStore
  uses read/write-through UPSERT; in-memory fallback remains for standalone
  AlertManager use
- Serve /api/detect from a sync endpoint and serialize YOLO inference with a
  lock, so concurrent requests no longer block the event loop
- Unify single-image and session detection: requests without session_id
  share the fixed single-image session and run full frame confirmation
- Store UTC Z-suffixed timestamps for sortable string comparison; close
  executor and database on shutdown via FastAPI lifespan

Frontend:
- Split app.js into ES modules (main.js + modules/{dom,api,ui,charts,store}
  + views/{dashboard,inspection,events,robots,robotCards}), no build step
- Escape all server data interpolated into innerHTML; guard missing
  event.classes; replace lazy element ID list with memoized qs()
- Remove hardcoded fake stats (trend badge, device donut segment)

Docs:
- Rewrite README: accurate weight policy (only trained best.pt committed,
  no Git LFS), SQLite persistence, single-worker note, data asset inventory
- Align models/pretrained/README.md with actual files; add YOLO_DB_PATH to
  .env.example; add persistence unit tests; ruff clean
This commit is contained in:
2026-08-13 16:50:23 +08:00
parent 4dee7f664d
commit 25fa0c5825
25 changed files with 1058 additions and 669 deletions

View File

@@ -207,7 +207,6 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
.stat-card:hover { transform: translateY(-2px); border-color: #31545d; }
.dashboard-command-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.35fr) minmax(260px, .78fr); gap: 14px; margin-top: 14px; }
.dashboard-command-grid .panel { min-height: 290px; }
.trend-badge { border: 1px solid #29664b; padding: 5px 8px; background: var(--green-soft); color: var(--green); font-size: 9px; }
.safety-score-body { display: grid; height: calc(100% - 48px); grid-template-columns: 150px 1fr; align-items: center; gap: 20px; }
.safety-gauge { --score: 86; position: relative; display: grid; width: 144px; height: 144px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #1a3039 0); box-shadow: 0 0 36px #41d6c316; }
.safety-gauge::before { content: ""; position: absolute; inset: 12px; border: 1px solid #2c444d; border-radius: 50%; background: var(--surface); }
@@ -222,9 +221,9 @@ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-even
.message-flow { display: grid; min-height: 190px; grid-template-columns: minmax(95px, 1fr) 36px minmax(95px, 1fr) 36px minmax(120px, 1.2fr); align-items: center; gap: 8px; border: 1px solid var(--line); padding: 18px; background: linear-gradient(145deg, #0b1820, #0e222b); }
.flow-node { display: grid; min-height: 100px; align-content: center; justify-items: center; gap: 7px; border: 1px solid #2a4650; padding: 12px; background: #102630c7; text-align: center; }.flow-node > span { color: var(--cyan); font-size: 9px; letter-spacing: .12em; }.flow-node strong { font-size: 11px; }.flow-node small { color: var(--muted); font-size: 8px; line-height: 1.5; }.flow-node.policy { border-color: #37645e; background: #13302f; }.flow-node.channel { min-height: 76px; grid-template-columns: 28px 1fr; justify-items: start; gap: 2px 9px; text-align: left; }.flow-node.channel > span { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: white; font-weight: 800; }.flow-node.channel small { grid-column: 2; }.wechat-dot { background: #20b969; }.feishu-dot { background: #3370ff; }.flow-destinations { display: grid; gap: 9px; }.flow-connector { position: relative; height: 1px; background: #31515b; }.flow-connector::after { content: ""; position: absolute; top: -3px; right: -1px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent var(--cyan); }.flow-foot { display: flex; justify-content: space-between; gap: 15px; padding-top: 12px; color: var(--muted); font-size: 9px; }.flow-foot strong { color: var(--cyan); font-size: 9px; }
.donut-layout { display: grid; height: calc(100% - 45px); align-items: center; justify-items: center; gap: 20px; }
.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--red) 0 45%, var(--cyan) 45% 78%, var(--orange) 78% 100%); }
.risk-donut { position: relative; display: grid; width: 142px; height: 142px; place-items: center; border-radius: 50%; background: conic-gradient(var(--line) 0 100%); }
.risk-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }.risk-donut > div { position: relative; display: grid; justify-items: center; }.risk-donut strong { font-size: 30px; }.risk-donut span { color: var(--muted); font-size: 9px; }
.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }.legend-device { display: inline-block; background: var(--orange); }
.donut-legend { display: grid; width: 100%; gap: 8px; }.donut-legend div { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 7px 0; font-size: 10px; }.donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.donut-legend i { width: 8px; height: 8px; }
.overview-grid-lower { margin-top: 14px; }
/* Messaging robots */