From ca75f064565489e755454ef31e3eba52433c3ca9 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Wed, 13 May 2026 11:04:11 -0500 Subject: [PATCH] Miscellaneous fixes (#23186) * improve scroll handling for non-modal DropdownMenu in classification and face selection dialogs * clean up * fix incorrect key capitalization * fix profile array overrides not replacing base arrays don't use lodash merge(), it does positional merging and an empty source array doesn't override the destination, and shorter arrays leak destination elements through. backend is unaffected, so the saved config and actual backend functionality was right * only show audio debug tab when audio is enabled in config * move apple_compatibility out of advanced * remove retry_interval from UI 99% of users should never be changing this * hide switch in optionalfieldwidget if editing a profile * add override badges for cameras and profiles collect shared functions into the config util and separate hooks * Use new models endpoint info to determine modalities * clarify language * fix linter --------- Co-authored-by: Nicolas Mowen --- frigate/genai/llama_cpp.py | 145 +++++++++++++----- web/public/locales/en/objects.json | 4 +- web/public/locales/en/views/settings.json | 6 + web/src/components/chat/ChatMessage.tsx | 2 +- .../config-form/section-configs/ffmpeg.ts | 25 +-- .../config-form/sections/BaseSection.tsx | 109 +++++-------- .../sections/CameraOverridesBadge.tsx | 77 +--------- .../sections/GlobalOverridesBadge.tsx | 44 ++++++ .../sections/OverrideDeltaPopover.tsx | 78 ++++++++++ .../sections/ProfileOverridesBadge.tsx | 62 ++++++++ .../sections/useOverrideFieldLabel.ts | 53 +++++++ .../theme/widgets/OptionalFieldWidget.tsx | 12 +- .../overlay/ClassificationSelectionDialog.tsx | 121 ++++++++------- .../overlay/FaceSelectionDialog.tsx | 103 ++++++++----- web/src/hooks/use-config-override.ts | 136 ++++++++++++++++ web/src/types/configForm.ts | 1 + web/src/utils/configUtil.ts | 63 +++++++- web/src/views/settings/ObjectSettingsView.tsx | 16 +- web/src/views/settings/SingleSectionPage.tsx | 105 +++++-------- 19 files changed, 783 insertions(+), 379 deletions(-) create mode 100644 web/src/components/config-form/sections/GlobalOverridesBadge.tsx create mode 100644 web/src/components/config-form/sections/OverrideDeltaPopover.tsx create mode 100644 web/src/components/config-form/sections/ProfileOverridesBadge.tsx create mode 100644 web/src/components/config-form/sections/useOverrideFieldLabel.ts diff --git a/frigate/genai/llama_cpp.py b/frigate/genai/llama_cpp.py index de45deadb..24accdc02 100644 --- a/frigate/genai/llama_cpp.py +++ b/frigate/genai/llama_cpp.py @@ -18,6 +18,17 @@ from frigate.genai.utils import parse_tool_calls_from_message logger = logging.getLogger(__name__) +def _parse_launch_arg(args: list[str], flag: str) -> str | None: + """Return the value following `flag` in a positional argv list, or None.""" + try: + idx = args.index(flag) + except ValueError: + return None + if idx + 1 >= len(args): + return None + return args[idx + 1] + + def _to_jpeg(img_bytes: bytes) -> bytes | None: """Convert image bytes to JPEG. llama.cpp/STB does not support WebP.""" try: @@ -71,26 +82,69 @@ class LlamaCppClient(GenAIClient): base_url = base_url.replace("/v1", "") # Strip /v1 if included in base_url configured_model = self.genai_config.model + info = self._get_model_info(base_url, configured_model) - # Query /v1/models to validate the configured model exists + if info is None: + return None + + self._context_size = info["context_size"] + self._supports_vision = info["supports_vision"] + self._supports_audio = info["supports_audio"] + self._supports_tools = info["supports_tools"] + self._media_marker = info["media_marker"] + + logger.info( + "llama.cpp model '%s' initialized — context: %s, vision: %s, audio: %s, tools: %s", + configured_model, + self._context_size or "unknown", + self._supports_vision, + self._supports_audio, + self._supports_tools, + ) + + return base_url + + def _get_model_info( + self, base_url: str, configured_model: str + ) -> dict[str, Any] | None: + """Resolve model metadata from /v1/models with /props fallback. + + Returns a dict of capability fields, or None if the server's model + registry was reachable and reported the configured model as missing. + A reachable-but-unparseable /v1/models is treated as soft-pass and + falls through to /props, matching prior behavior. + + After ggml-org/llama.cpp#22952, /v1/models exposes per-model + `architecture.input_modalities` (text/image/audio) — the primary + source. When proxied through llama-swap, the same entry carries + `status.args` (server launch argv) and, for the loaded model, + `meta.n_ctx`. /props remains the only source for `media_marker`, + which the server randomizes per startup unless LLAMA_MEDIA_MARKER + is set. + """ + info: dict[str, Any] = { + "context_size": None, + "supports_vision": False, + "supports_audio": False, + "supports_tools": False, + "media_marker": "<__media__>", + } + + model_entry: dict[str, Any] | None = None try: - response = requests.get( - f"{base_url}/v1/models", - timeout=10, - ) + response = requests.get(f"{base_url}/v1/models", timeout=10) response.raise_for_status() models_data = response.json() - model_found = False for model in models_data.get("data", []): model_ids = {model.get("id")} for alias in model.get("aliases", []): model_ids.add(alias) if configured_model in model_ids: - model_found = True + model_entry = model break - if not model_found: + if model_entry is None: available = [] for m in models_data.get("data", []): available.append(m.get("id", "unknown")) @@ -109,10 +163,35 @@ class LlamaCppClient(GenAIClient): e, ) - # Query /props for context size, modalities, and tool support. - # The standard /props?model= endpoint works with llama-server. - # If it fails, try the llama-swap per-model passthrough endpoint which - # returns props for a specific model without requiring it to be loaded. + if model_entry is not None: + architecture = model_entry.get("architecture") or {} + input_modalities = architecture.get("input_modalities") or [] + + if isinstance(input_modalities, list): + info["supports_vision"] = "image" in input_modalities + info["supports_audio"] = "audio" in input_modalities + + status = model_entry.get("status") or {} + launch_args = status.get("args") if isinstance(status, dict) else None + if not isinstance(launch_args, list): + launch_args = [] + + meta = model_entry.get("meta") if isinstance(model_entry, dict) else None + n_ctx = meta.get("n_ctx") if isinstance(meta, dict) else None + + if not n_ctx: + n_ctx = _parse_launch_arg(launch_args, "--ctx-size") + + if n_ctx: + try: + info["context_size"] = int(n_ctx) + except (TypeError, ValueError): + pass + + # Tool calling on llama-server requires --jinja. + if "--jinja" in launch_args: + info["supports_tools"] = True + try: try: response = requests.get( @@ -130,44 +209,32 @@ class LlamaCppClient(GenAIClient): response.raise_for_status() props = response.json() - # Context size from server runtime config - default_settings = props.get("default_generation_settings", {}) - n_ctx = default_settings.get("n_ctx") - if n_ctx: - self._context_size = int(n_ctx) + if info["context_size"] is None: + default_settings = props.get("default_generation_settings", {}) + n_ctx = default_settings.get("n_ctx") + if n_ctx: + info["context_size"] = int(n_ctx) - # Modalities (vision, audio) - modalities = props.get("modalities", {}) - self._supports_vision = modalities.get("vision", False) - self._supports_audio = modalities.get("audio", False) + if not (info["supports_vision"] or info["supports_audio"]): + modalities = props.get("modalities", {}) + info["supports_vision"] = bool(modalities.get("vision", False)) + info["supports_audio"] = bool(modalities.get("audio", False)) - # Tool support from chat template capabilities - chat_caps = props.get("chat_template_caps", {}) - self._supports_tools = chat_caps.get("supports_tools", False) + if not info["supports_tools"]: + chat_caps = props.get("chat_template_caps", {}) + info["supports_tools"] = bool(chat_caps.get("supports_tools", False)) - # Media marker for multimodal embeddings; the server randomizes this - # per startup unless LLAMA_MEDIA_MARKER is set, so we must read it - # from /props rather than hardcoding "<__media__>". media_marker = props.get("media_marker") if isinstance(media_marker, str) and media_marker: - self._media_marker = media_marker - - logger.info( - "llama.cpp model '%s' initialized — context: %s, vision: %s, audio: %s, tools: %s", - configured_model, - self._context_size or "unknown", - self._supports_vision, - self._supports_audio, - self._supports_tools, - ) + info["media_marker"] = media_marker except Exception as e: logger.warning( "Failed to query llama.cpp /props endpoint: %s. " - "Using defaults for context size and capabilities.", + "Image embeddings may fail if the server randomized its media marker.", e, ) - return base_url + return info def _send( self, diff --git a/web/public/locales/en/objects.json b/web/public/locales/en/objects.json index fc02ed0f5..d48f609a1 100644 --- a/web/public/locales/en/objects.json +++ b/web/public/locales/en/objects.json @@ -125,5 +125,5 @@ "baby": "Baby", "baby_stroller": "Baby Stroller", "rickshaw": "Rickshaw", - "Rodent": "Rodent" -} \ No newline at end of file + "rodent": "Rodent" +} diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json index 756e2ddb3..0f32d7e65 100644 --- a/web/public/locales/en/views/settings.json +++ b/web/public/locales/en/views/settings.json @@ -19,8 +19,14 @@ "button": { "overriddenGlobal": "Overridden (Global)", "overriddenGlobalTooltip": "This camera overrides global configuration settings in this section", + "overriddenGlobalHeading_one": "This camera overrides {{count}} field from the global config:", + "overriddenGlobalHeading_other": "This camera overrides {{count}} fields from the global config:", + "overriddenGlobalNoDeltas": "This camera overrides the global config, but no field values differ.", "overriddenBaseConfig": "Overridden (Base Config)", "overriddenBaseConfigTooltip": "The {{profile}} profile overrides configuration settings in this section", + "overriddenBaseConfigHeading_one": "The {{profile}} profile overrides {{count}} field from the base config:", + "overriddenBaseConfigHeading_other": "The {{profile}} profile overrides {{count}} fields from the base config:", + "overriddenBaseConfigNoDeltas": "The {{profile}} profile overrides this section, but no field values differ from the base config.", "overriddenInCameras": { "label_one": "Overridden in {{count}} camera", "label_other": "Overridden in {{count}} cameras", diff --git a/web/src/components/chat/ChatMessage.tsx b/web/src/components/chat/ChatMessage.tsx index 6478b48fc..9a91d7035 100644 --- a/web/src/components/chat/ChatMessage.tsx +++ b/web/src/components/chat/ChatMessage.tsx @@ -156,7 +156,7 @@ export function MessageBubble({
p:last-child]:inline after:ml-0.5 after:inline-block after:h-4 after:w-2 after:animate-cursor-blink after:rounded-sm after:bg-foreground after:align-middle after:content-['']", + "after:ml-0.5 after:inline-block after:h-4 after:w-2 after:animate-cursor-blink after:rounded-sm after:bg-foreground after:align-middle after:content-[''] [&>p:last-child]:inline", )} > @@ -1253,33 +1254,22 @@ export function ConfigSection({ {title} {showOverrideIndicator && effectiveLevel === "camera" && - (profileOverridesSection || isOverridden) && ( - - - - {overrideSource === "profile" - ? t("button.overriddenBaseConfig", { - ns: "views/settings", - defaultValue: "Overridden (Base Config)", - }) - : t("button.overriddenGlobal", { - ns: "views/settings", - defaultValue: "Overridden (Global)", - })} - - - - {overrideSource === "profile" - ? t("button.overriddenBaseConfigTooltip", { - ns: "views/settings", - profile: profileFriendlyName ?? profileName, - }) - : t("button.overriddenGlobalTooltip", { - ns: "views/settings", - })} - - - )} + (profileOverridesSection || isOverridden) && + cameraName && + (overrideSource === "profile" && profileName ? ( + + ) : ( + + ))} {showOverrideIndicator && effectiveLevel === "global" && ( )} @@ -1319,41 +1309,22 @@ export function ConfigSection({ {title} {showOverrideIndicator && effectiveLevel === "camera" && - (profileOverridesSection || isOverridden) && ( - - - - {overrideSource === "profile" - ? t("button.overriddenBaseConfig", { - ns: "views/settings", - defaultValue: "Overridden (Base Config)", - }) - : t("button.overriddenGlobal", { - ns: "views/settings", - defaultValue: "Overridden (Global)", - })} - - - - {overrideSource === "profile" - ? t("button.overriddenBaseConfigTooltip", { - ns: "views/settings", - profile: profileFriendlyName ?? profileName, - }) - : t("button.overriddenGlobalTooltip", { - ns: "views/settings", - })} - - - )} + (profileOverridesSection || isOverridden) && + cameraName && + (overrideSource === "profile" && profileName ? ( + + ) : ( + + ))} {showOverrideIndicator && effectiveLevel === "global" && ( )} diff --git a/web/src/components/config-form/sections/CameraOverridesBadge.tsx b/web/src/components/config-form/sections/CameraOverridesBadge.tsx index 6ccbb028c..466934a77 100644 --- a/web/src/components/config-form/sections/CameraOverridesBadge.tsx +++ b/web/src/components/config-form/sections/CameraOverridesBadge.tsx @@ -17,10 +17,13 @@ import { } from "@/hooks/use-config-override"; import type { FrigateConfig } from "@/types/frigateConfig"; import type { ProfilesApiResponse } from "@/types/profile"; -import { humanizeKey } from "@/components/config-form/theme/utils/i18n"; import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name"; import { formatList } from "@/utils/stringUtil"; -import { getEffectiveHiddenFields } from "@/utils/configUtil"; +import { + getEffectiveHiddenFields, + pathMatchesHiddenPattern, +} from "@/utils/configUtil"; +import { useOverrideFieldLabel } from "./useOverrideFieldLabel"; const CAMERA_PAGE_BY_SECTION: Record = { detect: "cameraDetect", @@ -72,26 +75,6 @@ const SECTIONS_WITHOUT_OVERRIDE_BADGE = new Set([ "model", ]); -/** - * Match a delta path against a hidden-field pattern. Supports literal prefixes - * (so a hidden field "streams" also hides "streams.foo.bar") and `*` wildcards - * matching exactly one path segment (e.g. "filters.*.mask"). - */ -function pathMatchesHiddenPattern(path: string, pattern: string): boolean { - if (!pattern) return false; - if (!pattern.includes("*")) { - return path === pattern || path.startsWith(`${pattern}.`); - } - const patternSegments = pattern.split("."); - const pathSegments = path.split("."); - if (pathSegments.length < patternSegments.length) return false; - for (let i = 0; i < patternSegments.length; i += 1) { - if (patternSegments[i] === "*") continue; - if (patternSegments[i] !== pathSegments[i]) return false; - } - return true; -} - type CameraEntryProps = { sectionPath: string; entry: CameraOverrideEntry; @@ -127,11 +110,8 @@ function groupDeltasBySource(deltas: FieldDelta[]): SourceGroup[] { } function CameraEntry({ sectionPath, entry, cameraPage }: CameraEntryProps) { - const { t, i18n } = useTranslation([ - "config/global", - "views/settings", - "objects", - ]); + const { t } = useTranslation(["views/settings"]); + const fieldLabel = useOverrideFieldLabel(sectionPath); const friendlyName = useCameraFriendlyName(entry.camera); const { data: profilesData } = useSWR("profiles"); @@ -141,49 +121,6 @@ function CameraEntry({ sectionPath, entry, cameraPage }: CameraEntryProps) { return map; }, [profilesData]); - const fieldLabel = (fieldPath: string) => { - if (!fieldPath) { - const sectionKey = `${sectionPath}.label`; - return i18n.exists(sectionKey, { ns: "config/global" }) - ? t(sectionKey, { ns: "config/global" }) - : humanizeKey(sectionPath); - } - - const segments = fieldPath.split("."); - - // Most specific: try the full nested path - const fullKey = `${sectionPath}.${fieldPath}.label`; - if (i18n.exists(fullKey, { ns: "config/global" })) { - return t(fullKey, { ns: "config/global" }); - } - - // Try dropping each intermediate segment in turn — those are typically - // user-defined dict keys (object class names, zone names, etc.) that - // don't have their own label entries. Prepend the dropped segment as - // context to disambiguate (e.g. "Person · Minimum object area"). - for (let i = 0; i < segments.length; i++) { - const reduced = [...segments.slice(0, i), ...segments.slice(i + 1)].join( - ".", - ); - if (!reduced) continue; - const reducedKey = `${sectionPath}.${reduced}.label`; - if (i18n.exists(reducedKey, { ns: "config/global" })) { - const resolvedLabel = t(reducedKey, { ns: "config/global" }); - const dropped = segments[i]; - // Object class names ("person", "car", "fox") have translations in - // the `objects` namespace; fall back to humanizing the raw key for - // anything that isn't a known label. - const droppedLabel = i18n.exists(dropped, { ns: "objects" }) - ? t(dropped, { ns: "objects" }) - : humanizeKey(dropped); - return `${droppedLabel} · ${resolvedLabel}`; - } - } - - // Last resort: humanize the leaf segment - return humanizeKey(segments[segments.length - 1]); - }; - const formatDeltas = (deltas: FieldDelta[]) => { const visibleLabels = deltas .slice(0, MAX_FIELDS_PER_CAMERA) diff --git a/web/src/components/config-form/sections/GlobalOverridesBadge.tsx b/web/src/components/config-form/sections/GlobalOverridesBadge.tsx new file mode 100644 index 000000000..d6bc9b3e4 --- /dev/null +++ b/web/src/components/config-form/sections/GlobalOverridesBadge.tsx @@ -0,0 +1,44 @@ +import useSWR from "swr"; +import { useTranslation } from "react-i18next"; + +import { useCameraSectionDeltas } from "@/hooks/use-config-override"; +import type { FrigateConfig } from "@/types/frigateConfig"; +import { OverrideDeltaPopover } from "./OverrideDeltaPopover"; + +type Props = { + sectionPath: string; + cameraName: string; + className?: string; +}; + +export function GlobalOverridesBadge({ + sectionPath, + cameraName, + className, +}: Props) { + const { data: config } = useSWR("config"); + const { t } = useTranslation(["views/settings"]); + const deltas = useCameraSectionDeltas(config, cameraName, sectionPath); + + return ( + + ); +} diff --git a/web/src/components/config-form/sections/OverrideDeltaPopover.tsx b/web/src/components/config-form/sections/OverrideDeltaPopover.tsx new file mode 100644 index 000000000..5cd22a521 --- /dev/null +++ b/web/src/components/config-form/sections/OverrideDeltaPopover.tsx @@ -0,0 +1,78 @@ +import { LuChevronDown } from "react-icons/lu"; + +import { Badge } from "@/components/ui/badge"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import type { FieldDelta } from "@/hooks/use-config-override"; +import { cn } from "@/lib/utils"; +import { useOverrideFieldLabel } from "./useOverrideFieldLabel"; + +type Props = { + sectionPath: string; + deltas: FieldDelta[]; + /** Translated label shown inside the badge */ + badgeLabel: string; + /** Accessible label for the badge trigger */ + ariaLabel: string; + /** Heading rendered at the top of the popover content */ + heading: string; + /** Message shown when there are zero field deltas */ + noDeltasMessage: string; + /** Border color class for the badge (defaults to selected) */ + borderColorClass?: string; + className?: string; +}; + +/** + * Shared popover layout for "this scope overrides these fields" badges + * (e.g. profile overrides base config, camera overrides global config). + */ +export function OverrideDeltaPopover({ + sectionPath, + deltas, + badgeLabel, + ariaLabel, + heading, + noDeltasMessage, + borderColorClass, + className, +}: Props) { + const fieldLabel = useOverrideFieldLabel(sectionPath); + const count = deltas.length; + + return ( + + e.stopPropagation()}> + + {badgeLabel} + + + + +
+
+ {count > 0 ? heading : noDeltasMessage} +
+ {count > 0 && ( +
    + {deltas.map((delta) => ( +
  • {fieldLabel(delta.fieldPath)}
    • + ))} +
+ )} +
+ + + ); +} diff --git a/web/src/components/config-form/sections/ProfileOverridesBadge.tsx b/web/src/components/config-form/sections/ProfileOverridesBadge.tsx new file mode 100644 index 000000000..2d8d5d7e1 --- /dev/null +++ b/web/src/components/config-form/sections/ProfileOverridesBadge.tsx @@ -0,0 +1,62 @@ +import useSWR from "swr"; +import { useTranslation } from "react-i18next"; + +import { useProfileSectionDeltas } from "@/hooks/use-config-override"; +import type { FrigateConfig } from "@/types/frigateConfig"; +import { OverrideDeltaPopover } from "./OverrideDeltaPopover"; + +type Props = { + sectionPath: string; + cameraName: string; + profileName: string; + profileFriendlyName?: string; + /** Border color class for profile-themed badge (e.g., "border-amber-500") */ + profileBorderColor?: string; + className?: string; +}; + +export function ProfileOverridesBadge({ + sectionPath, + cameraName, + profileName, + profileFriendlyName, + profileBorderColor, + className, +}: Props) { + const { data: config } = useSWR("config"); + const { t } = useTranslation(["views/settings"]); + const deltas = useProfileSectionDeltas( + config, + cameraName, + profileName, + sectionPath, + ); + + const displayProfile = profileFriendlyName ?? profileName; + + return ( + + ); +} diff --git a/web/src/components/config-form/sections/useOverrideFieldLabel.ts b/web/src/components/config-form/sections/useOverrideFieldLabel.ts new file mode 100644 index 000000000..0ec7398de --- /dev/null +++ b/web/src/components/config-form/sections/useOverrideFieldLabel.ts @@ -0,0 +1,53 @@ +import { useTranslation } from "react-i18next"; +import { humanizeKey } from "@/components/config-form/theme/utils/i18n"; + +/** + * Resolve a translated label for a config field path within a section, falling + * back through reduced paths (dropping each intermediate segment in turn) so + * dict-keyed paths like `filters.person.threshold` still surface a meaningful + * label. Dropped segments are prepended as context (e.g. "Person · Threshold"). + * + * Shared between override badges that need to render field labels (e.g. + * CameraOverridesBadge, ProfileOverridesBadge). + */ +export function useOverrideFieldLabel(sectionPath: string) { + const { t, i18n } = useTranslation([ + "config/global", + "views/settings", + "objects", + ]); + + return (fieldPath: string): string => { + if (!fieldPath) { + const sectionKey = `${sectionPath}.label`; + return i18n.exists(sectionKey, { ns: "config/global" }) + ? t(sectionKey, { ns: "config/global" }) + : humanizeKey(sectionPath); + } + + const segments = fieldPath.split("."); + + const fullKey = `${sectionPath}.${fieldPath}.label`; + if (i18n.exists(fullKey, { ns: "config/global" })) { + return t(fullKey, { ns: "config/global" }); + } + + for (let i = 0; i < segments.length; i++) { + const reduced = [...segments.slice(0, i), ...segments.slice(i + 1)].join( + ".", + ); + if (!reduced) continue; + const reducedKey = `${sectionPath}.${reduced}.label`; + if (i18n.exists(reducedKey, { ns: "config/global" })) { + const resolvedLabel = t(reducedKey, { ns: "config/global" }); + const dropped = segments[i]; + const droppedLabel = i18n.exists(dropped, { ns: "objects" }) + ? t(dropped, { ns: "objects" }) + : humanizeKey(dropped); + return `${droppedLabel} · ${resolvedLabel}`; + } + } + + return humanizeKey(segments[segments.length - 1]); + }; +} diff --git a/web/src/components/config-form/theme/widgets/OptionalFieldWidget.tsx b/web/src/components/config-form/theme/widgets/OptionalFieldWidget.tsx index 7f05d6466..9a89f8971 100644 --- a/web/src/components/config-form/theme/widgets/OptionalFieldWidget.tsx +++ b/web/src/components/config-form/theme/widgets/OptionalFieldWidget.tsx @@ -6,6 +6,7 @@ import { getWidget } from "@rjsf/utils"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; import { getNonNullSchema } from "../fields/nullableUtils"; +import type { ConfigFormContext } from "@/types/configForm"; export function OptionalFieldWidget(props: WidgetProps) { const { id, value, disabled, readonly, onChange, schema, options, registry } = @@ -13,6 +14,8 @@ export function OptionalFieldWidget(props: WidgetProps) { const innerWidgetName = (options.innerWidget as string) || undefined; const isEnabled = value !== undefined && value !== null; + const formContext = registry?.formContext as ConfigFormContext | undefined; + const isProfile = !!formContext?.isProfile; // Extract the non-null branch from anyOf [Type, null] const innerSchema = getNonNullSchema(schema) ?? schema; @@ -42,10 +45,17 @@ export function OptionalFieldWidget(props: WidgetProps) { const innerProps: WidgetProps = { ...props, schema: innerSchema, - disabled: disabled || readonly || !isEnabled, + disabled: disabled || readonly || (!isProfile && !isEnabled), value: isEnabled ? value : getDefaultValue(), }; + // don't show the switch if we're editing in a profile + // to disable in a profile, users should edit the config manually, eg: + // skip_motion_threshold: None + if (isProfile) { + return ; + } + return (
{ + if (!el || !isDesktop) return; + const handleWheel = (e: WheelEvent) => { + if (el.scrollHeight <= el.clientHeight) return; + e.preventDefault(); + el.scrollTop += e.deltaY; + }; + el.addEventListener("wheel", handleWheel, { passive: false }); + return () => el.removeEventListener("wheel", handleWheel); + }, []); + // components const Selector = isDesktop ? DropdownMenu : Drawer; const SelectorTrigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger; @@ -114,6 +127,8 @@ export default function ClassificationSelectionDialog({ ); + // keep modal false on desktop to prevent dismissable layer pointer events + // issue with dialog auto-close return (
onCategorizeImage(newCat)} /> - - - - - {children} - - e.preventDefault()} - > - {isMobile && ( - - Details - Details - - )} - - {dialogLabel ?? t("categorizeImageAs")} - -
+ + + {children} + + + {tooltipLabel ?? t("categorizeImage")} + + + e.preventDefault()} + > + {isMobile && ( + + Details + Details + + )} + + {dialogLabel ?? t("categorizeImageAs")} + +
+ {filteredClasses + .sort((a, b) => { + if (a === "none") return 1; + if (b === "none") return -1; + return a.localeCompare(b); + }) + .map((category) => ( + onCategorizeImage(category)} + > + {category === "none" + ? t("details.none") + : category.replaceAll("_", " ")} + + ))} + + setNewClass(true)} > - {filteredClasses - .sort((a, b) => { - if (a === "none") return 1; - if (b === "none") return -1; - return a.localeCompare(b); - }) - .map((category) => ( - onCategorizeImage(category)} - > - {category === "none" - ? t("details.none") - : category.replaceAll("_", " ")} - - ))} - - setNewClass(true)} - > - {t("createCategory.new")} - -
- - - {tooltipLabel ?? t("categorizeImage")} - + {t("createCategory.new")} + +
+ +
); } diff --git a/web/src/components/overlay/FaceSelectionDialog.tsx b/web/src/components/overlay/FaceSelectionDialog.tsx index 1b049f422..4c355f3d3 100644 --- a/web/src/components/overlay/FaceSelectionDialog.tsx +++ b/web/src/components/overlay/FaceSelectionDialog.tsx @@ -23,7 +23,7 @@ import { import { isDesktop, isMobile } from "react-device-detect"; import { useTranslation } from "react-i18next"; import { cn } from "@/lib/utils"; -import React, { ReactNode, useMemo, useState } from "react"; +import React, { ReactNode, useCallback, useMemo, useState } from "react"; import TextEntryDialog from "./dialog/TextEntryDialog"; import { Button } from "../ui/button"; @@ -61,6 +61,19 @@ export default function FaceSelectionDialog({ // control const [newFace, setNewFace] = useState(false); + // Non-modal Radix DropdownMenu doesn't propagate wheel events to nested + // scroll containers, so attach a non-passive listener that scrolls manually. + const scrollContainerRef = useCallback((el: HTMLDivElement | null) => { + if (!el || !isDesktop) return; + const handleWheel = (e: WheelEvent) => { + if (el.scrollHeight <= el.clientHeight) return; + e.preventDefault(); + el.scrollTop += e.deltaY; + }; + el.addEventListener("wheel", handleWheel, { passive: false }); + return () => el.removeEventListener("wheel", handleWheel); + }, []); + // components const Selector = isDesktop ? DropdownMenu : Drawer; const SelectorTrigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger; @@ -73,6 +86,8 @@ export default function FaceSelectionDialog({ ); + // keep modal false on desktop to prevent dismissable layer pointer events + // issue with dialog auto-close return (
{newFace && ( @@ -83,52 +98,56 @@ export default function FaceSelectionDialog({ onSave={(newName) => onTrainAttempt(newName)} /> )} - - - - - {children} - - e.preventDefault()} - > - {isMobile && ( - - Details - Details - + + + + {children} + + {tooltipLabel ?? t("trainFace")} + + e.preventDefault()} + > + {isMobile && ( + + Details + Details + + )} + + {dialogLabel ?? t("trainFaceAs")} + +
- {dialogLabel ?? t("trainFaceAs")} - -
- {filteredNames.sort().map((faceName) => ( - onTrainAttempt(faceName)} - > - {faceName} - - ))} - + > + {filteredNames.sort().map((faceName) => ( setNewFace(true)} + onClick={() => onTrainAttempt(faceName)} > - {t("createFaceLibrary.new")} + {faceName} -
- - - {tooltipLabel ?? t("trainFace")} - + ))} + + setNewFace(true)} + > + {t("createFaceLibrary.new")} + +
+ +
); } diff --git a/web/src/hooks/use-config-override.ts b/web/src/hooks/use-config-override.ts index 8e0732e05..689e99f4b 100644 --- a/web/src/hooks/use-config-override.ts +++ b/web/src/hooks/use-config-override.ts @@ -12,6 +12,7 @@ import { isJsonObject } from "@/lib/utils"; import { getBaseCameraSectionValue, getEffectiveHiddenFields, + pathMatchesHiddenPattern, unsetWithWildcard, } from "@/utils/configUtil"; import { extractSectionSchema } from "@/hooks/use-config-schema"; @@ -663,3 +664,138 @@ export function useCamerasOverridingSection( return entries; }, [config, sectionPath, schema]); } + +/** + * Hook returning the field-level deltas between a single camera's base + * (pre-profile) section value and the effective global baseline. Mirrors + * `useConfigOverride`'s comparison logic but exposes per-field deltas so a + * popover can list the overridden fields. + * + * @example + * ```tsx + * const deltas = useCameraSectionDeltas(config, "front_door", "detect"); + * // [{ fieldPath: "fps", globalValue: 5, cameraValue: 10 }] + * ``` + */ +export function useCameraSectionDeltas( + config: FrigateConfig | undefined, + cameraName: string | undefined, + sectionPath: string, +): FieldDelta[] { + const { data: schema } = useSWR("config/schema.json"); + return useMemo(() => { + if (!config?.cameras || !cameraName || !sectionPath) { + return []; + } + const cameraConfig = config.cameras[cameraName]; + if (!cameraConfig) return []; + + const sectionMeta = OVERRIDABLE_SECTIONS.find((s) => s.key === sectionPath); + const compareFields = sectionMeta?.compareFields; + + const globalValue = collapseEmpty( + getEffectiveGlobalBaseline(config, sectionPath, compareFields, schema), + ); + const cameraValue = collapseEmpty( + normalizeConfigValue( + getBaseCameraSectionValue(config, cameraName, sectionPath), + ), + ); + + const hiddenFields = getEffectiveHiddenFields( + sectionPath, + "camera", + config, + ); + + const deltas: FieldDelta[] = []; + for (const delta of collectFieldDeltas( + globalValue, + cameraValue, + compareFields, + )) { + if ( + hiddenFields.some((pattern) => + pathMatchesHiddenPattern(delta.fieldPath, pattern), + ) + ) { + continue; + } + deltas.push(delta); + } + return deltas; + }, [config, cameraName, sectionPath, schema]); +} + +/** + * Hook returning the field-level deltas between a single profile's overrides + * and the camera's base (pre-profile) section value. Honors per-section + * `compareFields` filters and hidden-field patterns so the result matches + * what's actually exposed in the UI. + * + * @example + * ```tsx + * const deltas = useProfileSectionDeltas(config, "front_door", "night", "detect"); + * // [{ fieldPath: "fps", globalValue: 5, cameraValue: 10, profileName: "night" }] + * ``` + */ +export function useProfileSectionDeltas( + config: FrigateConfig | undefined, + cameraName: string | undefined, + profileName: string | undefined, + sectionPath: string, +): FieldDelta[] { + return useMemo(() => { + if (!config?.cameras || !cameraName || !profileName || !sectionPath) { + return []; + } + const cameraConfig = config.cameras[cameraName]; + if (!cameraConfig) return []; + + const profileSection = ( + cameraConfig.profiles?.[profileName] as + | Record + | undefined + )?.[sectionPath]; + if (profileSection == null) return []; + + const sectionMeta = OVERRIDABLE_SECTIONS.find((s) => s.key === sectionPath); + const compareFields = sectionMeta?.compareFields; + + const baseValue = collapseEmpty( + normalizeConfigValue( + getBaseCameraSectionValue(config, cameraName, sectionPath), + ), + ); + const profileValue = collapseEmpty( + normalizeConfigValue(profileSection as JsonValue), + ); + + const hiddenFields = getEffectiveHiddenFields( + sectionPath, + "camera", + config, + ); + + const deltas: FieldDelta[] = []; + for (const path of collectDefinedLeafPaths(profileValue)) { + if (!isPathAllowed(path, compareFields)) continue; + if ( + hiddenFields.some((pattern) => pathMatchesHiddenPattern(path, pattern)) + ) { + continue; + } + const baseField = get(baseValue, path); + const profileField = get(profileValue, path); + if (!isEqual(baseField, profileField)) { + deltas.push({ + fieldPath: path, + globalValue: baseField, + cameraValue: profileField, + profileName, + }); + } + } + return deltas; + }, [config, cameraName, profileName, sectionPath]); +} diff --git a/web/src/types/configForm.ts b/web/src/types/configForm.ts index 9e6181266..03ecd3e4d 100644 --- a/web/src/types/configForm.ts +++ b/web/src/types/configForm.ts @@ -44,4 +44,5 @@ export type ConfigFormContext = { requiresRestart?: boolean; t?: (key: string, options?: Record) => string; renderers?: Record; + isProfile?: boolean; }; diff --git a/web/src/utils/configUtil.ts b/web/src/utils/configUtil.ts index ee33e59b7..80c940cb7 100644 --- a/web/src/utils/configUtil.ts +++ b/web/src/utils/configUtil.ts @@ -6,7 +6,6 @@ import get from "lodash/get"; import cloneDeep from "lodash/cloneDeep"; -import merge from "lodash/merge"; import unset from "lodash/unset"; import isEqual from "lodash/isEqual"; import mergeWith from "lodash/mergeWith"; @@ -92,6 +91,32 @@ export function getBaseCameraSectionValue( return base !== undefined ? base : get(cam, sectionPath); } +// mergeWith customizer that replaces arrays wholesale instead of merging them +// positionally by index. Used when the source value is meant to fully replace +// the destination (e.g. profile overrides, section config overrides), so an +// empty source array correctly clears the destination array. +const replaceArraysCustomizer = (objValue: unknown, srcValue: unknown) => { + if (Array.isArray(objValue) || Array.isArray(srcValue)) { + return srcValue !== undefined ? srcValue : objValue; + } + return undefined; +}; + +// Merge profile overrides on top of base config values. Matches the backend's +// deep_merge(overrides, base_data) semantics: arrays are replaced wholesale by +// the profile's value rather than merged positionally, so an empty array in a +// profile clears the base array instead of leaving stale entries behind. +export function mergeProfileOverrides( + baseValue: T, + profileOverrides: object, +): T { + return mergeWith( + cloneDeep(baseValue), + cloneDeep(profileOverrides), + replaceArraysCustomizer, + ) as T; +} + /** Sections that can appear inside a camera profile definition. */ export const PROFILE_ELIGIBLE_SECTIONS = new Set([ "audio", @@ -564,9 +589,9 @@ export function prepareSectionSavePayload(opts: { baseValue && typeof baseValue === "object" ) { - rawSectionValue = merge( - cloneDeep(baseValue), - cloneDeep(profileOverrides), + rawSectionValue = mergeProfileOverrides( + baseValue as object, + profileOverrides as object, ); } else { rawSectionValue = baseValue; @@ -675,13 +700,12 @@ const mergeSectionConfig = ( overrides: Partial | undefined, ): SectionConfig => mergeWith({}, base ?? {}, overrides ?? {}, (objValue, srcValue, key) => { - if (Array.isArray(objValue) || Array.isArray(srcValue)) { - return srcValue ?? objValue; - } + const arrayResult = replaceArraysCustomizer(objValue, srcValue); + if (arrayResult !== undefined) return arrayResult; if (key === "uiSchema") { if (objValue && srcValue) { - return merge({}, objValue, srcValue); + return mergeWith({}, objValue, srcValue, replaceArraysCustomizer); } return srcValue ?? objValue; } @@ -739,3 +763,26 @@ export function resolveHiddenFieldEntries( } return result; } + +/** + * Match a delta path against a hidden-field pattern. Supports literal prefixes + * (so a hidden field "streams" also hides "streams.foo.bar") and `*` wildcards + * matching exactly one path segment (e.g. "filters.*.mask"). + */ +export function pathMatchesHiddenPattern( + path: string, + pattern: string, +): boolean { + if (!pattern) return false; + if (!pattern.includes("*")) { + return path === pattern || path.startsWith(`${pattern}.`); + } + const patternSegments = pattern.split("."); + const pathSegments = path.split("."); + if (pathSegments.length < patternSegments.length) return false; + for (let i = 0; i < patternSegments.length; i += 1) { + if (patternSegments[i] === "*") continue; + if (patternSegments[i] !== pathSegments[i]) return false; + } + return true; +} diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx index 3179fb85c..d30036b60 100644 --- a/web/src/views/settings/ObjectSettingsView.tsx +++ b/web/src/views/settings/ObjectSettingsView.tsx @@ -33,6 +33,7 @@ import { getTranslatedLabel } from "@/utils/i18n"; import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name"; import { AudioLevelGraph } from "@/components/audio/AudioLevelGraph"; import { useWs } from "@/api/ws"; +import { cn } from "@/lib/utils"; type ObjectSettingsViewProps = { selectedCamera?: string; @@ -200,15 +201,18 @@ export default function ObjectSettingsView({ input.roles.includes("audio")) ? "grid-cols-3" : "grid-cols-2"}`} + className={cn( + "grid w-full", + cameraConfig.audio.enabled_in_config + ? "grid-cols-3" + : "grid-cols-2", + )} > {t("debug.debugging")} {t("debug.objectList")} - {cameraConfig.ffmpeg.inputs.some((input) => - input.roles.includes("audio"), - ) && ( + {cameraConfig.audio.enabled_in_config && ( {t("debug.audio.title")} )} @@ -325,9 +329,7 @@ export default function ObjectSettingsView({ - {cameraConfig.ffmpeg.inputs.some((input) => - input.roles.includes("audio"), - ) && ( + {cameraConfig.audio.enabled_in_config && ( - - - {sectionStatus.overrideSource === "profile" - ? t("button.overriddenBaseConfig", { - ns: "views/settings", - defaultValue: "Overridden (Base Config)", - }) - : t("button.overriddenGlobal", { - ns: "views/settings", - defaultValue: "Overridden (Global)", - })} - - - - {sectionStatus.overrideSource === "profile" - ? t("button.overriddenBaseConfigTooltip", { - ns: "views/settings", - profile: currentEditingProfile - ? (profileState?.profileFriendlyNames.get( - currentEditingProfile, - ) ?? currentEditingProfile) - : "", - }) - : t("button.overriddenGlobalTooltip", { - ns: "views/settings", - })} - - - )} + sectionStatus.isOverridden && + selectedCamera && + (sectionStatus.overrideSource === "profile" && + currentEditingProfile ? ( + + ) : ( + + ))} {sectionStatus.hasChanges && ( - {sectionStatus.overrideSource === "profile" - ? t("button.overriddenBaseConfig", { - ns: "views/settings", - defaultValue: "Overridden (Base Config)", - }) - : t("button.overriddenGlobal", { - ns: "views/settings", - defaultValue: "Overridden (Global)", - })} - - )} + profileBorderColor={profileColor?.border} + /> + ) : ( + + ))} {sectionStatus.hasChanges && (