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

CLAUDE.md

@@ -54,9 +54,10 @@ No Go on the host; Node 24 for the frontend.
   `/web-interface` from a real camera. Needs Docker and network access to the
   camera; everything else is in the image it builds. Run it when the WebUI
   changes shape (every few months). It redacts the camera's identity,
-  substitutes a scene over the live player, refuses to open the CGIs that reset
-  or reboot on render, and fails the run rather than installing if anything
-  identifying survives. `tools/webui-gallery/README.md` has the traps.
+  substitutes a scene over every picture from the camera, refuses to open the
+  CGIs that reset or reboot on render, and fails the run rather than installing
+  if anything identifying survives. Look at every capture anyway: the checks
+  read text and DOM, never pixels. `tools/webui-gallery/README.md` has the traps.
 
 ## Deploying
 

data/locales/pages.en.yml

@@ -846,8 +846,14 @@ en:
       step3_title: 'Keep'
       title: 'Video encoding'
     web_interface:
-      intro: 'Every OpenIPC camera serves this interface itself, over its own address — there is no cloud account and no app in between. These are the pages of a camera running a current build.'
-      scene_credit_html: 'The beach in the Camera Preview and Majestic Settings shots is the view from a camera belonging to <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a>, an OpenIPC user, published with permission.'
+      detection_title: 'Person detection and tracking'
+      detection_tracking_html: 'Detections arrive a few times a second, not with every frame, and the video shows what makes that enough: a tracker that keeps each person''s number through the gaps. Here it runs on detections made from the recording at that rate; it is a prototype, not yet in the firmware.'
+      detection_video_caption: 'White flash: a detection arriving, about 2.5 a second. Coloured box and number: the same person, carried between detections. Faces pixelated.'
+      detection_video_label: 'Tracking people between detections, on a recorded street scene'
+      detection_what_html: 'Object detection (<code>objectDetect</code> in the settings) reports people in the picture. Every box goes where motion already goes: drawn over the picture in the browser, into the ONVIF metadata track and the track inside a recording, to pan/tilt following, and out of <code>/api/v1/analytics</code>.'
+      detection_where_html: 'On the GK7205V500, V510 and V530 it is YOLOv8 on the neural accelerator, with the models in the firmware, and it tells people from vehicles and animals (<a href="/news/npu-detection-and-sharper-ptz">more</a>).'
+      intro: 'Every OpenIPC camera serves this interface itself, over its own address — there is no cloud account and no app in between. These are the pages of a camera running a current build: the live picture, recordings played back from the memory card, detection drawn over the picture, and the settings behind them.'
+      scene_credit_html: 'The beach on the Dashboard, Live, Recordings and Camera - Settings shots is the view from a camera belonging to <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a>, an OpenIPC user, published with permission. The Motion detection shot is staged: the street is a frame of the recording in the video below, with faces pixelated, and its three boxes were handed to the interface''s own overlay, because the lab camera''s build carries no person detector.'
       title: Web Interface
     # The one-question strip on / and /get-started (#185). REMOVE AFTER 2027-01.
     why:

data/locales/pages.ru.yml

@@ -884,8 +884,14 @@ ru:
       step3_title: 'Сопровождение'
       title: 'Видеокодирование'
     web_interface:
-      intro: 'Каждая камера с OpenIPC отдаёт этот интерфейс сама, по собственному адресу: ни облачного аккаунта, ни приложения-посредника. Ниже — страницы камеры с актуальной сборкой.'
-      scene_credit_html: 'Пляж на снимках Camera Preview и Majestic Settings — это вид с камеры пользователя OpenIPC <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a>, опубликован с разрешения владельца.'
+      detection_title: 'Детекция и сопровождение людей'
+      detection_tracking_html: 'Детекции приходят несколько раз в секунду, а не с каждым кадром, и видео показывает, почему этого хватает: трекер сохраняет за каждым человеком его номер в промежутках между детекциями. Здесь он работает на детекциях, сделанных по записи с той же частотой; это прототип, в прошивке его пока нет.'
+      detection_video_caption: 'Белая вспышка — пришла детекция, примерно 2,5 раза в секунду. Цветная рамка с номером — тот же человек между детекциями. Лица размыты.'
+      detection_video_label: 'Сопровождение людей между детекциями на записи улицы'
+      detection_what_html: 'Детекция объектов (<code>objectDetect</code> в настройках) сообщает о людях в кадре. Каждая рамка идёт туда же, куда и движение: поверх картинки в браузере, в дорожку метаданных ONVIF и в дорожку внутри записи, в слежение поворотной камеры и в <code>/api/v1/analytics</code>.'
+      detection_where_html: 'На GK7205V500, V510 и V530 это YOLOv8 на нейроускорителе, модели уже лежат в прошивке, и он отличает людей от транспорта и животных (<a href="/news/npu-detection-and-sharper-ptz">подробнее</a>).'
+      intro: 'Каждая камера с OpenIPC отдаёт этот интерфейс сама, по собственному адресу: ни облачного аккаунта, ни приложения-посредника. Ниже — страницы камеры с актуальной сборкой: живая картинка, записи с карты памяти, детекция поверх изображения и настройки за всем этим.'
+      scene_credit_html: 'Пляж на снимках Dashboard, Live, Recordings и Camera - Settings — это вид с камеры пользователя OpenIPC <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a>, опубликован с разрешения владельца. Снимок Motion detection постановочный: улица — кадр из записи в видео ниже, лица размыты, а три рамки переданы собственному оверлею интерфейса, потому что в сборке лабораторной камеры нет детектора людей.'
       title: Веб интерфейс
     why:
       close: "Закрыть"

data/locales/pages.zh.yml

@@ -846,8 +846,14 @@ zh:
       step3_title: '维护'
       title: '视频编码'
     web_interface:
-      intro: '每台运行 OpenIPC 的摄像机都由自身提供这个界面，通过它自己的地址访问：无需云端账户，也不需要任何中间应用。以下是一台运行当前版本固件的摄像机的页面。'
-      scene_credit_html: '“Camera Preview”和“Majestic Settings”截图中的海滩，来自 OpenIPC 用户 <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a> 的摄像机画面，已获授权发布。'
+      detection_title: '人形检测与跟踪'
+      detection_tracking_html: '检测结果每秒到达几次，而不是每一帧都有，视频展示了为什么这已经足够：跟踪器在两次检测之间为每个人保留其编号。这里它运行在以同样频率从录像中得到的检测结果上；它还是一个原型，尚未进入固件。'
+      detection_video_caption: '白色闪烁：一次检测到达，约每秒 2.5 次。彩色框和编号：两次检测之间保持不变的同一个人。人脸已打码。'
+      detection_video_label: '在一段街道录像上，于两次检测之间跟踪行人'
+      detection_what_html: '目标检测（设置中的 <code>objectDetect</code>）报告画面中的人。每个框都会送到运动检测结果已经送达的地方：浏览器中叠加在画面上、ONVIF 元数据轨道和录像内的轨道、云台跟随，以及 <code>/api/v1/analytics</code>。'
+      detection_where_html: '在 GK7205V500、V510 和 V530 上，它是神经网络加速器上的 YOLOv8，模型已内置在固件中，并能区分人、车辆和动物（<a href="/news/npu-detection-and-sharper-ptz">详情</a>）。'
+      intro: '每台运行 OpenIPC 的摄像机都由自身提供这个界面，通过它自己的地址访问：无需云端账户，也不需要任何中间应用。以下是一台运行当前版本固件的摄像机的页面：实时画面、从存储卡回放的录像、叠加在画面上的检测框，以及它们背后的设置。'
+      scene_credit_html: 'Dashboard、Live、Recordings 和 Camera - Settings 截图中的海滩，来自 OpenIPC 用户 <a href="https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706">@usa-</a> 的摄像机画面，已获授权发布。Motion detection 截图是摆拍的：街道是下方视频中录像的一帧，人脸已打码，三个框交由界面自身的叠加层绘制，因为实验室摄像机的固件版本不带人形检测器。'
       title: 页面展示
     why:
       close: "关闭"

data/webui_gallery.yml

@@ -3,14 +3,14 @@
 # One entry per screenshot, in the order the page lays them out. Two things read
 # this file and they must not drift apart:
 #
-#   * app/views/pages/web_interface.html.erb, through WebuiGallery, to build the
-#     tiles;
+#   * the site, through `npm run export -w @openipc/site`, to build the tiles
+#     of frontend/apps/site/src/components/pages/WebInterface.astro;
 #   * tools/webui-gallery, to know which pages of a camera to photograph.
 #
 # Adding a screenshot is therefore one edit here plus a run of the tool. See
 # tools/webui-gallery/README.md.
 #
-#   slug     basename of the pair in app/assets/images/webui/ --
+#   slug     basename of the pair in frontend/apps/site/src/assets/webui/ --
 #            <slug>.webp is the full 2560px capture, <slug>-thumb.webp the tile.
 #   caption  the page's name as the camera prints it -- the word in the nav
 #            bar, prefixed by its menu where it has one, exactly as the page's
@@ -26,19 +26,42 @@
 #            at goes on the public site, so the tool lays a still picture over
 #            the player -- and fails the run if it cannot find one to cover,
 #            rather than quietly photographing the camera's own view when the
-#            WebUI changes shape.
+#            WebUI changes shape. A file name instead of true takes that
+#            picture from tools/webui-gallery/scene/ for this page alone.
+#   analytics  a fixture in tools/webui-gallery/scene/: the boxes of the people
+#            in this page's scene, answered on /ws/analytics in place of the
+#            camera, so the WebUI's own overlay draws them. A staged screen --
+#            the page that shows it says so.
 screens:
   - slug: dashboard
     caption: Dashboard
     cgi: dashboard.cgi
-    settle: 2500
+    # The graphs are drawn from samples the page takes while it is open, over
+    # a two-minute window: shot sooner, they are empty axes.
+    settle: 100000
 
   - slug: live
     caption: Live
     cgi: live.cgi
+    # The pan/tilt pad shows only on a camera with a head to turn, so this one
+    # is shot from such a camera, on its own:
+    #   tools/webui-gallery/run.sh --camera <ptz camera> --only live
     settle: 14000
     scene: true
 
+  - slug: recordings
+    caption: Recordings
+    cgi: recordings.cgi
+    settle: 9000
+    scene: true
+
+  - slug: motion-detection
+    caption: Camera - Settings - Motion detection
+    cgi: camera.cgi?tab=motionDetect
+    settle: 9000
+    scene: street.jpg
+    analytics: street.json
+
   - slug: camera-settings
     caption: Camera - Settings
     cgi: camera.cgi
@@ -55,6 +78,11 @@ screens:
     cgi: config.cgi
     settle: 3000
 
+  - slug: sd-card
+    caption: System - SD Card
+    cgi: sdcard.cgi
+    settle: 4000
+
   - slug: logs
     caption: System - Logs
     cgi: logs.cgi
@@ -89,3 +117,8 @@ screens:
     caption: Services - Telegram
     cgi: telegram.cgi
     settle: 3000
+
+  - slug: openwall
+    caption: Services - OpenWall
+    cgi: openwall.cgi
+    settle: 3000

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

@@ -8,10 +8,15 @@
  * page cannot disagree about what the gallery
  * contains.
  *
- * The two pages with a live player show a beach rather than the bench of
- * cables the lab camera actually faces; see the credit under the grid. The
- * scene is laid over the <video> in the DOM at capture time, the same way the
- * lab's address and MAC are rewritten out of the text.
+ * The pages with a picture from the camera show a beach rather than the
+ * bench of cables the lab camera actually faces; see the credit under the
+ * grid. The scene is laid over the player in the DOM at capture time, the same
+ * way the lab's address and MAC are rewritten out of the text. The motion
+ * detection screen is staged -- a street scene, and person boxes fed to the
+ * WebUI's own overlay -- and the credit says so.
+ *
+ * The tracking video under it is not from the lab camera: rendered from a street
+ * recording with every face pixelated, and served from public/video.
  */
 import Container from '../Container.astro';
 import PageTitle from '../PageTitle.astro';
@@ -34,6 +39,33 @@ const k = (s: string) => t(`pages.web_interface.${s}`);
     </div>
 
     <p class="mt-4 text-sm text-body-secondary lg:w-2/3" set:html={k('scene_credit_html')} />
+
+    <section id="detection" class="mt-12">
+      <h2 class="mb-4 text-2xl">{k('detection_title')}</h2>
+      <div class="grid items-start gap-6 lg:grid-cols-2">
+        <figure class="m-0">
+          <video
+            class="block h-auto w-full rounded-lg border border-hairline bg-black"
+            src="/video/person-tracking.mp4"
+            poster="/video/person-tracking.webp"
+            width="900"
+            height="824"
+            controls
+            muted
+            loop
+            playsinline
+            preload="none"
+            aria-label={k('detection_video_label')}
+          />
+          <figcaption class="mt-2 text-sm text-body-secondary">{k('detection_video_caption')}</figcaption>
+        </figure>
+        <div class="space-y-3 lg:pt-1">
+          <p set:html={k('detection_what_html')} />
+          <p set:html={k('detection_where_html')} />
+          <p set:html={k('detection_tracking_html')} />
+        </div>
+      </div>
+    </section>
   </article>
 </Container>
 

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

@@ -9,6 +9,16 @@
     "caption": "Live",
     "alt": "Live page of the OpenIPC web interface"
   },
+  {
+    "slug": "recordings",
+    "caption": "Recordings",
+    "alt": "Recordings page of the OpenIPC web interface"
+  },
+  {
+    "slug": "motion-detection",
+    "caption": "Camera - Settings - Motion detection",
+    "alt": "Camera - Settings - Motion detection page of the OpenIPC web interface"
+  },
   {
     "slug": "camera-settings",
     "caption": "Camera - Settings",
@@ -24,6 +34,11 @@
     "caption": "Camera - Config file",
     "alt": "Camera - Config file page of the OpenIPC web interface"
   },
+  {
+    "slug": "sd-card",
+    "caption": "System - SD Card",
+    "alt": "System - SD Card page of the OpenIPC web interface"
+  },
   {
     "slug": "logs",
     "caption": "System - Logs",
@@ -58,5 +73,10 @@
     "slug": "telegram",
     "caption": "Services - Telegram",
     "alt": "Services - Telegram page of the OpenIPC web interface"
+  },
+  {
+    "slug": "openwall",
+    "caption": "Services - OpenWall",
+    "alt": "Services - OpenWall page of the OpenIPC web interface"
   }
 ]

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

@@ -1044,8 +1044,14 @@
       "title": "Video encoding"
     },
     "web_interface": {
-      "intro": "Every OpenIPC camera serves this interface itself, over its own address — there is no cloud account and no app in between. These are the pages of a camera running a current build.",
-      "scene_credit_html": "The beach in the Camera Preview and Majestic Settings shots is the view from a camera belonging to <a href=\"https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706\">@usa-</a>, an OpenIPC user, published with permission.",
+      "detection_title": "Person detection and tracking",
+      "detection_tracking_html": "Detections arrive a few times a second, not with every frame, and the video shows what makes that enough: a tracker that keeps each person's number through the gaps. Here it runs on detections made from the recording at that rate; it is a prototype, not yet in the firmware.",
+      "detection_video_caption": "White flash: a detection arriving, about 2.5 a second. Coloured box and number: the same person, carried between detections. Faces pixelated.",
+      "detection_video_label": "Tracking people between detections, on a recorded street scene",
+      "detection_what_html": "Object detection (<code>objectDetect</code> in the settings) reports people in the picture. Every box goes where motion already goes: drawn over the picture in the browser, into the ONVIF metadata track and the track inside a recording, to pan/tilt following, and out of <code>/api/v1/analytics</code>.",
+      "detection_where_html": "On the GK7205V500, V510 and V530 it is YOLOv8 on the neural accelerator, with the models in the firmware, and it tells people from vehicles and animals (<a href=\"/news/npu-detection-and-sharper-ptz\">more</a>).",
+      "intro": "Every OpenIPC camera serves this interface itself, over its own address — there is no cloud account and no app in between. These are the pages of a camera running a current build: the live picture, recordings played back from the memory card, detection drawn over the picture, and the settings behind them.",
+      "scene_credit_html": "The beach on the Dashboard, Live, Recordings and Camera - Settings shots is the view from a camera belonging to <a href=\"https://github.com/OpenIPC/majestic/issues/300#issuecomment-5405996706\">@usa-</a>, an OpenIPC user, published with permission. The Motion detection shot is staged: the street is a frame of the recording in the video below, with faces pixelated, and its three boxes were handed to the interface's own overlay, because the lab camera's build carries no person detector.",
       "title": "Web Interface"
     },
     "why": {