administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge detector and model in settings UI (#23216)

Browse Source 
* add embedded mode to BaseSection so parents can host the save action

* add optional action slot to current Frigate+ model summary

* add w-full to action slot flex wrapper for explicit width contract

* i18n

* merged detectors and model settings view

* fix document title

* Embed detector form in merged settings view

* add detection model card with tabs and custom model embed

* add Frigate+ model selector with filter popover to merged page

* Add mismatch banner and gate save on detector and model compatibility

* Wire atomic save, restart toast, and undo on detectors and model page

* Clear child pending data on undo

* route merged detectors and model view in settings

* trim Frigate+ page to account-only and remove old detection model view

* basic e2e

* Fix unsaved-changes guard, custom path leak, and post-failure cache resync

* Rename to Detectors and model, float Modified badge, use ConfigMessageBanner for mismatch

* Hide Plus/Custom tabs when Frigate+ is not enabled

* Detect active Plus model via model.plus.id instead of path prefix

* Sync state back to snapshot when child form un-modifies and remount on undo

* Always require restart on save since model changes also need one

* Wrap Frigate+ model selector in SplitCardRow with label and description

* rename tab

* update docs

* sync top-level model with default detector's resolved model

when the user doesn't define a top-level `model:` block, `FrigateConfig.model` stayed at pydantic field defaults (320×320, /labelmap.txt) while the per-detector model picked up `DEFAULT_MODEL` for openvino on cpu (300×300, coco_91cl_bkgr.txt introduced in #23127), causing `RemoteObjectDetector` to fail with "buffer is too small for requested array" because the SHM was sized from the per-detector model but mapped using the top-level one. After the detector loop, copy the first detector's resolved model up to `self.model` so both sides agree on dimensions and labelmap

* revert to cpu detector by default

use openvino cpu for new configs only

* add defaults
This commit is contained in:
Josh Hawkins 2026-05-17 12:54:21 -05:00 committed by GitHub
parent b712e1fbd9
commit 7413ce08d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 1107 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/configuration/advanced.md
View File

@ -172,7 +172,7 @@ Custom models may also require different input tensor formats. The colorspace co
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detection model" /> to configure the model path, dimensions, and input format. Navigate to <NavPath path="Settings > System > Detectors and model" /> and open the **Custom Model** tab to configure the model path, dimensions, and input format.
| Field | Description | | Field | Description |
| --------------------------------------------- | ------------------------------------ | | --------------------------------------------- | ------------------------------------ |

8
docs/docs/configuration/index.md
View File

@ -110,7 +110,7 @@ Here are some common starter configuration examples. These can be configured thr
1. Navigate to <NavPath path="Settings > System > MQTT" /> and configure the MQTT connection to your Home Assistant Mosquitto broker 1. Navigate to <NavPath path="Settings > System > MQTT" /> and configure the MQTT connection to your Home Assistant Mosquitto broker
2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Raspberry Pi (H.264)` 2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `Raspberry Pi (H.264)`
3. Navigate to <NavPath path="Settings > System > Detector hardware" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb` 3. Navigate to <NavPath path="Settings > System > Detectors and model" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb`
4. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion` 4. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion`
5. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30` 5. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30`
6. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL 6. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL
@ -189,7 +189,7 @@ cameras:
1. Navigate to <NavPath path="Settings > System > MQTT" /> and set **Enable MQTT** to off 1. Navigate to <NavPath path="Settings > System > MQTT" /> and set **Enable MQTT** to off
2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)` 2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`
3. Navigate to <NavPath path="Settings > System > Detector hardware" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb` 3. Navigate to <NavPath path="Settings > System > Detectors and model" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb`
4. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion` 4. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion`
5. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30` 5. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30`
6. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL 6. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL
@ -266,8 +266,8 @@ cameras:
1. Navigate to <NavPath path="Settings > System > MQTT" /> and configure the connection to your MQTT broker 1. Navigate to <NavPath path="Settings > System > MQTT" /> and configure the connection to your MQTT broker
2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)` 2. Navigate to <NavPath path="Settings > Global configuration > FFmpeg" /> and set **Hardware acceleration arguments** to `VAAPI (Intel/AMD GPU)`
3. Navigate to <NavPath path="Settings > System > Detector hardware" /> and add a detector with **Type** `openvino` and **Device** `AUTO` 3. Navigate to <NavPath path="Settings > System > Detectors and model" /> and add a detector with **Type** `openvino` and **Device** `AUTO`
4. Navigate to <NavPath path="Settings > System > Detection model" /> and configure the OpenVINO model path and settings 4. On the same page, in the **Custom Model** tab, configure the OpenVINO model path and settings
5. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion` 5. Navigate to <NavPath path="Settings > Global configuration > Recording" /> and set **Enable recording** to on, **Motion retention > Retention days** to `7`, **Alert retention > Event retention > Retention days** to `30`, **Alert retention > Event retention > Retention mode** to `motion`, **Detection retention > Event retention > Retention days** to `30`, **Detection retention > Event retention > Retention mode** to `motion`
6. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30` 6. Navigate to <NavPath path="Settings > Global configuration > Snapshots" /> and set **Enable snapshots** to on, **Snapshot retention > Default retention** to `30`
7. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL 7. Navigate to <NavPath path="Settings > Camera configuration > Management" /> and add your camera with the appropriate RTSP stream URL

86
docs/docs/configuration/object_detectors.md
View File

@ -91,7 +91,7 @@ See [common Edge TPU troubleshooting steps](/troubleshooting/edgetpu) if the Edg
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -111,7 +111,7 @@ detectors:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `usb:0` and `usb:1` as the device for each.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -136,7 +136,7 @@ _warning: may have [compatibility issues](https://github.com/blakeblackshear/fri
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then leave the device field empty.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -156,7 +156,7 @@ detectors:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `pci`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -176,7 +176,7 @@ detectors:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors, specifying `pci:0` and `pci:1` as the device for each.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -199,7 +199,7 @@ detectors:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`). Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add** to add multiple detectors with different device types (e.g., `usb` and `pci`).
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -246,7 +246,7 @@ After placing the downloaded files for the tflite model and labels in your confi
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure the model settings: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **EdgeTPU** from the detector type dropdown and click **Add**, then set device to `usb`. Then on the same page, in the **Custom Model** tab, configure the model settings:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------------------------------------------------- | | ---------------------------------------- | ----------------------------------------------------------------- |
@ -309,7 +309,7 @@ Use this configuration for YOLO-based models. When no custom model path or URL i
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure the model settings: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then on the same page, in the **Custom Model** tab, configure the model settings:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------- | | ---------------------------------------- | ----------------------- |
@ -365,7 +365,7 @@ For SSD-based models, provide either a model path or URL to your compiled SSD mo
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure the model settings: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then on the same page, in the **Custom Model** tab, configure the model settings:
| Field | Value | | Field | Value |
| --------------------------------------- | ------ | | --------------------------------------- | ------ |
@ -410,7 +410,7 @@ The Hailo detector supports all YOLO models compiled for Hailo hardware that inc
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure the model settings to match your custom model dimensions and format. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **Hailo-8/Hailo-8L** from the detector type dropdown and click **Add**, then set device to `PCIe`. Then on the same page, in the **Custom Model** tab, configure the model settings to match your custom model dimensions and format.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -465,7 +465,7 @@ When using many cameras one detector may not be enough to keep up. Multiple dete
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add** to add multiple detectors, each targeting `GPU` or `NPU`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add** to add multiple detectors, each targeting `GPU` or `NPU`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -508,7 +508,7 @@ Use the model configuration shown below when using the OpenVINO detector with th
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU` (or `NPU`). Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU` (or `NPU`). Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------ | | ---------------------------------------- | ------------------------------------------ |
@ -558,7 +558,7 @@ After placing the downloaded onnx model in your config folder, use the following
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------------- | | ---------------------------------------- | ------------------------------------------------- |
@ -620,7 +620,7 @@ After placing the downloaded onnx model in your config folder, use the following
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU` (or `NPU`). Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU` (or `NPU`). Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | -------------------------------------------------------- | | ---------------------------------------- | -------------------------------------------------------- |
@ -676,7 +676,7 @@ After placing the downloaded onnx model in your `config/model_cache` folder, use
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `GPU`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| --------------------------------------- | --------------------------------- | | --------------------------------------- | --------------------------------- |
@ -728,7 +728,7 @@ After placing the downloaded onnx model in your config/model_cache folder, use t
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `CPU`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **OpenVINO** from the detector type dropdown and click **Add**, then set device to `CPU`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ---------------------------------- | | ---------------------------------------- | ---------------------------------- |
@ -807,7 +807,7 @@ Using the detector config below will connect to the client:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ZMQ IPC** from the detector type dropdown and click **Add**, then set the endpoint to `tcp://host.docker.internal:5555`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ZMQ IPC** from the detector type dropdown and click **Add**, then set the endpoint to `tcp://host.docker.internal:5555`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -841,7 +841,7 @@ When Frigate is started with the following config it will connect to the detecto
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ZMQ IPC** from the detector type dropdown and click **Add**, then set the endpoint to `tcp://host.docker.internal:5555`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ZMQ IPC** from the detector type dropdown and click **Add**, then set the endpoint to `tcp://host.docker.internal:5555`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | -------------------------------------------------------- | | ---------------------------------------- | -------------------------------------------------------- |
@ -1002,7 +1002,7 @@ When using many cameras one detector may not be enough to keep up. Multiple dete
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add** to add multiple detectors. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add** to add multiple detectors.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1050,7 +1050,7 @@ After placing the downloaded onnx model in your config folder, use the following
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------------- | | ---------------------------------------- | ------------------------------------------------- |
@ -1109,7 +1109,7 @@ After placing the downloaded onnx model in your config folder, use the following
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | -------------------------------------------------------- | | ---------------------------------------- | -------------------------------------------------------- |
@ -1158,7 +1158,7 @@ After placing the downloaded onnx model in your config folder, use the following
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | -------------------------------------------------------- | | ---------------------------------------- | -------------------------------------------------------- |
@ -1207,7 +1207,7 @@ After placing the downloaded onnx model in your `config/model_cache` folder, use
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| --------------------------------------- | --------------------------------- | | --------------------------------------- | --------------------------------- |
@ -1252,7 +1252,7 @@ After placing the downloaded onnx model in your `config/model_cache` folder, use
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **ONNX** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **ONNX** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------- | | ---------------------------------------- | ------------------------------------------- |
@ -1328,7 +1328,7 @@ A TensorFlow Lite model is provided in the container at `/cpu_model.tflite` and
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **CPU** from the detector type dropdown and click **Add**. Configure the number of threads and click **Add** again to add additional CPU detectors as needed (one per camera is recommended). Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **CPU** from the detector type dropdown and click **Add**. Configure the number of threads and click **Add** again to add additional CPU detectors as needed (one per camera is recommended).
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1364,7 +1364,7 @@ To integrate CodeProject.AI into Frigate, configure the detector as follows:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **DeepStack** from the detector type dropdown and click **Add**. Set the API URL to point to your CodeProject.AI server (e.g., `http://<your_codeproject_ai_server_ip>:<port>/v1/vision/detection`). Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **DeepStack** from the detector type dropdown and click **Add**. Set the API URL to point to your CodeProject.AI server (e.g., `http://<your_codeproject_ai_server_ip>:<port>/v1/vision/detection`).
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1403,7 +1403,7 @@ To configure the MemryX detector, use the following example configuration:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1423,7 +1423,7 @@ detectors:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add** to add multiple detectors, specifying `PCIe:0`, `PCIe:1`, `PCIe:2`, etc. as the device for each. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add** to add multiple detectors, specifying `PCIe:0`, `PCIe:1`, `PCIe:2`, etc. as the device for each.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1467,7 +1467,7 @@ Below is the recommended configuration for using the **YOLO-NAS** (small) model
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------------- | | ---------------------------------------- | ------------------------------------------------- |
@ -1515,7 +1515,7 @@ Below is the recommended configuration for using the **YOLOv9** (small) model wi
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------------- | | ---------------------------------------- | ------------------------------------------------- |
@ -1562,7 +1562,7 @@ Below is the recommended configuration for using the **YOLOX** (small) model wit
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------- | | ---------------------------------------- | ----------------------- |
@ -1609,7 +1609,7 @@ Below is the recommended configuration for using the **SSDLite MobileNet v2** mo
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **MemryX** from the detector type dropdown and click **Add**, then set device to `PCIe:0`. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------- | | ---------------------------------------- | ----------------------- |
@ -1768,7 +1768,7 @@ Use the config below to work with generated TRT models:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **TensorRT** from the detector type dropdown and click **Add**, then set the device to `0` (the default GPU index). Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **TensorRT** from the detector type dropdown and click **Add**, then set the device to `0` (the default GPU index). Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | ------------------------------------------------------------ |
@ -1825,7 +1825,7 @@ Use the model configuration shown below when using the synaptics detector with t
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **Synaptics** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **Synaptics** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ---------------------------- | | ---------------------------------------- | ---------------------------- |
@ -1879,7 +1879,7 @@ When using many cameras one detector may not be enough to keep up. Multiple dete
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **RKNN** from the detector type dropdown and click **Add** to add multiple detectors, each with `num_cores` set to `0` for automatic selection. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **RKNN** from the detector type dropdown and click **Add** to add multiple detectors, each with `num_cores` set to `0` for automatic selection.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1921,7 +1921,7 @@ This `config.yml` shows all relevant options to configure the detector and expla
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **RKNN** from the detector type dropdown and click **Add**. Set `num_cores` to `0` for automatic selection (increase for better performance on multicore NPUs, e.g., set to `3` on rk3588). Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **RKNN** from the detector type dropdown and click **Add**. Set `num_cores` to `0` for automatic selection (increase for better performance on multicore NPUs, e.g., set to `3` on rk3588).
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -1958,7 +1958,7 @@ The inference time was determined on a rk3588 with 3 NPU cores.
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------------------------------------------------------- | | ---------------------------------------- | ----------------------------------------------------------------------- |
@ -2004,7 +2004,7 @@ The pre-trained YOLO-NAS weights from DeciAI are subject to their license and ca
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | -------------------------------------------------- | | ---------------------------------------- | -------------------------------------------------- |
@ -2044,7 +2044,7 @@ model: # required
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ---------------------------------------------- | | ---------------------------------------- | ---------------------------------------------- |
@ -2138,7 +2138,7 @@ Once completed, configure the detector as follows:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to your AI server (e.g., service name, container name, or `host:port`), the zoo to `degirum/public`, and provide your authentication token if needed. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to your AI server (e.g., service name, container name, or `host:port`), the zoo to `degirum/public`, and provide your authentication token if needed.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -2181,7 +2181,7 @@ It is also possible to eliminate the need for an AI server and run the hardware
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to `@local`, the zoo to `degirum/public`, and provide your authentication token. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to `@local`, the zoo to `degirum/public`, and provide your authentication token.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -2218,7 +2218,7 @@ If you do not possess whatever hardware you want to run, there's also the option
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to `@cloud`, the zoo to `degirum/public`, and provide your authentication token. Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **DeGirum** from the detector type dropdown and click **Add**. Set the location to `@cloud`, the zoo to `degirum/public`, and provide your authentication token.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">
@ -2274,7 +2274,7 @@ Use the model configuration shown below when using the axengine detector with th
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and select **AXEngine NPU** from the detector type dropdown and click **Add**. Then navigate to <NavPath path="Settings > System > Detection model" /> and configure: Navigate to <NavPath path="Settings > System > Detectors and model" /> and select **AXEngine NPU** from the detector type dropdown and click **Add**. Then on the same page, in the **Custom Model** tab, configure:
| Field | Value | | Field | Value |
| ---------------------------------------- | ----------------------- | | ---------------------------------------- | ----------------------- |

6
docs/docs/guides/getting_started.md
View File

@ -204,8 +204,8 @@ You need to refer to **Configure hardware acceleration** above to enable the con
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
1. Navigate to <NavPath path="Settings > System > Detector hardware" /> and add a detector with **Type** `OpenVINO` and **Device** `GPU` 1. Navigate to <NavPath path="Settings > System > Detectors and model" /> and add a detector with **Type** `OpenVINO` and **Device** `GPU`
2. Navigate to <NavPath path="Settings > System > Detection model" /> and configure the model settings for OpenVINO: 2. On the same page, in the **Custom Model** tab, configure the model settings for OpenVINO:
| Field | Value | | Field | Value |
| ---------------------------------------- | ------------------------------------------ | | ---------------------------------------- | ------------------------------------------ |
@ -273,7 +273,7 @@ services:
<ConfigTabs> <ConfigTabs>
<TabItem value="ui"> <TabItem value="ui">
Navigate to <NavPath path="Settings > System > Detector hardware" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb`. Navigate to <NavPath path="Settings > System > Detectors and model" /> and add a detector with **Type** `EdgeTPU` and **Device** `usb`.
</TabItem> </TabItem>
<TabItem value="yaml"> <TabItem value="yaml">

4
docs/docs/integrations/plus.md
View File

@ -3,6 +3,8 @@ id: plus
title: Frigate+ title: Frigate+
--- ---
import NavPath from "@site/src/components/NavPath";
For more information about how to use Frigate+ to improve your model, see the [Frigate+ docs](/plus/). For more information about how to use Frigate+ to improve your model, see the [Frigate+ docs](/plus/).
:::info :::info
@ -57,7 +59,7 @@ You can view all of your submitted images at [https://plus.frigate.video](https:
Once you have [requested your first model](../plus/first_model.md) and gotten your own model ID, it can be used with a special model path. No other information needs to be configured for Frigate+ models because it fetches the remaining config from Frigate+ automatically. Once you have [requested your first model](../plus/first_model.md) and gotten your own model ID, it can be used with a special model path. No other information needs to be configured for Frigate+ models because it fetches the remaining config from Frigate+ automatically.
You can either choose the new model from the Frigate+ pane in the Settings page of the Frigate UI, or manually set the model at the root level in your config: You can either choose the new model from the <NavPath path="Settings > System > Detectors and model" /> pane in the Frigate UI (the **Frigate+ Model** tab), or manually set the model at the root level in your config:
```yaml ```yaml
detectors: ... detectors: ...

4
docs/scripts/lib/nav_map.py
View File

@ -63,8 +63,8 @@ SYSTEM_NAV: dict[str, tuple[str, str]] = {
"environment_vars": ("System", "Environment variables"), "environment_vars": ("System", "Environment variables"),
"telemetry": ("System", "Telemetry"), "telemetry": ("System", "Telemetry"),
"birdseye": ("System", "Birdseye"), "birdseye": ("System", "Birdseye"),
"detectors": ("System", "Detector hardware"), "detectors": ("System", "Detectors and model"),
"model": ("System", "Detection model"), "model": ("System", "Detectors and model"),
} }
# All known top-level config section keys # All known top-level config section keys

15
frigate/config/config.py
View File

@ -80,12 +80,12 @@ logger = logging.getLogger(__name__)
yaml = YAML() yaml = YAML()
DEFAULT_DETECTORS = { # Pydantic field default applied when an existing config omits `detectors:`.
"ov": { # Kept as cpu tflite for backwards compatibility with 0.17 configs.
"type": "openvino", DEFAULT_DETECTORS = {"cpu": {"type": "cpu"}}
"device": "CPU",
} # Used by the openvino branch below and rendered into the new-config YAML
} # template so first-time setups default to openvino on CPU.
DEFAULT_MODEL = { DEFAULT_MODEL = {
"width": 300, "width": 300,
"height": 300, "height": 300,
@ -94,6 +94,7 @@ DEFAULT_MODEL = {
"path": "/openvino-model/ssdlite_mobilenet_v2.xml", "path": "/openvino-model/ssdlite_mobilenet_v2.xml",
"labelmap_path": "/openvino-model/coco_91cl_bkgr.txt", "labelmap_path": "/openvino-model/coco_91cl_bkgr.txt",
} }
NEW_CONFIG_DETECTORS = {"ov": {"type": "openvino", "device": "CPU"}}
DEFAULT_DETECT_DIMENSIONS = {"width": 1280, "height": 720} DEFAULT_DETECT_DIMENSIONS = {"width": 1280, "height": 720}
@ -109,7 +110,7 @@ DEFAULT_CONFIG = f"""
mqtt: mqtt:
enabled: False enabled: False
{_render_default_yaml({"detectors": DEFAULT_DETECTORS, "model": DEFAULT_MODEL})} {_render_default_yaml({"detectors": NEW_CONFIG_DETECTORS, "model": DEFAULT_MODEL})}
cameras: {{}} # No cameras defined, UI wizard should be used cameras: {{}} # No cameras defined, UI wizard should be used
version: {CURRENT_CONFIG_VERSION} version: {CURRENT_CONFIG_VERSION}
""" """

6
frigate/test/test_config.py
View File

@ -64,9 +64,9 @@ class TestConfig(unittest.TestCase):
def test_config_class(self): def test_config_class(self):
frigate_config = FrigateConfig(**self.minimal) frigate_config = FrigateConfig(**self.minimal)
assert "ov" in frigate_config.detectors.keys() assert "cpu" in frigate_config.detectors.keys()
assert frigate_config.detectors["ov"].type == DetectorTypeEnum.openvino assert frigate_config.detectors["cpu"].type == DetectorTypeEnum.cpu
assert frigate_config.detectors["ov"].model.width == 300 assert frigate_config.detectors["cpu"].model.width == 320
@patch("frigate.detectors.detector_config.load_labels") @patch("frigate.detectors.detector_config.load_labels")
def test_detector_custom_model_path(self, mock_labels): def test_detector_custom_model_path(self, mock_labels):

55
web/e2e/specs/settings/detectors-and-model.spec.ts Normal file
View File

@ -0,0 +1,55 @@
/**
* Detectors and model settings page tests -- HIGH tier.
*
* Tests rendering of the merged page and navigation from the Frigate+ page.
*/
import { test, expect } from "../../fixtures/frigate-test";
test.describe("Detectors and model Settings @high", () => {
test("page renders with detector and model cards", async ({ frigateApp }) => {
await frigateApp.goto("/settings?page=systemDetectorsAndModel");
await frigateApp.page.waitForTimeout(2000);
await expect(frigateApp.page.locator("#pageRoot")).toBeVisible();
const text = await frigateApp.page.textContent("#pageRoot");
expect(text).toContain("Detectors and model");
expect(text?.toLowerCase()).toContain("detector hardware");
expect(text?.toLowerCase()).toContain("detection model");
});
test("Frigate+ page links to the merged page", async ({ frigateApp }) => {
await frigateApp.goto("/settings?page=frigateplus");
await frigateApp.page.waitForTimeout(2000);
const button = frigateApp.page.getByRole("button", {
name: /Change in Detectors and model/,
});
// Button only appears when Frigate+ is enabled in the test config; skip
// the click assertion if it's not present.
if ((await button.count()) > 0) {
await button.first().click();
await frigateApp.page.waitForURL(/page=systemDetectorsAndModel/);
await expect(frigateApp.page.locator("#pageRoot")).toContainText(
"Detectors and model",
);
} else {
test.skip(
true,
"Frigate+ not enabled in this test config; skipping link assertion",
);
}
});
test("old systemDetectionModel deep-link no longer routes here", async ({
frigateApp,
}) => {
await frigateApp.goto("/settings?page=systemDetectionModel");
await frigateApp.page.waitForTimeout(2000);
// The old page key is no longer in allSettingsViews; the router
// falls back to its default settings page (uiSettings).
const text = await frigateApp.page.textContent("#pageRoot");
expect(text).not.toContain("Detection model");
});
});

39
web/public/locales/en/views/settings.json
View File

@ -12,6 +12,7 @@
"globalConfig": "Global Configuration - Frigate", "globalConfig": "Global Configuration - Frigate",
"cameraConfig": "Camera Configuration - Frigate", "cameraConfig": "Camera Configuration - Frigate",
"frigatePlus": "Frigate+ Settings - Frigate", "frigatePlus": "Frigate+ Settings - Frigate",
"detectorsAndModel": "Detectors and model - Frigate",
"notifications": "Notification Settings - Frigate", "notifications": "Notification Settings - Frigate",
"maintenance": "Maintenance - Frigate", "maintenance": "Maintenance - Frigate",
"profiles": "Profiles - Frigate" "profiles": "Profiles - Frigate"
@ -69,8 +70,7 @@
"systemTelemetry": "Telemetry", "systemTelemetry": "Telemetry",
"systemBirdseye": "Birdseye", "systemBirdseye": "Birdseye",
"systemFfmpeg": "FFmpeg", "systemFfmpeg": "FFmpeg",
"systemDetectorHardware": "Detector hardware", "systemDetectorsAndModel": "Detectors and model",
"systemDetectionModel": "Detection model",
"systemMqtt": "MQTT", "systemMqtt": "MQTT",
"systemGo2rtcStreams": "go2rtc streams", "systemGo2rtcStreams": "go2rtc streams",
"integrationSemanticSearch": "Semantic search", "integrationSemanticSearch": "Semantic search",
@ -1135,7 +1135,7 @@
"loading": "Loading model information…", "loading": "Loading model information…",
"error": "Failed to load model information", "error": "Failed to load model information",
"noModelLoaded": "No Frigate+ model is currently loaded.", "noModelLoaded": "No Frigate+ model is currently loaded.",
"availableModels": "Available Models", "availableModels": "Available Frigate+ models",
"loadingAvailableModels": "Loading available models…", "loadingAvailableModels": "Loading available models…",
"selectModel": "Select a model", "selectModel": "Select a model",
"noModelsAvailable": "No models available", "noModelsAvailable": "No models available",
@ -1146,6 +1146,7 @@
}, },
"modelSelect": "Your available models on Frigate+ can be selected here. Note that only models compatible with your current detector configuration can be selected." "modelSelect": "Your available models on Frigate+ can be selected here. Note that only models compatible with your current detector configuration can be selected."
}, },
"changeInDetectorsAndModel": "Change model",
"unsavedChanges": "Unsaved Frigate+ settings changes", "unsavedChanges": "Unsaved Frigate+ settings changes",
"restart_required": "Restart required (Frigate+ model changed)", "restart_required": "Restart required (Frigate+ model changed)",
"toast": { "toast": {
@ -1153,14 +1154,30 @@
"error": "Failed to save config changes: {{errorMessage}}" "error": "Failed to save config changes: {{errorMessage}}"
} }
}, },
"detectionModel": { "detectorsAndModel": {
"plusActive": { "title": "Detectors and model",
"title": "Frigate+ model management", "description": "Configure the detector backend that runs object detection and the model it uses. Changes are saved together so the detector and model stay in sync.",
"label": "Current model source", "cardTitles": {
"description": "This instance is running a Frigate+ model. Select or change your model in Frigate+ settings.", "detector": "Detector Hardware",
"goToFrigatePlus": "Go to Frigate+ settings", "model": "Detection Model"
"showModelForm": "Manually configure a model" },
} "tabs": {
"plus": "Frigate+",
"custom": "Custom Model"
},
"mismatch": {
"warning": "The current Frigate+ model \"{{model}}\" requires the {{required}} detector. Pick a compatible model below or switch to Custom Model before saving."
},
"plusModel": {
"requiresDetector": "Requires: {{detector}}",
"noModelSelected": "Select a Frigate+ model"
},
"toast": {
"saveSuccess": "Detectors and model settings saved. Restart Frigate to apply changes.",
"saveError": "Failed to save detector and model settings"
},
"unsavedChanges": "Unsaved detector and model changes",
"restartRequired": "Restart required (detector or model changed)"
}, },
"triggers": { "triggers": {
"documentTitle": "Triggers", "documentTitle": "Triggers",

2
web/src/components/config-form/ConfigMessageBanner.tsx
View File

@ -44,7 +44,7 @@ export function ConfigMessageBanner({ messages }: ConfigMessageBannerProps) {
className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2" className="flex items-center [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-2"
> >
<SeverityIcon severity={msg.severity} /> <SeverityIcon severity={msg.severity} />
<AlertDescription>{t(msg.messageKey)}</AlertDescription> <AlertDescription>{t(msg.messageKey, msg.values)}</AlertDescription>
</Alert> </Alert>
))} ))}
</div> </div>

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

@ -24,6 +24,8 @@ export type ConditionalMessage = {
severity: MessageSeverity; severity: MessageSeverity;
/** Function returning true when the message should be shown */ /** Function returning true when the message should be shown */
condition: (ctx: MessageConditionContext) => boolean; condition: (ctx: MessageConditionContext) => boolean;
/** Optional interpolation values passed to t() for {{var}} substitution */
values?: Record<string, unknown>;
}; };
/** Field-level conditional message, adds field targeting */ /** Field-level conditional message, adds field targeting */

214
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -175,6 +175,9 @@ export interface BaseSectionProps {
isSavingAll?: boolean; isSavingAll?: boolean;
/** Callback when this section's saving state changes */ /** Callback when this section's saving state changes */
onSavingChange?: (isSaving: boolean) => void; onSavingChange?: (isSaving: boolean) => void;
/** When true, render the form fields only; suppress the internal save/undo bar.
* The parent owns the save action and reads pending data via `onPendingDataChange`. */
embedded?: boolean;
} }
export interface CreateSectionOptions { export interface CreateSectionOptions {
@ -211,6 +214,7 @@ export function ConfigSection({
onDeleteProfileSection, onDeleteProfileSection,
isSavingAll = false, isSavingAll = false,
onSavingChange, onSavingChange,
embedded = false,
}: ConfigSectionProps) { }: ConfigSectionProps) {
// For replay level, treat as camera-level config access // For replay level, treat as camera-level config access
const effectiveLevel = level === "replay" ? "camera" : level; const effectiveLevel = level === "replay" ? "camera" : level;
@ -1048,121 +1052,123 @@ export function ConfigSection({
}} }}
/> />
<div {!embedded && (
className={cn(
"w-full border-t border-secondary bg-background pt-0",
!noStickyButtons && "sticky bottom-0 z-50",
)}
>
<div <div
className={cn( className={cn(
"flex flex-col items-center gap-4 pt-2 md:flex-row", "w-full border-t border-secondary bg-background pt-0",
hasChanges ? "justify-between" : "justify-end", !noStickyButtons && "sticky bottom-0 z-50",
)} )}
> >
{hasChanges && ( <div
<div className="flex items-center gap-2"> className={cn(
<span className="text-sm text-unsaved"> "flex flex-col items-center gap-4 pt-2 md:flex-row",
{t("unsavedChanges", { hasChanges ? "justify-between" : "justify-end",
ns: "views/settings", )}
defaultValue: "You have unsaved changes", >
})}
</span>
<SaveAllPreviewPopover
items={sectionPreviewItems}
className="h-7 w-7"
align="start"
side="top"
/>
</div>
)}
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
{((effectiveLevel === "camera" && isOverridden) ||
effectiveLevel === "global") &&
!hasChanges &&
!skipSave &&
!profileName && (
<Button
onClick={() => setIsResetDialogOpen(true)}
variant="outline"
disabled={isSaving || isResettingToDefault || disabled}
className="flex flex-1 gap-2"
>
{isResettingToDefault && (
<ActivityIndicator className="h-4 w-4" />
)}
{effectiveLevel === "global"
? t("button.resetToDefault", {
ns: "common",
defaultValue: "Reset to Default",
})
: t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button>
)}
{profileName &&
profileOverridesSection &&
!hasChanges &&
!skipSave &&
onDeleteProfileSection && (
<Button
onClick={() => setIsDeleteProfileDialogOpen(true)}
variant="outline"
disabled={isSaving || disabled}
className="flex flex-1 gap-2"
>
{t("profiles.removeOverride", {
ns: "views/settings",
defaultValue: "Remove Profile Override",
})}
</Button>
)}
{hasChanges && ( {hasChanges && (
<div className="flex items-center gap-2">
<span className="text-sm text-unsaved">
{t("unsavedChanges", {
ns: "views/settings",
defaultValue: "You have unsaved changes",
})}
</span>
<SaveAllPreviewPopover
items={sectionPreviewItems}
className="h-7 w-7"
align="start"
side="top"
/>
</div>
)}
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
{((effectiveLevel === "camera" && isOverridden) ||
effectiveLevel === "global") &&
!hasChanges &&
!skipSave &&
!profileName && (
<Button
onClick={() => setIsResetDialogOpen(true)}
variant="outline"
disabled={isSaving || isResettingToDefault || disabled}
className="flex flex-1 gap-2"
>
{isResettingToDefault && (
<ActivityIndicator className="h-4 w-4" />
)}
{effectiveLevel === "global"
? t("button.resetToDefault", {
ns: "common",
defaultValue: "Reset to Default",
})
: t("button.resetToGlobal", {
ns: "common",
defaultValue: "Reset to Global",
})}
</Button>
)}
{profileName &&
profileOverridesSection &&
!hasChanges &&
!skipSave &&
onDeleteProfileSection && (
<Button
onClick={() => setIsDeleteProfileDialogOpen(true)}
variant="outline"
disabled={isSaving || disabled}
className="flex flex-1 gap-2"
>
{t("profiles.removeOverride", {
ns: "views/settings",
defaultValue: "Remove Profile Override",
})}
</Button>
)}
{hasChanges && (
<Button
onClick={handleReset}
variant="outline"
disabled={isSaving || isSavingAll || disabled}
className="flex min-w-36 flex-1 gap-2"
>
{t("button.undo", { ns: "common", defaultValue: "Undo" })}
</Button>
)}
<Button <Button
onClick={handleReset} onClick={handleSave}
variant="outline" variant="select"
disabled={isSaving || isSavingAll || disabled} disabled={
!hasChanges ||
hasValidationErrors ||
isSaving ||
isSavingAll ||
disabled
}
className="flex min-w-36 flex-1 gap-2" className="flex min-w-36 flex-1 gap-2"
> >
{t("button.undo", { ns: "common", defaultValue: "Undo" })} {isSaving ? (
<>
<ActivityIndicator className="h-4 w-4" />
{skipSave
? t("button.applying", {
ns: "common",
defaultValue: "Applying...",
})
: t("button.saving", {
ns: "common",
defaultValue: "Saving...",
})}
</>
) : skipSave ? (
t("button.apply", { ns: "common", defaultValue: "Apply" })
) : (
t("button.save", { ns: "common", defaultValue: "Save" })
)}
</Button> </Button>
)} </div>
<Button
onClick={handleSave}
variant="select"
disabled={
!hasChanges ||
hasValidationErrors ||
isSaving ||
isSavingAll ||
disabled
}
className="flex min-w-36 flex-1 gap-2"
>
{isSaving ? (
<>
<ActivityIndicator className="h-4 w-4" />
{skipSave
? t("button.applying", {
ns: "common",
defaultValue: "Applying...",
})
: t("button.saving", {
ns: "common",
defaultValue: "Saving...",
})}
</>
) : skipSave ? (
t("button.apply", { ns: "common", defaultValue: "Apply" })
) : (
t("button.save", { ns: "common", defaultValue: "Save" })
)}
</Button>
</div> </div>
</div> </div>
</div> )}
<AlertDialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}> <AlertDialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}>
<AlertDialogContent> <AlertDialogContent>

22
web/src/pages/Settings.tsx
View File

@ -44,7 +44,7 @@ import FrigatePlusSettingsView from "@/views/settings/FrigatePlusSettingsView";
import MediaSyncSettingsView from "@/views/settings/MediaSyncSettingsView"; import MediaSyncSettingsView from "@/views/settings/MediaSyncSettingsView";
import RegionGridSettingsView from "@/views/settings/RegionGridSettingsView"; import RegionGridSettingsView from "@/views/settings/RegionGridSettingsView";
import Go2RtcStreamsSettingsView from "@/views/settings/Go2RtcStreamsSettingsView"; import Go2RtcStreamsSettingsView from "@/views/settings/Go2RtcStreamsSettingsView";
import SystemDetectionModelSettingsView from "@/views/settings/SystemDetectionModelSettingsView"; import DetectorsAndModelSettingsView from "@/views/settings/DetectorsAndModelSettingsView";
import { import {
SingleSectionPage, SingleSectionPage,
type SettingsPageProps, type SettingsPageProps,
@ -127,8 +127,7 @@ const allSettingsViews = [
"systemEnvironmentVariables", "systemEnvironmentVariables",
"systemTelemetry", "systemTelemetry",
"systemBirdseye", "systemBirdseye",
"systemDetectorHardware", "systemDetectorsAndModel",
"systemDetectionModel",
"systemMqtt", "systemMqtt",
"systemGo2rtcStreams", "systemGo2rtcStreams",
"integrationSemanticSearch", "integrationSemanticSearch",
@ -229,11 +228,6 @@ const SystemEnvironmentVariablesSettingsPage = createSectionPage(
); );
const SystemTelemetrySettingsPage = createSectionPage("telemetry", "global"); const SystemTelemetrySettingsPage = createSectionPage("telemetry", "global");
const SystemBirdseyeSettingsPage = createSectionPage("birdseye", "global"); const SystemBirdseyeSettingsPage = createSectionPage("birdseye", "global");
const SystemDetectorHardwareSettingsPage = createSectionPage(
"detectors",
"global",
);
const SystemDetectionModelSettingsPage = SystemDetectionModelSettingsView;
const NotificationsSettingsPage = createSectionPage("notifications", "global"); const NotificationsSettingsPage = createSectionPage("notifications", "global");
const SystemMqttSettingsPage = createSectionPage("mqtt", "global"); const SystemMqttSettingsPage = createSectionPage("mqtt", "global");
@ -399,12 +393,8 @@ const settingsGroups = [
component: Go2RtcStreamsSettingsView, component: Go2RtcStreamsSettingsView,
}, },
{ {
key: "systemDetectorHardware", key: "systemDetectorsAndModel",
component: SystemDetectorHardwareSettingsPage, component: DetectorsAndModelSettingsView,
},
{
key: "systemDetectionModel",
component: SystemDetectionModelSettingsPage,
}, },
{ key: "systemDatabase", component: SystemDatabaseSettingsPage }, { key: "systemDatabase", component: SystemDatabaseSettingsPage },
{ key: "systemMqtt", component: SystemMqttSettingsPage }, { key: "systemMqtt", component: SystemMqttSettingsPage },
@ -558,8 +548,8 @@ const SYSTEM_SECTION_MAPPING: Record<string, SettingsType> = {
environment_vars: "systemEnvironmentVariables", environment_vars: "systemEnvironmentVariables",
telemetry: "systemTelemetry", telemetry: "systemTelemetry",
birdseye: "systemBirdseye", birdseye: "systemBirdseye",
detectors: "systemDetectorHardware", detectors: "systemDetectorsAndModel",
model: "systemDetectionModel", model: "systemDetectorsAndModel",
}; };
const CAMERA_SECTION_KEYS = new Set<SettingsType>( const CAMERA_SECTION_KEYS = new Set<SettingsType>(

797
web/src/views/settings/DetectorsAndModelSettingsView.tsx Normal file
View File

@ -0,0 +1,797 @@
import {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { Trans, useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { LuExternalLink, LuFilter } from "react-icons/lu";
import { toast } from "sonner";
import axios from "axios";
import useSWR from "swr";
import { useSWRConfig } from "swr";
import { cn } from "@/lib/utils";
import { useRestart } from "@/api/ws";
import RestartDialog from "@/components/overlay/dialog/RestartDialog";
import { useDocDomain } from "@/hooks/use-doc-domain";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import Heading from "@/components/ui/heading";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/sonner";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
} from "@/components/ui/select";
import type { FrigateConfig } from "@/types/frigateConfig";
import type {
SectionStatus,
SettingsPageProps,
} from "@/views/settings/SingleSectionPage";
import type { ConfigSectionData } from "@/types/configForm";
import {
SettingsGroupCard,
SplitCardRow,
} from "@/components/card/SettingsGroupCard";
import { ConfigSectionTemplate } from "@/components/config-form/sections";
import { ConfigMessageBanner } from "@/components/config-form/ConfigMessageBanner";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
type ModelTab = "plus" | "custom";
type PageState = {
detectors: ConfigSectionData;
modelTab: ModelTab;
plusModelId: string | undefined;
customModel: ConfigSectionData;
};
type FrigatePlusModel = {
id: string;
type: string;
name: string;
isBaseModel: boolean;
supportedDetectors: string[];
trainDate: string;
baseModel: string;
width: number;
height: number;
};
const TYPE_MODEL_DEFAULTS: Record<string, ConfigSectionData> = {
cpu: {
path: "/cpu_model.tflite",
labelmap_path: "/labelmap.txt",
width: 320,
height: 320,
input_tensor: "nhwc",
input_pixel_format: "rgb",
input_dtype: "int",
model_type: "ssd",
},
edgetpu: {
path: "/edgetpu_model.tflite",
labelmap_path: "/labelmap.txt",
width: 320,
height: 320,
input_tensor: "nhwc",
input_pixel_format: "rgb",
input_dtype: "int",
model_type: "ssd",
},
openvino: {
path: "/openvino-model/ssdlite_mobilenet_v2.xml",
labelmap_path: "/openvino-model/coco_91cl_bkgr.txt",
width: 300,
height: 300,
input_tensor: "nhwc",
input_pixel_format: "bgr",
input_dtype: "int",
model_type: "ssd",
},
};
const STATUS_BAR_KEY = "detectors_and_model";
const deriveInitialState = (config: FrigateConfig): PageState => {
const plusModelId = config.model?.plus?.id;
const modelPath = config.model?.path;
const plusEnabled = Boolean(config.plus?.enabled);
// The reliable signal that a Plus model is currently active is the
// `model.plus.id` metadata
let modelTab: ModelTab;
if (plusModelId) {
modelTab = "plus";
} else if (typeof modelPath === "string" && modelPath.length > 0) {
modelTab = "custom";
} else if (plusEnabled) {
modelTab = "plus";
} else {
modelTab = "custom";
}
// Fallback: if Plus is not enabled, prefer Custom regardless of saved state
if (!plusEnabled && modelTab === "plus") {
modelTab = "custom";
}
const { plus: _plus, ...modelWithoutPlus } = (config.model ?? {}) as Record<
string,
unknown
>;
// If a Plus model is active, the resolved `model.path` is auto-derived from
// `plus.id` — drop it so the Custom tab starts clean and doesn't silently
// re-save the same Plus model when the user thinks they switched modes.
if (plusModelId) {
delete modelWithoutPlus.path;
}
return {
detectors: (config.detectors ?? {}) as ConfigSectionData,
modelTab,
plusModelId: plusModelId ?? undefined,
customModel: modelWithoutPlus as ConfigSectionData,
};
};
export default function DetectorsAndModelSettingsView({
setUnsavedChanges,
}: SettingsPageProps) {
const { t } = useTranslation(["views/settings", "common"]);
const { getLocaleDocUrl } = useDocDomain();
const { data: config } = useSWR<FrigateConfig>("config");
const { mutate: globalMutate } = useSWRConfig();
const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
const [snapshot, setSnapshot] = useState<PageState | null>(null);
const [state, setState] = useState<PageState | null>(null);
const [isSaving, setIsSaving] = useState(false);
const [resetKey, setResetKey] = useState(0);
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const { send: sendRestart } = useRestart();
const [childPending, setChildPending] = useState<
Record<string, ConfigSectionData>
>({});
const [detectorStatus, setDetectorStatus] = useState<SectionStatus>({
hasChanges: false,
isOverridden: false,
hasValidationErrors: false,
});
const [modelStatus, setModelStatus] = useState<SectionStatus>({
hasChanges: false,
isOverridden: false,
hasValidationErrors: false,
});
const [showBaseModels, setShowBaseModels] = useState(true);
const [showFineTunedModels, setShowFineTunedModels] = useState(true);
const plusEnabled = Boolean(config?.plus?.enabled);
const { data: availableModels = {}, isLoading: isLoadingModels } = useSWR<
Record<string, FrigatePlusModel>
>(plusEnabled ? "/plus/models" : null, {
fallbackData: {},
fetcher: async (url) => {
const res = await axios.get(url, { withCredentials: true });
return res.data.reduce(
(obj: Record<string, FrigatePlusModel>, model: FrigatePlusModel) => {
obj[model.id] = model;
return obj;
},
{},
);
},
});
const filteredModelEntries = useMemo(
() =>
Object.entries(availableModels || {}).filter(([, model]) =>
model.isBaseModel ? showBaseModels : showFineTunedModels,
),
[availableModels, showBaseModels, showFineTunedModels],
);
const isFilterActive = !showBaseModels || !showFineTunedModels;
const currentDetectorType = useMemo(() => {
if (!state) return undefined;
const values = Object.values(state.detectors ?? {});
if (values.length === 0) return undefined;
const first = values[0] as { type?: string } | undefined;
return first?.type;
}, [state]);
// fill in defaults when detector type changes
const prevDetectorTypeRef = useRef<string | undefined>(undefined);
useEffect(() => {
const newType = currentDetectorType;
const prevType = prevDetectorTypeRef.current;
prevDetectorTypeRef.current = newType;
if (prevType === undefined || prevType === newType) return;
if (!newType || !(newType in TYPE_MODEL_DEFAULTS)) return;
const defaults = TYPE_MODEL_DEFAULTS[newType];
setChildPending((prev) => {
const next: Record<string, ConfigSectionData> = {
...prev,
model: defaults,
};
if (newType === "openvino") {
const detectorsCurrent = (prev.detectors ?? state?.detectors ?? {}) as {
[key: string]: { device?: string };
};
const entries = Object.entries(detectorsCurrent);
if (entries.length > 0) {
const [firstKey, firstValue] = entries[0];
if (!firstValue?.device) {
next.detectors = {
...detectorsCurrent,
[firstKey]: { ...firstValue, device: "CPU" },
} as ConfigSectionData;
}
}
}
return next;
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentDetectorType]);
const isModelCompatible = useCallback(
(model: FrigatePlusModel) =>
currentDetectorType
? model.supportedDetectors.includes(currentDetectorType)
: true,
[currentDetectorType],
);
const selectedPlusModel = state?.plusModelId
? availableModels?.[state.plusModelId]
: undefined;
const plusMismatch =
state?.modelTab === "plus" &&
selectedPlusModel !== undefined &&
currentDetectorType !== undefined &&
!isModelCompatible(selectedPlusModel);
const plusModelMissing = state?.modelTab === "plus" && !state?.plusModelId;
const handleChildPendingChange = useCallback(
(
sectionKey: string,
_cameraName: string | undefined,
data: ConfigSectionData | null,
) => {
setChildPending((prev) => {
if (data === null) {
if (!(sectionKey in prev)) return prev;
const { [sectionKey]: _drop, ...rest } = prev;
return rest;
}
return { ...prev, [sectionKey]: data };
});
},
[],
);
const handleDetectorStatusChange = useCallback(
(status: SectionStatus) => setDetectorStatus(status),
[],
);
const handleModelStatusChange = useCallback(
(status: SectionStatus) => setModelStatus(status),
[],
);
useEffect(() => {
const detectorsPending = childPending["detectors"];
setState((prev) => {
if (!prev || !snapshot) return prev;
// When the embedded form un-modifies (data returns to baseline) it clears
// its entry from childPending — fall back to snapshot so state.detectors
// doesn't keep a stale value the user has visually reverted.
return {
...prev,
detectors: detectorsPending ?? snapshot.detectors,
};
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childPending["detectors"]]);
useEffect(() => {
const modelPending = childPending["model"];
setState((prev) => {
if (!prev || !snapshot) return prev;
return {
...prev,
customModel: modelPending ?? snapshot.customModel,
};
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childPending["model"]]);
useEffect(() => {
if (!config || snapshot !== null) return;
const initial = deriveInitialState(config);
setSnapshot(initial);
setState(initial);
}, [config, snapshot]);
const isDirty = useMemo(() => {
if (!state || !snapshot) return false;
return JSON.stringify(state) !== JSON.stringify(snapshot);
}, [state, snapshot]);
useEffect(() => {
if (isDirty) {
addMessage(
STATUS_BAR_KEY,
t("detectorsAndModel.unsavedChanges"),
undefined,
STATUS_BAR_KEY,
);
} else {
removeMessage(STATUS_BAR_KEY, STATUS_BAR_KEY);
}
setUnsavedChanges?.(isDirty);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isDirty]);
useEffect(() => {
document.title = t("documentTitle.detectorsAndModel");
}, [t]);
const onSave = useCallback(async () => {
if (!state || !snapshot) return;
const tabChanged = state.modelTab !== snapshot.modelTab;
const modelPayload =
state.modelTab === "plus"
? { path: `plus://${state.plusModelId}` }
: state.customModel;
const detectorKeysChanged =
JSON.stringify(Object.keys(state.detectors).sort()) !==
JSON.stringify(Object.keys(snapshot.detectors).sort());
setIsSaving(true);
try {
if (tabChanged) {
// Best-effort cleanup of the prior model's fields
try {
await axios.put("config/set", {
requires_restart: 0,
config_data: { model: null },
});
} catch {
// intentional no-op — see comment above
}
}
if (detectorKeysChanged) {
// Best-effort cleanup
try {
await axios.put("config/set", {
requires_restart: 0,
config_data: { detectors: null },
});
} catch {
// intentional no-op — see comment above
}
}
await axios.put("config/set", {
requires_restart: 0,
config_data: {
detectors: state.detectors,
model: modelPayload,
},
});
await globalMutate("config");
await globalMutate("config/raw_paths");
// Re-derive snapshot from the freshly saved state so isDirty resets.
setSnapshot({ ...state });
setChildPending({});
setResetKey((k) => k + 1);
addMessage(
"detectors_and_model_restart",
t("detectorsAndModel.restartRequired"),
undefined,
"detectors_and_model_restart",
);
toast.success(t("detectorsAndModel.toast.saveSuccess"), {
position: "top-center",
action: (
<Button onClick={() => setRestartDialogOpen(true)}>
{t("restart.button", { ns: "components/dialog" })}
</Button>
),
});
} catch (error) {
const err = error as {
response?: { data?: { message?: string; detail?: string } };
};
const message =
err.response?.data?.message ||
err.response?.data?.detail ||
t("detectorsAndModel.toast.saveError");
toast.error(message, { position: "top-center" });
// Re-sync the config cache in case the two-step PUT left the backend
// ahead of the frontend (e.g. step 1 cleared `model` but step 2 failed).
await globalMutate("config");
} finally {
setIsSaving(false);
}
}, [state, snapshot, globalMutate, addMessage, t]);
const onUndo = useCallback(() => {
if (snapshot) {
setState(snapshot);
setChildPending({});
// Force the embedded forms to re-mount so their internal dirty/baseline
// state is rebuilt from the current config — clearing childPending alone
// doesn't reset BaseSection's internal tracking.
setResetKey((k) => k + 1);
}
}, [snapshot]);
if (!config || !state) {
return <ActivityIndicator />;
}
const saveDisabled =
!isDirty ||
isSaving ||
detectorStatus.hasValidationErrors ||
(state.modelTab === "custom" && modelStatus.hasValidationErrors) ||
plusMismatch ||
plusModelMissing;
return (
<div className="flex size-full flex-col md:pr-2">
<Toaster position="top-center" closeButton={true} />
<div className="mb-1 flex items-center justify-between gap-4 pt-2">
<div className="flex max-w-5xl flex-col">
<Heading as="h4">{t("detectorsAndModel.title")}</Heading>
<div className="my-1 text-sm text-muted-foreground">
{t("detectorsAndModel.description")}
</div>
<div className="flex items-center text-sm text-primary-variant">
<Link
to={getLocaleDocUrl("/configuration/object_detectors")}
target="_blank"
rel="noopener noreferrer"
className="inline"
>
{t("readTheDocumentation", { ns: "common" })}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</div>
{isDirty && (
<Badge
variant="secondary"
className="cursor-default bg-unsaved text-xs text-black hover:bg-unsaved"
>
{t("button.modified", { ns: "common", defaultValue: "Modified" })}
</Badge>
)}
</div>
<div className="w-full max-w-5xl space-y-6 pt-4">
<div className="space-y-6">
<SettingsGroupCard title={t("detectorsAndModel.cardTitles.detector")}>
<ConfigSectionTemplate
key={`detectors-${resetKey}`}
sectionKey="detectors"
level="global"
showOverrideIndicator={false}
showTitle={false}
embedded
pendingDataBySection={childPending}
onPendingDataChange={handleChildPendingChange}
onStatusChange={handleDetectorStatusChange}
/>
</SettingsGroupCard>
{plusMismatch && selectedPlusModel && (
<ConfigMessageBanner
messages={[
{
key: "plus-mismatch",
messageKey: "detectorsAndModel.mismatch.warning",
severity: "warning",
condition: () => true,
values: {
model: selectedPlusModel.name,
required: selectedPlusModel.supportedDetectors.join(", "),
},
},
]}
/>
)}
<SettingsGroupCard title={t("detectorsAndModel.cardTitles.model")}>
{plusEnabled ? (
<Tabs
value={state.modelTab}
onValueChange={(value) =>
setState((prev) =>
prev ? { ...prev, modelTab: value as ModelTab } : prev,
)
}
>
<TabsList className="mb-4">
<TabsTrigger value="plus">
{t("detectorsAndModel.tabs.plus")}
</TabsTrigger>
<TabsTrigger value="custom">
{t("detectorsAndModel.tabs.custom")}
</TabsTrigger>
</TabsList>
<TabsContent value="plus">
<SplitCardRow
label={t("frigatePlus.modelInfo.availableModels")}
description={
<Trans ns="views/settings">
frigatePlus.modelInfo.modelSelect
</Trans>
}
content={
<div className="flex w-full items-center gap-2">
<Select
value={state.plusModelId}
onValueChange={(value) =>
setState((prev) =>
prev ? { ...prev, plusModelId: value } : prev,
)
}
>
<SelectTrigger className="w-full">
{state.plusModelId &&
availableModels?.[state.plusModelId]
? new Date(
availableModels[state.plusModelId].trainDate,
).toLocaleString() +
" " +
availableModels[state.plusModelId].baseModel +
" (" +
(availableModels[state.plusModelId].isBaseModel
? t(
"frigatePlus.modelInfo.plusModelType.baseModel",
)
: t(
"frigatePlus.modelInfo.plusModelType.userModel",
)) +
") " +
availableModels[state.plusModelId].name +
" (" +
availableModels[state.plusModelId].width +
"x" +
availableModels[state.plusModelId].height +
")"
: isLoadingModels
? t(
"frigatePlus.modelInfo.loadingAvailableModels",
)
: t(
"detectorsAndModel.plusModel.noModelSelected",
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
{filteredModelEntries.length === 0 ? (
<div className="px-4 py-3 text-center text-sm text-muted-foreground">
{t("frigatePlus.modelInfo.noModelsAvailable")}
</div>
) : (
filteredModelEntries.map(([id, model]) => (
<SelectItem
key={id}
className="cursor-pointer"
value={id}
disabled={!isModelCompatible(model)}
>
{new Date(model.trainDate).toLocaleString()}{" "}
<div>
{model.baseModel} {" ("}
{model.isBaseModel
? t(
"frigatePlus.modelInfo.plusModelType.baseModel",
)
: t(
"frigatePlus.modelInfo.plusModelType.userModel",
)}
{")"}
</div>
<div>
{model.name} (
{model.width + "x" + model.height})
</div>
<div>
{t(
"frigatePlus.modelInfo.supportedDetectors",
)}
: {model.supportedDetectors.join(", ")}
</div>
{!isModelCompatible(model) && (
<div className="text-xs text-danger">
{t(
"detectorsAndModel.plusModel.requiresDetector",
{
detector:
model.supportedDetectors.join(
", ",
),
},
)}
</div>
)}
<div className="text-xs text-muted-foreground">
{id}
</div>
</SelectItem>
))
)}
</SelectGroup>
</SelectContent>
</Select>
<Popover>
<PopoverTrigger asChild>
<button
type="button"
className="focus:outline-none"
aria-label={t(
"frigatePlus.modelInfo.filter.ariaLabel",
)}
>
<LuFilter
className={cn(
"size-4",
isFilterActive
? "text-selected"
: "text-secondary-foreground",
)}
/>
</button>
</PopoverTrigger>
<PopoverContent align="end" className="w-56">
<div className="space-y-3">
<div className="text-sm text-primary-variant">
{t("frigatePlus.modelInfo.filter.ariaLabel")}
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="filterBaseModels"
className="cursor-pointer text-primary"
>
{t("frigatePlus.modelInfo.filter.baseModels")}
</Label>
<Switch
id="filterBaseModels"
checked={showBaseModels}
onCheckedChange={setShowBaseModels}
/>
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="filterFineTunedModels"
className="cursor-pointer text-primary"
>
{t(
"frigatePlus.modelInfo.filter.fineTunedModels",
)}
</Label>
<Switch
id="filterFineTunedModels"
checked={showFineTunedModels}
onCheckedChange={setShowFineTunedModels}
/>
</div>
</div>
</PopoverContent>
</Popover>
</div>
}
/>
</TabsContent>
<TabsContent value="custom">
<ConfigSectionTemplate
key={`model-${resetKey}`}
sectionKey="model"
level="global"
showOverrideIndicator={false}
showTitle={false}
embedded
pendingDataBySection={childPending}
onPendingDataChange={handleChildPendingChange}
onStatusChange={handleModelStatusChange}
/>
</TabsContent>
</Tabs>
) : (
<ConfigSectionTemplate
key={`model-${resetKey}`}
sectionKey="model"
level="global"
showOverrideIndicator={false}
showTitle={false}
embedded
pendingDataBySection={childPending}
onPendingDataChange={handleChildPendingChange}
onStatusChange={handleModelStatusChange}
/>
)}
</SettingsGroupCard>
</div>
</div>
<div className="sticky bottom-0 z-50 mt-6 w-full border-t border-secondary bg-background pt-0">
<div
className={cn(
"flex flex-col items-center gap-4 pt-2 md:flex-row",
isDirty ? "justify-between" : "justify-end",
)}
>
{isDirty && (
<span className="text-sm text-unsaved">
{t("unsavedChanges", { ns: "views/settings" })}
</span>
)}
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
{isDirty && (
<Button
onClick={onUndo}
variant="outline"
disabled={isSaving}
className="flex min-w-36 flex-1 gap-2"
>
{t("button.undo", { ns: "common" })}
</Button>
)}
<Button
onClick={onSave}
variant="select"
disabled={saveDisabled}
className="flex min-w-36 flex-1 gap-2"
>
{isSaving ? (
<>
<ActivityIndicator className="h-4 w-4" />
{t("button.saving", { ns: "common" })}
</>
) : (
t("button.save", { ns: "common" })
)}
</Button>
</div>
</div>
</div>
<RestartDialog
isOpen={restartDialogOpen}
onClose={() => setRestartDialogOpen(false)}
onRestart={() => sendRestart("restart")}
/>
</div>
);
}

462
web/src/views/settings/FrigatePlusSettingsView.tsx
View File

@ -1,234 +1,28 @@
import Heading from "@/components/ui/heading"; import { useEffect } from "react";
import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { CheckCircle2, XCircle } from "lucide-react";
import { LuExternalLink } from "react-icons/lu";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import { toast } from "sonner";
import useSWR from "swr";
import axios from "axios";
import { FrigateConfig } from "@/types/frigateConfig";
import { CheckCircle2, XCircle } from "lucide-react";
import { Trans, useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom"; import Heading from "@/components/ui/heading";
import { LuExternalLink, LuFilter } from "react-icons/lu";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
} from "@/components/ui/select";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { useDocDomain } from "@/hooks/use-doc-domain";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { import {
SettingsGroupCard, SettingsGroupCard,
SplitCardRow, SplitCardRow,
} from "@/components/card/SettingsGroupCard"; } from "@/components/card/SettingsGroupCard";
import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary"; import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary";
import { useRestart } from "@/api/ws"; import { useDocDomain } from "@/hooks/use-doc-domain";
import RestartDialog from "@/components/overlay/dialog/RestartDialog"; import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { FrigateConfig } from "@/types/frigateConfig";
import type { SettingsPageProps } from "@/views/settings/SingleSectionPage";
type FrigatePlusModel = { export default function FrigatePlusSettingsView(_props: SettingsPageProps) {
id: string;
type: string;
name: string;
isBaseModel: boolean;
supportedDetectors: string[];
trainDate: string;
baseModel: string;
width: number;
height: number;
};
type FrigatePlusSettings = {
model: {
id?: string;
};
};
type FrigateSettingsViewProps = {
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
};
export default function FrigatePlusSettingsView({
setUnsavedChanges,
}: FrigateSettingsViewProps) {
const { t } = useTranslation("views/settings"); const { t } = useTranslation("views/settings");
const { getLocaleDocUrl } = useDocDomain(); const { getLocaleDocUrl } = useDocDomain();
const { data: config, mutate: updateConfig } = const { data: config } = useSWR<FrigateConfig>("config");
useSWR<FrigateConfig>("config"); const navigate = useNavigate();
const [changedValue, setChangedValue] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const { send: sendRestart } = useRestart();
const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
const [frigatePlusSettings, setFrigatePlusSettings] =
useState<FrigatePlusSettings>({
model: {
id: undefined,
},
});
const [origPlusSettings, setOrigPlusSettings] = useState<FrigatePlusSettings>(
{
model: {
id: undefined,
},
},
);
const { data: availableModels = {}, isLoading: isLoadingModels } = useSWR<
Record<string, FrigatePlusModel>
>("/plus/models", {
fallbackData: {},
fetcher: async (url) => {
const res = await axios.get(url, { withCredentials: true });
return res.data.reduce(
(obj: Record<string, FrigatePlusModel>, model: FrigatePlusModel) => {
obj[model.id] = model;
return obj;
},
{},
);
},
});
const [showBaseModels, setShowBaseModels] = useState(true);
const [showFineTunedModels, setShowFineTunedModels] = useState(true);
const filteredModelEntries = useMemo(
() =>
Object.entries(availableModels || {}).filter(([, model]) =>
model.isBaseModel ? showBaseModels : showFineTunedModels,
),
[availableModels, showBaseModels, showFineTunedModels],
);
const isFilterActive = !showBaseModels || !showFineTunedModels;
useEffect(() => {
if (config) {
if (frigatePlusSettings?.model.id == undefined) {
setFrigatePlusSettings({
model: {
id: config.model.plus?.id,
},
});
}
setOrigPlusSettings({
model: {
id: config.model.plus?.id,
},
});
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [config]);
const handleFrigatePlusConfigChange = (
newConfig: Partial<FrigatePlusSettings>,
) => {
setFrigatePlusSettings((prevConfig) => ({
model: {
...prevConfig.model,
...newConfig.model,
},
}));
setUnsavedChanges(true);
setChangedValue(true);
};
const saveToConfig = useCallback(async () => {
setIsLoading(true);
try {
// Clear the existing model section so only the new path remains
await axios.put("config/set", {
requires_restart: 0,
config_data: { model: null },
});
const res = await axios.put("config/set", {
requires_restart: 0,
config_data: {
model: { path: `plus://${frigatePlusSettings.model.id}` },
},
});
if (res.status === 200) {
toast.success(t("frigatePlus.toast.success"), {
position: "top-center",
action: (
<a onClick={() => setRestartDialogOpen(true)}>
<Button>
{t("restart.button", { ns: "components/dialog" })}
</Button>
</a>
),
});
setChangedValue(false);
updateConfig();
} else {
toast.error(
t("frigatePlus.toast.error", { errorMessage: res.statusText }),
{
position: "top-center",
},
);
}
} catch (error) {
const err = error as {
response?: { data?: { message?: string; detail?: string } };
};
const errorMessage =
err.response?.data?.message ||
err.response?.data?.detail ||
"Unknown error";
toast.error(t("toast.save.error.title", { errorMessage, ns: "common" }), {
position: "top-center",
});
} finally {
addMessage(
"plus_restart",
t("frigatePlus.restart_required"),
undefined,
"plus_restart",
);
setIsLoading(false);
}
}, [updateConfig, addMessage, frigatePlusSettings, t]);
const onCancel = useCallback(() => {
setFrigatePlusSettings(origPlusSettings);
setChangedValue(false);
removeMessage("plus_settings", "plus_settings");
}, [origPlusSettings, removeMessage]);
useEffect(() => {
if (changedValue) {
addMessage(
"plus_settings",
t("frigatePlus.unsavedChanges"),
undefined,
"plus_settings",
);
} else {
removeMessage("plus_settings", "plus_settings");
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [changedValue]);
useEffect(() => { useEffect(() => {
document.title = t("documentTitle.frigatePlus"); document.title = t("documentTitle.frigatePlus");
@ -246,7 +40,6 @@ export default function FrigatePlusSettingsView({
<Heading as="h4" className="mb-2"> <Heading as="h4" className="mb-2">
{t("frigatePlus.title")} {t("frigatePlus.title")}
</Heading> </Heading>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("frigatePlus.description")} {t("frigatePlus.description")}
</p> </p>
@ -292,170 +85,20 @@ export default function FrigatePlusSettingsView({
</SettingsGroupCard> </SettingsGroupCard>
{config?.plus?.enabled && ( {config?.plus?.enabled && (
<FrigatePlusCurrentModelSummary plusModel={config.model.plus} /> <FrigatePlusCurrentModelSummary
)} plusModel={config.model.plus}
action={
{config?.plus?.enabled && ( <Button
<SettingsGroupCard title={t("frigatePlus.cardTitles.otherModels")}> size="sm"
<SplitCardRow variant="outline"
label={t("frigatePlus.modelInfo.availableModels")} onClick={() =>
description={ navigate("/settings?page=systemDetectorsAndModel")
<Trans ns="views/settings"> }
frigatePlus.modelInfo.modelSelect >
</Trans> {t("frigatePlus.changeInDetectorsAndModel")}
} </Button>
content={ }
<div className="flex w-full items-center gap-2"> />
<Select
value={frigatePlusSettings.model.id}
onValueChange={(value) =>
handleFrigatePlusConfigChange({
model: { id: value as string },
})
}
>
<SelectTrigger className="w-full">
{frigatePlusSettings.model.id &&
availableModels?.[frigatePlusSettings.model.id]
? new Date(
availableModels[
frigatePlusSettings.model.id
].trainDate,
).toLocaleString() +
" " +
availableModels[frigatePlusSettings.model.id]
.baseModel +
" (" +
(availableModels[frigatePlusSettings.model.id]
.isBaseModel
? t(
"frigatePlus.modelInfo.plusModelType.baseModel",
)
: t(
"frigatePlus.modelInfo.plusModelType.userModel",
)) +
") " +
availableModels[frigatePlusSettings.model.id].name +
" (" +
availableModels[frigatePlusSettings.model.id]
.width +
"x" +
availableModels[frigatePlusSettings.model.id]
.height +
")"
: isLoadingModels
? t("frigatePlus.modelInfo.loadingAvailableModels")
: t("frigatePlus.modelInfo.selectModel")}
</SelectTrigger>
<SelectContent>
<SelectGroup>
{filteredModelEntries.length === 0 ? (
<div className="px-4 py-3 text-center text-sm text-muted-foreground">
{t("frigatePlus.modelInfo.noModelsAvailable")}
</div>
) : (
filteredModelEntries.map(([id, model]) => (
<SelectItem
key={id}
className="cursor-pointer"
value={id}
disabled={
!model.supportedDetectors.includes(
Object.values(config.detectors)[0].type,
)
}
>
{new Date(model.trainDate).toLocaleString()}{" "}
<div>
{model.baseModel} {" ("}
{model.isBaseModel
? t(
"frigatePlus.modelInfo.plusModelType.baseModel",
)
: t(
"frigatePlus.modelInfo.plusModelType.userModel",
)}
{")"}
</div>
<div>
{model.name} (
{model.width + "x" + model.height})
</div>
<div>
{t(
"frigatePlus.modelInfo.supportedDetectors",
)}
: {model.supportedDetectors.join(", ")}
</div>
<div className="text-xs text-muted-foreground">
{id}
</div>
</SelectItem>
))
)}
</SelectGroup>
</SelectContent>
</Select>
<Popover>
<PopoverTrigger asChild>
<button
type="button"
className="focus:outline-none"
aria-label={t(
"frigatePlus.modelInfo.filter.ariaLabel",
)}
>
<LuFilter
className={cn(
"size-4",
isFilterActive
? "text-selected"
: "text-secondary-foreground",
)}
/>
</button>
</PopoverTrigger>
<PopoverContent align="end" className="w-56">
<div className="space-y-3">
<div className="text-sm text-primary-variant">
{t("frigatePlus.modelInfo.filter.ariaLabel")}
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="filterBaseModels"
className="cursor-pointer text-primary"
>
{t("frigatePlus.modelInfo.filter.baseModels")}
</Label>
<Switch
id="filterBaseModels"
checked={showBaseModels}
onCheckedChange={setShowBaseModels}
/>
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="filterFineTunedModels"
className="cursor-pointer text-primary"
>
{t(
"frigatePlus.modelInfo.filter.fineTunedModels",
)}
</Label>
<Switch
id="filterFineTunedModels"
checked={showFineTunedModels}
onCheckedChange={setShowFineTunedModels}
/>
</div>
</div>
</PopoverContent>
</Popover>
</div>
}
/>
</SettingsGroupCard>
)} )}
<SettingsGroupCard title={t("frigatePlus.cardTitles.configuration")}> <SettingsGroupCard title={t("frigatePlus.cardTitles.configuration")}>
@ -524,55 +167,6 @@ export default function FrigatePlusSettingsView({
</SettingsGroupCard> </SettingsGroupCard>
</div> </div>
</div> </div>
<div className="sticky bottom-0 z-50 mt-6 w-full border-t border-secondary bg-background pt-0">
<div
className={cn(
"flex flex-col items-center gap-4 pt-2 md:flex-row",
changedValue ? "justify-between" : "justify-end",
)}
>
{changedValue && (
<div className="flex items-center gap-2">
<span className="text-sm text-unsaved">
{t("unsavedChanges")}
</span>
</div>
)}
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
{changedValue && (
<Button
onClick={onCancel}
variant="outline"
disabled={isLoading}
className="flex min-w-36 flex-1 gap-2"
>
{t("button.undo", { ns: "common" })}
</Button>
)}
<Button
onClick={saveToConfig}
variant="select"
disabled={!changedValue || isLoading}
className="flex min-w-36 flex-1 gap-2"
>
{isLoading ? (
<>
<ActivityIndicator className="h-4 w-4" />
{t("button.saving", { ns: "common" })}
</>
) : (
t("button.save", { ns: "common" })
)}
</Button>
</div>
</div>
</div>
<RestartDialog
isOpen={restartDialogOpen}
onClose={() => setRestartDialogOpen(false)}
onRestart={() => sendRestart("restart")}
/>
</div> </div>
); );
} }

88
web/src/views/settings/SystemDetectionModelSettingsView.tsx
View File

@ -1,88 +0,0 @@
import ActivityIndicator from "@/components/indicators/activity-indicator";
import Heading from "@/components/ui/heading";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useSWR from "swr";
import type { FrigateConfig } from "@/types/frigateConfig";
import {
SettingsGroupCard,
SplitCardRow,
} from "@/components/card/SettingsGroupCard";
import {
SingleSectionPage,
type SettingsPageProps,
} from "@/views/settings/SingleSectionPage";
import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary";
import { useTranslation } from "react-i18next";
export default function SystemDetectionModelSettingsView(
props: SettingsPageProps,
) {
const { t } = useTranslation(["config/global", "views/settings"]);
const { data: config } = useSWR<FrigateConfig>("config");
const [showModelForm, setShowModelForm] = useState(false);
const navigate = useNavigate();
if (!config) {
return <ActivityIndicator />;
}
const isPlusModelActive = Boolean(config?.model?.plus?.id);
if (!isPlusModelActive || showModelForm) {
return <SingleSectionPage sectionKey="model" level="global" {...props} />;
}
return (
<div className="flex size-full max-w-5xl flex-col lg:pr-2">
<div className="mb-5 flex items-center justify-between gap-4">
<div className="flex flex-col">
<Heading as="h4">{t("model.label", { ns: "config/global" })}</Heading>
<div className="my-1 text-sm text-muted-foreground">
{t("model.description", { ns: "config/global" })}
</div>
</div>
</div>
<div className="space-y-6">
<SettingsGroupCard
title={t("detectionModel.plusActive.title", { ns: "views/settings" })}
>
<SplitCardRow
label={t("detectionModel.plusActive.label", {
ns: "views/settings",
})}
description={t("detectionModel.plusActive.description", {
ns: "views/settings",
})}
content={
<div className="flex flex-col items-start gap-3">
<Button
variant="outline"
onClick={() => navigate("/settings?page=frigateplus")}
>
{t("detectionModel.plusActive.goToFrigatePlus", {
ns: "views/settings",
})}
</Button>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setShowModelForm(true)}
>
{t("detectionModel.plusActive.showModelForm", {
ns: "views/settings",
})}
</Button>
</div>
}
/>
</SettingsGroupCard>
<FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
</div>
</div>
);
}

14
web/src/views/settings/components/FrigatePlusCurrentModelSummary.tsx
View File

@ -1,3 +1,4 @@
import { ReactNode } from "react";
import { import {
SettingsGroupCard, SettingsGroupCard,
SplitCardRow, SplitCardRow,
@ -7,15 +8,26 @@ import { useTranslation } from "react-i18next";
type FrigatePlusCurrentModelSummaryProps = { type FrigatePlusCurrentModelSummaryProps = {
plusModel: FrigateConfig["model"]["plus"]; plusModel: FrigateConfig["model"]["plus"];
action?: ReactNode;
}; };
export default function FrigatePlusCurrentModelSummary({ export default function FrigatePlusCurrentModelSummary({
plusModel, plusModel,
action,
}: FrigatePlusCurrentModelSummaryProps) { }: FrigatePlusCurrentModelSummaryProps) {
const { t } = useTranslation("views/settings"); const { t } = useTranslation("views/settings");
const title = action ? (
<div className="flex w-full items-center justify-between gap-3">
<span>{t("frigatePlus.cardTitles.currentModel")}</span>
{action}
</div>
) : (
t("frigatePlus.cardTitles.currentModel")
);
return ( return (
<SettingsGroupCard title={t("frigatePlus.cardTitles.currentModel")}> <SettingsGroupCard title={title}>
{!plusModel && ( {!plusModel && (
<p className="text-muted-foreground"> <p className="text-muted-foreground">
{t("frigatePlus.modelInfo.noModelLoaded")} {t("frigatePlus.modelInfo.noModelLoaded")}