mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-05-07 05:55:27 +03:00
Compare commits
14 Commits
832fd7bc53
...
6006eea9b7
| Author | SHA1 | Date | |
|---|---|---|---|
|
6006eea9b7 | ||
|
|
882b3a8ffd | ||
|
|
b6fd86a066 | ||
|
|
147cd5cc2b | ||
|
|
6a2b914b10 | ||
|
|
45213d0420 | ||
|
|
2cfb530dbf | ||
|
|
81b0d94793 | ||
|
|
67837f61d0 | ||
|
|
58c93c2e9e | ||
|
|
6b71feffab | ||
|
|
1c26bc289e | ||
|
|
0371b60c71 | ||
|
|
01392e03ac |
5
.gitignore
vendored
5
.gitignore
vendored
@ -22,3 +22,8 @@ core
|
|||||||
!/web/**/*.ts
|
!/web/**/*.ts
|
||||||
.idea/*
|
.idea/*
|
||||||
.ipynb_checkpoints
|
.ipynb_checkpoints
|
||||||
|
|
||||||
|
# Auto-generated Docker Compose Generator config files
|
||||||
|
docs/src/components/DockerComposeGenerator/config/devices.ts
|
||||||
|
docs/src/components/DockerComposeGenerator/config/hardware.ts
|
||||||
|
docs/src/components/DockerComposeGenerator/config/ports.ts
|
||||||
|
|||||||
@ -10,11 +10,14 @@ If you've found a bug and want to fix it, go for it. Link to the relevant issue
|
|||||||
|
|
||||||
### New features
|
### New features
|
||||||
|
|
||||||
Every new feature adds scope that the maintainers must test, maintain, and support long-term. Before writing code for a new feature:
|
A pull request is more than just code — it's a request for the maintainers to review, integrate, and support the change long-term. We're selective about what we take on, and prioritize changes that align with the project's direction and can be responsibly maintained in the long term.
|
||||||
|
|
||||||
|
**Large or highly-requested features** raise the bar even higher. Popularity signals demand, but it doesn't pre-approve any particular implementation. The bigger the change, the higher the long-term cost, and the more important it is that we're aligned on scope and approach before any code is written. A large PR that lands without prior discussion is unlikely to be merged as-is, no matter how well it's implemented.
|
||||||
|
|
||||||
|
Before writing code for a new feature:
|
||||||
|
|
||||||
1. **Check for existing discussion.** Search [feature requests](https://github.com/blakeblackshear/frigate/issues) and [discussions](https://github.com/blakeblackshear/frigate/discussions) to see if it's been proposed or discussed. Feature requests tagged with "planned" are on our radar — we plan to get to them, but we don't maintain a public roadmap or timeline. Check in with us first if you have interest in contributing to one.
|
1. **Check for existing discussion.** Search [feature requests](https://github.com/blakeblackshear/frigate/issues) and [discussions](https://github.com/blakeblackshear/frigate/discussions) to see if it's been proposed or discussed. Feature requests tagged with "planned" are on our radar — we plan to get to them, but we don't maintain a public roadmap or timeline. Check in with us first if you have interest in contributing to one.
|
||||||
2. **Start a discussion or feature request first.** This helps ensure your idea aligns with Frigate's direction before you invest time building it. Community interest in a feature request helps us gauge demand, though a great idea is a great idea even without a crowd behind it.
|
2. **Start a discussion or feature request first.** This helps ensure your idea aligns with Frigate's direction before you invest time building it. Community interest in a feature request helps us gauge demand, though a great idea is a great idea even without a crowd behind it.
|
||||||
3. **Be open to "no".** We try to be thoughtful about what we take on, and sometimes that means saying no to good code if the feature isn't the right fit for the project. These calls are sometimes subjective, and we won't always get them right. We're happy to discuss and reconsider.
|
|
||||||
|
|
||||||
## AI usage policy
|
## AI usage policy
|
||||||
|
|
||||||
@ -39,6 +42,8 @@ We're not trying to gatekeep how you write code. Use whatever tools make you pro
|
|||||||
|
|
||||||
Some honest context: when we review a PR, we're not just evaluating whether the code works today. We're evaluating whether we can maintain it, debug it, and extend it long-term — often without the original author's involvement. Code that the author doesn't deeply understand is code that nobody understands, and that's a liability.
|
Some honest context: when we review a PR, we're not just evaluating whether the code works today. We're evaluating whether we can maintain it, debug it, and extend it long-term — often without the original author's involvement. Code that the author doesn't deeply understand is code that nobody understands, and that's a liability.
|
||||||
|
|
||||||
|
One more thing worth saying directly: most maintainers already have access to the same AI tools you do. A PR that's entirely AI-generated — where the author can't explain the design, debug issues independently, or engage substantively in design discussions — doesn't offer something we couldn't produce ourselves. What makes a contribution genuinely valuable is the human judgment and domain understanding behind it, as well as the engagement during review that shapes it into something we can confidently take on long-term.
|
||||||
|
|
||||||
## Pull request guidelines
|
## Pull request guidelines
|
||||||
|
|
||||||
### Before submitting
|
### Before submitting
|
||||||
|
|||||||
@ -19,7 +19,7 @@ Face recognition requires a one-time internet connection to download detection a
|
|||||||
|
|
||||||
### Face Detection
|
### Face Detection
|
||||||
|
|
||||||
When running a Frigate+ model (or any custom model that natively detects faces) should ensure that `face` is added to the [list of objects to track](../plus/#available-label-types) either globally or for a specific camera. This will allow face detection to run at the same time as object detection and be more efficient.
|
When running a Frigate+ model (or any custom model that natively detects faces) should ensure that `face` is added to the [list of objects to track](../plus/index.md#available-label-types) either globally or for a specific camera. This will allow face detection to run at the same time as object detection and be more efficient.
|
||||||
|
|
||||||
When running a default COCO model or another model that does not include `face` as a detectable label, face detection will run via CV2 using a lightweight DNN model that runs on the CPU. In this case, you should _not_ define `face` in your list of objects to track.
|
When running a default COCO model or another model that does not include `face` as a detectable label, face detection will run via CV2 using a lightweight DNN model that runs on the CPU. In this case, you should _not_ define `face` in your list of objects to track.
|
||||||
|
|
||||||
|
|||||||
@ -201,7 +201,7 @@ Cloud Generative AI providers require an active internet connection to send imag
|
|||||||
|
|
||||||
### Ollama Cloud
|
### Ollama Cloud
|
||||||
|
|
||||||
Ollama also supports [cloud models](https://ollama.com/cloud), where your local Ollama instance handles requests from Frigate, but model inference is performed in the cloud. Set up Ollama locally, sign in with your Ollama account, and specify the cloud model name in your Frigate config. For more details, see the Ollama cloud model [docs](https://docs.ollama.com/cloud).
|
Ollama also supports [cloud models](https://ollama.com/cloud), where model inference is performed in the cloud. You can connect directly to Ollama Cloud by setting `base_url` to `https://ollama.com` and providing an API key. Alternatively, you can run Ollama locally and use a cloud model name so your local instance forwards requests to the cloud. For more details, see the Ollama cloud model [docs](https://docs.ollama.com/cloud).
|
||||||
|
|
||||||
#### Configuration
|
#### Configuration
|
||||||
|
|
||||||
@ -210,7 +210,8 @@ Ollama also supports [cloud models](https://ollama.com/cloud), where your local
|
|||||||
|
|
||||||
1. Navigate to <NavPath path="Settings > Enrichments > Generative AI" />.
|
1. Navigate to <NavPath path="Settings > Enrichments > Generative AI" />.
|
||||||
- Set **Provider** to `ollama`
|
- Set **Provider** to `ollama`
|
||||||
- Set **Base URL** to your local Ollama address (e.g., `http://localhost:11434`)
|
- Set **Base URL** to your local Ollama address (e.g., `http://localhost:11434`) or `https://ollama.com` for direct cloud inference
|
||||||
|
- Set **API key** if required by your endpoint (e.g., when using `https://ollama.com`)
|
||||||
- Set **Model** to the cloud model name
|
- Set **Model** to the cloud model name
|
||||||
|
|
||||||
</TabItem>
|
</TabItem>
|
||||||
@ -223,6 +224,16 @@ genai:
|
|||||||
model: cloud-model-name
|
model: cloud-model-name
|
||||||
```
|
```
|
||||||
|
|
||||||
|
or when using Ollama Cloud directly
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
genai:
|
||||||
|
provider: ollama
|
||||||
|
base_url: https://ollama.com
|
||||||
|
model: cloud-model-name
|
||||||
|
api_key: your-api-key
|
||||||
|
```
|
||||||
|
|
||||||
</TabItem>
|
</TabItem>
|
||||||
</ConfigTabs>
|
</ConfigTabs>
|
||||||
|
|
||||||
|
|||||||
@ -494,7 +494,7 @@ detectors:
|
|||||||
| [YOLO-NAS](#yolo-nas) | ✅ | ✅ | |
|
| [YOLO-NAS](#yolo-nas) | ✅ | ✅ | |
|
||||||
| [MobileNet v2](#ssdlite-mobilenet-v2) | ✅ | ✅ | Fast and lightweight model, less accurate than larger models |
|
| [MobileNet v2](#ssdlite-mobilenet-v2) | ✅ | ✅ | Fast and lightweight model, less accurate than larger models |
|
||||||
| [YOLOX](#yolox) | ✅ | ? | |
|
| [YOLOX](#yolox) | ✅ | ? | |
|
||||||
| [D-FINE](#d-fine) | ❌ | ❌ | |
|
| [D-FINE / DEIMv2](#d-fine--deimv2) | ❌ | ❌ | |
|
||||||
|
|
||||||
#### SSDLite MobileNet v2
|
#### SSDLite MobileNet v2
|
||||||
|
|
||||||
@ -710,13 +710,13 @@ model:
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
#### D-FINE
|
#### D-FINE / DEIMv2
|
||||||
|
|
||||||
[D-FINE](https://github.com/Peterande/D-FINE) is a DETR based model. The ONNX exported models are supported, but not included by default. See [the models section](#downloading-d-fine-model) for more information on downloading the D-FINE model for use in Frigate.
|
[D-FINE](https://github.com/Peterande/D-FINE) and [DEIMv2](https://github.com/Intellindust-AI-Lab/DEIMv2) are DETR based models that share the same ONNX input/output format. The ONNX exported models are supported, but not included by default. See the models section for downloading [D-FINE](#downloading-d-fine-model) or [DEIMv2](#downloading-deimv2-model) for use in Frigate.
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
|
|
||||||
Currently D-FINE models only run on OpenVINO in CPU mode, GPUs currently fail to compile the model
|
Currently D-FINE / DEIMv2 models only run on OpenVINO in CPU mode, GPUs currently fail to compile the model
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -766,6 +766,31 @@ Note that the labelmap uses a subset of the complete COCO label set that has onl
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>DEIMv2 Setup & Config</summary>
|
||||||
|
|
||||||
|
After placing the downloaded onnx model in your `config/model_cache` folder, you can use the following configuration:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
detectors:
|
||||||
|
ov:
|
||||||
|
type: openvino
|
||||||
|
device: CPU
|
||||||
|
|
||||||
|
model:
|
||||||
|
model_type: dfine
|
||||||
|
width: 640
|
||||||
|
height: 640
|
||||||
|
input_tensor: nchw
|
||||||
|
input_dtype: float
|
||||||
|
path: /config/model_cache/deimv2_hgnetv2_n.onnx
|
||||||
|
labelmap_path: /labelmap/coco-80.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that the labelmap uses a subset of the complete COCO label set that has only 80 objects.
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
## Apple Silicon detector
|
## Apple Silicon detector
|
||||||
|
|
||||||
The NPU in Apple Silicon can't be accessed from within a container, so the [Apple Silicon detector client](https://github.com/frigate-nvr/apple-silicon-detector) must first be setup. It is recommended to use the Frigate docker image with `-standard-arm64` suffix, for example `ghcr.io/blakeblackshear/frigate:stable-standard-arm64`.
|
The NPU in Apple Silicon can't be accessed from within a container, so the [Apple Silicon detector client](https://github.com/frigate-nvr/apple-silicon-detector) must first be setup. It is recommended to use the Frigate docker image with `-standard-arm64` suffix, for example `ghcr.io/blakeblackshear/frigate:stable-standard-arm64`.
|
||||||
@ -947,7 +972,7 @@ The AMD GPU kernel is known problematic especially when converting models to mxr
|
|||||||
|
|
||||||
See [ONNX supported models](#supported-models) for supported models, there are some caveats:
|
See [ONNX supported models](#supported-models) for supported models, there are some caveats:
|
||||||
|
|
||||||
- D-FINE models are not supported
|
- D-FINE / DEIMv2 models are not supported
|
||||||
- YOLO-NAS models are known to not run well on integrated GPUs
|
- YOLO-NAS models are known to not run well on integrated GPUs
|
||||||
|
|
||||||
## ONNX
|
## ONNX
|
||||||
@ -1003,7 +1028,7 @@ detectors:
|
|||||||
| [RF-DETR](#rf-detr) | ✅ | ❌ | Supports CUDA Graphs for optimal Nvidia performance |
|
| [RF-DETR](#rf-detr) | ✅ | ❌ | Supports CUDA Graphs for optimal Nvidia performance |
|
||||||
| [YOLO-NAS](#yolo-nas-1) | ⚠️ | ⚠️ | Not supported by CUDA Graphs |
|
| [YOLO-NAS](#yolo-nas-1) | ⚠️ | ⚠️ | Not supported by CUDA Graphs |
|
||||||
| [YOLOX](#yolox-1) | ✅ | ✅ | Supports CUDA Graphs for optimal Nvidia performance |
|
| [YOLOX](#yolox-1) | ✅ | ✅ | Supports CUDA Graphs for optimal Nvidia performance |
|
||||||
| [D-FINE](#d-fine) | ⚠️ | ❌ | Not supported by CUDA Graphs |
|
| [D-FINE / DEIMv2](#d-fine--deimv2-1) | ⚠️ | ❌ | Not supported by CUDA Graphs |
|
||||||
|
|
||||||
There is no default model provided, the following formats are supported:
|
There is no default model provided, the following formats are supported:
|
||||||
|
|
||||||
@ -1215,9 +1240,9 @@ model:
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
#### D-FINE
|
#### D-FINE / DEIMv2
|
||||||
|
|
||||||
[D-FINE](https://github.com/Peterande/D-FINE) is a DETR based model. The ONNX exported models are supported, but not included by default. See [the models section](#downloading-d-fine-model) for more information on downloading the D-FINE model for use in Frigate.
|
[D-FINE](https://github.com/Peterande/D-FINE) and [DEIMv2](https://github.com/Intellindust-AI-Lab/DEIMv2) are DETR based models that share the same ONNX input/output format. The ONNX exported models are supported, but not included by default. See the models section for downloading [D-FINE](#downloading-d-fine-model) or [DEIMv2](#downloading-deimv2-model) for use in Frigate.
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>D-FINE Setup & Config</summary>
|
<summary>D-FINE Setup & Config</summary>
|
||||||
@ -1262,6 +1287,28 @@ model:
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>DEIMv2 Setup & Config</summary>
|
||||||
|
|
||||||
|
After placing the downloaded onnx model in your `config/model_cache` folder, you can use the following configuration:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
detectors:
|
||||||
|
onnx:
|
||||||
|
type: onnx
|
||||||
|
|
||||||
|
model:
|
||||||
|
model_type: dfine
|
||||||
|
width: 640
|
||||||
|
height: 640
|
||||||
|
input_tensor: nchw
|
||||||
|
input_dtype: float
|
||||||
|
path: /config/model_cache/deimv2_hgnetv2_n.onnx
|
||||||
|
labelmap_path: /labelmap/coco-80.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
Note that the labelmap uses a subset of the complete COCO label set that has only 80 objects.
|
Note that the labelmap uses a subset of the complete COCO label set that has only 80 objects.
|
||||||
|
|
||||||
## CPU Detector (not recommended)
|
## CPU Detector (not recommended)
|
||||||
@ -1405,7 +1452,7 @@ MemryX `.dfp` models are automatically downloaded at runtime, if enabled, to the
|
|||||||
|
|
||||||
#### YOLO-NAS
|
#### YOLO-NAS
|
||||||
|
|
||||||
The [YOLO-NAS](https://github.com/Deci-AI/super-gradients/blob/master/YOLONAS.md) model included in this detector is downloaded from the [Models Section](#downloading-yolo-nas-model) and compiled to DFP with [mx_nc](https://developer.memryx.com/tools/neural_compiler.html#usage).
|
The [YOLO-NAS](https://github.com/Deci-AI/super-gradients/blob/master/YOLONAS.md) model included in this detector is downloaded from the [Models Section](#downloading-yolo-nas-model) and compiled to DFP with [mx_nc](https://developer.memryx.com/2p1/tools/neural_compiler.html#usage).
|
||||||
|
|
||||||
**Note:** The default model for the MemryX detector is YOLO-NAS 320x320.
|
**Note:** The default model for the MemryX detector is YOLO-NAS 320x320.
|
||||||
|
|
||||||
@ -1459,7 +1506,7 @@ model:
|
|||||||
|
|
||||||
#### YOLOv9
|
#### YOLOv9
|
||||||
|
|
||||||
The YOLOv9s model included in this detector is downloaded from [the original GitHub](https://github.com/WongKinYiu/yolov9) like in the [Models Section](#yolov9-1) and compiled to DFP with [mx_nc](https://developer.memryx.com/tools/neural_compiler.html#usage).
|
The YOLOv9s model included in this detector is downloaded from [the original GitHub](https://github.com/WongKinYiu/yolov9) like in the [Models Section](#yolov9-1) and compiled to DFP with [mx_nc](https://developer.memryx.com/2p1/tools/neural_compiler.html#usage).
|
||||||
|
|
||||||
##### Configuration
|
##### Configuration
|
||||||
|
|
||||||
@ -1601,19 +1648,39 @@ model:
|
|||||||
|
|
||||||
#### Using a Custom Model
|
#### Using a Custom Model
|
||||||
|
|
||||||
To use your own model:
|
To use your own custom model, first compile it into a [.dfp](https://developer.memryx.com/2p1/specs/files.html#dataflow-program) file, which is the format used by MemryX.
|
||||||
|
|
||||||
1. Package your compiled model into a `.zip` file.
|
#### Compile the Model
|
||||||
|
|
||||||
2. The `.zip` must contain the compiled `.dfp` file.
|
Custom models must be compiled using **MemryX SDK 2.1**.
|
||||||
|
|
||||||
3. Depending on the model, the compiler may also generate a cropped post-processing network. If present, it will be named with the suffix `_post.onnx`.
|
Before compiling your model, install the MemryX Neural Compiler tools from the
|
||||||
|
[Install Tools](https://developer.memryx.com/2p1/get_started/install_tools.html) page on the **host**.
|
||||||
|
|
||||||
4. Bind-mount the `.zip` file into the container and specify its path using `model.path` in your config.
|
> **Note:** It is recommended to compile the model on the host machine, or on another separate machine, rather than inside the Frigate Docker container. Installing the compiler inside Docker may conflict with container packages. It is recommended to create a Python virtual environment and install the compiler there.
|
||||||
|
|
||||||
5. Update the `labelmap_path` to match your custom model's labels.
|
Once the SDK 2.1 environment is set up, follow the
|
||||||
|
[MemryX Compiler](https://developer.memryx.com/2p1/tools/neural_compiler.html#usage) documentation to compile your model.
|
||||||
|
|
||||||
For detailed instructions on compiling models, refer to the [MemryX Compiler](https://developer.memryx.com/tools/neural_compiler.html#usage) docs and [Tutorials](https://developer.memryx.com/tutorials/tutorials.html).
|
Example:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mx_nc -m yolonas.onnx -c 4 --autocrop -v --dfp_fname yolonas.dfp
|
||||||
|
```
|
||||||
|
|
||||||
|
For detailed instructions on compiling models, refer to the [MemryX Compiler](https://developer.memryx.com/2p1/tools/neural_compiler.html#usage) docs and [Tutorials](https://developer.memryx.com/2p1/tutorials/tutorials.html).
|
||||||
|
|
||||||
|
#### Package the Compiled Model
|
||||||
|
|
||||||
|
1. Package your compiled model into a `.zip` file.
|
||||||
|
|
||||||
|
2. The `.zip` file must contain the compiled `.dfp` file.
|
||||||
|
|
||||||
|
3. Depending on the model, the compiler may also generate a cropped post-processing network. If present, it will be named with the suffix `_post.onnx`.
|
||||||
|
|
||||||
|
4. Bind-mount the `.zip` file into the container and specify its path using `model.path` in your config.
|
||||||
|
|
||||||
|
5. Update `labelmap_path` to match your custom model's labels.
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
# The detector automatically selects the default model if nothing is provided in the config.
|
# The detector automatically selects the default model if nothing is provided in the config.
|
||||||
@ -2274,6 +2341,49 @@ COPY --from=build /dfine/output/dfine_${MODEL_SIZE}_obj2coco.onnx /dfine-${MODEL
|
|||||||
EOF
|
EOF
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Downloading DEIMv2 Model
|
||||||
|
|
||||||
|
[DEIMv2](https://github.com/Intellindust-AI-Lab/DEIMv2) can be exported as ONNX by running the command below. Pretrained weights are available on Hugging Face for two backbone families:
|
||||||
|
|
||||||
|
- **HGNetv2** (smaller/faster): `atto`, `femto`, `pico`, `n`
|
||||||
|
- **DINOv3** (larger/more accurate): `s`, `m`, `l`, `x`
|
||||||
|
|
||||||
|
Set `BACKBONE` and `MODEL_SIZE` in the first line to match your desired variant. Hugging Face model names use uppercase (e.g. `HGNetv2_N`, `DINOv3_S`), while config files use lowercase (e.g. `hgnetv2_n`, `dinov3_s`).
|
||||||
|
|
||||||
|
```sh
|
||||||
|
docker build . --rm --build-arg BACKBONE=hgnetv2 --build-arg MODEL_SIZE=n --output . -f- <<'EOF'
|
||||||
|
FROM python:3.11-slim AS build
|
||||||
|
RUN apt-get update && apt-get install --no-install-recommends -y git libgl1 libglib2.0-0 && rm -rf /var/lib/apt/lists/*
|
||||||
|
COPY --from=ghcr.io/astral-sh/uv:0.8.0 /uv /bin/
|
||||||
|
WORKDIR /deimv2
|
||||||
|
RUN git clone https://github.com/Intellindust-AI-Lab/DEIMv2.git .
|
||||||
|
# Install CPU-only PyTorch first to avoid pulling CUDA variant
|
||||||
|
RUN uv pip install --no-cache --system torch torchvision --index-url https://download.pytorch.org/whl/cpu
|
||||||
|
RUN uv pip install --no-cache --system -r requirements.txt
|
||||||
|
RUN uv pip install --no-cache --system onnx safetensors huggingface_hub
|
||||||
|
RUN mkdir -p output
|
||||||
|
ARG BACKBONE
|
||||||
|
ARG MODEL_SIZE
|
||||||
|
# Download from Hugging Face and convert safetensors to pth
|
||||||
|
RUN python3 -c "\
|
||||||
|
from huggingface_hub import hf_hub_download; \
|
||||||
|
from safetensors.torch import load_file; \
|
||||||
|
import torch; \
|
||||||
|
backbone = '${BACKBONE}'.replace('hgnetv2','HGNetv2').replace('dinov3','DINOv3'); \
|
||||||
|
size = '${MODEL_SIZE}'.upper(); \
|
||||||
|
st = load_file(hf_hub_download('Intellindust/DEIMv2_' + backbone + '_' + size + '_COCO', 'model.safetensors')); \
|
||||||
|
torch.save({'model': st}, 'output/deimv2.pth')"
|
||||||
|
RUN sed -i "s/data = torch.rand(2/data = torch.rand(1/" tools/deployment/export_onnx.py
|
||||||
|
# HuggingFace safetensors omits frozen constants that the model constructor initializes
|
||||||
|
RUN sed -i "s/cfg.model.load_state_dict(state)/cfg.model.load_state_dict(state, strict=False)/" tools/deployment/export_onnx.py
|
||||||
|
RUN python3 tools/deployment/export_onnx.py -c configs/deimv2/deimv2_${BACKBONE}_${MODEL_SIZE}_coco.yml -r output/deimv2.pth
|
||||||
|
FROM scratch
|
||||||
|
ARG BACKBONE
|
||||||
|
ARG MODEL_SIZE
|
||||||
|
COPY --from=build /deimv2/output/deimv2.onnx /deimv2_${BACKBONE}_${MODEL_SIZE}.onnx
|
||||||
|
EOF
|
||||||
|
```
|
||||||
|
|
||||||
### Downloading RF-DETR Model
|
### Downloading RF-DETR Model
|
||||||
|
|
||||||
RF-DETR can be exported as ONNX by running the command below. You can copy and paste the whole thing to your terminal and execute, altering `MODEL_SIZE=Nano` in the first line to `Nano`, `Small`, or `Medium` size.
|
RF-DETR can be exported as ONNX by running the command below. You can copy and paste the whole thing to your terminal and execute, altering `MODEL_SIZE=Nano` in the first line to `Nano`, `Small`, or `Medium` size.
|
||||||
|
|||||||
@ -195,7 +195,7 @@ Pre and post capture footage is included in the **recording timeline**, visible
|
|||||||
|
|
||||||
## Will Frigate delete old recordings if my storage runs out?
|
## Will Frigate delete old recordings if my storage runs out?
|
||||||
|
|
||||||
As of Frigate 0.12 if there is less than an hour left of storage, the oldest 2 hours of recordings will be deleted.
|
If there is less than an hour left of storage, the oldest hour of recordings will be deleted and a message will be printed in the Frigate logs. This emergency cleanup deletes the oldest recordings first regardless of retention settings to reclaim space as quickly as possible.
|
||||||
|
|
||||||
## Configuring Recording Retention
|
## Configuring Recording Retention
|
||||||
|
|
||||||
|
|||||||
@ -236,7 +236,7 @@ Enabling arbitrary exec sources allows execution of arbitrary commands through g
|
|||||||
|
|
||||||
## Advanced Restream Configurations
|
## Advanced Restream Configurations
|
||||||
|
|
||||||
The [exec](https://github.com/AlexxIT/go2rtc/tree/v1.9.13#source-exec) source in go2rtc can be used for custom ffmpeg commands. An example is below:
|
The [exec](https://github.com/AlexxIT/go2rtc/tree/v1.9.13#source-exec) source in go2rtc can be used for custom ffmpeg commands and other applications. An example is below:
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
|
|
||||||
@ -244,16 +244,11 @@ The `exec:`, `echo:`, and `expr:` sources are disabled by default for security.
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
:::warning
|
NOTE: RTSP output will need to be passed with two curly braces `{{output}}`, whereas pipe output must be passed without curly braces.
|
||||||
|
|
||||||
The `exec:`, `echo:`, and `expr:` sources are disabled by default for security. You must set `GO2RTC_ALLOW_ARBITRARY_EXEC=true` to use them. See [Security: Restricted Stream Sources](#security-restricted-stream-sources) for more information.
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
NOTE: The output will need to be passed with two curly braces `{{output}}`
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
go2rtc:
|
go2rtc:
|
||||||
streams:
|
streams:
|
||||||
stream1: exec:ffmpeg -hide_banner -re -stream_loop -1 -i /media/BigBuckBunny.mp4 -c copy -rtsp_transport tcp -f rtsp {{output}}
|
stream1: exec:ffmpeg -hide_banner -re -stream_loop -1 -i /media/BigBuckBunny.mp4 -c copy -rtsp_transport tcp -f rtsp {{output}}
|
||||||
|
stream2: exec:rpicam-vid -t 0 --libav-format h264 -o -
|
||||||
```
|
```
|
||||||
|
|||||||
@ -4,12 +4,15 @@ title: Installation
|
|||||||
---
|
---
|
||||||
|
|
||||||
import ShmCalculator from '@site/src/components/ShmCalculator'
|
import ShmCalculator from '@site/src/components/ShmCalculator'
|
||||||
|
import DockerComposeGenerator from '@site/src/components/DockerComposeGenerator'
|
||||||
|
import Tabs from '@theme/Tabs';
|
||||||
|
import TabItem from '@theme/TabItem';
|
||||||
|
|
||||||
Frigate is a Docker container that can be run on any Docker host including as a [Home Assistant App](https://www.home-assistant.io/apps/). Note that the Home Assistant App is **not** the same thing as the integration. The [integration](/integrations/home-assistant) is required to integrate Frigate into Home Assistant, whether you are running Frigate as a standalone Docker container or as a Home Assistant App.
|
Frigate is a Docker container that can be run on any Docker host including as a [Home Assistant App](https://www.home-assistant.io/apps/). Note that the Home Assistant App is **not** the same thing as the integration. The [integration](/integrations/home-assistant) is required to integrate Frigate into Home Assistant, whether you are running Frigate as a standalone Docker container or as a Home Assistant App.
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
|
|
||||||
If you already have Frigate installed as a Home Assistant App, check out the [getting started guide](../guides/getting_started#configuring-frigate) to configure Frigate.
|
If you already have Frigate installed as a Home Assistant App, check out the [getting started guide](../guides/getting_started.md#configuring-frigate) to configure Frigate.
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -286,7 +289,7 @@ The MemryX MX3 Accelerator is available in the M.2 2280 form factor (like an NVM
|
|||||||
|
|
||||||
#### Installation
|
#### Installation
|
||||||
|
|
||||||
To get started with MX3 hardware setup for your system, refer to the [Hardware Setup Guide](https://developer.memryx.com/get_started/hardware_setup.html).
|
To get started with MX3 hardware setup for your system, refer to the [Hardware Setup Guide](https://developer.memryx.com/2p1/get_started/install_hardware.html).
|
||||||
|
|
||||||
Then follow these steps for installing the correct driver/runtime configuration:
|
Then follow these steps for installing the correct driver/runtime configuration:
|
||||||
|
|
||||||
@ -295,6 +298,12 @@ Then follow these steps for installing the correct driver/runtime configuration:
|
|||||||
3. Run the script with `./user_installation.sh`
|
3. Run the script with `./user_installation.sh`
|
||||||
4. **Restart your computer** to complete driver installation.
|
4. **Restart your computer** to complete driver installation.
|
||||||
|
|
||||||
|
:::warning
|
||||||
|
|
||||||
|
For manual setup, use **MemryX SDK 2.1** only. Other SDK versions are not supported for this setup. See the [SDK 2.1 documentation](https://developer.memryx.com/2p1/index.html)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
#### Setup
|
#### Setup
|
||||||
|
|
||||||
To set up Frigate, follow the default installation instructions, for example: `ghcr.io/blakeblackshear/frigate:stable`
|
To set up Frigate, follow the default installation instructions, for example: `ghcr.io/blakeblackshear/frigate:stable`
|
||||||
@ -468,6 +477,16 @@ Finally, configure [hardware object detection](/configuration/object_detectors#a
|
|||||||
|
|
||||||
Running through Docker with Docker Compose is the recommended install method.
|
Running through Docker with Docker Compose is the recommended install method.
|
||||||
|
|
||||||
|
<Tabs>
|
||||||
|
<TabItem value="domestic" label="Docker Compose Generator" default>
|
||||||
|
|
||||||
|
Generate a Frigate Docker Compose configuration based on your hardware and requirements.
|
||||||
|
|
||||||
|
<DockerComposeGenerator/>
|
||||||
|
|
||||||
|
|
||||||
|
</TabItem>
|
||||||
|
<TabItem value="original" label="Example Docker Compose File">
|
||||||
```yaml
|
```yaml
|
||||||
services:
|
services:
|
||||||
frigate:
|
frigate:
|
||||||
@ -501,6 +520,10 @@ services:
|
|||||||
environment:
|
environment:
|
||||||
FRIGATE_RTSP_PASSWORD: "password"
|
FRIGATE_RTSP_PASSWORD: "password"
|
||||||
```
|
```
|
||||||
|
</TabItem>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
**Docker CLI**
|
||||||
|
|
||||||
If you can't use Docker Compose, you can run the container with something similar to this:
|
If you can't use Docker Compose, you can run the container with something similar to this:
|
||||||
|
|
||||||
|
|||||||
9
docs/package-lock.json
generated
9
docs/package-lock.json
generated
@ -14,9 +14,11 @@
|
|||||||
"@docusaurus/theme-mermaid": "^3.7.0",
|
"@docusaurus/theme-mermaid": "^3.7.0",
|
||||||
"@inkeep/docusaurus": "^2.0.16",
|
"@inkeep/docusaurus": "^2.0.16",
|
||||||
"@mdx-js/react": "^3.1.0",
|
"@mdx-js/react": "^3.1.0",
|
||||||
|
"@types/js-yaml": "^4.0.9",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"docusaurus-plugin-openapi-docs": "^4.5.1",
|
"docusaurus-plugin-openapi-docs": "^4.5.1",
|
||||||
"docusaurus-theme-openapi-docs": "^4.5.1",
|
"docusaurus-theme-openapi-docs": "^4.5.1",
|
||||||
|
"js-yaml": "^4.1.1",
|
||||||
"prism-react-renderer": "^2.4.1",
|
"prism-react-renderer": "^2.4.1",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
@ -10204,6 +10206,11 @@
|
|||||||
"@types/istanbul-lib-report": "*"
|
"@types/istanbul-lib-report": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/js-yaml": {
|
||||||
|
"version": "4.0.9",
|
||||||
|
"resolved": "https://mirrors.tencent.com/npm/@types/js-yaml/-/js-yaml-4.0.9.tgz",
|
||||||
|
"integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="
|
||||||
|
},
|
||||||
"node_modules/@types/json-schema": {
|
"node_modules/@types/json-schema": {
|
||||||
"version": "7.0.15",
|
"version": "7.0.15",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||||
@ -17313,7 +17320,7 @@
|
|||||||
},
|
},
|
||||||
"node_modules/js-yaml": {
|
"node_modules/js-yaml": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
|
"resolved": "https://mirrors.tencent.com/npm/js-yaml/-/js-yaml-4.1.1.tgz",
|
||||||
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
|
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@ -3,9 +3,10 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build:config": "node scripts/build-config.mjs",
|
||||||
"docusaurus": "docusaurus",
|
"docusaurus": "docusaurus",
|
||||||
"start": "npm run regen-docs && docusaurus start --host 0.0.0.0",
|
"start": "npm run build:config && npm run regen-docs && docusaurus start --host 0.0.0.0",
|
||||||
"build": "npm run regen-docs && docusaurus build",
|
"build": "npm run build:config && npm run regen-docs && docusaurus build",
|
||||||
"swizzle": "docusaurus swizzle",
|
"swizzle": "docusaurus swizzle",
|
||||||
"deploy": "docusaurus deploy",
|
"deploy": "docusaurus deploy",
|
||||||
"clear": "docusaurus clear",
|
"clear": "docusaurus clear",
|
||||||
@ -23,9 +24,11 @@
|
|||||||
"@docusaurus/theme-mermaid": "^3.7.0",
|
"@docusaurus/theme-mermaid": "^3.7.0",
|
||||||
"@inkeep/docusaurus": "^2.0.16",
|
"@inkeep/docusaurus": "^2.0.16",
|
||||||
"@mdx-js/react": "^3.1.0",
|
"@mdx-js/react": "^3.1.0",
|
||||||
|
"@types/js-yaml": "^4.0.9",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"docusaurus-plugin-openapi-docs": "^4.5.1",
|
"docusaurus-plugin-openapi-docs": "^4.5.1",
|
||||||
"docusaurus-theme-openapi-docs": "^4.5.1",
|
"docusaurus-theme-openapi-docs": "^4.5.1",
|
||||||
|
"js-yaml": "^4.1.1",
|
||||||
"prism-react-renderer": "^2.4.1",
|
"prism-react-renderer": "^2.4.1",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
|||||||
64
docs/scripts/build-config.mjs
Normal file
64
docs/scripts/build-config.mjs
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build script: reads config.yaml and generates TypeScript files
|
||||||
|
* for the Docker Compose Generator.
|
||||||
|
*
|
||||||
|
* Usage: node scripts/build-config.mjs
|
||||||
|
*/
|
||||||
|
|
||||||
|
import fs from "node:fs";
|
||||||
|
import path from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
import yaml from "js-yaml";
|
||||||
|
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
const CONFIG_DIR = path.resolve(__dirname, "../src/components/DockerComposeGenerator/config");
|
||||||
|
const YAML_PATH = path.join(CONFIG_DIR, "config.yaml");
|
||||||
|
|
||||||
|
// Read & parse YAML
|
||||||
|
const raw = fs.readFileSync(YAML_PATH, "utf8");
|
||||||
|
const config = yaml.load(raw);
|
||||||
|
|
||||||
|
if (!config.devices || !config.hardware || !config.ports) {
|
||||||
|
console.error("config.yaml must contain 'devices', 'hardware', and 'ports' sections.");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a .ts file from a section of the YAML config.
|
||||||
|
*/
|
||||||
|
function generateTsFile(sectionName, items, typeName, varName, mapVarName, yamlFilename) {
|
||||||
|
const jsonItems = JSON.stringify(items, null, 2);
|
||||||
|
// Indent JSON to fit inside the array literal
|
||||||
|
const indented = jsonItems
|
||||||
|
.split("\n")
|
||||||
|
.map((line, i) => (i === 0 ? line : " " + line))
|
||||||
|
.join("\n");
|
||||||
|
|
||||||
|
const content = `/**
|
||||||
|
* AUTO-GENERATED FILE — do not edit directly.
|
||||||
|
* Source: ${yamlFilename}
|
||||||
|
* To update, edit the YAML file and run: npm run build:config
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { ${typeName} } from "./types";
|
||||||
|
|
||||||
|
export const ${varName}: ${typeName}[] = ${indented};
|
||||||
|
|
||||||
|
/** Lookup map for quick access by ID */
|
||||||
|
export const ${mapVarName}: Map<string, ${typeName}> = new Map(${varName}.map((item) => [item.id, item]));
|
||||||
|
`;
|
||||||
|
|
||||||
|
const outPath = path.join(CONFIG_DIR, `${sectionName}.ts`);
|
||||||
|
fs.writeFileSync(outPath, content, "utf8");
|
||||||
|
console.log(` ✓ Generated ${sectionName}.ts (${items.length} items)`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Building config from config.yaml...");
|
||||||
|
|
||||||
|
generateTsFile("devices", config.devices, "DeviceConfig", "devices", "deviceMap", "config.yaml");
|
||||||
|
generateTsFile("hardware", config.hardware, "HardwareOption", "hardwareOptions", "hardwareMap", "config.yaml");
|
||||||
|
generateTsFile("ports", config.ports, "PortConfig", "ports", "portMap", "config.yaml");
|
||||||
|
|
||||||
|
console.log("Done!");
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Admonition from "@theme/Admonition";
|
||||||
|
import DeviceSelector from "./components/DeviceSelector";
|
||||||
|
import HardwareOptions from "./components/HardwareOptions";
|
||||||
|
import PortConfigSection from "./components/PortConfig";
|
||||||
|
import StoragePaths from "./components/StoragePaths";
|
||||||
|
import NvidiaGpuConfig from "./components/NvidiaGpuConfig";
|
||||||
|
import OtherOptions from "./components/OtherOptions";
|
||||||
|
import GeneratedOutput from "./components/GeneratedOutput";
|
||||||
|
import { useConfigGenerator } from "./hooks/useConfigGenerator";
|
||||||
|
import styles from "./styles.module.css";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simple markdown-link-to-React renderer for help text.
|
||||||
|
* Only supports [text](url) syntax — no nested brackets.
|
||||||
|
*/
|
||||||
|
function renderHelpText(text: string): React.ReactNode {
|
||||||
|
const parts = text.split(/(\[[^\]]+\]\([^)]+\))/g);
|
||||||
|
return parts.map((part, i) => {
|
||||||
|
const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
|
||||||
|
if (match) {
|
||||||
|
return (
|
||||||
|
<a key={i} href={match[2]}>
|
||||||
|
{match[1]}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <React.Fragment key={i}>{part}</React.Fragment>;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DockerComposeGenerator() {
|
||||||
|
const {
|
||||||
|
deviceId, device, hardwareEnabled,
|
||||||
|
portEnabled,
|
||||||
|
nvidiaGpuCount, nvidiaGpuDeviceId,
|
||||||
|
configPath, mediaPath, rtspPassword, timezone, shmSize,
|
||||||
|
shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
|
||||||
|
hasAnyHardware, generatedYaml,
|
||||||
|
selectDevice, toggleHardware, togglePort,
|
||||||
|
handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
|
||||||
|
handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
|
||||||
|
setRtspPassword, setTimezone, isHardwareDisabled,
|
||||||
|
} = useConfigGenerator();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.generator}>
|
||||||
|
<div className={styles.card}>
|
||||||
|
<DeviceSelector selectedId={deviceId} onSelect={selectDevice} />
|
||||||
|
|
||||||
|
{device.helpText && (
|
||||||
|
<Admonition type={device.helpType || "info"}>
|
||||||
|
{renderHelpText(device.helpText)}
|
||||||
|
</Admonition>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{device.needsNvidiaConfig && (
|
||||||
|
<NvidiaGpuConfig
|
||||||
|
gpuCount={nvidiaGpuCount}
|
||||||
|
gpuDeviceId={nvidiaGpuDeviceId}
|
||||||
|
gpuDeviceIdError={gpuDeviceIdError}
|
||||||
|
onGpuCountChange={handleNvidiaGpuCountChange}
|
||||||
|
onGpuDeviceIdChange={handleNvidiaGpuDeviceIdChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<HardwareOptions
|
||||||
|
deviceId={deviceId}
|
||||||
|
hardwareEnabled={hardwareEnabled}
|
||||||
|
onToggle={toggleHardware}
|
||||||
|
isDisabled={isHardwareDisabled}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StoragePaths
|
||||||
|
configPath={configPath}
|
||||||
|
mediaPath={mediaPath}
|
||||||
|
configPathError={configPathError}
|
||||||
|
mediaPathError={mediaPathError}
|
||||||
|
onConfigPathChange={handleConfigPathChange}
|
||||||
|
onMediaPathChange={handleMediaPathChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PortConfigSection
|
||||||
|
portEnabled={portEnabled}
|
||||||
|
onTogglePort={togglePort}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<OtherOptions
|
||||||
|
rtspPassword={rtspPassword}
|
||||||
|
timezone={timezone}
|
||||||
|
shmSize={shmSize}
|
||||||
|
shmSizeError={shmSizeError}
|
||||||
|
onRtspPasswordChange={setRtspPassword}
|
||||||
|
onTimezoneChange={setTimezone}
|
||||||
|
onShmSizeChange={handleShmSizeChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<GeneratedOutput
|
||||||
|
yaml={generatedYaml}
|
||||||
|
configPath={configPath}
|
||||||
|
mediaPath={mediaPath}
|
||||||
|
hasAnyHardware={hasAnyHardware}
|
||||||
|
deviceId={deviceId}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useColorMode } from "@docusaurus/theme-common";
|
||||||
|
import { devices } from "../config";
|
||||||
|
import type { DeviceConfig } from "../config";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
selectedId: string;
|
||||||
|
onSelect: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determine the icon type from the icon string:
|
||||||
|
* - Starts with "<svg" → inline SVG
|
||||||
|
* - Starts with "/" or "http" → image URL/path
|
||||||
|
* - Otherwise → emoji text
|
||||||
|
*/
|
||||||
|
function getIconType(icon: string): "svg" | "image" | "emoji" {
|
||||||
|
const trimmed = icon.trim();
|
||||||
|
if (trimmed.startsWith("<svg")) return "svg";
|
||||||
|
if (trimmed.startsWith("/") || trimmed.startsWith("http://") || trimmed.startsWith("https://")) return "image";
|
||||||
|
return "emoji";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the style object contains background-* properties,
|
||||||
|
* indicating the image should be rendered as a CSS background-image
|
||||||
|
* rather than an <img> tag.
|
||||||
|
*/
|
||||||
|
function hasBackgroundProps(style: React.CSSProperties | undefined): boolean {
|
||||||
|
if (!style) return false;
|
||||||
|
return Object.keys(style).some((key) => {
|
||||||
|
const k = key.toLowerCase().replace(/-/g, "");
|
||||||
|
return k === "backgroundsize" || k === "backgroundposition" || k === "backgroundrepeat" || k === "backgroundimage";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a style object to CSS custom properties (e.g. { width: "24px" } → { "--svg-width": "24px" })
|
||||||
|
* so they can be consumed by CSS rules targeting child elements like <svg>.
|
||||||
|
*/
|
||||||
|
function toCssVars(style: React.CSSProperties | undefined, prefix: string): React.CSSProperties {
|
||||||
|
if (!style) return {};
|
||||||
|
const vars: Record<string, string> = {};
|
||||||
|
for (const [key, value] of Object.entries(style)) {
|
||||||
|
const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||||
|
vars[`--${prefix}-${cssKey}`] = value;
|
||||||
|
}
|
||||||
|
return vars as React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeviceIcon({ device }: { device: DeviceConfig }) {
|
||||||
|
const { isDarkTheme } = useColorMode();
|
||||||
|
const iconStr = isDarkTheme && device.iconDark ? device.iconDark : device.icon;
|
||||||
|
const iconStyle = (isDarkTheme && device.iconDarkStyle
|
||||||
|
? device.iconDarkStyle
|
||||||
|
: device.iconStyle) as React.CSSProperties | undefined;
|
||||||
|
const svgStyle = (isDarkTheme && device.svgDarkStyle
|
||||||
|
? device.svgDarkStyle
|
||||||
|
: device.svgStyle) as React.CSSProperties | undefined;
|
||||||
|
|
||||||
|
const iconType = getIconType(iconStr);
|
||||||
|
|
||||||
|
if (iconType === "svg") {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={styles.deviceIconSvg}
|
||||||
|
style={{ ...iconStyle, ...toCssVars(svgStyle, "svg") }}
|
||||||
|
dangerouslySetInnerHTML={{ __html: iconStr }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iconType === "image") {
|
||||||
|
// When iconStyle contains background-* properties, render as background-image
|
||||||
|
// on the container div instead of an <img> tag, enabling background-size/position control.
|
||||||
|
if (hasBackgroundProps(iconStyle)) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={styles.deviceIconImage}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${iconStr})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundSize: "contain",
|
||||||
|
...iconStyle,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className={styles.deviceIconImage}>
|
||||||
|
<img src={iconStr} alt={device.name} style={iconStyle} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.deviceIcon} style={iconStyle}>
|
||||||
|
{iconStr}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeviceCard({
|
||||||
|
device,
|
||||||
|
active,
|
||||||
|
onClick,
|
||||||
|
}: {
|
||||||
|
device: DeviceConfig;
|
||||||
|
active: boolean;
|
||||||
|
onClick: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles.deviceCard} ${active ? styles.deviceCardActive : ""}`}
|
||||||
|
onClick={onClick}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") onClick();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeviceIcon device={device} />
|
||||||
|
<div className={styles.deviceName}>{device.name}</div>
|
||||||
|
<div className={styles.deviceDesc}>{device.description}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeviceSelector({ selectedId, onSelect }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={styles.formSection}>
|
||||||
|
<h4>Device Type</h4>
|
||||||
|
<div className={styles.deviceGrid}>
|
||||||
|
{devices.map((d) => (
|
||||||
|
<DeviceCard
|
||||||
|
key={d.id}
|
||||||
|
device={d}
|
||||||
|
active={selectedId === d.id}
|
||||||
|
onClick={() => onSelect(d.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import React, { useState, useCallback } from "react";
|
||||||
|
import CodeBlock from "@theme/CodeBlock";
|
||||||
|
import Admonition from "@theme/Admonition";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
yaml: string;
|
||||||
|
configPath: string;
|
||||||
|
mediaPath: string;
|
||||||
|
hasAnyHardware: boolean;
|
||||||
|
deviceId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GeneratedOutput({
|
||||||
|
yaml,
|
||||||
|
configPath,
|
||||||
|
mediaPath,
|
||||||
|
hasAnyHardware,
|
||||||
|
deviceId,
|
||||||
|
}: Props) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const handleCopy = useCallback(() => {
|
||||||
|
navigator.clipboard.writeText(yaml).then(() => {
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
});
|
||||||
|
}, [yaml]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.resultSection}>
|
||||||
|
<div className={styles.resultHeader}>
|
||||||
|
<h4>Generated Configuration</h4>
|
||||||
|
<button className="button button--primary button--sm" onClick={handleCopy}>
|
||||||
|
{copied ? "Copied!" : "Copy"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!configPath && (
|
||||||
|
<Admonition type="tip">
|
||||||
|
<p>You haven't specified a config file directory. You may want to modify the default path.</p>
|
||||||
|
</Admonition>
|
||||||
|
)}
|
||||||
|
{!mediaPath && (
|
||||||
|
<Admonition type="tip">
|
||||||
|
<p>You haven't specified a recording storage directory. You may want to modify the default path.</p>
|
||||||
|
</Admonition>
|
||||||
|
)}
|
||||||
|
{deviceId === "stable" && !hasAnyHardware && (
|
||||||
|
<Admonition type="warning">
|
||||||
|
<p>You haven't selected any hardware acceleration. Please check if you have supported hardware available.</p>
|
||||||
|
</Admonition>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CodeBlock language="yaml" title="docker-compose.yml">
|
||||||
|
{yaml}
|
||||||
|
</CodeBlock>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { hardwareOptions } from "../config";
|
||||||
|
import type { HardwareOption } from "../config";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
deviceId: string;
|
||||||
|
hardwareEnabled: Record<string, boolean>;
|
||||||
|
onToggle: (hwId: string) => void;
|
||||||
|
isDisabled: (hwId: string) => boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDescription(text: string): React.ReactNode {
|
||||||
|
const parts = text.split(/(\[[^\]]+\]\([^)]+\))/g);
|
||||||
|
return parts.map((part, i) => {
|
||||||
|
const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
|
||||||
|
if (match) {
|
||||||
|
return <a key={i} href={match[2]}>{match[1]}</a>;
|
||||||
|
}
|
||||||
|
return <React.Fragment key={i}>{part}</React.Fragment>;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function HardwareCheckbox({
|
||||||
|
hw, disabled, checked, onToggle,
|
||||||
|
}: {
|
||||||
|
hw: HardwareOption; disabled: boolean; checked: boolean; onToggle: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={styles.hardwareItem}>
|
||||||
|
<label className={`${styles.checkboxLabel} ${disabled ? styles.checkboxDisabled : ""}`}>
|
||||||
|
<input type="checkbox" checked={checked} onChange={onToggle} disabled={disabled} />
|
||||||
|
<span>{hw.label}</span>
|
||||||
|
</label>
|
||||||
|
{checked && hw.description && (
|
||||||
|
<div className={styles.hardwareDescription}>{renderDescription(hw.description)}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HardwareOptions({ deviceId, hardwareEnabled, onToggle, isDisabled }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={styles.formSection}>
|
||||||
|
<h4>Generic Hardware Devices</h4>
|
||||||
|
{deviceId !== "stable" && (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
Some options have been auto-configured based on your device type.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className={styles.checkboxGrid}>
|
||||||
|
{hardwareOptions.map((hw) => {
|
||||||
|
const disabled = isDisabled(hw.id);
|
||||||
|
const checked = disabled ? false : !!hardwareEnabled[hw.id];
|
||||||
|
return (
|
||||||
|
<HardwareCheckbox key={hw.id} hw={hw} disabled={disabled} checked={checked} onToggle={() => onToggle(hw.id)} />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
gpuCount: string;
|
||||||
|
gpuDeviceId: string;
|
||||||
|
gpuDeviceIdError: boolean;
|
||||||
|
onGpuCountChange: (value: string) => void;
|
||||||
|
onGpuDeviceIdChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NvidiaGpuConfig({
|
||||||
|
gpuCount,
|
||||||
|
gpuDeviceId,
|
||||||
|
gpuDeviceIdError,
|
||||||
|
onGpuCountChange,
|
||||||
|
onGpuDeviceIdChange,
|
||||||
|
}: Props) {
|
||||||
|
const showDeviceId = gpuCount !== "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.nvidiaConfig}>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-gpu-count" className={styles.label}>
|
||||||
|
GPU count:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-gpu-count"
|
||||||
|
type="text"
|
||||||
|
inputMode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
className={styles.input}
|
||||||
|
value={gpuCount}
|
||||||
|
placeholder="all"
|
||||||
|
onChange={(e) => onGpuCountChange(e.target.value.replace(/\D/g, ""))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{showDeviceId && (
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-gpu-device-id" className={styles.label}>
|
||||||
|
GPU device IDs (required, comma-separated):
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-gpu-device-id"
|
||||||
|
type="text"
|
||||||
|
className={`${styles.input} ${gpuDeviceIdError ? styles.inputError : ""}`}
|
||||||
|
value={gpuDeviceId}
|
||||||
|
placeholder="0"
|
||||||
|
onChange={(e) => onGpuDeviceIdChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
{gpuDeviceIdError ? (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
⚠️ GPU device IDs are required when GPU count is a number
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
Single GPU: 0 | Multiple GPUs: 0,1,2
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
import React, { useMemo } from "react";
|
||||||
|
import CodeInline from "@theme/CodeInline";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
const AUTO_TIMEZONE_VALUE = "__auto__";
|
||||||
|
|
||||||
|
function getTimezoneList(): string[] {
|
||||||
|
if (typeof Intl !== "undefined") {
|
||||||
|
const intl = Intl as typeof Intl & {
|
||||||
|
supportedValuesOf?: (key: string) => string[];
|
||||||
|
};
|
||||||
|
const supported = intl.supportedValuesOf?.("timeZone");
|
||||||
|
if (supported && supported.length > 0) {
|
||||||
|
return [...supported].sort();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fallback = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||||
|
return fallback ? [fallback] : ["UTC"];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
rtspPassword: string;
|
||||||
|
timezone: string;
|
||||||
|
shmSize: string;
|
||||||
|
shmSizeError: boolean;
|
||||||
|
onRtspPasswordChange: (value: string) => void;
|
||||||
|
onTimezoneChange: (value: string) => void;
|
||||||
|
onShmSizeChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OtherOptions({
|
||||||
|
rtspPassword,
|
||||||
|
timezone,
|
||||||
|
shmSize,
|
||||||
|
shmSizeError,
|
||||||
|
onRtspPasswordChange,
|
||||||
|
onTimezoneChange,
|
||||||
|
onShmSizeChange,
|
||||||
|
}: Props) {
|
||||||
|
const timezones = useMemo(() => getTimezoneList(), []);
|
||||||
|
const systemTimezone =
|
||||||
|
Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC";
|
||||||
|
const selectedValue = timezone || AUTO_TIMEZONE_VALUE;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.formSection}>
|
||||||
|
<h4>Other Options</h4>
|
||||||
|
<div className={styles.formGrid}>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-timezone" className={styles.label}>
|
||||||
|
Timezone:
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="dcg-timezone"
|
||||||
|
className={`${styles.input} ${styles.select}`}
|
||||||
|
value={selectedValue}
|
||||||
|
onChange={(e) =>
|
||||||
|
onTimezoneChange(
|
||||||
|
e.target.value === AUTO_TIMEZONE_VALUE ? "" : e.target.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value={AUTO_TIMEZONE_VALUE}>
|
||||||
|
Use browser timezone ({systemTimezone})
|
||||||
|
</option>
|
||||||
|
{timezones.map((tz) => (
|
||||||
|
<option key={tz} value={tz}>
|
||||||
|
{tz}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-shm-size" className={styles.label}>
|
||||||
|
Shared memory (SHM):
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-shm-size"
|
||||||
|
type="text"
|
||||||
|
className={`${styles.input} ${shmSizeError ? styles.inputError : ""}`}
|
||||||
|
value={shmSize}
|
||||||
|
placeholder="512mb"
|
||||||
|
onChange={(e) => onShmSizeChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
{shmSizeError ? (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
⚠️ Invalid format. Use a number followed by a unit (e.g. 512mb, 1gb)
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
See{" "}
|
||||||
|
<a href="/frigate/installation#calculating-required-shm-size">
|
||||||
|
calculating required SHM size
|
||||||
|
</a>{" "}
|
||||||
|
for the correct value.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-rtsp-password" className={styles.label}>
|
||||||
|
RTSP password:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-rtsp-password"
|
||||||
|
type="text"
|
||||||
|
className={styles.input}
|
||||||
|
value={rtspPassword}
|
||||||
|
placeholder="password"
|
||||||
|
onChange={(e) => onRtspPasswordChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
Optional. You can specify{" "}
|
||||||
|
<CodeInline>{"{FRIGATE_RTSP_PASSWORD}"}</CodeInline>{" "}
|
||||||
|
in the config file to reference camera stream passwords. This is NOT
|
||||||
|
the Frigate login password.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Admonition from "@theme/Admonition";
|
||||||
|
import { ports } from "../config";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
portEnabled: Record<string, boolean>;
|
||||||
|
onTogglePort: (portId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PortItem({
|
||||||
|
port,
|
||||||
|
enabled,
|
||||||
|
onToggle,
|
||||||
|
}: {
|
||||||
|
port: typeof ports[number];
|
||||||
|
enabled: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
}) {
|
||||||
|
const showWarning = port.warningContent && (
|
||||||
|
port.warningWhen === "checked" ? enabled :
|
||||||
|
port.warningWhen === "unchecked" ? !enabled : enabled
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.hardwareItem}>
|
||||||
|
<label className={`${styles.checkboxLabel} ${port.locked ? styles.checkboxDisabled : ""}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={enabled}
|
||||||
|
onChange={onToggle}
|
||||||
|
disabled={port.locked}
|
||||||
|
/>
|
||||||
|
<span>
|
||||||
|
{port.locked && "🔒 "}
|
||||||
|
Port {port.host}
|
||||||
|
{port.protocol !== "tcp" && `/${port.protocol}`}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
{port.description && (
|
||||||
|
<div className={styles.hardwareDescription}>{port.description}</div>
|
||||||
|
)}
|
||||||
|
{showWarning && (
|
||||||
|
<Admonition type={port.warningType || "warning"}>
|
||||||
|
{port.warningContent}
|
||||||
|
</Admonition>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PortConfigSection({
|
||||||
|
portEnabled,
|
||||||
|
onTogglePort,
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<div className={styles.formSection}>
|
||||||
|
<h4>Port Configuration</h4>
|
||||||
|
<div className={styles.checkboxGrid}>
|
||||||
|
{ports.map((port) => (
|
||||||
|
<PortItem
|
||||||
|
key={port.id}
|
||||||
|
port={port}
|
||||||
|
enabled={!!portEnabled[port.id]}
|
||||||
|
onToggle={() => onTogglePort(port.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import React from "react";
|
||||||
|
import styles from "../styles.module.css";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
configPath: string;
|
||||||
|
mediaPath: string;
|
||||||
|
configPathError: boolean;
|
||||||
|
mediaPathError: boolean;
|
||||||
|
onConfigPathChange: (value: string) => void;
|
||||||
|
onMediaPathChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StoragePaths({
|
||||||
|
configPath,
|
||||||
|
mediaPath,
|
||||||
|
configPathError,
|
||||||
|
mediaPathError,
|
||||||
|
onConfigPathChange,
|
||||||
|
onMediaPathChange,
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<div className={styles.formSection}>
|
||||||
|
<h4>Storage Paths</h4>
|
||||||
|
<div className={styles.formGrid}>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-config-path" className={styles.label}>
|
||||||
|
Config / DB / model cache directory (on your host):
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-config-path"
|
||||||
|
type="text"
|
||||||
|
className={`${styles.input} ${configPathError ? styles.inputError : ""}`}
|
||||||
|
value={configPath}
|
||||||
|
placeholder="/path/to/your/config"
|
||||||
|
onChange={(e) => onConfigPathChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
{configPathError && (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
⚠️ Path contains invalid characters. Only letters, numbers,
|
||||||
|
underscores, hyphens, slashes, and dots are allowed.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.formGroup}>
|
||||||
|
<label htmlFor="dcg-media-path" className={styles.label}>
|
||||||
|
Recording storage directory (on your host):
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dcg-media-path"
|
||||||
|
type="text"
|
||||||
|
className={`${styles.input} ${mediaPathError ? styles.inputError : ""}`}
|
||||||
|
value={mediaPath}
|
||||||
|
placeholder="/path/to/your/storage"
|
||||||
|
onChange={(e) => onMediaPathChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
{mediaPathError && (
|
||||||
|
<p className={styles.helpText}>
|
||||||
|
⚠️ Path contains invalid characters. Only letters, numbers,
|
||||||
|
underscores, hyphens, slashes, and dots are allowed.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
297
docs/src/components/DockerComposeGenerator/config/config.yaml
Normal file
297
docs/src/components/DockerComposeGenerator/config/config.yaml
Normal file
File diff suppressed because one or more lines are too long
12
docs/src/components/DockerComposeGenerator/config/index.ts
Normal file
12
docs/src/components/DockerComposeGenerator/config/index.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export { devices, deviceMap } from "./devices";
|
||||||
|
export { hardwareOptions, hardwareMap } from "./hardware";
|
||||||
|
export { ports, portMap } from "./ports";
|
||||||
|
|
||||||
|
export type {
|
||||||
|
DeviceConfig,
|
||||||
|
DeviceMapping,
|
||||||
|
VolumeMapping,
|
||||||
|
HardwareOption,
|
||||||
|
PortConfig,
|
||||||
|
NvidiaDeployConfig,
|
||||||
|
} from "./types";
|
||||||
154
docs/src/components/DockerComposeGenerator/config/types.ts
Normal file
154
docs/src/components/DockerComposeGenerator/config/types.ts
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* Type definitions for the Docker Compose Generator configuration.
|
||||||
|
* All device, hardware, and port options are declaratively defined
|
||||||
|
* so that adding a new device only requires editing config files.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** A single device mapping entry (e.g. /dev/dri:/dev/dri) */
|
||||||
|
export interface DeviceMapping {
|
||||||
|
/** Host device path */
|
||||||
|
host: string;
|
||||||
|
/** Container device path (defaults to host if omitted) */
|
||||||
|
container?: string;
|
||||||
|
/** Inline comment for this device line */
|
||||||
|
comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A single volume mapping entry */
|
||||||
|
export interface VolumeMapping {
|
||||||
|
/** Host path */
|
||||||
|
host: string;
|
||||||
|
/** Container path */
|
||||||
|
container: string;
|
||||||
|
/** Whether the mount is read-only */
|
||||||
|
readOnly?: boolean;
|
||||||
|
/** Inline comment */
|
||||||
|
comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** NVIDIA deploy configuration for docker-compose */
|
||||||
|
export interface NvidiaDeployConfig {
|
||||||
|
/** "all" or a specific number */
|
||||||
|
count: string;
|
||||||
|
/** Specific GPU device IDs (when count is a number) */
|
||||||
|
deviceIds?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Full device type definition */
|
||||||
|
export interface DeviceConfig {
|
||||||
|
/** Unique identifier, e.g. "intel" */
|
||||||
|
id: string;
|
||||||
|
/** Display name, e.g. "Intel GPU" */
|
||||||
|
name: string;
|
||||||
|
/** Short description */
|
||||||
|
description: string;
|
||||||
|
/**
|
||||||
|
* Icon for the device card. Supports:
|
||||||
|
* - Emoji string (e.g. "🖥️")
|
||||||
|
* - Image URL or static path (e.g. "/img/intel.svg", "https://example.com/icon.png")
|
||||||
|
* - Inline SVG markup (e.g. "<svg>...</svg>")
|
||||||
|
*/
|
||||||
|
icon: string;
|
||||||
|
/**
|
||||||
|
* Additional CSS properties applied to the icon element.
|
||||||
|
* - For image-type icons: if any `background-*` property (e.g. `background-size`,
|
||||||
|
* `background-position`) is present, the image is rendered as a CSS `background-image`
|
||||||
|
* on the container div, enabling full background positioning control.
|
||||||
|
* Otherwise the image is rendered as an `<img>` tag and styles apply to it.
|
||||||
|
* - For emoji/SVG icons: styles apply to the container div.
|
||||||
|
*/
|
||||||
|
iconStyle?: Record<string, string>;
|
||||||
|
/**
|
||||||
|
* Additional CSS properties applied directly to the inner `<svg>` element
|
||||||
|
* when the icon is an inline SVG. Use this to override the default
|
||||||
|
* `width: 100%; height: 100%` or set `fill`, `transform`, etc.
|
||||||
|
* Ignored for emoji and image-type icons.
|
||||||
|
*/
|
||||||
|
svgStyle?: Record<string, string>;
|
||||||
|
/**
|
||||||
|
* Icon for dark mode. Same format as `icon`. When provided, this icon
|
||||||
|
* replaces `icon` when the user is in dark mode.
|
||||||
|
*/
|
||||||
|
iconDark?: string;
|
||||||
|
/** Additional CSS properties for the dark mode icon container */
|
||||||
|
iconDarkStyle?: Record<string, string>;
|
||||||
|
/**
|
||||||
|
* SVG-specific styles for dark mode. Same as `svgStyle` but applied
|
||||||
|
* when dark mode is active. Merged over `svgStyle` in dark mode.
|
||||||
|
*/
|
||||||
|
svgDarkStyle?: Record<string, string>;
|
||||||
|
/** Docker image tag, e.g. "stable" */
|
||||||
|
imageTag: string;
|
||||||
|
/**
|
||||||
|
* Image tag suffix appended to the base tag.
|
||||||
|
* e.g. "-standard-arm64" produces "stable-standard-arm64"
|
||||||
|
*/
|
||||||
|
imageTagSuffix?: string;
|
||||||
|
/** Hardware option IDs to auto-enable when this device is selected */
|
||||||
|
autoHardware: string[];
|
||||||
|
/** Help text shown as an admonition when this device is selected */
|
||||||
|
helpText?: string;
|
||||||
|
/** Admonition type for help text */
|
||||||
|
helpType?: "info" | "warning" | "danger";
|
||||||
|
/** Device mappings always added for this device type */
|
||||||
|
devices?: DeviceMapping[];
|
||||||
|
/** Volume mappings always added for this device type */
|
||||||
|
volumes?: VolumeMapping[];
|
||||||
|
/** Extra environment variables for this device type */
|
||||||
|
env?: Record<string, string>;
|
||||||
|
/** NVIDIA deploy config (only for tensorrt) */
|
||||||
|
nvidiaDeploy?: NvidiaDeployConfig;
|
||||||
|
/** Runtime setting, e.g. "nvidia" for Jetson */
|
||||||
|
runtime?: string;
|
||||||
|
/** Extra hosts entries, e.g. "host.docker.internal:host-gateway" */
|
||||||
|
extraHosts?: string[];
|
||||||
|
/** Security options, e.g. ["apparmor=unconfined"] */
|
||||||
|
securityOpt?: string[];
|
||||||
|
/** Whether this device type needs the NVIDIA GPU config UI */
|
||||||
|
needsNvidiaConfig?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Generic hardware acceleration option definition */
|
||||||
|
export interface HardwareOption {
|
||||||
|
/** Unique identifier, e.g. "usbCoral" */
|
||||||
|
id: string;
|
||||||
|
/** Display label */
|
||||||
|
label: string;
|
||||||
|
/**
|
||||||
|
* Description shown below the checkbox when this option is enabled.
|
||||||
|
* Supports markdown link syntax: [text](url)
|
||||||
|
*/
|
||||||
|
description?: string;
|
||||||
|
/** Device IDs that disable this option */
|
||||||
|
disabledWhen?: string[];
|
||||||
|
/** Device mappings added when this option is enabled */
|
||||||
|
devices?: DeviceMapping[];
|
||||||
|
/** Volume mappings added when this option is enabled */
|
||||||
|
volumes?: VolumeMapping[];
|
||||||
|
/** Extra environment variables */
|
||||||
|
env?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Port definition */
|
||||||
|
export interface PortConfig {
|
||||||
|
/** Unique identifier (also the default host port as string) */
|
||||||
|
id: string;
|
||||||
|
/** Host port number */
|
||||||
|
host: number;
|
||||||
|
/** Container port number */
|
||||||
|
container: number;
|
||||||
|
/** Protocol */
|
||||||
|
protocol?: "tcp" | "udp";
|
||||||
|
/** Description of the port's purpose */
|
||||||
|
description: string;
|
||||||
|
/** Whether enabled by default */
|
||||||
|
defaultEnabled: boolean;
|
||||||
|
/** Whether this port is locked (always enabled, cannot be toggled off) */
|
||||||
|
locked?: boolean;
|
||||||
|
/** Admonition type for the warning */
|
||||||
|
warningType?: "warning" | "danger";
|
||||||
|
/** Warning content (markdown) */
|
||||||
|
warningContent?: string;
|
||||||
|
/** When to show the warning: when the port is checked or unchecked */
|
||||||
|
warningWhen?: "checked" | "unchecked";
|
||||||
|
}
|
||||||
250
docs/src/components/DockerComposeGenerator/generator/index.ts
Normal file
250
docs/src/components/DockerComposeGenerator/generator/index.ts
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
import type {
|
||||||
|
DeviceConfig,
|
||||||
|
DeviceMapping,
|
||||||
|
VolumeMapping,
|
||||||
|
} from "../config/types";
|
||||||
|
import { hardwareMap } from "../config";
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Input type
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export interface GeneratorInput {
|
||||||
|
device: DeviceConfig;
|
||||||
|
selectedHardware: string[];
|
||||||
|
enabledPorts: string[];
|
||||||
|
configPath: string;
|
||||||
|
mediaPath: string;
|
||||||
|
rtspPassword?: string;
|
||||||
|
timezone: string;
|
||||||
|
shmSize: string;
|
||||||
|
nvidiaGpuCount?: string;
|
||||||
|
nvidiaGpuDeviceId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Helpers
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function deviceLine(dm: DeviceMapping): string {
|
||||||
|
const host = dm.host;
|
||||||
|
const container = dm.container ?? dm.host;
|
||||||
|
const mapping = host === container ? host : `${host}:${container}`;
|
||||||
|
const comment = dm.comment ? ` # ${dm.comment}` : "";
|
||||||
|
return ` - ${mapping}${comment}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function volumeLine(vm: VolumeMapping): string {
|
||||||
|
const ro = vm.readOnly ? ":ro" : "";
|
||||||
|
const comment = vm.comment ? ` # ${vm.comment}` : "";
|
||||||
|
return ` - ${vm.host}:${vm.container}${ro}${comment}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// YAML builder — each section returns an array of lines
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function buildImage(device: DeviceConfig): string[] {
|
||||||
|
const tag = device.imageTagSuffix
|
||||||
|
? `${device.imageTag}${device.imageTagSuffix}`
|
||||||
|
: device.imageTag;
|
||||||
|
return [` image: ghcr.io/blakeblackshear/frigate:${tag}`];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildDevices(
|
||||||
|
device: DeviceConfig,
|
||||||
|
hwDevices: DeviceMapping[]
|
||||||
|
): string[] {
|
||||||
|
const all: DeviceMapping[] = [
|
||||||
|
...(device.devices ?? []),
|
||||||
|
...hwDevices,
|
||||||
|
];
|
||||||
|
if (all.length === 0) return [];
|
||||||
|
return [
|
||||||
|
" devices:",
|
||||||
|
...all.map(deviceLine),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildVolumes(
|
||||||
|
device: DeviceConfig,
|
||||||
|
hwVolumes: VolumeMapping[],
|
||||||
|
configPath: string,
|
||||||
|
mediaPath: string
|
||||||
|
): string[] {
|
||||||
|
const all: VolumeMapping[] = [
|
||||||
|
...(device.volumes ?? []),
|
||||||
|
...hwVolumes,
|
||||||
|
];
|
||||||
|
return [
|
||||||
|
" volumes:",
|
||||||
|
" - /etc/localtime:/etc/localtime:ro # Sync host time",
|
||||||
|
` - ${configPath}:/config # Config file directory`,
|
||||||
|
` - ${mediaPath}:/media/frigate # Recording storage directory`,
|
||||||
|
" - type: tmpfs # 1GB in-memory filesystem for recording segment storage",
|
||||||
|
" target: /tmp/cache",
|
||||||
|
" tmpfs:",
|
||||||
|
" size: 1000000000",
|
||||||
|
...all.map(volumeLine),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPorts(enabledPorts: string[]): string[] {
|
||||||
|
return [
|
||||||
|
" ports:",
|
||||||
|
...enabledPorts,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildEnvironment(
|
||||||
|
device: DeviceConfig,
|
||||||
|
hwEnv: Record<string, string>,
|
||||||
|
rtspPassword: string | undefined,
|
||||||
|
timezone: string
|
||||||
|
): string[] {
|
||||||
|
const allEnv: Record<string, string> = {
|
||||||
|
...hwEnv,
|
||||||
|
...(device.env ?? {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
const lines: string[] = [" environment:"];
|
||||||
|
|
||||||
|
if (rtspPassword) {
|
||||||
|
lines.push(
|
||||||
|
` FRIGATE_RTSP_PASSWORD: "${rtspPassword}" # RTSP password — change to your own`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
lines.push(` TZ: "${timezone}" # Timezone`);
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(allEnv)) {
|
||||||
|
lines.push(` ${key}: "${value}"`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildDeploy(device: DeviceConfig, input: GeneratorInput): string[] {
|
||||||
|
if (device.id === "stable-tensorrt") {
|
||||||
|
const count = input.nvidiaGpuCount || "all";
|
||||||
|
const isAll = count === "all";
|
||||||
|
const deviceId = input.nvidiaGpuDeviceId?.trim();
|
||||||
|
|
||||||
|
if (isAll) {
|
||||||
|
return [
|
||||||
|
" deploy:",
|
||||||
|
" resources:",
|
||||||
|
" reservations:",
|
||||||
|
" devices:",
|
||||||
|
" - driver: nvidia",
|
||||||
|
" count: all # Use all GPUs",
|
||||||
|
" capabilities: [gpu]",
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deviceId) {
|
||||||
|
const ids = deviceId
|
||||||
|
.split(",")
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.map((s) => `'${s}'`)
|
||||||
|
.join(", ");
|
||||||
|
return [
|
||||||
|
" deploy:",
|
||||||
|
" resources:",
|
||||||
|
" reservations:",
|
||||||
|
" devices:",
|
||||||
|
" - driver: nvidia",
|
||||||
|
` device_ids: [${ids}] # GPU device IDs`,
|
||||||
|
` count: ${count} # GPU count`,
|
||||||
|
" capabilities: [gpu]",
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
" deploy:",
|
||||||
|
" resources:",
|
||||||
|
" reservations:",
|
||||||
|
" devices:",
|
||||||
|
" - driver: nvidia",
|
||||||
|
` count: ${count} # GPU count`,
|
||||||
|
" capabilities: [gpu]",
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildRuntime(device: DeviceConfig): string[] {
|
||||||
|
if (device.runtime) {
|
||||||
|
return [` runtime: ${device.runtime}`];
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildExtraHosts(device: DeviceConfig): string[] {
|
||||||
|
if (!device.extraHosts?.length) return [];
|
||||||
|
return [
|
||||||
|
" extra_hosts:",
|
||||||
|
...device.extraHosts.map(
|
||||||
|
(h, i) =>
|
||||||
|
` - "${h}"${i === 0 ? " # Required to talk to the NPU detector" : ""}`
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildSecurityOpt(device: DeviceConfig): string[] {
|
||||||
|
if (!device.securityOpt?.length) return [];
|
||||||
|
return [
|
||||||
|
" security_opt:",
|
||||||
|
...device.securityOpt.map((s) => ` - ${s}`),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Public API
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a docker-compose YAML string from the given input.
|
||||||
|
* The output is pure YAML with inline comments (no Shiki annotations).
|
||||||
|
*/
|
||||||
|
export function generateDockerCompose(input: GeneratorInput): string {
|
||||||
|
const { device } = input;
|
||||||
|
|
||||||
|
// Collect hardware-level devices, volumes, and env
|
||||||
|
const hwDevices: DeviceMapping[] = [];
|
||||||
|
const hwVolumes: VolumeMapping[] = [];
|
||||||
|
const hwEnv: Record<string, string> = {};
|
||||||
|
|
||||||
|
for (const hwId of input.selectedHardware) {
|
||||||
|
const hw = hardwareMap.get(hwId);
|
||||||
|
if (!hw) continue;
|
||||||
|
// Skip GPU device mapping for tensorrt images (it uses deploy instead)
|
||||||
|
if (hw.id === "gpu" && device.imageTag === "stable-tensorrt") continue;
|
||||||
|
hwDevices.push(...(hw.devices ?? []));
|
||||||
|
hwVolumes.push(...(hw.volumes ?? []));
|
||||||
|
Object.assign(hwEnv, hw.env ?? {});
|
||||||
|
}
|
||||||
|
|
||||||
|
const lines: string[] = [
|
||||||
|
"services:",
|
||||||
|
" frigate:",
|
||||||
|
" container_name: frigate",
|
||||||
|
" privileged: true # This may not be necessary for all setups",
|
||||||
|
" restart: unless-stopped",
|
||||||
|
" stop_grace_period: 30s # Allow enough time to shut down the various services",
|
||||||
|
...buildImage(device),
|
||||||
|
` shm_size: "${input.shmSize || "512mb"}" # Update for your cameras based on SHM calculation`,
|
||||||
|
...buildRuntime(device),
|
||||||
|
...buildDeploy(device, input),
|
||||||
|
...buildExtraHosts(device),
|
||||||
|
...buildSecurityOpt(device),
|
||||||
|
...buildDevices(device, hwDevices),
|
||||||
|
...buildVolumes(device, hwVolumes, input.configPath, input.mediaPath),
|
||||||
|
...buildPorts(input.enabledPorts),
|
||||||
|
...buildEnvironment(device, hwEnv, input.rtspPassword, input.timezone),
|
||||||
|
];
|
||||||
|
|
||||||
|
return lines.join("\n");
|
||||||
|
}
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
import { useState, useCallback, useMemo } from "react";
|
||||||
|
import { deviceMap, hardwareMap, portMap } from "../config";
|
||||||
|
import { generateDockerCompose } from "../generator";
|
||||||
|
import type { GeneratorInput } from "../generator";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main hook that holds all form state and generates the Docker Compose output.
|
||||||
|
* Configuration is loaded synchronously from build-time generated .ts files.
|
||||||
|
*/
|
||||||
|
export function useConfigGenerator() {
|
||||||
|
const [deviceId, setDeviceId] = useState("stable");
|
||||||
|
|
||||||
|
const [hardwareEnabled, setHardwareEnabled] = useState<Record<string, boolean>>(() => {
|
||||||
|
const defaultDevice = deviceMap.get("stable");
|
||||||
|
const initial: Record<string, boolean> = {};
|
||||||
|
if (defaultDevice) {
|
||||||
|
for (const hwId of defaultDevice.autoHardware) {
|
||||||
|
initial[hwId] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return initial;
|
||||||
|
});
|
||||||
|
|
||||||
|
const [portEnabled, setPortEnabled] = useState<Record<string, boolean>>(() => {
|
||||||
|
const initial: Record<string, boolean> = {};
|
||||||
|
for (const p of portMap.values()) {
|
||||||
|
initial[p.id] = p.defaultEnabled;
|
||||||
|
}
|
||||||
|
return initial;
|
||||||
|
});
|
||||||
|
|
||||||
|
const [nvidiaGpuCount, setNvidiaGpuCount] = useState("");
|
||||||
|
const [nvidiaGpuDeviceId, setNvidiaGpuDeviceId] = useState("");
|
||||||
|
const [configPath, setConfigPath] = useState("");
|
||||||
|
const [mediaPath, setMediaPath] = useState("");
|
||||||
|
const [rtspPassword, setRtspPassword] = useState("");
|
||||||
|
const [timezone, setTimezone] = useState("");
|
||||||
|
const [shmSize, setShmSize] = useState("512mb");
|
||||||
|
const [shmSizeError, setShmSizeError] = useState(false);
|
||||||
|
const [gpuDeviceIdError, setGpuDeviceIdError] = useState(false);
|
||||||
|
const [configPathError, setConfigPathError] = useState(false);
|
||||||
|
const [mediaPathError, setMediaPathError] = useState(false);
|
||||||
|
|
||||||
|
const device = useMemo(() => deviceMap.get(deviceId)!, [deviceId]);
|
||||||
|
|
||||||
|
const selectDevice = useCallback((id: string) => {
|
||||||
|
const newDevice = deviceMap.get(id);
|
||||||
|
if (!newDevice) return;
|
||||||
|
setDeviceId(id);
|
||||||
|
setHardwareEnabled(() => {
|
||||||
|
const next: Record<string, boolean> = {};
|
||||||
|
for (const hwId of newDevice.autoHardware) {
|
||||||
|
next[hwId] = true;
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
setNvidiaGpuCount("");
|
||||||
|
setNvidiaGpuDeviceId("");
|
||||||
|
setGpuDeviceIdError(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleHardware = useCallback((hwId: string) => {
|
||||||
|
setHardwareEnabled((prev) => ({ ...prev, [hwId]: !prev[hwId] }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const togglePort = useCallback((portId: string) => {
|
||||||
|
const port = portMap.get(portId);
|
||||||
|
if (port?.locked) return;
|
||||||
|
setPortEnabled((prev) => ({ ...prev, [portId]: !prev[portId] }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const isHardwareDisabled = useCallback(
|
||||||
|
(hwId: string): boolean => {
|
||||||
|
const hw = hardwareMap.get(hwId);
|
||||||
|
if (!hw) return false;
|
||||||
|
return hw.disabledWhen?.includes(deviceId) ?? false;
|
||||||
|
},
|
||||||
|
[deviceId]
|
||||||
|
);
|
||||||
|
|
||||||
|
const validateShmSize = useCallback((value: string): boolean => {
|
||||||
|
if (!value) return true;
|
||||||
|
return /^\d+(\.\d+)?[bkmgBKMG]{1,2}$/.test(value);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const validatePath = useCallback((value: string): boolean => {
|
||||||
|
if (!value) return true;
|
||||||
|
return /^[a-zA-Z0-9_\-/./]+$/.test(value);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleShmSizeChange = useCallback(
|
||||||
|
(value: string) => {
|
||||||
|
const filtered = value.replace(/[^0-9.bkmgBKMG]/g, "");
|
||||||
|
const valid = validateShmSize(filtered);
|
||||||
|
setShmSize(filtered);
|
||||||
|
setShmSizeError(!valid && filtered !== "");
|
||||||
|
},
|
||||||
|
[validateShmSize]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleConfigPathChange = useCallback(
|
||||||
|
(value: string) => {
|
||||||
|
const filtered = value.replace(/[^a-zA-Z0-9_\-/./]/g, "");
|
||||||
|
const valid = validatePath(filtered);
|
||||||
|
setConfigPath(filtered);
|
||||||
|
setConfigPathError(!valid && filtered !== "");
|
||||||
|
},
|
||||||
|
[validatePath]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMediaPathChange = useCallback(
|
||||||
|
(value: string) => {
|
||||||
|
const filtered = value.replace(/[^a-zA-Z0-9_\-/./]/g, "");
|
||||||
|
const valid = validatePath(filtered);
|
||||||
|
setMediaPath(filtered);
|
||||||
|
setMediaPathError(!valid && filtered !== "");
|
||||||
|
},
|
||||||
|
[validatePath]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleNvidiaGpuCountChange = useCallback((value: string) => {
|
||||||
|
// Only allow digits
|
||||||
|
setNvidiaGpuCount(value);
|
||||||
|
if (value === "") {
|
||||||
|
setNvidiaGpuDeviceId("");
|
||||||
|
setGpuDeviceIdError(false);
|
||||||
|
} else {
|
||||||
|
setGpuDeviceIdError(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleNvidiaGpuDeviceIdChange = useCallback((value: string) => {
|
||||||
|
setNvidiaGpuDeviceId(value.trim());
|
||||||
|
setGpuDeviceIdError(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const enabledPortLines = useMemo(() => {
|
||||||
|
const lines: string[] = [];
|
||||||
|
for (const [id, enabled] of Object.entries(portEnabled)) {
|
||||||
|
if (!enabled) continue;
|
||||||
|
const p = portMap.get(id);
|
||||||
|
if (!p) continue;
|
||||||
|
const proto = p.protocol && p.protocol !== "tcp" ? `/${p.protocol}` : "";
|
||||||
|
const comment = p.description ? ` # ${p.description}` : "";
|
||||||
|
lines.push(` - "${p.host}:${p.container}${proto}"${comment}`);
|
||||||
|
}
|
||||||
|
return lines;
|
||||||
|
}, [portEnabled]);
|
||||||
|
|
||||||
|
const selectedHardwareIds = useMemo(() => {
|
||||||
|
return Object.entries(hardwareEnabled)
|
||||||
|
.filter(([id, enabled]) => {
|
||||||
|
if (!enabled) return false;
|
||||||
|
const hw = hardwareMap.get(id);
|
||||||
|
if (!hw) return false;
|
||||||
|
if (hw.disabledWhen?.includes(deviceId)) return false;
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.map(([id]) => id);
|
||||||
|
}, [hardwareEnabled, deviceId]);
|
||||||
|
|
||||||
|
const generatedYaml = useMemo(() => {
|
||||||
|
const input: GeneratorInput = {
|
||||||
|
device,
|
||||||
|
selectedHardware: selectedHardwareIds,
|
||||||
|
enabledPorts: enabledPortLines,
|
||||||
|
configPath: configPath || "/path/to/your/config",
|
||||||
|
mediaPath: mediaPath || "/path/to/your/storage",
|
||||||
|
rtspPassword,
|
||||||
|
timezone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC",
|
||||||
|
shmSize: shmSize || "512mb",
|
||||||
|
nvidiaGpuCount,
|
||||||
|
nvidiaGpuDeviceId,
|
||||||
|
};
|
||||||
|
return generateDockerCompose(input);
|
||||||
|
}, [
|
||||||
|
device, selectedHardwareIds, enabledPortLines,
|
||||||
|
configPath, mediaPath, rtspPassword, timezone, shmSize,
|
||||||
|
nvidiaGpuCount, nvidiaGpuDeviceId,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const hasAnyHardware = selectedHardwareIds.length > 0 || !!device?.devices?.length;
|
||||||
|
|
||||||
|
return {
|
||||||
|
deviceId, device, hardwareEnabled, portEnabled,
|
||||||
|
nvidiaGpuCount, nvidiaGpuDeviceId,
|
||||||
|
configPath, mediaPath, rtspPassword, timezone, shmSize,
|
||||||
|
shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
|
||||||
|
hasAnyHardware, generatedYaml,
|
||||||
|
selectDevice, toggleHardware, togglePort,
|
||||||
|
handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
|
||||||
|
handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
|
||||||
|
setRtspPassword, setTimezone, isHardwareDisabled,
|
||||||
|
};
|
||||||
|
}
|
||||||
1
docs/src/components/DockerComposeGenerator/index.ts
Normal file
1
docs/src/components/DockerComposeGenerator/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from "./DockerComposeGenerator";
|
||||||
381
docs/src/components/DockerComposeGenerator/styles.module.css
Normal file
381
docs/src/components/DockerComposeGenerator/styles.module.css
Normal file
@ -0,0 +1,381 @@
|
|||||||
|
/* ===================================================================
|
||||||
|
Docker Compose Generator — styles
|
||||||
|
Uses Docusaurus / Infima CSS variables for theme compatibility.
|
||||||
|
=================================================================== */
|
||||||
|
|
||||||
|
.generator {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--ifm-background-surface-color);
|
||||||
|
border: 1px solid var(--ifm-color-emphasis-400);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: var(--ifm-global-shadow-lw);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .card {
|
||||||
|
background: var(--ifm-color-emphasis-100);
|
||||||
|
border: 1px solid var(--ifm-color-emphasis-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Form sections --- */
|
||||||
|
|
||||||
|
.formSection {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--ifm-color-emphasis-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formSection:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formSection h4 {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: var(--ifm-font-weight-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Form controls --- */
|
||||||
|
|
||||||
|
.formGroup {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formGroup:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
font-weight: var(--ifm-font-weight-semibold);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border: 1px solid var(--ifm-color-emphasis-400);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--ifm-background-color);
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .input {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--ifm-color-primary);
|
||||||
|
box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .input {
|
||||||
|
border-color: var(--ifm-color-emphasis-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputError {
|
||||||
|
border-color: #e74c3c;
|
||||||
|
animation: shake 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-5px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Select dropdown --- */
|
||||||
|
|
||||||
|
.select {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: var(--ifm-background-color)
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
|
||||||
|
no-repeat right 0.75rem center / 12px 12px;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .select {
|
||||||
|
background: #fff
|
||||||
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E")
|
||||||
|
no-repeat right 0.75rem center / 12px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpText {
|
||||||
|
margin: 0.5rem 0 0 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--ifm-font-color-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpText a {
|
||||||
|
color: var(--ifm-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Device grid --- */
|
||||||
|
|
||||||
|
.deviceGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceCard {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 2px solid var(--ifm-color-emphasis-400);
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--ifm-background-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .deviceCard {
|
||||||
|
border: 2px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceCard:hover {
|
||||||
|
border-color: var(--ifm-color-primary);
|
||||||
|
background: var(--ifm-color-emphasis-100);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceCardActive {
|
||||||
|
border-color: var(--ifm-color-primary);
|
||||||
|
background: var(--ifm-color-primary-lightest);
|
||||||
|
box-shadow: 0 0 0 1px var(--ifm-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .deviceCardActive {
|
||||||
|
background: color-mix(in srgb, var(--ifm-color-primary) 12%, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .deviceCardActive {
|
||||||
|
background: color-mix(in srgb, var(--ifm-color-primary) 25%, #1b1b1b);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .deviceCardActive .deviceName {
|
||||||
|
color: var(--ifm-color-primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .deviceCardActive .deviceDesc {
|
||||||
|
color: var(--ifm-color-primary-light);
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIcon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
height: 40px;
|
||||||
|
width: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIconSvg {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
height: 40px;
|
||||||
|
width: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: visible;
|
||||||
|
/* Allow iconStyle width/height to override */
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIconSvg svg {
|
||||||
|
width: var(--svg-width, 100%);
|
||||||
|
height: var(--svg-height, 100%);
|
||||||
|
fill: var(--svg-fill, currentColor);
|
||||||
|
transform: var(--svg-transform, none);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIconImage {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
height: 40px;
|
||||||
|
width: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIconImage img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceName {
|
||||||
|
font-weight: var(--ifm-font-weight-semibold);
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
margin-bottom: 0.15rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceDesc {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--ifm-font-color-secondary);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Checkbox grid --- */
|
||||||
|
|
||||||
|
.checkboxGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.checkboxGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hardwareItem {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hardwareDescription {
|
||||||
|
margin: 0.15rem 0 0.4rem 1.6rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--ifm-font-color-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hardwareDescription a {
|
||||||
|
color: var(--ifm-color-primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxLabel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.4rem 0.5rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxLabel:hover {
|
||||||
|
background: var(--ifm-color-emphasis-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxLabel input[type="checkbox"] {
|
||||||
|
width: 1.1rem;
|
||||||
|
height: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxLabel span {
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxDisabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxDisabled:hover {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxDisabled input[type="checkbox"] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Form grid (side-by-side) --- */
|
||||||
|
|
||||||
|
.formGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.formGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.formGrid .formGroup {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Port section --- */
|
||||||
|
|
||||||
|
.portSection {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warningBadge {
|
||||||
|
margin-left: auto;
|
||||||
|
color: #e67e22;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NVIDIA config --- */
|
||||||
|
|
||||||
|
.nvidiaConfig {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--ifm-background-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
border-left: 3px solid var(--ifm-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .nvidiaConfig {
|
||||||
|
background: #f6f8fa;
|
||||||
|
border-left: 3px solid var(--ifm-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Result section --- */
|
||||||
|
|
||||||
|
.resultSection {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultHeader h4 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--ifm-font-color-base);
|
||||||
|
}
|
||||||
@ -146,8 +146,13 @@ def config(request: Request):
|
|||||||
for name, detector in config_obj.detectors.items()
|
for name, detector in config_obj.detectors.items()
|
||||||
}
|
}
|
||||||
|
|
||||||
# remove the mqtt password
|
# remove environment_vars for non-admin users
|
||||||
|
if request.headers.get("remote-role") != "admin":
|
||||||
|
config.pop("environment_vars", None)
|
||||||
|
|
||||||
|
# remove mqtt credentials
|
||||||
config["mqtt"].pop("password", None)
|
config["mqtt"].pop("password", None)
|
||||||
|
config["mqtt"].pop("user", None)
|
||||||
|
|
||||||
# remove the proxy secret
|
# remove the proxy secret
|
||||||
config["proxy"].pop("auth_secret", None)
|
config["proxy"].pop("auth_secret", None)
|
||||||
|
|||||||
@ -429,7 +429,10 @@ class WebPushClient(Communicator):
|
|||||||
else:
|
else:
|
||||||
title = base_title
|
title = base_title
|
||||||
|
|
||||||
message = payload["after"]["data"]["metadata"]["shortSummary"]
|
if payload["after"]["data"]["metadata"].get("shortSummary"):
|
||||||
|
message = payload["after"]["data"]["metadata"]["shortSummary"]
|
||||||
|
else:
|
||||||
|
message = f"Detected on {camera_name}"
|
||||||
else:
|
else:
|
||||||
zone_names = payload["after"]["data"]["zones"]
|
zone_names = payload["after"]["data"]["zones"]
|
||||||
formatted_zone_names = []
|
formatted_zone_names = []
|
||||||
|
|||||||
@ -17,9 +17,90 @@ from ws4py.websocket import WebSocket as WebSocket_
|
|||||||
|
|
||||||
from frigate.comms.base_communicator import Communicator
|
from frigate.comms.base_communicator import Communicator
|
||||||
from frigate.config import FrigateConfig
|
from frigate.config import FrigateConfig
|
||||||
|
from frigate.const import (
|
||||||
|
CLEAR_ONGOING_REVIEW_SEGMENTS,
|
||||||
|
EXPIRE_AUDIO_ACTIVITY,
|
||||||
|
INSERT_MANY_RECORDINGS,
|
||||||
|
INSERT_PREVIEW,
|
||||||
|
NOTIFICATION_TEST,
|
||||||
|
REQUEST_REGION_GRID,
|
||||||
|
UPDATE_AUDIO_ACTIVITY,
|
||||||
|
UPDATE_AUDIO_TRANSCRIPTION_STATE,
|
||||||
|
UPDATE_BIRDSEYE_LAYOUT,
|
||||||
|
UPDATE_CAMERA_ACTIVITY,
|
||||||
|
UPDATE_EMBEDDINGS_REINDEX_PROGRESS,
|
||||||
|
UPDATE_EVENT_DESCRIPTION,
|
||||||
|
UPDATE_MODEL_STATE,
|
||||||
|
UPDATE_REVIEW_DESCRIPTION,
|
||||||
|
UPSERT_REVIEW_SEGMENT,
|
||||||
|
)
|
||||||
|
|
||||||
logger = logging.getLogger(__name__)
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
# Internal IPC topics — NEVER allowed from WebSocket, regardless of role
|
||||||
|
_WS_BLOCKED_TOPICS = frozenset(
|
||||||
|
{
|
||||||
|
INSERT_MANY_RECORDINGS,
|
||||||
|
INSERT_PREVIEW,
|
||||||
|
REQUEST_REGION_GRID,
|
||||||
|
UPSERT_REVIEW_SEGMENT,
|
||||||
|
CLEAR_ONGOING_REVIEW_SEGMENTS,
|
||||||
|
UPDATE_CAMERA_ACTIVITY,
|
||||||
|
UPDATE_AUDIO_ACTIVITY,
|
||||||
|
EXPIRE_AUDIO_ACTIVITY,
|
||||||
|
UPDATE_EVENT_DESCRIPTION,
|
||||||
|
UPDATE_REVIEW_DESCRIPTION,
|
||||||
|
UPDATE_MODEL_STATE,
|
||||||
|
UPDATE_EMBEDDINGS_REINDEX_PROGRESS,
|
||||||
|
UPDATE_BIRDSEYE_LAYOUT,
|
||||||
|
UPDATE_AUDIO_TRANSCRIPTION_STATE,
|
||||||
|
NOTIFICATION_TEST,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
# Read-only topics any authenticated user (including viewer) can send
|
||||||
|
_WS_VIEWER_TOPICS = frozenset(
|
||||||
|
{
|
||||||
|
"onConnect",
|
||||||
|
"modelState",
|
||||||
|
"audioTranscriptionState",
|
||||||
|
"birdseyeLayout",
|
||||||
|
"embeddingsReindexProgress",
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
def _check_ws_authorization(
|
||||||
|
topic: str,
|
||||||
|
role_header: str | None,
|
||||||
|
separator: str,
|
||||||
|
) -> bool:
|
||||||
|
"""Check if a WebSocket message is authorized.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
topic: The message topic.
|
||||||
|
role_header: The HTTP_REMOTE_ROLE header value, or None.
|
||||||
|
separator: The role separator character from proxy config.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
True if authorized, False if blocked.
|
||||||
|
"""
|
||||||
|
# Block IPC-only topics unconditionally
|
||||||
|
if topic in _WS_BLOCKED_TOPICS:
|
||||||
|
return False
|
||||||
|
|
||||||
|
# No role header: default to viewer (fail-closed)
|
||||||
|
if role_header is None:
|
||||||
|
return topic in _WS_VIEWER_TOPICS
|
||||||
|
|
||||||
|
# Check if any role is admin
|
||||||
|
roles = [r.strip() for r in role_header.split(separator)]
|
||||||
|
if "admin" in roles:
|
||||||
|
return True
|
||||||
|
|
||||||
|
# Non-admin: only viewer topics allowed
|
||||||
|
return topic in _WS_VIEWER_TOPICS
|
||||||
|
|
||||||
|
|
||||||
class WebSocket(WebSocket_): # type: ignore[misc]
|
class WebSocket(WebSocket_): # type: ignore[misc]
|
||||||
def unhandled_error(self, error: Any) -> None:
|
def unhandled_error(self, error: Any) -> None:
|
||||||
@ -49,6 +130,7 @@ class WebSocketClient(Communicator):
|
|||||||
|
|
||||||
class _WebSocketHandler(WebSocket):
|
class _WebSocketHandler(WebSocket):
|
||||||
receiver = self._dispatcher
|
receiver = self._dispatcher
|
||||||
|
role_separator = self.config.proxy.separator or ","
|
||||||
|
|
||||||
def received_message(self, message: WebSocket.received_message) -> None: # type: ignore[name-defined]
|
def received_message(self, message: WebSocket.received_message) -> None: # type: ignore[name-defined]
|
||||||
try:
|
try:
|
||||||
@ -63,11 +145,25 @@ class WebSocketClient(Communicator):
|
|||||||
)
|
)
|
||||||
return
|
return
|
||||||
|
|
||||||
logger.debug(
|
topic = json_message["topic"]
|
||||||
f"Publishing mqtt message from websockets at {json_message['topic']}."
|
|
||||||
|
# Authorization check (skip when environ is None — direct internal connection)
|
||||||
|
role_header = (
|
||||||
|
self.environ.get("HTTP_REMOTE_ROLE") if self.environ else None
|
||||||
)
|
)
|
||||||
|
if self.environ is not None and not _check_ws_authorization(
|
||||||
|
topic, role_header, self.role_separator
|
||||||
|
):
|
||||||
|
logger.warning(
|
||||||
|
"Blocked unauthorized WebSocket message: topic=%s, role=%s",
|
||||||
|
topic,
|
||||||
|
role_header,
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
|
logger.debug(f"Publishing mqtt message from websockets at {topic}.")
|
||||||
self.receiver(
|
self.receiver(
|
||||||
json_message["topic"],
|
topic,
|
||||||
json_message["payload"],
|
json_message["payload"],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -1073,10 +1073,6 @@ class LicensePlateProcessingMixin:
|
|||||||
top_score = score
|
top_score = score
|
||||||
top_box = bbox
|
top_box = bbox
|
||||||
|
|
||||||
if score > top_score:
|
|
||||||
top_score = score
|
|
||||||
top_box = bbox
|
|
||||||
|
|
||||||
# Return the top scoring bounding box if found
|
# Return the top scoring bounding box if found
|
||||||
if top_box is not None:
|
if top_box is not None:
|
||||||
# expand box by 5% to help with OCR
|
# expand box by 5% to help with OCR
|
||||||
@ -1092,9 +1088,6 @@ class LicensePlateProcessingMixin:
|
|||||||
]
|
]
|
||||||
).clip(0, [input.shape[1], input.shape[0]] * 2)
|
).clip(0, [input.shape[1], input.shape[0]] * 2)
|
||||||
|
|
||||||
logger.debug(
|
|
||||||
f"{camera}: Found license plate. Bounding box: {expanded_box.astype(int)}"
|
|
||||||
)
|
|
||||||
return tuple(int(x) for x in expanded_box) # type: ignore[return-value]
|
return tuple(int(x) for x in expanded_box) # type: ignore[return-value]
|
||||||
else:
|
else:
|
||||||
return None # No detection above the threshold
|
return None # No detection above the threshold
|
||||||
@ -1360,8 +1353,8 @@ class LicensePlateProcessingMixin:
|
|||||||
)
|
)
|
||||||
|
|
||||||
# check that license plate is valid
|
# check that license plate is valid
|
||||||
# double the value because we've doubled the size of the car
|
# quadruple the value because we've doubled both dimensions of the car
|
||||||
if license_plate_area < self.config.cameras[camera].lpr.min_area * 2:
|
if license_plate_area < self.config.cameras[camera].lpr.min_area * 4:
|
||||||
logger.debug(f"{camera}: License plate is less than min_area")
|
logger.debug(f"{camera}: License plate is less than min_area")
|
||||||
return
|
return
|
||||||
|
|
||||||
@ -1465,6 +1458,7 @@ class LicensePlateProcessingMixin:
|
|||||||
license_plate_frame,
|
license_plate_frame,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
logger.debug(f"{camera}: Found license plate. Bounding box: {list(plate_box)}")
|
||||||
logger.debug(f"{camera}: Running plate recognition for id: {id}.")
|
logger.debug(f"{camera}: Running plate recognition for id: {id}.")
|
||||||
|
|
||||||
# run detection, returns results sorted by confidence, best first
|
# run detection, returns results sorted by confidence, best first
|
||||||
|
|||||||
@ -52,6 +52,12 @@ class OvDetector(DetectionApi):
|
|||||||
self.h = detector_config.model.height
|
self.h = detector_config.model.height
|
||||||
self.w = detector_config.model.width
|
self.w = detector_config.model.width
|
||||||
|
|
||||||
|
logger.info(
|
||||||
|
"Loading OpenVINO model %s on device %s",
|
||||||
|
detector_config.model.path,
|
||||||
|
detector_config.device,
|
||||||
|
)
|
||||||
|
|
||||||
self.runner = OpenVINOModelRunner(
|
self.runner = OpenVINOModelRunner(
|
||||||
model_path=detector_config.model.path,
|
model_path=detector_config.model.path,
|
||||||
device=detector_config.device,
|
device=detector_config.device,
|
||||||
|
|||||||
@ -31,6 +31,12 @@ class OllamaClient(GenAIClient):
|
|||||||
provider: ApiClient | None
|
provider: ApiClient | None
|
||||||
provider_options: dict[str, Any]
|
provider_options: dict[str, Any]
|
||||||
|
|
||||||
|
def _auth_headers(self) -> dict | None:
|
||||||
|
if self.genai_config.api_key:
|
||||||
|
return {"Authorization": "Bearer " + self.genai_config.api_key}
|
||||||
|
|
||||||
|
return None
|
||||||
|
|
||||||
def _init_provider(self) -> ApiClient | None:
|
def _init_provider(self) -> ApiClient | None:
|
||||||
"""Initialize the client."""
|
"""Initialize the client."""
|
||||||
self.provider_options = {
|
self.provider_options = {
|
||||||
@ -39,7 +45,11 @@ class OllamaClient(GenAIClient):
|
|||||||
}
|
}
|
||||||
|
|
||||||
try:
|
try:
|
||||||
client = ApiClient(host=self.genai_config.base_url, timeout=self.timeout)
|
client = ApiClient(
|
||||||
|
host=self.genai_config.base_url,
|
||||||
|
timeout=self.timeout,
|
||||||
|
headers=self._auth_headers(),
|
||||||
|
)
|
||||||
# ensure the model is available locally
|
# ensure the model is available locally
|
||||||
response = client.show(self.genai_config.model)
|
response = client.show(self.genai_config.model)
|
||||||
if response.get("error"):
|
if response.get("error"):
|
||||||
@ -166,7 +176,9 @@ class OllamaClient(GenAIClient):
|
|||||||
return []
|
return []
|
||||||
try:
|
try:
|
||||||
client = ApiClient(
|
client = ApiClient(
|
||||||
host=self.genai_config.base_url, timeout=self.timeout
|
host=self.genai_config.base_url,
|
||||||
|
timeout=self.timeout,
|
||||||
|
headers=self._auth_headers(),
|
||||||
)
|
)
|
||||||
except Exception:
|
except Exception:
|
||||||
return []
|
return []
|
||||||
@ -344,6 +356,7 @@ class OllamaClient(GenAIClient):
|
|||||||
async_client = OllamaAsyncClient(
|
async_client = OllamaAsyncClient(
|
||||||
host=self.genai_config.base_url,
|
host=self.genai_config.base_url,
|
||||||
timeout=self.timeout,
|
timeout=self.timeout,
|
||||||
|
headers=self._auth_headers(),
|
||||||
)
|
)
|
||||||
response = await async_client.chat(**request_params)
|
response = await async_client.chat(**request_params)
|
||||||
result = self._message_from_response(response)
|
result = self._message_from_response(response)
|
||||||
@ -359,6 +372,7 @@ class OllamaClient(GenAIClient):
|
|||||||
async_client = OllamaAsyncClient(
|
async_client = OllamaAsyncClient(
|
||||||
host=self.genai_config.base_url,
|
host=self.genai_config.base_url,
|
||||||
timeout=self.timeout,
|
timeout=self.timeout,
|
||||||
|
headers=self._auth_headers(),
|
||||||
)
|
)
|
||||||
content_parts: list[str] = []
|
content_parts: list[str] = []
|
||||||
final_message: dict[str, Any] | None = None
|
final_message: dict[str, Any] | None = None
|
||||||
|
|||||||
@ -349,6 +349,13 @@ def move_preview_frames(loc: str) -> None:
|
|||||||
if not os.path.exists(preview_holdover):
|
if not os.path.exists(preview_holdover):
|
||||||
return
|
return
|
||||||
|
|
||||||
|
if not os.access(preview_holdover, os.R_OK | os.W_OK):
|
||||||
|
logger.error(
|
||||||
|
"Insufficient permissions on preview restart cache at %s",
|
||||||
|
preview_holdover,
|
||||||
|
)
|
||||||
|
return
|
||||||
|
|
||||||
shutil.move(preview_holdover, preview_cache)
|
shutil.move(preview_holdover, preview_cache)
|
||||||
except shutil.Error:
|
except shutil.Error:
|
||||||
logger.error("Failed to restore preview cache.")
|
logger.error("Failed to restore preview cache.")
|
||||||
|
|||||||
@ -361,14 +361,17 @@ class PreviewRecorder:
|
|||||||
small_frame,
|
small_frame,
|
||||||
cv2.COLOR_YUV2BGR_I420,
|
cv2.COLOR_YUV2BGR_I420,
|
||||||
)
|
)
|
||||||
cv2.imwrite(
|
cache_path = get_cache_image_name(self.camera_name, frame_time)
|
||||||
get_cache_image_name(self.camera_name, frame_time),
|
|
||||||
|
if not cv2.imwrite(
|
||||||
|
cache_path,
|
||||||
small_frame,
|
small_frame,
|
||||||
[
|
[
|
||||||
int(cv2.IMWRITE_WEBP_QUALITY),
|
int(cv2.IMWRITE_WEBP_QUALITY),
|
||||||
PREVIEW_QUALITY_WEBP[self.config.record.preview.quality],
|
PREVIEW_QUALITY_WEBP[self.config.record.preview.quality],
|
||||||
],
|
],
|
||||||
)
|
):
|
||||||
|
logger.error("Failed to write preview frame to %s", cache_path)
|
||||||
|
|
||||||
def write_data(
|
def write_data(
|
||||||
self,
|
self,
|
||||||
|
|||||||
@ -13,6 +13,7 @@ from enum import Enum
|
|||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from typing import Callable, Optional
|
from typing import Callable, Optional
|
||||||
|
|
||||||
|
import pytz # type: ignore[import-untyped]
|
||||||
from peewee import DoesNotExist
|
from peewee import DoesNotExist
|
||||||
|
|
||||||
from frigate.config import FfmpegConfig, FrigateConfig
|
from frigate.config import FfmpegConfig, FrigateConfig
|
||||||
@ -344,7 +345,19 @@ class RecordingExporter(threading.Thread):
|
|||||||
return proc.returncode, "".join(captured)
|
return proc.returncode, "".join(captured)
|
||||||
|
|
||||||
def get_datetime_from_timestamp(self, timestamp: int) -> str:
|
def get_datetime_from_timestamp(self, timestamp: int) -> str:
|
||||||
# return in iso format
|
# return in iso format using the configured ui.timezone when set,
|
||||||
|
# so the auto-generated export name reflects local time rather
|
||||||
|
# than the container's UTC clock
|
||||||
|
tz_name = self.config.ui.timezone
|
||||||
|
if tz_name:
|
||||||
|
try:
|
||||||
|
tz = pytz.timezone(tz_name)
|
||||||
|
except pytz.UnknownTimeZoneError:
|
||||||
|
tz = None
|
||||||
|
if tz is not None:
|
||||||
|
return datetime.datetime.fromtimestamp(timestamp, tz=tz).strftime(
|
||||||
|
"%Y-%m-%d %H:%M:%S"
|
||||||
|
)
|
||||||
return datetime.datetime.fromtimestamp(timestamp).strftime("%Y-%m-%d %H:%M:%S")
|
return datetime.datetime.fromtimestamp(timestamp).strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
def _chapter_metadata_path(self) -> str:
|
def _chapter_metadata_path(self) -> str:
|
||||||
@ -538,12 +551,18 @@ class RecordingExporter(threading.Thread):
|
|||||||
start_file = f"{file_start}{self.start_time}.{PREVIEW_FRAME_TYPE}"
|
start_file = f"{file_start}{self.start_time}.{PREVIEW_FRAME_TYPE}"
|
||||||
end_file = f"{file_start}{self.end_time}.{PREVIEW_FRAME_TYPE}"
|
end_file = f"{file_start}{self.end_time}.{PREVIEW_FRAME_TYPE}"
|
||||||
selected_preview = None
|
selected_preview = None
|
||||||
|
# Preview frames are written at most 1-2 fps during activity
|
||||||
|
# and as little as one every 30s during quiet periods, so a
|
||||||
|
# short export window can contain zero frames. Track the most
|
||||||
|
# recent frame before the window as a fallback.
|
||||||
|
fallback_preview = None
|
||||||
|
|
||||||
for file in sorted(os.listdir(preview_dir)):
|
for file in sorted(os.listdir(preview_dir)):
|
||||||
if not file.startswith(file_start):
|
if not file.startswith(file_start):
|
||||||
continue
|
continue
|
||||||
|
|
||||||
if file < start_file:
|
if file < start_file:
|
||||||
|
fallback_preview = os.path.join(preview_dir, file)
|
||||||
continue
|
continue
|
||||||
|
|
||||||
if file > end_file:
|
if file > end_file:
|
||||||
@ -552,6 +571,9 @@ class RecordingExporter(threading.Thread):
|
|||||||
selected_preview = os.path.join(preview_dir, file)
|
selected_preview = os.path.join(preview_dir, file)
|
||||||
break
|
break
|
||||||
|
|
||||||
|
if not selected_preview:
|
||||||
|
selected_preview = fallback_preview
|
||||||
|
|
||||||
if not selected_preview:
|
if not selected_preview:
|
||||||
return ""
|
return ""
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
"""Tests for export progress tracking, broadcast, and FFmpeg parsing."""
|
"""Tests for export progress tracking, broadcast, and FFmpeg parsing."""
|
||||||
|
|
||||||
import io
|
import io
|
||||||
|
import os
|
||||||
|
import shutil
|
||||||
|
import tempfile
|
||||||
import unittest
|
import unittest
|
||||||
from unittest.mock import MagicMock, patch
|
from unittest.mock import MagicMock, patch
|
||||||
|
|
||||||
@ -363,6 +366,121 @@ class TestBroadcastAggregation(unittest.TestCase):
|
|||||||
assert job.progress_percent == 33.0
|
assert job.progress_percent == 33.0
|
||||||
|
|
||||||
|
|
||||||
|
class TestGetDatetimeFromTimestamp(unittest.TestCase):
|
||||||
|
"""Auto-generated export name should honor config.ui.timezone, not
|
||||||
|
fall back to the container's UTC clock when a timezone is configured.
|
||||||
|
"""
|
||||||
|
|
||||||
|
def test_uses_configured_ui_timezone(self) -> None:
|
||||||
|
exporter = _make_exporter()
|
||||||
|
exporter.config.ui.timezone = "America/New_York"
|
||||||
|
# 2025-01-15 12:00:00 UTC is 07:00:00 EST
|
||||||
|
assert exporter.get_datetime_from_timestamp(1736942400) == "2025-01-15 07:00:00"
|
||||||
|
|
||||||
|
def test_falls_back_to_local_when_timezone_unset(self) -> None:
|
||||||
|
exporter = _make_exporter()
|
||||||
|
exporter.config.ui.timezone = None
|
||||||
|
# No assertion on the exact wall-clock value — just confirm no
|
||||||
|
# exception and that pytz isn't required when the field is unset.
|
||||||
|
assert isinstance(exporter.get_datetime_from_timestamp(1736942400), str)
|
||||||
|
|
||||||
|
def test_invalid_timezone_falls_back_to_local(self) -> None:
|
||||||
|
exporter = _make_exporter()
|
||||||
|
exporter.config.ui.timezone = "Not/A_Real_Zone"
|
||||||
|
assert isinstance(exporter.get_datetime_from_timestamp(1736942400), str)
|
||||||
|
|
||||||
|
|
||||||
|
class TestSaveThumbnailFromPreviewFrames(unittest.TestCase):
|
||||||
|
"""Short exports in the current hour can fall between preview frame
|
||||||
|
writes (1-2 fps during activity, every 30s otherwise). When no frame
|
||||||
|
falls inside the export window, save_thumbnail should fall back to
|
||||||
|
the most recent prior frame instead of returning no thumbnail."""
|
||||||
|
|
||||||
|
def setUp(self) -> None:
|
||||||
|
self.tmp_root = tempfile.mkdtemp(prefix="frigate_thumb_test_")
|
||||||
|
self.preview_dir = os.path.join(self.tmp_root, "cache", "preview_frames")
|
||||||
|
self.export_clips = os.path.join(self.tmp_root, "clips", "export")
|
||||||
|
os.makedirs(self.preview_dir, exist_ok=True)
|
||||||
|
os.makedirs(self.export_clips, exist_ok=True)
|
||||||
|
|
||||||
|
def tearDown(self) -> None:
|
||||||
|
shutil.rmtree(self.tmp_root, ignore_errors=True)
|
||||||
|
|
||||||
|
def _write_frame(self, camera: str, frame_time: float) -> str:
|
||||||
|
path = os.path.join(self.preview_dir, f"preview_{camera}-{frame_time}.webp")
|
||||||
|
with open(path, "wb") as f:
|
||||||
|
f.write(b"fake-webp-bytes")
|
||||||
|
return path
|
||||||
|
|
||||||
|
def _make_short_current_hour_exporter(self) -> RecordingExporter:
|
||||||
|
# Use a "now-ish" timestamp so save_thumbnail's start-of-hour
|
||||||
|
# comparison takes the current-hour branch (preview frames).
|
||||||
|
import datetime
|
||||||
|
|
||||||
|
now = datetime.datetime.now(datetime.timezone.utc).timestamp()
|
||||||
|
exporter = _make_exporter()
|
||||||
|
exporter.export_id = "thumb_short"
|
||||||
|
exporter.start_time = now
|
||||||
|
exporter.end_time = now + 3
|
||||||
|
return exporter
|
||||||
|
|
||||||
|
def test_short_export_falls_back_to_prior_preview_frame(self) -> None:
|
||||||
|
exporter = self._make_short_current_hour_exporter()
|
||||||
|
# Most recent preview frame is 10s before the export window
|
||||||
|
prior = self._write_frame(exporter.camera, exporter.start_time - 10.0)
|
||||||
|
thumb_target = os.path.join(self.export_clips, f"{exporter.export_id}.webp")
|
||||||
|
|
||||||
|
with (
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CACHE_DIR", os.path.join(self.tmp_root, "cache")
|
||||||
|
),
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CLIPS_DIR", os.path.join(self.tmp_root, "clips")
|
||||||
|
),
|
||||||
|
):
|
||||||
|
result = exporter.save_thumbnail(exporter.export_id)
|
||||||
|
|
||||||
|
assert result == thumb_target
|
||||||
|
assert os.path.isfile(thumb_target)
|
||||||
|
with open(thumb_target, "rb") as f, open(prior, "rb") as src:
|
||||||
|
assert f.read() == src.read()
|
||||||
|
|
||||||
|
def test_returns_empty_when_no_preview_frames_exist(self) -> None:
|
||||||
|
exporter = self._make_short_current_hour_exporter()
|
||||||
|
|
||||||
|
with (
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CACHE_DIR", os.path.join(self.tmp_root, "cache")
|
||||||
|
),
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CLIPS_DIR", os.path.join(self.tmp_root, "clips")
|
||||||
|
),
|
||||||
|
):
|
||||||
|
result = exporter.save_thumbnail(exporter.export_id)
|
||||||
|
|
||||||
|
assert result == ""
|
||||||
|
|
||||||
|
def test_prefers_in_window_frame_over_prior_frame(self) -> None:
|
||||||
|
exporter = self._make_short_current_hour_exporter()
|
||||||
|
self._write_frame(exporter.camera, exporter.start_time - 10.0)
|
||||||
|
in_window = self._write_frame(exporter.camera, exporter.start_time + 1.0)
|
||||||
|
thumb_target = os.path.join(self.export_clips, f"{exporter.export_id}.webp")
|
||||||
|
|
||||||
|
with (
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CACHE_DIR", os.path.join(self.tmp_root, "cache")
|
||||||
|
),
|
||||||
|
patch(
|
||||||
|
"frigate.record.export.CLIPS_DIR", os.path.join(self.tmp_root, "clips")
|
||||||
|
),
|
||||||
|
):
|
||||||
|
result = exporter.save_thumbnail(exporter.export_id)
|
||||||
|
|
||||||
|
assert result == thumb_target
|
||||||
|
with open(thumb_target, "rb") as f, open(in_window, "rb") as src:
|
||||||
|
assert f.read() == src.read()
|
||||||
|
|
||||||
|
|
||||||
class TestSchedulesCleanup(unittest.TestCase):
|
class TestSchedulesCleanup(unittest.TestCase):
|
||||||
def test_schedule_job_cleanup_removes_after_delay(self) -> None:
|
def test_schedule_job_cleanup_removes_after_delay(self) -> None:
|
||||||
config = MagicMock()
|
config = MagicMock()
|
||||||
|
|||||||
166
frigate/test/test_ws_auth.py
Normal file
166
frigate/test/test_ws_auth.py
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
"""Tests for WebSocket authorization checks."""
|
||||||
|
|
||||||
|
import unittest
|
||||||
|
|
||||||
|
from frigate.comms.ws import _check_ws_authorization
|
||||||
|
from frigate.const import INSERT_MANY_RECORDINGS, UPDATE_CAMERA_ACTIVITY
|
||||||
|
|
||||||
|
|
||||||
|
class TestCheckWsAuthorization(unittest.TestCase):
|
||||||
|
"""Tests for the _check_ws_authorization pure function."""
|
||||||
|
|
||||||
|
DEFAULT_SEPARATOR = ","
|
||||||
|
|
||||||
|
# --- IPC topic blocking (unconditional, regardless of role) ---
|
||||||
|
|
||||||
|
def test_ipc_topic_blocked_for_admin(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
INSERT_MANY_RECORDINGS, "admin", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_ipc_topic_blocked_for_viewer(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
UPDATE_CAMERA_ACTIVITY, "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_ipc_topic_blocked_when_no_role(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
INSERT_MANY_RECORDINGS, None, self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
# --- Viewer allowed topics ---
|
||||||
|
|
||||||
|
def test_viewer_can_send_on_connect(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("onConnect", "viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_can_send_model_state(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("modelState", "viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_can_send_audio_transcription_state(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"audioTranscriptionState", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_can_send_birdseye_layout(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("birdseyeLayout", "viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_can_send_embeddings_reindex_progress(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"embeddingsReindexProgress", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
# --- Viewer blocked from admin topics ---
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_restart(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization("restart", "viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_camera_detect_set(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"front_door/detect/set", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_camera_ptz(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization("front_door/ptz", "viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_global_notifications_set(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"notifications/set", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_camera_notifications_suspend(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"front_door/notifications/suspend", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_viewer_blocked_from_arbitrary_unknown_topic(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"some_random_topic", "viewer", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
# --- Admin access ---
|
||||||
|
|
||||||
|
def test_admin_can_send_restart(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("restart", "admin", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_admin_can_send_camera_detect_set(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization(
|
||||||
|
"front_door/detect/set", "admin", self.DEFAULT_SEPARATOR
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_admin_can_send_camera_ptz(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("front_door/ptz", "admin", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
# --- Comma-separated roles ---
|
||||||
|
|
||||||
|
def test_comma_separated_admin_viewer_grants_admin(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("restart", "admin,viewer", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_comma_separated_viewer_admin_grants_admin(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("restart", "viewer,admin", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_comma_separated_with_spaces(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("restart", "viewer, admin", self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
# --- Custom separator ---
|
||||||
|
|
||||||
|
def test_pipe_separator(self):
|
||||||
|
self.assertTrue(_check_ws_authorization("restart", "viewer|admin", "|"))
|
||||||
|
|
||||||
|
def test_pipe_separator_no_admin(self):
|
||||||
|
self.assertFalse(_check_ws_authorization("restart", "viewer|editor", "|"))
|
||||||
|
|
||||||
|
# --- No role header (fail-closed) ---
|
||||||
|
|
||||||
|
def test_no_role_header_blocks_admin_topics(self):
|
||||||
|
self.assertFalse(
|
||||||
|
_check_ws_authorization("restart", None, self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
def test_no_role_header_allows_viewer_topics(self):
|
||||||
|
self.assertTrue(
|
||||||
|
_check_ws_authorization("onConnect", None, self.DEFAULT_SEPARATOR)
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
unittest.main()
|
||||||
@ -1,88 +1,95 @@
|
|||||||
{
|
{
|
||||||
"cells": [
|
"cells": [
|
||||||
{
|
{
|
||||||
"cell_type": "code",
|
"cell_type": "markdown",
|
||||||
"execution_count": null,
|
"metadata": {
|
||||||
"metadata": {
|
"id": "runtime-notice"
|
||||||
"id": "rmuF9iKWTbdk"
|
},
|
||||||
},
|
"source": [
|
||||||
"outputs": [],
|
"**Before running:** go to **Runtime → Change runtime type → Fallback runtime version: 2025.07** (Python 3.11). The current Colab default (Python 3.12+) is incompatible with `super-gradients`."
|
||||||
"source": [
|
]
|
||||||
"! pip install -q git+https://github.com/Deci-AI/super-gradients.git"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": null,
|
|
||||||
"metadata": {
|
|
||||||
"id": "NiRCt917KKcL"
|
|
||||||
},
|
|
||||||
"outputs": [],
|
|
||||||
"source": [
|
|
||||||
"! sed -i 's/sghub.deci.ai/sg-hub-nv.s3.amazonaws.com/' /usr/local/lib/python3.12/dist-packages/super_gradients/training/pretrained_models.py\n",
|
|
||||||
"! sed -i 's/sghub.deci.ai/sg-hub-nv.s3.amazonaws.com/' /usr/local/lib/python3.12/dist-packages/super_gradients/training/utils/checkpoint_utils.py"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": null,
|
|
||||||
"metadata": {
|
|
||||||
"id": "dTB0jy_NNSFz"
|
|
||||||
},
|
|
||||||
"outputs": [],
|
|
||||||
"source": [
|
|
||||||
"from super_gradients.common.object_names import Models\n",
|
|
||||||
"from super_gradients.conversion import DetectionOutputFormatMode\n",
|
|
||||||
"from super_gradients.training import models\n",
|
|
||||||
"\n",
|
|
||||||
"model = models.get(Models.YOLO_NAS_S, pretrained_weights=\"coco\")"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": null,
|
|
||||||
"metadata": {
|
|
||||||
"id": "GymUghyCNXem"
|
|
||||||
},
|
|
||||||
"outputs": [],
|
|
||||||
"source": [
|
|
||||||
"# export the model for compatibility with Frigate\n",
|
|
||||||
"\n",
|
|
||||||
"model.export(\"yolo_nas_s.onnx\",\n",
|
|
||||||
" output_predictions_format=DetectionOutputFormatMode.FLAT_FORMAT,\n",
|
|
||||||
" max_predictions_per_image=20,\n",
|
|
||||||
" num_pre_nms_predictions=300,\n",
|
|
||||||
" confidence_threshold=0.4,\n",
|
|
||||||
" input_image_shape=(320,320),\n",
|
|
||||||
" )"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": null,
|
|
||||||
"metadata": {
|
|
||||||
"id": "uBhXV5g4Nh42"
|
|
||||||
},
|
|
||||||
"outputs": [],
|
|
||||||
"source": [
|
|
||||||
"from google.colab import files\n",
|
|
||||||
"\n",
|
|
||||||
"files.download('yolo_nas_s.onnx')"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"metadata": {
|
|
||||||
"colab": {
|
|
||||||
"provenance": []
|
|
||||||
},
|
|
||||||
"kernelspec": {
|
|
||||||
"display_name": "Python 3",
|
|
||||||
"name": "python3"
|
|
||||||
},
|
|
||||||
"language_info": {
|
|
||||||
"name": "python"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"nbformat": 4,
|
{
|
||||||
"nbformat_minor": 0
|
"cell_type": "code",
|
||||||
}
|
"execution_count": null,
|
||||||
|
"metadata": {
|
||||||
|
"id": "rmuF9iKWTbdk"
|
||||||
|
},
|
||||||
|
"outputs": [],
|
||||||
|
"source": [
|
||||||
|
"! pip install -q \"jedi>=0.16\"\n",
|
||||||
|
"! pip install -q git+https://github.com/Deci-AI/super-gradients.git"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cell_type": "code",
|
||||||
|
"execution_count": null,
|
||||||
|
"metadata": {
|
||||||
|
"id": "NiRCt917KKcL"
|
||||||
|
},
|
||||||
|
"outputs": [],
|
||||||
|
"source": "! sed -i 's/sghub\\.deci\\.ai/d2gjn4b69gu75n.cloudfront.net/g; s/sg-hub-nv\\.s3\\.amazonaws\\.com/d2gjn4b69gu75n.cloudfront.net/g' /usr/local/lib/python*/dist-packages/super_gradients/training/pretrained_models.py\n! sed -i 's/sghub\\.deci\\.ai/d2gjn4b69gu75n.cloudfront.net/g; s/sg-hub-nv\\.s3\\.amazonaws\\.com/d2gjn4b69gu75n.cloudfront.net/g' /usr/local/lib/python*/dist-packages/super_gradients/training/utils/checkpoint_utils.py"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cell_type": "code",
|
||||||
|
"execution_count": null,
|
||||||
|
"metadata": {
|
||||||
|
"id": "dTB0jy_NNSFz"
|
||||||
|
},
|
||||||
|
"outputs": [],
|
||||||
|
"source": [
|
||||||
|
"from super_gradients.common.object_names import Models\n",
|
||||||
|
"from super_gradients.conversion import DetectionOutputFormatMode\n",
|
||||||
|
"from super_gradients.training import models\n",
|
||||||
|
"\n",
|
||||||
|
"model = models.get(Models.YOLO_NAS_S, pretrained_weights=\"coco\")"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cell_type": "code",
|
||||||
|
"execution_count": null,
|
||||||
|
"metadata": {
|
||||||
|
"id": "GymUghyCNXem"
|
||||||
|
},
|
||||||
|
"outputs": [],
|
||||||
|
"source": [
|
||||||
|
"# export the model for compatibility with Frigate\n",
|
||||||
|
"\n",
|
||||||
|
"model.export(\"yolo_nas_s.onnx\",\n",
|
||||||
|
" output_predictions_format=DetectionOutputFormatMode.FLAT_FORMAT,\n",
|
||||||
|
" max_predictions_per_image=20,\n",
|
||||||
|
" num_pre_nms_predictions=300,\n",
|
||||||
|
" confidence_threshold=0.4,\n",
|
||||||
|
" input_image_shape=(320,320),\n",
|
||||||
|
" )"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cell_type": "code",
|
||||||
|
"execution_count": null,
|
||||||
|
"metadata": {
|
||||||
|
"id": "uBhXV5g4Nh42"
|
||||||
|
},
|
||||||
|
"outputs": [],
|
||||||
|
"source": [
|
||||||
|
"from google.colab import files\n",
|
||||||
|
"\n",
|
||||||
|
"files.download('yolo_nas_s.onnx')"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"metadata": {
|
||||||
|
"colab": {
|
||||||
|
"provenance": []
|
||||||
|
},
|
||||||
|
"kernelspec": {
|
||||||
|
"display_name": "Python 3",
|
||||||
|
"name": "python3"
|
||||||
|
},
|
||||||
|
"language_info": {
|
||||||
|
"name": "python"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nbformat": 4,
|
||||||
|
"nbformat_minor": 0
|
||||||
|
}
|
||||||
@ -69,17 +69,18 @@ test.describe("Navigation — conditional items @critical", () => {
|
|||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("/chat is hidden when genai.model is none (desktop)", async ({
|
test("/chat is hidden when no agent has the chat role (desktop)", async ({
|
||||||
frigateApp,
|
frigateApp,
|
||||||
}) => {
|
}) => {
|
||||||
test.skip(frigateApp.isMobile, "Desktop sidebar");
|
test.skip(frigateApp.isMobile, "Desktop sidebar");
|
||||||
await frigateApp.installDefaults({
|
await frigateApp.installDefaults({
|
||||||
config: {
|
config: {
|
||||||
genai: {
|
genai: {
|
||||||
enabled: false,
|
descriptions_only: {
|
||||||
provider: "ollama",
|
provider: "ollama",
|
||||||
model: "none",
|
model: "llava",
|
||||||
base_url: "",
|
roles: ["descriptions"],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -89,12 +90,20 @@ test.describe("Navigation — conditional items @critical", () => {
|
|||||||
).toHaveCount(0);
|
).toHaveCount(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("/chat is visible when genai.model is set (desktop)", async ({
|
test("/chat is visible when an agent has the chat role (desktop)", async ({
|
||||||
frigateApp,
|
frigateApp,
|
||||||
}) => {
|
}) => {
|
||||||
test.skip(frigateApp.isMobile, "Desktop sidebar");
|
test.skip(frigateApp.isMobile, "Desktop sidebar");
|
||||||
await frigateApp.installDefaults({
|
await frigateApp.installDefaults({
|
||||||
config: { genai: { enabled: true, model: "llava" } },
|
config: {
|
||||||
|
genai: {
|
||||||
|
chat_agent: {
|
||||||
|
provider: "ollama",
|
||||||
|
model: "llava",
|
||||||
|
roles: ["chat"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
await frigateApp.goto("/");
|
await frigateApp.goto("/");
|
||||||
await expect(
|
await expect(
|
||||||
|
|||||||
@ -93,6 +93,14 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
|
|||||||
useSWR<ProfilesApiResponse>("profiles");
|
useSWR<ProfilesApiResponse>("profiles");
|
||||||
const logoutUrl = config?.proxy?.logout_url || "/api/logout";
|
const logoutUrl = config?.proxy?.logout_url || "/api/logout";
|
||||||
|
|
||||||
|
const hasChatAgent = useMemo(
|
||||||
|
() =>
|
||||||
|
Object.values(config?.genai ?? {}).some((agent) =>
|
||||||
|
agent?.roles?.includes("chat"),
|
||||||
|
),
|
||||||
|
[config?.genai],
|
||||||
|
);
|
||||||
|
|
||||||
// languages
|
// languages
|
||||||
|
|
||||||
const languages = useMemo(() => {
|
const languages = useMemo(() => {
|
||||||
@ -511,7 +519,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
|
|||||||
<span>{t("menu.classification")}</span>
|
<span>{t("menu.classification")}</span>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
{config?.genai?.model !== "none" && (
|
{hasChatAgent && (
|
||||||
<Link to="/chat">
|
<Link to="/chat">
|
||||||
<MenuItem
|
<MenuItem
|
||||||
className="flex w-full items-center p-2 text-sm"
|
className="flex w-full items-center p-2 text-sm"
|
||||||
|
|||||||
@ -90,6 +90,10 @@ export default function SearchResultActions({
|
|||||||
const handleDebugReplay = useCallback(
|
const handleDebugReplay = useCallback(
|
||||||
(event: SearchResult) => {
|
(event: SearchResult) => {
|
||||||
setIsStarting(true);
|
setIsStarting(true);
|
||||||
|
const toastId = toast.loading(
|
||||||
|
t("dialog.starting", { ns: "views/replay" }),
|
||||||
|
{ position: "top-center" },
|
||||||
|
);
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.post("debug_replay/start", {
|
.post("debug_replay/start", {
|
||||||
@ -100,6 +104,7 @@ export default function SearchResultActions({
|
|||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
|
toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
});
|
});
|
||||||
navigate("/replay");
|
navigate("/replay");
|
||||||
@ -115,6 +120,7 @@ export default function SearchResultActions({
|
|||||||
toast.error(
|
toast.error(
|
||||||
t("dialog.toast.alreadyActive", { ns: "views/replay" }),
|
t("dialog.toast.alreadyActive", { ns: "views/replay" }),
|
||||||
{
|
{
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
dismissible: false,
|
dismissible: false,
|
||||||
@ -129,6 +135,7 @@ export default function SearchResultActions({
|
|||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
toast.error(t("dialog.toast.error", { error: errorMessage }), {
|
toast.error(t("dialog.toast.error", { error: errorMessage }), {
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
import { useCallback, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { flushSync } from "react-dom";
|
||||||
|
import { throttle } from "lodash";
|
||||||
import { Slider } from "@/components/ui/slider";
|
import { Slider } from "@/components/ui/slider";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
|
||||||
@ -19,11 +21,21 @@ import { useIsAdmin } from "@/hooks/use-is-admin";
|
|||||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const SLIDER_DRAG_THROTTLE_MS = 80;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
// Optional side-effect invoked atomically with setAnnotationOffset (inside
|
||||||
|
// flushSync) so callers like the timeline panel can re-seek the video in the
|
||||||
|
// same React commit as the offset state update — preventing a one-frame
|
||||||
|
// overlay mismatch where annotationOffset has changed but currentTime has not.
|
||||||
|
onApplyOffset?: (newOffset: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function AnnotationOffsetSlider({ className }: Props) {
|
export default function AnnotationOffsetSlider({
|
||||||
|
className,
|
||||||
|
onApplyOffset,
|
||||||
|
}: Props) {
|
||||||
const { annotationOffset, setAnnotationOffset, camera } = useDetailStream();
|
const { annotationOffset, setAnnotationOffset, camera } = useDetailStream();
|
||||||
const isAdmin = useIsAdmin();
|
const isAdmin = useIsAdmin();
|
||||||
const { getLocaleDocUrl } = useDocDomain();
|
const { getLocaleDocUrl } = useDocDomain();
|
||||||
@ -31,31 +43,62 @@ export default function AnnotationOffsetSlider({ className }: Props) {
|
|||||||
const { t } = useTranslation(["views/explore"]);
|
const { t } = useTranslation(["views/explore"]);
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
const applyOffset = useCallback(
|
||||||
|
(newOffset: number) => {
|
||||||
|
flushSync(() => {
|
||||||
|
setAnnotationOffset(newOffset);
|
||||||
|
onApplyOffset?.(newOffset);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[setAnnotationOffset, onApplyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
const throttledApplyOffset = useMemo(
|
||||||
|
() =>
|
||||||
|
throttle(applyOffset, SLIDER_DRAG_THROTTLE_MS, {
|
||||||
|
leading: true,
|
||||||
|
trailing: true,
|
||||||
|
}),
|
||||||
|
[applyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => () => throttledApplyOffset.cancel(), [throttledApplyOffset]);
|
||||||
|
|
||||||
const handleChange = useCallback(
|
const handleChange = useCallback(
|
||||||
(values: number[]) => {
|
(values: number[]) => {
|
||||||
if (!values || values.length === 0) return;
|
if (!values || values.length === 0) return;
|
||||||
const valueMs = values[0];
|
throttledApplyOffset(values[0]);
|
||||||
setAnnotationOffset(valueMs);
|
|
||||||
},
|
},
|
||||||
[setAnnotationOffset],
|
[throttledApplyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleCommit = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
if (!values || values.length === 0) return;
|
||||||
|
// Ensure the final value lands even if it would otherwise be discarded
|
||||||
|
// by the trailing edge of the throttle window.
|
||||||
|
throttledApplyOffset.cancel();
|
||||||
|
applyOffset(values[0]);
|
||||||
|
},
|
||||||
|
[throttledApplyOffset, applyOffset],
|
||||||
);
|
);
|
||||||
|
|
||||||
const stepOffset = useCallback(
|
const stepOffset = useCallback(
|
||||||
(delta: number) => {
|
(delta: number) => {
|
||||||
setAnnotationOffset((prev) => {
|
const next = Math.max(
|
||||||
const next = prev + delta;
|
ANNOTATION_OFFSET_MIN,
|
||||||
return Math.max(
|
Math.min(ANNOTATION_OFFSET_MAX, annotationOffset + delta),
|
||||||
ANNOTATION_OFFSET_MIN,
|
);
|
||||||
Math.min(ANNOTATION_OFFSET_MAX, next),
|
throttledApplyOffset.cancel();
|
||||||
);
|
applyOffset(next);
|
||||||
});
|
|
||||||
},
|
},
|
||||||
[setAnnotationOffset],
|
[annotationOffset, applyOffset, throttledApplyOffset],
|
||||||
);
|
);
|
||||||
|
|
||||||
const reset = useCallback(() => {
|
const reset = useCallback(() => {
|
||||||
setAnnotationOffset(0);
|
throttledApplyOffset.cancel();
|
||||||
}, [setAnnotationOffset]);
|
applyOffset(0);
|
||||||
|
}, [applyOffset, throttledApplyOffset]);
|
||||||
|
|
||||||
const save = useCallback(async () => {
|
const save = useCallback(async () => {
|
||||||
setIsSaving(true);
|
setIsSaving(true);
|
||||||
@ -130,6 +173,7 @@ export default function AnnotationOffsetSlider({ className }: Props) {
|
|||||||
max={ANNOTATION_OFFSET_MAX}
|
max={ANNOTATION_OFFSET_MAX}
|
||||||
step={ANNOTATION_OFFSET_STEP}
|
step={ANNOTATION_OFFSET_STEP}
|
||||||
onValueChange={handleChange}
|
onValueChange={handleChange}
|
||||||
|
onValueCommit={handleCommit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
import { Event } from "@/types/event";
|
import { Event } from "@/types/event";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { flushSync } from "react-dom";
|
||||||
|
import { throttle } from "lodash";
|
||||||
import { LuExternalLink, LuMinus, LuPlus } from "react-icons/lu";
|
import { LuExternalLink, LuMinus, LuPlus } from "react-icons/lu";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
@ -19,6 +21,8 @@ import {
|
|||||||
ANNOTATION_OFFSET_STEP,
|
ANNOTATION_OFFSET_STEP,
|
||||||
} from "@/lib/const";
|
} from "@/lib/const";
|
||||||
|
|
||||||
|
const SLIDER_DRAG_THROTTLE_MS = 80;
|
||||||
|
|
||||||
type AnnotationSettingsPaneProps = {
|
type AnnotationSettingsPaneProps = {
|
||||||
event: Event;
|
event: Event;
|
||||||
annotationOffset: number;
|
annotationOffset: number;
|
||||||
@ -38,30 +42,64 @@ export function AnnotationSettingsPane({
|
|||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
const handleSliderChange = useCallback(
|
// flushSync ensures setAnnotationOffset commits synchronously so the
|
||||||
(values: number[]) => {
|
// useLayoutEffect in TrackingDetails (which seeks the video and sets
|
||||||
if (!values || values.length === 0) return;
|
// currentTime in response) runs before the browser paints — preventing a
|
||||||
setAnnotationOffset(values[0]);
|
// one-frame overlay mismatch where annotationOffset has changed but
|
||||||
},
|
// currentTime has not.
|
||||||
[setAnnotationOffset],
|
const applyOffset = useCallback(
|
||||||
);
|
(newOffset: number) => {
|
||||||
|
flushSync(() => {
|
||||||
const stepOffset = useCallback(
|
setAnnotationOffset(newOffset);
|
||||||
(delta: number) => {
|
|
||||||
setAnnotationOffset((prev) => {
|
|
||||||
const next = prev + delta;
|
|
||||||
return Math.max(
|
|
||||||
ANNOTATION_OFFSET_MIN,
|
|
||||||
Math.min(ANNOTATION_OFFSET_MAX, next),
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[setAnnotationOffset],
|
[setAnnotationOffset],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const throttledApplyOffset = useMemo(
|
||||||
|
() =>
|
||||||
|
throttle(applyOffset, SLIDER_DRAG_THROTTLE_MS, {
|
||||||
|
leading: true,
|
||||||
|
trailing: true,
|
||||||
|
}),
|
||||||
|
[applyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => () => throttledApplyOffset.cancel(), [throttledApplyOffset]);
|
||||||
|
|
||||||
|
const handleSliderChange = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
if (!values || values.length === 0) return;
|
||||||
|
throttledApplyOffset(values[0]);
|
||||||
|
},
|
||||||
|
[throttledApplyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSliderCommit = useCallback(
|
||||||
|
(values: number[]) => {
|
||||||
|
if (!values || values.length === 0) return;
|
||||||
|
throttledApplyOffset.cancel();
|
||||||
|
applyOffset(values[0]);
|
||||||
|
},
|
||||||
|
[throttledApplyOffset, applyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
|
const stepOffset = useCallback(
|
||||||
|
(delta: number) => {
|
||||||
|
const next = Math.max(
|
||||||
|
ANNOTATION_OFFSET_MIN,
|
||||||
|
Math.min(ANNOTATION_OFFSET_MAX, annotationOffset + delta),
|
||||||
|
);
|
||||||
|
throttledApplyOffset.cancel();
|
||||||
|
applyOffset(next);
|
||||||
|
},
|
||||||
|
[annotationOffset, applyOffset, throttledApplyOffset],
|
||||||
|
);
|
||||||
|
|
||||||
const reset = useCallback(() => {
|
const reset = useCallback(() => {
|
||||||
setAnnotationOffset(0);
|
throttledApplyOffset.cancel();
|
||||||
}, [setAnnotationOffset]);
|
applyOffset(0);
|
||||||
|
}, [applyOffset, throttledApplyOffset]);
|
||||||
|
|
||||||
const saveToConfig = useCallback(async () => {
|
const saveToConfig = useCallback(async () => {
|
||||||
if (!config || !event) return;
|
if (!config || !event) return;
|
||||||
@ -143,6 +181,7 @@ export function AnnotationSettingsPane({
|
|||||||
max={ANNOTATION_OFFSET_MAX}
|
max={ANNOTATION_OFFSET_MAX}
|
||||||
step={ANNOTATION_OFFSET_STEP}
|
step={ANNOTATION_OFFSET_STEP}
|
||||||
onValueChange={handleSliderChange}
|
onValueChange={handleSliderChange}
|
||||||
|
onValueCommit={handleSliderCommit}
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -73,7 +73,7 @@ export default function DetailActionsMenu({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
|
<DropdownMenu modal={false} open={isOpen} onOpenChange={setIsOpen}>
|
||||||
<DropdownMenuTrigger>
|
<DropdownMenuTrigger>
|
||||||
<div className="rounded" role="button">
|
<div className="rounded" role="button">
|
||||||
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
||||||
|
|||||||
@ -957,8 +957,9 @@ function ObjectDetailsTab({
|
|||||||
toast.success(
|
toast.success(
|
||||||
t("details.item.toast.success.regenerate", {
|
t("details.item.toast.success.regenerate", {
|
||||||
provider: capitalizeAll(
|
provider: capitalizeAll(
|
||||||
config?.genai.provider.replaceAll("_", " ") ??
|
Object.values(config?.genai ?? {})
|
||||||
t("generativeAI"),
|
.find((agent) => agent?.roles?.includes("descriptions"))
|
||||||
|
?.provider?.replaceAll("_", " ") ?? t("generativeAI"),
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
@ -976,8 +977,9 @@ function ObjectDetailsTab({
|
|||||||
toast.error(
|
toast.error(
|
||||||
t("details.item.toast.error.regenerate", {
|
t("details.item.toast.error.regenerate", {
|
||||||
provider: capitalizeAll(
|
provider: capitalizeAll(
|
||||||
config?.genai.provider.replaceAll("_", " ") ??
|
Object.values(config?.genai ?? {})
|
||||||
t("generativeAI"),
|
.find((agent) => agent?.roles?.includes("descriptions"))
|
||||||
|
?.provider?.replaceAll("_", " ") ?? t("generativeAI"),
|
||||||
),
|
),
|
||||||
errorMessage,
|
errorMessage,
|
||||||
}),
|
}),
|
||||||
|
|||||||
@ -1,5 +1,13 @@
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useLayoutEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import { flushSync } from "react-dom";
|
||||||
import { useResizeObserver } from "@/hooks/resize-observer";
|
import { useResizeObserver } from "@/hooks/resize-observer";
|
||||||
import { useFullscreen } from "@/hooks/use-fullscreen";
|
import { useFullscreen } from "@/hooks/use-fullscreen";
|
||||||
import { Event } from "@/types/event";
|
import { Event } from "@/types/event";
|
||||||
@ -389,7 +397,12 @@ export function TrackingDetails({
|
|||||||
|
|
||||||
// When the pinned timestamp or offset changes, re-seek the video and
|
// When the pinned timestamp or offset changes, re-seek the video and
|
||||||
// explicitly update currentTime so the overlay shows the pinned event's box.
|
// explicitly update currentTime so the overlay shows the pinned event's box.
|
||||||
useEffect(() => {
|
// useLayoutEffect + flushSync force the setCurrentTime commit to land before
|
||||||
|
// the browser paints, so the overlay never shows a frame where
|
||||||
|
// annotationOffset has changed but currentTime has not — that mismatch would
|
||||||
|
// resolve effectiveCurrentTime away from the pinned detect timestamp and
|
||||||
|
// make the bounding box disappear or jump for one frame.
|
||||||
|
useLayoutEffect(() => {
|
||||||
const pinned = pinnedDetectTimestampRef.current;
|
const pinned = pinnedDetectTimestampRef.current;
|
||||||
if (!isAnnotationSettingsOpen || pinned == null) return;
|
if (!isAnnotationSettingsOpen || pinned == null) return;
|
||||||
if (!videoRef.current || displaySource !== "video") return;
|
if (!videoRef.current || displaySource !== "video") return;
|
||||||
@ -398,10 +411,9 @@ export function TrackingDetails({
|
|||||||
const relativeTime = timestampToVideoTime(targetTimeRecord);
|
const relativeTime = timestampToVideoTime(targetTimeRecord);
|
||||||
videoRef.current.currentTime = relativeTime;
|
videoRef.current.currentTime = relativeTime;
|
||||||
|
|
||||||
// Explicitly update currentTime state so the overlay's effectiveCurrentTime
|
flushSync(() => {
|
||||||
// resolves back to the pinned detect timestamp:
|
setCurrentTime(targetTimeRecord);
|
||||||
// effectiveCurrentTime = targetTimeRecord - annotationOffset/1000 = pinned
|
});
|
||||||
setCurrentTime(targetTimeRecord);
|
|
||||||
}, [
|
}, [
|
||||||
isAnnotationSettingsOpen,
|
isAnnotationSettingsOpen,
|
||||||
annotationOffset,
|
annotationOffset,
|
||||||
@ -1204,7 +1216,11 @@ function LifecycleIconRow({
|
|||||||
<div className="flex flex-row items-center gap-3">
|
<div className="flex flex-row items-center gap-3">
|
||||||
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
|
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
|
||||||
{isAdmin && (config?.plus?.enabled || item.data.box) && (
|
{isAdmin && (config?.plus?.enabled || item.data.box) && (
|
||||||
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
|
<DropdownMenu
|
||||||
|
modal={false}
|
||||||
|
open={isOpen}
|
||||||
|
onOpenChange={setIsOpen}
|
||||||
|
>
|
||||||
<DropdownMenuTrigger>
|
<DropdownMenuTrigger>
|
||||||
<div className="rounded p-1 pr-2" role="button">
|
<div className="rounded p-1 pr-2" role="button">
|
||||||
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
||||||
|
|||||||
@ -126,13 +126,20 @@ export default function DetailStream({
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [controlsExpanded]);
|
}, [controlsExpanded]);
|
||||||
|
|
||||||
// Re-seek on annotation offset change while settings panel is open
|
// The slider invokes this atomically with setAnnotationOffset (inside the
|
||||||
useEffect(() => {
|
// same flushSync) so currentTime advances in the same React commit as the
|
||||||
const pinned = pinnedDetectTimestampRef.current;
|
// offset. Without this, the overlay would render one frame with the new
|
||||||
if (!controlsExpanded || pinned == null) return;
|
// offset but the old currentTime, briefly resolving effectiveCurrentTime to
|
||||||
const recordTime = pinned + annotationOffset / 1000;
|
// the wrong detect-stream timestamp and making the bounding box vanish or
|
||||||
onSeek(recordTime, false);
|
// jump.
|
||||||
}, [controlsExpanded, annotationOffset, onSeek]);
|
const handleApplyOffset = useCallback(
|
||||||
|
(newOffset: number) => {
|
||||||
|
const pinned = pinnedDetectTimestampRef.current;
|
||||||
|
if (!controlsExpanded || pinned == null) return;
|
||||||
|
onSeek(pinned + newOffset / 1000, false);
|
||||||
|
},
|
||||||
|
[controlsExpanded, onSeek],
|
||||||
|
);
|
||||||
|
|
||||||
// Ensure we initialize the active review when reviewItems first arrive.
|
// Ensure we initialize the active review when reviewItems first arrive.
|
||||||
// This helps when the component mounts while the video is already
|
// This helps when the component mounts while the video is already
|
||||||
@ -337,7 +344,7 @@ export default function DetailStream({
|
|||||||
</button>
|
</button>
|
||||||
{controlsExpanded && (
|
{controlsExpanded && (
|
||||||
<div className="space-y-4 px-3 pb-5 pt-2">
|
<div className="space-y-4 px-3 pb-5 pt-2">
|
||||||
<AnnotationOffsetSlider />
|
<AnnotationOffsetSlider onApplyOffset={handleApplyOffset} />
|
||||||
<Separator />
|
<Separator />
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
|
|||||||
@ -53,6 +53,10 @@ export default function EventMenu({
|
|||||||
const handleDebugReplay = useCallback(
|
const handleDebugReplay = useCallback(
|
||||||
(event: Event) => {
|
(event: Event) => {
|
||||||
setIsStarting(true);
|
setIsStarting(true);
|
||||||
|
const toastId = toast.loading(
|
||||||
|
t("dialog.starting", { ns: "views/replay" }),
|
||||||
|
{ position: "top-center" },
|
||||||
|
);
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.post("debug_replay/start", {
|
.post("debug_replay/start", {
|
||||||
@ -63,6 +67,7 @@ export default function EventMenu({
|
|||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
|
toast.success(t("dialog.toast.success", { ns: "views/replay" }), {
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
});
|
});
|
||||||
navigate("/replay");
|
navigate("/replay");
|
||||||
@ -78,6 +83,7 @@ export default function EventMenu({
|
|||||||
toast.error(
|
toast.error(
|
||||||
t("dialog.toast.alreadyActive", { ns: "views/replay" }),
|
t("dialog.toast.alreadyActive", { ns: "views/replay" }),
|
||||||
{
|
{
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
dismissible: false,
|
dismissible: false,
|
||||||
@ -92,6 +98,7 @@ export default function EventMenu({
|
|||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
toast.error(t("dialog.toast.error", { error: errorMessage }), {
|
toast.error(t("dialog.toast.error", { error: errorMessage }), {
|
||||||
|
id: toastId,
|
||||||
position: "top-center",
|
position: "top-center",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -106,7 +113,7 @@ export default function EventMenu({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span tabIndex={0} className="sr-only" />
|
<span tabIndex={0} className="sr-only" />
|
||||||
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
|
<DropdownMenu modal={false} open={isOpen} onOpenChange={setIsOpen}>
|
||||||
<DropdownMenuTrigger>
|
<DropdownMenuTrigger>
|
||||||
<div className="rounded p-1 pr-2" role="button">
|
<div className="rounded p-1 pr-2" role="button">
|
||||||
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
<HiDotsHorizontal className="size-4 text-muted-foreground" />
|
||||||
|
|||||||
@ -28,6 +28,14 @@ export default function useNavigation(
|
|||||||
});
|
});
|
||||||
const isAdmin = useIsAdmin();
|
const isAdmin = useIsAdmin();
|
||||||
|
|
||||||
|
const hasChatAgent = useMemo(
|
||||||
|
() =>
|
||||||
|
Object.values(config?.genai ?? {}).some((agent) =>
|
||||||
|
agent?.roles?.includes("chat"),
|
||||||
|
),
|
||||||
|
[config?.genai],
|
||||||
|
);
|
||||||
|
|
||||||
return useMemo(
|
return useMemo(
|
||||||
() =>
|
() =>
|
||||||
[
|
[
|
||||||
@ -89,9 +97,9 @@ export default function useNavigation(
|
|||||||
icon: MdChat,
|
icon: MdChat,
|
||||||
title: "menu.chat",
|
title: "menu.chat",
|
||||||
url: "/chat",
|
url: "/chat",
|
||||||
enabled: isDesktop && isAdmin && config?.genai?.model !== "none",
|
enabled: isDesktop && isAdmin && hasChatAgent,
|
||||||
},
|
},
|
||||||
] as NavData[],
|
] as NavData[],
|
||||||
[config?.face_recognition?.enabled, config?.genai?.model, variant, isAdmin],
|
[config?.face_recognition?.enabled, hasChatAgent, variant, isAdmin],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -382,6 +382,18 @@ export type AllGroupsStreamingSettings = {
|
|||||||
[groupName: string]: GroupStreamingSettings;
|
[groupName: string]: GroupStreamingSettings;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type GenAIRole = "chat" | "descriptions" | "embeddings";
|
||||||
|
|
||||||
|
export type GenAIAgentConfig = {
|
||||||
|
api_key?: string;
|
||||||
|
base_url?: string;
|
||||||
|
model: string;
|
||||||
|
provider?: string;
|
||||||
|
roles: GenAIRole[];
|
||||||
|
provider_options?: Record<string, unknown>;
|
||||||
|
runtime_options?: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
|
||||||
export interface FrigateConfig {
|
export interface FrigateConfig {
|
||||||
version: string;
|
version: string;
|
||||||
safe_mode: boolean;
|
safe_mode: boolean;
|
||||||
@ -478,12 +490,7 @@ export interface FrigateConfig {
|
|||||||
retry_interval: number;
|
retry_interval: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
genai: {
|
genai: Record<string, GenAIAgentConfig>;
|
||||||
provider: string;
|
|
||||||
base_url?: string;
|
|
||||||
api_key?: string;
|
|
||||||
model: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
go2rtc: {
|
go2rtc: {
|
||||||
streams: Record<string, string | string[]>;
|
streams: Record<string, string | string[]>;
|
||||||
|
|||||||
@ -38,6 +38,22 @@ export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Find the chunk index that contains the given timestamp.
|
||||||
|
* Uses half-open intervals [after, before) for all chunks except the last,
|
||||||
|
* which uses a closed interval [after, before] so the terminal boundary
|
||||||
|
* is always reachable.
|
||||||
|
*/
|
||||||
|
export function findChunkIndex(chunks: TimeRange[], timestamp: number): number {
|
||||||
|
return chunks.findIndex((chunk, i) => {
|
||||||
|
const isLast = i === chunks.length - 1;
|
||||||
|
return (
|
||||||
|
chunk.after <= timestamp &&
|
||||||
|
(isLast ? chunk.before >= timestamp : chunk.before > timestamp)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function getChunkedTimeRange(
|
export function getChunkedTimeRange(
|
||||||
startTimestamp: number,
|
startTimestamp: number,
|
||||||
endTimestamp: number,
|
endTimestamp: number,
|
||||||
|
|||||||
@ -26,7 +26,7 @@ import {
|
|||||||
ReviewSummary,
|
ReviewSummary,
|
||||||
ZoomLevel,
|
ZoomLevel,
|
||||||
} from "@/types/review";
|
} from "@/types/review";
|
||||||
import { getChunkedTimeDay } from "@/utils/timelineUtil";
|
import { findChunkIndex, getChunkedTimeDay } from "@/utils/timelineUtil";
|
||||||
import {
|
import {
|
||||||
MutableRefObject,
|
MutableRefObject,
|
||||||
useCallback,
|
useCallback,
|
||||||
@ -169,9 +169,7 @@ export function RecordingView({
|
|||||||
[timeRange],
|
[timeRange],
|
||||||
);
|
);
|
||||||
const [selectedRangeIdx, setSelectedRangeIdx] = useState(
|
const [selectedRangeIdx, setSelectedRangeIdx] = useState(
|
||||||
chunkedTimeRange.findIndex((chunk) => {
|
findChunkIndex(chunkedTimeRange, startTime),
|
||||||
return chunk.after <= startTime && chunk.before >= startTime;
|
|
||||||
}),
|
|
||||||
);
|
);
|
||||||
const currentTimeRange = useMemo<TimeRange>(
|
const currentTimeRange = useMemo<TimeRange>(
|
||||||
() =>
|
() =>
|
||||||
@ -274,9 +272,7 @@ export function RecordingView({
|
|||||||
|
|
||||||
const updateSelectedSegment = useCallback(
|
const updateSelectedSegment = useCallback(
|
||||||
(currentTime: number, updateStartTime: boolean) => {
|
(currentTime: number, updateStartTime: boolean) => {
|
||||||
const index = chunkedTimeRange.findIndex(
|
const index = findChunkIndex(chunkedTimeRange, currentTime);
|
||||||
(seg) => seg.after <= currentTime && seg.before >= currentTime,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (index != -1) {
|
if (index != -1) {
|
||||||
if (updateStartTime) {
|
if (updateStartTime) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user