Web interface: recordings, people in boxes, and a tracking video

[openipc-ai]

Maintainers asked for the site to show what the WebUI does now — playback from the card, people detected in a box — so a sceptic can be sent a link rather than an argument.

What changes on /web-interface

• Gallery reshot from the lab hi3516av300 on WebUI master 25daa80, firmware master+2061035.
• New tiles: Recordings, Camera - Settings - Motion detection (person boxes), SD Card, OpenWall. WireGuard/Raw left out (empty form / needs a DNG frame).
• New section Person detection and tracking: a 17 s video (1.9 MB, public/video/), what object detection reports and where the boxes go, in en/ru/zh. Only what is already public (WebUI, the 2026-10-09 news post) is stated.

Honesty and privacy

• The motion-detection tile is staged and the page says so: the lab build has no person detector, so a street frame is the picture and its three boxes are fed to the WebUI's own overlay through a mocked /ws/analytics.
• The video runs a tracker prototype on detections made from a recording at a few per second; the page says that too. Boxes burned into the source were inpainted out; every head is pixelated on every frame, including the stretch behind the tree where the reference tracks lose a person (hand-read keyframes, checked frame by frame).

Gallery tool fixes (found by looking at the captures)

• Dashboard snapshot tile showed the lab's real view → scene now covers every camera picture, and the run fails if any is left uncovered before the shutter.
• Logs printed public IPv4 (WebRTC reflexive address, remote candidates) → rewritten to 203.0.113.10 and audited; selftest covers it.
• Scene inserted beside the player so overlays draw over it; sign-in landing page no longer assumed; per-screen scene, analytics, click; camera crash notice hidden for the shutter.

Checked: frontend lint, typecheck, npm test (893) green; gallery selftest + verify clean; every capture reviewed by eye.

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Refresh WebUI gallery with playback, detection, and tracking video

✨ Enhancement 🐞 Bug fix 🧪 Tests 📝 Documentation 🕐 40+ Minutes

AI Description

• Refresh the WebUI gallery to show card playback, motion detection, SD Card, and OpenWall.

Diagram

graph TD
  M["Gallery manifest"] --> X["Gallery capture"] --> A["Screenshot assets"] --> S["Web interface page"]
  M --> J["Site gallery JSON"] --> S
  F["Scene and analytics"] --> X
  R["Privacy safeguards"] --> X
  V["Tracking video"] --> S

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Generate the entire gallery from a simulated WebUI

• ➕ Reproducible captures without camera access or camera-image privacy risk.
• ➖ Screenshots could diverge from the interface maintainers want to demonstrate.
• ➖ Requires maintaining a broader simulation of the WebUI.

Recommendation: Keep the real-camera gallery with a narrowly staged detection screen: it preserves evidence of the current interface while disclosing what is simulated. The new fail-closed image checks and public-address redaction are important safeguards; synthetic captures would trade that operational risk for ongoing fidelity risk.

Files changed (18) +414 / -63

Enhancement (3) +93 / -8

webui_gallery.ymlAdd four screens and capture fixtures to the gallery manifest +37/-4

Add four screens and capture fixtures to the gallery manifest

• Adds Recordings, Motion detection, SD Card, and OpenWall. Specifies a day-navigation click for Recordings and a dedicated street scene and analytics fixture for the staged detection screen.

data/webui_gallery.yml

WebInterface.astroEmbed a person-tracking demonstration beneath the gallery +36/-4

Embed a person-tracking demonstration beneath the gallery

• Adds a localized detection section with a controlled, muted video, poster, caption, and explanation. Documents the gallery's scene substitution and the staged detection capture.

frontend/apps/site/src/components/pages/WebInterface.astro

webui-gallery.jsonExpose the new gallery tiles to the site +20/-0

Expose the new gallery tiles to the site

• Adds exported tile metadata for Recordings, Motion detection, SD Card, and OpenWall so the site renders the manifest's new screens.

frontend/apps/site/src/data/webui-gallery.json

Bug fix (3) +183 / -25

redact.jsRedact public IPv4 addresses in camera pages +40/-5

Redact public IPv4 addresses in camera pages

• Replaces public IPv4 addresses, including WebRTC log candidates, with a documentation address and reports any survivors. Preserves documentation ranges and dotted-quad firmware versions.

tools/webui-gallery/redact.js

session.jsAccept changed sign-in destinations and prepare page routes +8/-2

Accept changed sign-in destinations and prepare page routes

• Stops assuming sign-in lands on status.cgi. Allows capture-specific routes to be installed before navigation so the analytics socket can be mocked.

tools/webui-gallery/session.js

shoot.jsCover and audit camera pictures before each capture +135/-18

Cover and audit camera pictures before each capture

• Substitutes scenes for players and camera images, then rejects visible pictures left uncovered before the shutter. Adds per-screen scene and analytics fixtures, post-load clicks, and capture-time hiding of camera-specific crash notices.

tools/webui-gallery/shoot.js

Tests (2) +22 / -0

pages.build.test.tsCheck playback, detection, and video in every locale +15/-0

Check playback, detection, and video in every locale

• Asserts that all three built language variants include both requested gallery tiles and the tracking video's source and poster.

frontend/apps/site/src/lib/pages.build.test.ts

selftest.jsTest public-address auditing and version exceptions +7/-0

Test public-address auditing and version exceptions

• Checks detection of a public WebRTC address while allowing the replacement address, firmware version, and multicast address.

tools/webui-gallery/selftest.js

Documentation (6) +91 / -24

CLAUDE.mdClarify gallery privacy requirements +4/-3

Clarify gallery privacy requirements

• States that replacement scenes must cover every camera picture, not just live players, and that captures still need visual review because automated checks cannot inspect pixels.

CLAUDE.md

pages.en.ymlAdd English playback and detection copy +8/-2

Add English playback and detection copy

• Expands the gallery introduction and credits the staged detection image. Adds explanatory text, captions, and labeling for the tracking video and detector capabilities.

data/locales/pages.en.yml

pages.ru.ymlAdd Russian playback and detection copy +8/-2

Add Russian playback and detection copy

• Provides the Russian gallery introduction, staged-image disclosure, and detection and tracking section text.

data/locales/pages.ru.yml

pages.zh.ymlAdd Chinese playback and detection copy +8/-2

Add Chinese playback and detection copy

• Provides the Chinese gallery introduction, staged-image disclosure, and detection and tracking section text.

data/locales/pages.zh.yml

README.mdDocument expanded scene coverage and staged captures +47/-14

Document expanded scene coverage and staged captures

• Explains camera-picture checks, public IPv4 redaction, and how the motion-detection scene and mocked analytics produce a disclosed staged screenshot. Documents the per-screen click option and the need to inspect captures visually.

tools/webui-gallery/README.md

CREDIT.mdDocument scene provenance and face-privacy precautions +16/-1

Document scene provenance and face-privacy precautions

• Extends beach-scene coverage notes to all camera pictures. Records the street frame and box fixture's provenance and cautions that replacement footage needs frame-by-frame face review.

tools/webui-gallery/scene/CREDIT.md

Other (4) +25 / -6

en.jsonExport English detection translations +8/-2

Export English detection translations

• Adds the English detection, video, and disclosure strings used by the rendered site.

frontend/apps/site/src/i18n/en.json

ru.jsonExport Russian detection translations +8/-2

Export Russian detection translations

• Adds the Russian detection, video, and disclosure strings used by the rendered site.

frontend/apps/site/src/i18n/ru.json

zh.jsonExport Chinese detection translations +8/-2

Export Chinese detection translations

• Adds the Chinese detection, video, and disclosure strings used by the rendered site.

frontend/apps/site/src/i18n/zh.json

street.jsonSupply boxes for the staged street frame +1/-0

Supply boxes for the staged street frame

• Defines the street image dimensions and three person boxes used to feed the WebUI's analytics overlay during capture.

tools/webui-gallery/scene/street.json

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Gallery viewers see unredacted addresses ✓ Resolved

Description

redactInPage treats any public address followed by a hyphen and letter as a firmware version, and
survivors makes the same exception. If a displayed log entry contains an address such as
8.8.8.8-relay, both checks accept it and the address can reach the published screenshot.

Code

tools/webui-gallery/redact.js[104]

+      if (new RegExp(cfg.versionTail[0], cfg.versionTail[1]).test(all.slice(at + m.length))) return m;

Evidence

The new suffix test returns a public address unchanged before replacement, while the survivor audit
skips the same match. The capture proceeds when that audit returns no findings; the gallery
documentation identifies displayed WebRTC log addresses as data the tool must redact.

tools/webui-gallery/redact.js[27-29]
tools/webui-gallery/redact.js[98-105]
tools/webui-gallery/redact.js[171-187]
tools/webui-gallery/shoot.js[259-271]
tools/webui-gallery/README.md[69-77]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The public-address redactor and survivor audit exempt every dotted quad followed by `-<letter>`, not just firmware versions. A suffixed public address can therefore pass both checks and appear in a gallery capture.
## Fix Focus Areas
- tools/webui-gallery/redact.js[27-29]
- tools/webui-gallery/redact.js[98-105]
- tools/webui-gallery/redact.js[171-187]
- tools/webui-gallery/selftest.js[60-66]
## Recommended Fix
Recognize firmware versions using their surrounding firmware-field context rather than the suffix alone, and apply that rule consistently in redaction and survivor detection. Add a test that preserves the firmware version but flags a suffixed public address.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Tip of the day

💡 Did you know, you can commit Qodo's fix in one click with committable suggestions (GitHub & GitLab)

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗