Merge b5a360be39 into cbf6d032cb

* add optional docs link to config field messages

* docs tweaks

* add field messages for model dimensions

docs/docs/configuration/object_detectors.md

@@ -73,6 +73,22 @@ This does not affect using hardware for accelerating other tasks such as [semant
 
 :::
 
+### Choosing a model size
+
+Along with picking a detector for your hardware, you will choose a model's **input resolution** (such as `320x320` or `640x640`) and, for model families like YOLOv9, a **variant size** (`tiny`, `small`, etc.). Both affect the balance between accuracy and the inference time your hardware can sustain.
+
+**Resolution (320x320 vs 640x640):** Frigate is optimized for `320x320` models, and `320x320` is the best choice for the vast majority of setups. Frigate is specifically designed to compensate for the smaller model by cropping a region of motion from the full frame and zooming into it before running detection, so a `320x320` model is actually _better_ at small and distant objects — not worse. A `640x640` model is slower and uses more resources, and its main benefit is fitting more objects into a single inference when many objects are spread across a large area. Recent versions of Frigate have improved support for `640x640` models, but `320x320` remains the recommended starting point for nearly all setups.
+
+**Variant size (tiny/small/medium):** Larger variants are gradually more accurate but slower. Whether the difference is noticeable depends on your specific cameras and scenes. A good rule of thumb is to use the largest model your hardware can run without skipping detections, which you can monitor on the <NavPath path="System > Metrics > Cameras" /> page in the UI — better accuracy only helps if your detector keeps up with the detection load across all cameras.
+
+**Acceptable inference time depends on your hardware.** Inference time alone does not tell the whole story, because different hardware has different capacity. A GPU can run multiple instances of the same model concurrently, so an inference time around 30ms can still keep up with several cameras. A Google Coral runs only a single instance of the model, so it needs a much lower inference time (around 10ms) to keep up.
+
+:::tip
+
+The best detection accuracy comes from a model trained on images that look like what Frigate actually sees — security camera footage cropped to regions of interest. You can train or fine-tune your own model on images like this and run it as a custom model (see the per-detector sections below), but [Frigate+](/plus) makes this much easier by handling the training for you on images submitted from your own cameras. For YOLOv9, the `s` (small) variant at `320x320` resolution is a good place to start.
+
+:::
+
 # Officially Supported Detectors
 
 Frigate provides a number of builtin detector types. By default, Frigate will use a single CPU detector. Other detectors may require additional configuration as described below. When using multiple detectors they will run in dedicated processes, but pull from a common queue of detection requests from across all cameras.

docs/docs/usage/history.md

@@ -29,7 +29,7 @@ If you see **"No recordings found for this time"**, the most common causes are:
 
 A toggle (a drawer on mobile) switches the side panel between three modes:
 
-- **Timeline** — a scrubbable vertical timeline of the selected camera, annotated with a motion line, review-item markers, and gaps where no recording exists.
+- **Timeline** — a scrubbable vertical timeline of the selected camera. Horizontal lines down the center represent motion, with longer lines indicating more motion at that moment. Review items are marked as shaded areas (**red** for alerts, **orange** for detections), and sections with no colored background are times when no recording exists.
 - **Events** — a scrollable list of the camera's review items for the time range; clicking one seeks the player to it.
 - **Detail** — the [tracking details inspector](#the-detail-view) for the objects in view.
 

frigate/output/birdseye.py

@@ -595,112 +595,92 @@ class BirdsEyeFrameManager:
     ) -> Optional[list[list[Any]]]:
         """Calculate the optimal layout for 2+ cameras."""
 
-        def map_layout(
-            camera_layout: list[list[Any]], row_height: int
-        ) -> tuple[int, int, Optional[list[list[Any]]]]:
-            """Map the calculated layout."""
-            candidate_layout = []
-            starting_x = 0
-            x = 0
-            max_width = 0
-            y = 0
+        def find_available_x(
+            current_x: int,
+            width: int,
+            reserved_ranges: list[tuple[int, int]],
+            max_width: int,
+        ) -> Optional[int]:
+            """Find the first horizontal slot that does not collide with reservations."""
+            x = current_x
 
-            for row in camera_layout:
-                final_row = []
-                max_width = max(max_width, x)
-                x = starting_x
-                for cameras in row:
-                    camera_dims = self.cameras[cameras[0]]["dimensions"].copy()
-                    camera_aspect = cameras[1]
+            for reserved_start, reserved_end in sorted(reserved_ranges):
+                if x >= reserved_end:
+                    continue
 
-                    if camera_dims[1] > camera_dims[0]:
-                        scaled_height = int(row_height * 2)
-                        scaled_width = int(scaled_height * camera_aspect)
-                        starting_x = scaled_width
-                    else:
-                        scaled_height = row_height
-                        scaled_width = int(scaled_height * camera_aspect)
+                if x + width <= reserved_start:
+                    return x
 
-                    # layout is too large
-                    if (
-                        x + scaled_width > self.canvas.width
-                        or y + scaled_height > self.canvas.height
-                    ):
-                        return x + scaled_width, y + scaled_height, None
+                x = max(x, reserved_end)
 
-                    final_row.append((cameras[0], (x, y, scaled_width, scaled_height)))
-                    x += scaled_width
+            if x + width <= max_width:
+                return x
 
-                y += row_height
-                candidate_layout.append(final_row)
-
-            if max_width == 0:
-                max_width = x
-
-            return max_width, y, candidate_layout
-
-        canvas_aspect_x, canvas_aspect_y = self.canvas.get_aspect(coefficient)
-        camera_layout: list[list[Any]] = []
-        camera_layout.append([])
-        starting_x = 0
-        x = starting_x
-        y = 0
-        y_i = 0
-        max_y = 0
-        for camera in cameras_to_add:
-            camera_dims = self.cameras[camera]["dimensions"].copy()
-            camera_aspect_x, camera_aspect_y = self.canvas.get_camera_aspect(
-                camera, camera_dims[0], camera_dims[1]
-            )
-
-            if camera_dims[1] > camera_dims[0]:
-                portrait = True
-            else:
-                portrait = False
-
-            if (x + camera_aspect_x) <= canvas_aspect_x:
-                # insert if camera can fit on current row
-                camera_layout[y_i].append(
-                    (
-                        camera,
-                        camera_aspect_x / camera_aspect_y,
-                    )
-                )
-
-                if portrait:
-                    starting_x = camera_aspect_x
-                else:
-                    max_y = max(
-                        max_y,
-                        camera_aspect_y,
-                    )
-
-                x += camera_aspect_x
-            else:
-                # move on to the next row and insert
-                y += max_y
-                y_i += 1
-                camera_layout.append([])
-                x = starting_x
-
-                if x + camera_aspect_x > canvas_aspect_x:
-                    return None
-
-                camera_layout[y_i].append(
-                    (
-                        camera,
-                        camera_aspect_x / camera_aspect_y,
-                    )
-                )
-                x += camera_aspect_x
-
-        if y + max_y > canvas_aspect_y:
             return None
 
-        row_height = int(self.canvas.height / coefficient)
-        total_width, total_height, standard_candidate_layout = map_layout(
-            camera_layout, row_height
-        )
+        def map_layout(row_height: int) -> tuple[int, int, Optional[list[list[Any]]]]:
+            """Lay out cameras row by row while reserving portrait spans for the next row."""
+            candidate_layout: list[list[Any]] = []
+            reserved_ranges: dict[int, list[tuple[int, int]]] = {}
+            current_row: list[Any] = []
+            row_index = 0
+            row_y = 0
+            row_x = 0
+            max_width = 0
+            max_height = 0
+
+            for camera in cameras_to_add:
+                camera_dims = self.cameras[camera]["dimensions"].copy()
+                camera_aspect_x, camera_aspect_y = self.canvas.get_camera_aspect(
+                    camera, camera_dims[0], camera_dims[1]
+                )
+                portrait = camera_dims[1] > camera_dims[0]
+                scaled_height = row_height * 2 if portrait else row_height
+                scaled_width = int(scaled_height * (camera_aspect_x / camera_aspect_y))
+
+                while True:
+                    x = find_available_x(
+                        row_x,
+                        scaled_width,
+                        reserved_ranges.get(row_index, []),
+                        self.canvas.width,
+                    )
+
+                    if x is not None and row_y + scaled_height <= self.canvas.height:
+                        current_row.append(
+                            (camera, (x, row_y, scaled_width, scaled_height))
+                        )
+                        row_x = x + scaled_width
+                        max_width = max(max_width, row_x)
+                        max_height = max(max_height, row_y + scaled_height)
+
+                        if portrait:
+                            reserved_ranges.setdefault(row_index + 1, []).append(
+                                (x, row_x)
+                            )
+
+                        break
+
+                    if current_row:
+                        candidate_layout.append(current_row)
+                        current_row = []
+
+                    row_index += 1
+                    row_y = row_index * row_height
+                    row_x = 0
+
+                    if row_y + scaled_height > self.canvas.height:
+                        overflow_width = max(max_width, scaled_width)
+                        overflow_height = row_y + scaled_height
+                        return overflow_width, overflow_height, None
+
+            if current_row:
+                candidate_layout.append(current_row)
+
+            return max_width, max_height, candidate_layout
+
+        row_height = max(1, int(self.canvas.height / coefficient))
+        total_width, total_height, standard_candidate_layout = map_layout(row_height)
 
         if not standard_candidate_layout:
             # if standard layout didn't work
@@ -709,9 +689,9 @@ class BirdsEyeFrameManager:
                 total_width / self.canvas.width,
                 total_height / self.canvas.height,
             )
-            row_height = int(row_height / scale_down_percent)
+            row_height = max(1, int(row_height / scale_down_percent))
             total_width, total_height, standard_candidate_layout = map_layout(
-                camera_layout, row_height
+                row_height
             )
 
             if not standard_candidate_layout:
@@ -725,8 +705,8 @@ class BirdsEyeFrameManager:
             1 / (total_width / self.canvas.width),
             1 / (total_height / self.canvas.height),
         )
-        row_height = int(row_height * scale_up_percent)
-        _, _, scaled_layout = map_layout(camera_layout, row_height)
+        row_height = max(1, int(row_height * scale_up_percent))
+        _, _, scaled_layout = map_layout(row_height)
 
         if scaled_layout:
             return scaled_layout

frigate/test/test_birdseye.py

@@ -1,11 +1,64 @@
-"""Test camera user and password cleanup."""
+"""Tests for Birdseye canvas sizing and layout behavior."""
 
 import unittest
+from multiprocessing import Event
 
-from frigate.output.birdseye import get_canvas_shape
+from frigate.config import FrigateConfig
+from frigate.output.birdseye import BirdsEyeFrameManager, get_canvas_shape
 
 
 class TestBirdseye(unittest.TestCase):
+    def _build_manager(
+        self, camera_dimensions: dict[str, tuple[int, int]]
+    ) -> BirdsEyeFrameManager:
+        config = {
+            "mqtt": {"host": "mqtt"},
+            "birdseye": {"width": 1280, "height": 720},
+            "cameras": {},
+        }
+
+        for order, (camera, dimensions) in enumerate(
+            camera_dimensions.items(), start=1
+        ):
+            config["cameras"][camera] = {
+                "ffmpeg": {
+                    "inputs": [
+                        {
+                            "path": f"rtsp://10.0.0.1:554/{camera}",
+                            "roles": ["detect"],
+                        }
+                    ]
+                },
+                "detect": {
+                    "width": dimensions[0],
+                    "height": dimensions[1],
+                    "fps": 5,
+                },
+                "birdseye": {"order": order},
+            }
+
+        return BirdsEyeFrameManager(FrigateConfig(**config), Event())
+
+    def _assert_no_overlaps(
+        self, layout: list[list[tuple[str, tuple[int, int, int, int]]]]
+    ):
+        rectangles = [position for row in layout for _, position in row]
+
+        for index, rect in enumerate(rectangles):
+            x1, y1, width1, height1 = rect
+            for other in rectangles[index + 1 :]:
+                x2, y2, width2, height2 = other
+                overlap = (
+                    x1 < x2 + width2
+                    and x2 < x1 + width1
+                    and y1 < y2 + height2
+                    and y2 < y1 + height1
+                )
+                self.assertFalse(
+                    overlap,
+                    msg=f"Overlapping rectangles found: {rect} and {other}",
+                )
+
     def test_16x9(self):
         """Test 16x9 aspect ratio works as expected for birdseye."""
         width = 1280
@@ -45,3 +98,104 @@ class TestBirdseye(unittest.TestCase):
         canvas_width, canvas_height = get_canvas_shape(width, height)
         assert canvas_width == width  # width will be the same
         assert canvas_height != height
+
+    def test_portrait_camera_does_not_overlap_next_row(self):
+        """Portrait cameras should reserve their real horizontal position on the next row."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_b": (1280, 720),
+                "cam_c": (640, 480),
+            }
+        )
+
+        layout = manager.calculate_layout(["cam_a", "cam_p", "cam_b", "cam_c"], 3)
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_c = [
+            position for row in layout for camera, position in row if camera == "cam_c"
+        ][0]
+        self.assertEqual(cam_c[0], 0)
+
+    def test_portrait_reservation_only_applies_to_next_row(self):
+        """Portrait reservations should not push later rows after the span ends."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_b": (1280, 720),
+                "cam_c": (1280, 720),
+                "cam_d": (1280, 720),
+                "cam_e": (1280, 720),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_p", "cam_b", "cam_c", "cam_d", "cam_e"],
+            3,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_e = [
+            position for row in layout for camera, position in row if camera == "cam_e"
+        ][0]
+        self.assertEqual(cam_e[0], 0)
+
+    def test_multiple_portraits_reserve_distinct_ranges(self):
+        """Multiple portrait cameras in one row should reserve separate spans below them."""
+        manager = self._build_manager(
+            {
+                "cam_a": (640, 480),
+                "cam_p1": (360, 640),
+                "cam_p2": (360, 640),
+                "cam_b": (640, 480),
+                "cam_c": (1280, 720),
+                "cam_d": (640, 480),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_p1", "cam_p2", "cam_b", "cam_c", "cam_d"],
+            4,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+    def test_two_landscapes_then_portrait_then_two_landscapes(self):
+        """A portrait after two landscapes should reserve only its own tail span."""
+        manager = self._build_manager(
+            {
+                "cam_a": (1280, 720),
+                "cam_b": (1280, 720),
+                "cam_p": (360, 640),
+                "cam_c": (1280, 720),
+                "cam_d": (1280, 720),
+            }
+        )
+
+        layout = manager.calculate_layout(
+            ["cam_a", "cam_b", "cam_p", "cam_c", "cam_d"],
+            3,
+        )
+
+        self.assertIsNotNone(layout)
+        assert layout is not None
+        self._assert_no_overlaps(layout)
+
+        cam_c = [
+            position for row in layout for camera, position in row if camera == "cam_c"
+        ][0]
+        cam_d = [
+            position for row in layout for camera, position in row if camera == "cam_d"
+        ][0]
+        self.assertEqual(cam_c[0], 0)
+        self.assertEqual(cam_d[0], cam_c[0] + cam_c[2])

web/public/locales/en/views/settings.json

@@ -1924,6 +1924,10 @@
       "resolutionHigh": "This detect resolution is higher than recommended and may cause increased resource usage without improving detection accuracy. A detect resolution at or below 1080p is recommended for most cameras.",
       "globalResolutionMultipleCameras": "A global detect resolution is set while multiple cameras are configured. Unless all cameras share the same resolution and aspect ratio, the detect width and height should be defined per camera to match each camera's native aspect ratio."
     },
+    "model": {
+      "optimizedFor320": "Frigate is optimized for a 320x320 model, which is the best choice for most setups. A 640x640 model is slower and only helps in specific scenarios.",
+      "inputDimensionsNotDetectResolution": "Model input width and height are the input dimensions of the object detection model, not your camera's detect resolution. They should match the dimensions of the model you're using — typically a square size like 320x320 or 640x640."
+    },
     "ffmpeg": {
       "hwaccelManualNotRecommended": "Manual hardware acceleration arguments are not recommended. Unless a specific requirement exists, select the preset that matches your hardware."
     },

web/src/components/config-form/ConfigFieldMessage.tsx

@@ -1,6 +1,13 @@
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { LuInfo, LuTriangleAlert, LuCircleAlert } from "react-icons/lu";
+import {
+  LuInfo,
+  LuTriangleAlert,
+  LuCircleAlert,
+  LuExternalLink,
+} from "react-icons/lu";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 import type { MessageSeverity } from "./section-configs/types";
 
 const severityVariantMap: Record<
@@ -28,13 +35,18 @@ function SeverityIcon({ severity }: { severity: string }) {
 type ConfigFieldMessageProps = {
   messageKey: string;
   severity: string;
+  values?: Record<string, unknown>;
+  docLink?: string;
 };
 
 export function ConfigFieldMessage({
   messageKey,
   severity,
+  values,
+  docLink,
 }: ConfigFieldMessageProps) {
-  const { t } = useTranslation("views/settings");
+  const { t } = useTranslation(["views/settings", "common"]);
+  const { getLocaleDocUrl } = useDocDomain();
 
   return (
     <Alert
@@ -42,7 +54,22 @@ export function ConfigFieldMessage({
       className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2"
     >
       <SeverityIcon severity={severity} />
-      <AlertDescription>{t(messageKey)}</AlertDescription>
+      <AlertDescription>
+        <div className="flex flex-col gap-1">
+          <span>{t(messageKey, values)}</span>
+          {docLink && (
+            <Link
+              to={getLocaleDocUrl(docLink)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center underline"
+            >
+              {t("readTheDocumentation", { ns: "common" })}
+              <LuExternalLink className="ml-2 inline-flex size-3" />
+            </Link>
+          )}
+        </div>
+      </AlertDescription>
     </Alert>
   );
 }

web/src/components/config-form/section-configs/model.ts

@@ -3,6 +3,39 @@ import type { SectionConfigOverrides } from "./types";
 const model: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/object_detectors#model",
+    fieldMessages: [
+      {
+        key: "model-optimized-for-320",
+        field: "width",
+        position: "before",
+        messageKey: "configMessages.model.optimizedFor320",
+        severity: "info",
+        docLink: "/configuration/object_detectors#choosing-a-model-size",
+        condition: (ctx) => {
+          const width = ctx.formData?.width as number | null | undefined;
+          const height = ctx.formData?.height as number | null | undefined;
+          return width === 640 || height === 640;
+        },
+      },
+      {
+        key: "model-input-dimensions-not-detect-resolution",
+        field: "height",
+        position: "after",
+        messageKey: "configMessages.model.inputDimensionsNotDetectResolution",
+        severity: "warning",
+        condition: (ctx) => {
+          const width = ctx.formData?.width as number | null | undefined;
+          const height = ctx.formData?.height as number | null | undefined;
+          if (typeof width !== "number" || typeof height !== "number") {
+            return false;
+          }
+          if (width <= 0 || height <= 0) {
+            return false;
+          }
+          return width > 640 || height > 640;
+        },
+      },
+    ],
     restartRequired: [
       "path",
       "labelmap_path",

web/src/components/config-form/section-configs/types.ts

@@ -26,6 +26,8 @@ export type ConditionalMessage = {
   condition: (ctx: MessageConditionContext) => boolean;
   /** Optional interpolation values passed to t() for {{var}} substitution */
   values?: Record<string, unknown>;
+  /** Optional documentation path (e.g. "/configuration/object_detectors#model"). */
+  docLink?: string;
 };
 
 /** Field-level conditional message, adds field targeting */

web/src/components/config-form/theme/templates/FieldTemplate.tsx

@@ -406,6 +406,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
             key={m.key}
             messageKey={m.messageKey}
             severity={m.severity}
+            values={m.values}
+            docLink={m.docLink}
           />
         ))}
       </div>
@@ -418,6 +420,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
             key={m.key}
             messageKey={m.messageKey}
             severity={m.severity}
+            values={m.values}
+            docLink={m.docLink}
           />
         ))}
       </div>