Miscellaneous fixes (#23177)

* add optional onClick to EmptyCard

* show EmptyCard in face rec when face library is empty

* add loading indicator

* add description to camera management pane

* Cleanup when use snapshot but can't load snapshot

* Migrate files

* fix birdseye color distortion when configured aspect ratio is unsupported

* Skip processing end for object descriptions

* don't crash if stats is null

* fix genai roles in migration

* frigate+ pane updates

- allow users to select a plus model from the select even when one was not previously loaded
- always show model summary card
- add model filter popover
- add restart button totast

* fix frigate+ pane layout and buttons to match other settings panes

* match button layout in go2rtc settings view

* make audio maintainer respond to dynamic config updates

* check correct zone name in publish state

* fix nested translation extraction for Optional dict and list fields

* mypy

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

frigate/app.py

@@ -428,18 +428,11 @@ class FrigateApp:
         self.camera_maintainer.start()
 
     def start_audio_processor(self) -> None:
-        audio_cameras = [
+        self.audio_process = AudioProcessor(
-            c
+            self.config, self.camera_metrics, self.stop_event
-            for c in self.config.cameras.values()
+        )
-            if c.enabled and c.audio.enabled_in_config
+        self.audio_process.start()
-        ]
+        self.processes["audio_detector"] = self.audio_process.pid or 0
-
-        if audio_cameras:
-            self.audio_process = AudioProcessor(
-                self.config, audio_cameras, self.camera_metrics, self.stop_event
-            )
-            self.audio_process.start()
-            self.processes["audio_detector"] = self.audio_process.pid or 0
 
     def start_timeline_processor(self) -> None:
         self.timeline_processor = TimelineProcessor(

frigate/data_processing/post/object_descriptions.py

@@ -269,7 +269,9 @@ class ObjectDescriptionProcessor(PostProcessorApi):
 
         if event.has_snapshot and camera_config.objects.genai.use_snapshot:
             snapshot_image = self._read_and_crop_snapshot(event)
+
             if not snapshot_image:
+                self.cleanup_event(event_id)
                 return
 
         num_thumbnails = len(self.tracked_events.get(event_id, []))

frigate/embeddings/maintainer.py

@@ -60,7 +60,11 @@ from frigate.data_processing.real_time.license_plate import (
 )
 from frigate.data_processing.types import DataProcessorMetrics, PostProcessDataEnum
 from frigate.db.sqlitevecq import SqliteVecQueueDatabase
-from frigate.events.types import EventTypeEnum, RegenerateDescriptionEnum
+from frigate.events.types import (
+    EventStateEnum,
+    EventTypeEnum,
+    RegenerateDescriptionEnum,
+)
 from frigate.genai import GenAIClientManager
 from frigate.models import Event, Recordings, ReviewSegment, Trigger
 from frigate.types import TrackedObjectUpdateTypesEnum
@@ -435,7 +439,7 @@ class EmbeddingMaintainer(threading.Thread):
         if update is None:
             return
 
-        source_type, _, camera, frame_name, data = update
+        source_type, event_type, camera, frame_name, data = update
 
         logger.debug(
             f"Received update - source_type: {source_type}, camera: {camera}, data label: {data.get('label') if data else 'None'}"
@@ -485,6 +489,12 @@ class EmbeddingMaintainer(threading.Thread):
 
         for processor in self.post_processors:
             if isinstance(processor, ObjectDescriptionProcessor):
+                # skip end events — _process_finalized handles them via event_end_subscriber.
+                # processing them here can re-create tracked_events entries after cleanup
+                # when the event_subscriber queue is backlogged behind event_end_subscriber.
+                if event_type == EventStateEnum.end:
+                    continue
+
                 processor.process_data(
                     {
                         "camera": camera,

frigate/events/audio.py

@@ -84,7 +84,6 @@ class AudioProcessor(FrigateProcess):
     def __init__(
         self,
         config: FrigateConfig,
-        cameras: list[CameraConfig],
         camera_metrics: DictProxy,
         stop_event: MpEvent,
     ):
@@ -93,12 +92,11 @@ class AudioProcessor(FrigateProcess):
         )
 
         self.camera_metrics = camera_metrics
-        self.cameras = cameras
         self.config = config
 
     def run(self) -> None:
         self.pre_run_setup(self.config.logger)
-        audio_threads: list[AudioEventMaintainer] = []
+        audio_threads: dict[str, AudioEventMaintainer] = {}
 
         threading.current_thread().name = "process:audio_manager"
 
@@ -112,32 +110,56 @@ class AudioProcessor(FrigateProcess):
         else:
             self.transcription_model_runner = None
 
-        if len(self.cameras) == 0:
+        config_subscriber = CameraConfigUpdateSubscriber(
-            return
+            self.config,
+            self.config.cameras,
+            [
+                CameraConfigUpdateEnum.add,
+                CameraConfigUpdateEnum.audio,
+                CameraConfigUpdateEnum.ffmpeg,
+            ],
+        )
 
-        for camera in self.cameras:
+        def spawn_if_needed(camera: CameraConfig) -> None:
-            audio_thread = AudioEventMaintainer(
+            name = camera.name
+            if name is None or name in audio_threads:
+                return
+            if not camera.enabled or not camera.audio.enabled:
+                return
+            # ffmpeg update may not have arrived yet; wait for next poll
+            if not any("audio" in i.roles for i in camera.ffmpeg.inputs):
+                return
+            thread = AudioEventMaintainer(
                 camera,
                 self.config,
                 self.camera_metrics,
                 self.transcription_model_runner,
                 self.stop_event,  # type: ignore[arg-type]
             )
-            audio_threads.append(audio_thread)
+            audio_threads[name] = thread
-            audio_thread.start()
+            thread.start()
+            self.logger.info(f"Audio maintainer started for {name}")
+
+        for camera in self.config.cameras.values():
+            spawn_if_needed(camera)
 
         self.logger.info(f"Audio processor started (pid: {self.pid})")
 
-        while not self.stop_event.wait():
+        # poll for newly added cameras or cameras flipped to audio.enabled at runtime
-            pass
+        while not self.stop_event.wait(timeout=1.0):
+            config_subscriber.check_for_updates()
+            for camera in self.config.cameras.values():
+                spawn_if_needed(camera)
 
-        for thread in audio_threads:
+        config_subscriber.stop()
+
+        for thread in audio_threads.values():
             thread.join(1)
             if thread.is_alive():
                 self.logger.info(f"Waiting for thread {thread.name:s} to exit")
                 thread.join(10)
 
-        for thread in audio_threads:
+        for thread in audio_threads.values():
             if thread.is_alive():
                 self.logger.warning(f"Thread {thread.name} is still alive")
 

frigate/output/birdseye.py

@@ -62,8 +62,10 @@ def get_canvas_shape(width: int, height: int) -> tuple[int, int]:
     if round(a_w / a_h, 2) != round(width / height, 2):
         canvas_width = int(width // 4 * 4)
         canvas_height = int((canvas_width / a_w * a_h) // 4 * 4)
-        logger.warning(
+        logger.error(
-            f"The birdseye resolution is a non-standard aspect ratio, forcing birdseye resolution to {canvas_width} x {canvas_height}"
+            f"Birdseye resolution {width}x{height} is not a supported aspect ratio "
+            f"and may cause visual distortion; falling back to {canvas_width}x{canvas_height}. "
+            f"Set width and height to a supported aspect ratio (16:9, 20:10, 16:6, 32:9, 12:9, 22:15, 9:16, 9:12, 16:3, or 1:1)"
         )
 
     return (canvas_width, canvas_height)
@@ -796,15 +798,18 @@ class Birdseye:
         websocket_server: Any,
     ) -> None:
         self.config = config
+        canvas_width, canvas_height = get_canvas_shape(
+            config.birdseye.width, config.birdseye.height
+        )
         self.input: queue.Queue[bytes] = queue.Queue(maxsize=10)
         self.converter = FFMpegConverter(
             config.ffmpeg,
             self.input,
             stop_event,
-            config.birdseye.width,
+            canvas_width,
-            config.birdseye.height,
+            canvas_height,
-            config.birdseye.width,
+            canvas_width,
-            config.birdseye.height,
+            canvas_height,
             config.birdseye.quality,
             config.birdseye.restream,
         )

frigate/util/config.py

@@ -492,7 +492,7 @@ def migrate_018_0(config: dict[str, dict[str, Any]]) -> dict[str, dict[str, Any]
     genai = new_config.get("genai")
 
     if genai and genai.get("provider"):
-        genai["roles"] = ["embeddings", "vision", "tools"]
+        genai["roles"] = ["embeddings", "descriptions", "chat"]
         new_config["genai"] = {"default": genai}
 
     # Remove deprecated sync_recordings from global record config

generate_config_translations.py

@@ -150,29 +150,51 @@ def extract_translations_from_schema(
             # Handle anyOf cases
             elif "anyOf" in field_schema:
                 for item in field_schema["anyOf"]:
+                    nested = None
+                    if item.get("type") == "null":
+                        continue
                     if "properties" in item:
                         nested = extract_translations_from_schema(item, defs=defs)
+                    elif "$ref" in item:
+                        ref_path = item["$ref"]
+                        if ref_path.startswith("#/$defs/"):
+                            ref_name = ref_path.split("/")[-1]
+                            if ref_name in defs:
+                                nested = extract_translations_from_schema(
+                                    defs[ref_name], defs=defs
+                                )
+                    elif (
+                        "additionalProperties" in item
+                        and isinstance(item["additionalProperties"], dict)
+                        and "$ref" in item["additionalProperties"]
+                    ):
+                        ref_path = item["additionalProperties"]["$ref"]
+                        if ref_path.startswith("#/$defs/"):
+                            ref_name = ref_path.split("/")[-1]
+                            if ref_name in defs:
+                                nested = extract_translations_from_schema(
+                                    defs[ref_name], defs=defs
+                                )
+                    elif (
+                        "items" in item
+                        and isinstance(item["items"], dict)
+                        and ("$ref" in item["items"])
+                    ):
+                        ref_path = item["items"]["$ref"]
+                        if ref_path.startswith("#/$defs/"):
+                            ref_name = ref_path.split("/")[-1]
+                            if ref_name in defs:
+                                nested = extract_translations_from_schema(
+                                    defs[ref_name], defs=defs
+                                )
+
+                    if nested:
                         nested_without_root = {
                             k: v
                             for k, v in nested.items()
                             if k not in ("label", "description")
                         }
                         field_translations.update(nested_without_root)
-                    elif "$ref" in item:
-                        ref_path = item["$ref"]
-                        if ref_path.startswith("#/$defs/"):
-                            ref_name = ref_path.split("/")[-1]
-                            if ref_name in defs:
-                                ref_schema = defs[ref_name]
-                                nested = extract_translations_from_schema(
-                                    ref_schema, defs=defs
-                                )
-                                nested_without_root = {
-                                    k: v
-                                    for k, v in nested.items()
-                                    if k not in ("label", "description")
-                                }
-                                field_translations.update(nested_without_root)
 
         if field_translations:
             translations[field_name] = field_translations

web/public/locales/en/config/cameras.json

@@ -33,7 +33,11 @@
     },
     "filters": {
       "label": "Audio filters",
-      "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives."
+      "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives.",
+      "threshold": {
+        "label": "Minimum audio confidence",
+        "description": "Minimum confidence threshold for the audio event to be counted."
+      }
     },
     "enabled_in_config": {
       "label": "Original audio state",

web/public/locales/en/config/global.json

@@ -559,7 +559,11 @@
     },
     "filters": {
       "label": "Audio filters",
-      "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives."
+      "description": "Per-audio-type filter settings such as confidence thresholds used to reduce false positives.",
+      "threshold": {
+        "label": "Minimum audio confidence",
+        "description": "Minimum confidence threshold for the audio event to be counted."
+      }
     },
     "enabled_in_config": {
       "label": "Original audio state",

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

@@ -32,7 +32,11 @@
     "title": "Recent Recognitions",
     "titleShort": "Recent",
     "aria": "Select recent recognitions",
-    "empty": "There are no recent face recognition attempts"
+    "empty": "There are no recent face recognition attempts",
+    "emptyNoLibrary": {
+      "title": "Upload a face",
+      "description": "You must add at least one face to the library for face recognition to function."
+    }
   },
   "deleteFaceLibrary": {
     "title": "Delete Name",

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

@@ -446,6 +446,7 @@
   },
   "cameraManagement": {
     "title": "Manage Cameras",
+    "description": "Add, edit, and delete cameras, control which cameras are enabled, and configure per-profile and camera type overrides. To configure streams, detection, motion, and other camera-specific settings, choose the specific section under Camera Configuration.",
     "addCamera": "Add New Camera",
     "deleteCamera": "Delete Camera",
     "deleteCameraDialog": {
@@ -1127,8 +1128,16 @@
       "cameras": "Cameras",
       "loading": "Loading model information…",
       "error": "Failed to load model information",
+      "noModelLoaded": "No Frigate+ model is currently loaded.",
       "availableModels": "Available Models",
       "loadingAvailableModels": "Loading available models…",
+      "selectModel": "Select a model",
+      "noModelsAvailable": "No models available",
+      "filter": {
+        "ariaLabel": "Filter models by type",
+        "baseModels": "Base Models",
+        "fineTunedModels": "Fine-tuned Models"
+      },
       "modelSelect": "Your available models on Frigate+ can be selected here. Note that only models compatible with your current detector configuration can be selected."
     },
     "unsavedChanges": "Unsaved Frigate+ settings changes",

web/src/components/card/EmptyCard.tsx

@@ -12,6 +12,7 @@ type EmptyCardProps = {
   description?: string;
   buttonText?: string;
   link?: string;
+  onClick?: () => void;
 };
 export function EmptyCard({
   className,
@@ -21,6 +22,7 @@ export function EmptyCard({
   description,
   buttonText,
   link,
+  onClick,
 }: EmptyCardProps) {
   let TitleComponent;
 
@@ -39,11 +41,16 @@ export function EmptyCard({
           {description}
         </div>
       )}
-      {buttonText?.length && (
+      {buttonText?.length &&
-        <Button size="sm" variant="select">
+        (onClick ? (
-          <Link to={link ?? "#"}>{buttonText}</Link>
+          <Button size="sm" variant="select" onClick={onClick}>
-        </Button>
+            {buttonText}
-      )}
+          </Button>
+        ) : (
+          <Button size="sm" variant="select">
+            <Link to={link ?? "#"}>{buttonText}</Link>
+          </Button>
+        ))}
     </div>
   );
 }

web/src/components/settings/ZoneEditPane.tsx

@@ -528,7 +528,7 @@ export default function ZoneEditPane({
             );
             updateConfig();
             // Only publish WS state for base config when zone has a name
-            if (!editingProfile && zoneName) {
+            if (!editingProfile && polygon?.name) {
               sendZoneState(enabled ? "ON" : "OFF");
             }
           } else {

web/src/pages/FaceLibrary.tsx

@@ -1,5 +1,6 @@
 import AddFaceIcon from "@/components/icons/AddFaceIcon";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { EmptyCard } from "@/components/card/EmptyCard";
 import CreateFaceWizardDialog from "@/components/overlay/detail/FaceCreateWizardDialog";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
 import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
@@ -473,7 +474,9 @@ export default function FaceLibrary() {
             attemptImages={trainImages}
             faceNames={faces}
             selectedFaces={selectedFaces}
+            isLoading={faceData === undefined}
             onClickFaces={onClickFaces}
+            onAddFace={() => setAddFace(true)}
             onRefresh={refreshFaces}
           />
         ) : (
@@ -691,7 +694,9 @@ type TrainingGridProps = {
   attemptImages: string[];
   faceNames: string[];
   selectedFaces: string[];
+  isLoading: boolean;
   onClickFaces: (images: string[], ctrl: boolean) => void;
+  onAddFace: () => void;
   onRefresh: (
     data?:
       | FaceLibraryData
@@ -708,7 +713,9 @@ function TrainingGrid({
   attemptImages,
   faceNames,
   selectedFaces,
+  isLoading,
   onClickFaces,
+  onAddFace,
   onRefresh,
 }: TrainingGridProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
@@ -762,6 +769,25 @@ function TrainingGrid({
   ]);
 
   if (attemptImages.length == 0) {
+    if (isLoading) {
+      return (
+        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center text-center" />
+      );
+    }
+
+    if (faceNames.length == 0) {
+      return (
+        <EmptyCard
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center text-center"
+          icon={<AddFaceIcon className="size-16" />}
+          title={t("train.emptyNoLibrary.title")}
+          description={t("train.emptyNoLibrary.description")}
+          buttonText={t("button.addFace")}
+          onClick={onAddFace}
+        />
+      );
+    }
+
     return (
       <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
         <LuFolderCheck className="size-16" />

web/src/views/settings/CameraManagementView.tsx

@@ -122,9 +122,12 @@ export default function CameraManagementView({
         <div className="scrollbar-container flex-1 overflow-y-auto pb-2">
           {viewMode === "settings" ? (
             <>
-              <Heading as="h4" className="mb-6">
+              <Heading as="h4" className="mb-2">
                 {t("cameraManagement.title")}
               </Heading>
+              <p className="mb-6 max-w-5xl text-sm text-muted-foreground">
+                {t("cameraManagement.description")}
+              </p>
 
               <div className="w-full max-w-5xl space-y-6">
                 <div className="flex gap-2">

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -1,5 +1,5 @@
 import Heading from "@/components/ui/heading";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { toast } from "sonner";
@@ -10,7 +10,7 @@ import { CheckCircle2, XCircle } from "lucide-react";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
-import { LuExternalLink } from "react-icons/lu";
+import { LuExternalLink, LuFilter } from "react-icons/lu";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import {
   Select,
@@ -19,6 +19,14 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import {
@@ -26,6 +34,8 @@ import {
   SplitCardRow,
 } from "@/components/card/SettingsGroupCard";
 import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary";
+import { useRestart } from "@/api/ws";
+import RestartDialog from "@/components/overlay/dialog/RestartDialog";
 
 type FrigatePlusModel = {
   id: string;
@@ -58,6 +68,8 @@ export default function FrigatePlusSettingsView({
     useSWR<FrigateConfig>("config");
   const [changedValue, setChangedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
+  const { send: sendRestart } = useRestart();
 
   const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
 
@@ -76,7 +88,7 @@ export default function FrigatePlusSettingsView({
     },
   );
 
-  const { data: availableModels = {} } = useSWR<
+  const { data: availableModels = {}, isLoading: isLoadingModels } = useSWR<
     Record<string, FrigatePlusModel>
   >("/plus/models", {
     fallbackData: {},
@@ -92,6 +104,19 @@ export default function FrigatePlusSettingsView({
     },
   });
 
+  const [showBaseModels, setShowBaseModels] = useState(true);
+  const [showFineTunedModels, setShowFineTunedModels] = useState(true);
+
+  const filteredModelEntries = useMemo(
+    () =>
+      Object.entries(availableModels || {}).filter(([, model]) =>
+        model.isBaseModel ? showBaseModels : showFineTunedModels,
+      ),
+    [availableModels, showBaseModels, showFineTunedModels],
+  );
+
+  const isFilterActive = !showBaseModels || !showFineTunedModels;
+
   useEffect(() => {
     if (config) {
       if (frigatePlusSettings?.model.id == undefined) {
@@ -128,47 +153,60 @@ export default function FrigatePlusSettingsView({
   const saveToConfig = useCallback(async () => {
     setIsLoading(true);
 
-    axios
+    try {
-      .put(`config/set?model.path=plus://${frigatePlusSettings.model.id}`, {
+      // Clear the existing model section so only the new path remains
+      await axios.put("config/set", {
         requires_restart: 0,
-      })
+        config_data: { model: null },
-      .then((res) => {
+      });
-        if (res.status === 200) {
+      const res = await axios.put("config/set", {
-          toast.success(t("frigatePlus.toast.success"), {
+        requires_restart: 0,
-            position: "top-center",
+        config_data: {
-          });
+          model: { path: `plus://${frigatePlusSettings.model.id}` },
-          setChangedValue(false);
+        },
-          updateConfig();
+      });
-        } else {
+
-          toast.error(
+      if (res.status === 200) {
-            t("frigatePlus.toast.error", { errorMessage: res.statusText }),
+        toast.success(t("frigatePlus.toast.success"), {
-            {
+          position: "top-center",
-              position: "top-center",
+          action: (
-            },
+            <a onClick={() => setRestartDialogOpen(true)}>
-          );
+              <Button>
-        }
+                {t("restart.button", { ns: "components/dialog" })}
-      })
+              </Button>
-      .catch((error) => {
+            </a>
-        const errorMessage =
+          ),
-          error.response?.data?.message ||
+        });
-          error.response?.data?.detail ||
+        setChangedValue(false);
-          "Unknown error";
+        updateConfig();
+      } else {
         toast.error(
-          t("toast.save.error.title", { errorMessage, ns: "common" }),
+          t("frigatePlus.toast.error", { errorMessage: res.statusText }),
           {
             position: "top-center",
           },
         );
-      })
+      }
-      .finally(() => {
+    } catch (error) {
-        addMessage(
+      const err = error as {
-          "plus_restart",
+        response?: { data?: { message?: string; detail?: string } };
-          t("frigatePlus.restart_required"),
+      };
-          undefined,
+      const errorMessage =
-          "plus_restart",
+        err.response?.data?.message ||
-        );
+        err.response?.data?.detail ||
-        setIsLoading(false);
+        "Unknown error";
+      toast.error(t("toast.save.error.title", { errorMessage, ns: "common" }), {
+        position: "top-center",
       });
+    } finally {
+      addMessage(
+        "plus_restart",
+        t("frigatePlus.restart_required"),
+        undefined,
+        "plus_restart",
+      );
+      setIsLoading(false);
+    }
   }, [updateConfig, addMessage, frigatePlusSettings, t]);
 
   const onCancel = useCallback(() => {
@@ -201,274 +239,340 @@ export default function FrigatePlusSettingsView({
   }
 
   return (
-    <div className="flex size-full flex-col md:flex-row">
+    <div className="flex size-full flex-col md:pr-2">
       <Toaster position="top-center" closeButton={true} />
-      <div className="mt-2 flex h-full w-full flex-col">
+      <div className="w-full max-w-5xl space-y-6 pt-2">
-        <div className="scrollbar-container flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-0">
-          <div className="w-full max-w-5xl space-y-6">
+          <Heading as="h4" className="mb-2">
-            <div className="flex flex-col gap-0">
+            {t("frigatePlus.title")}
-              <Heading as="h4" className="mb-2">
+          </Heading>
-                {t("frigatePlus.title")}
-              </Heading>
 
-              <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground">
-                {t("frigatePlus.description")}
+            {t("frigatePlus.description")}
-              </p>
+          </p>
-            </div>
+        </div>
 
-            <div className="space-y-6">
+        <div className="space-y-6">
-              <SettingsGroupCard title={t("frigatePlus.cardTitles.api")}>
+          <SettingsGroupCard title={t("frigatePlus.cardTitles.api")}>
-                <SplitCardRow
+            <SplitCardRow
-                  label={t("frigatePlus.apiKey.title")}
+              label={t("frigatePlus.apiKey.title")}
-                  description={
+              description={
-                    <>
+                <>
-                      <p>{t("frigatePlus.apiKey.desc")}</p>
+                  <p>{t("frigatePlus.apiKey.desc")}</p>
-                      {!config?.model.plus && (
+                  {!config?.model.plus && (
-                        <div className="mt-2 flex items-center text-primary-variant">
+                    <div className="mt-2 flex items-center text-primary-variant">
-                          <Link
+                      <Link
-                            to="https://frigate.video/plus"
+                        to="https://frigate.video/plus"
-                            target="_blank"
+                        target="_blank"
-                            rel="noopener noreferrer"
+                        rel="noopener noreferrer"
-                            className="inline"
+                        className="inline"
-                          >
-                            {t("frigatePlus.apiKey.plusLink")}
-                            <LuExternalLink className="ml-2 inline-flex size-3" />
-                          </Link>
-                        </div>
-                      )}
-                    </>
-                  }
-                  content={
-                    <div className="flex items-center gap-2">
-                      {config?.plus?.enabled ? (
-                        <CheckCircle2 className="h-5 w-5 text-green-500" />
-                      ) : (
-                        <XCircle className="h-5 w-5 text-red-500" />
-                      )}
-                      <span className="text-sm">
-                        {config?.plus?.enabled
-                          ? t("frigatePlus.apiKey.validated")
-                          : t("frigatePlus.apiKey.notValidated")}
-                      </span>
-                    </div>
-                  }
-                />
-              </SettingsGroupCard>
-
-              {config?.model.plus && (
-                <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
-              )}
-
-              {config?.model.plus && (
-                <SettingsGroupCard
-                  title={t("frigatePlus.cardTitles.otherModels")}
-                >
-                  <SplitCardRow
-                    label={t("frigatePlus.modelInfo.availableModels")}
-                    description={
-                      <Trans ns="views/settings">
-                        frigatePlus.modelInfo.modelSelect
-                      </Trans>
-                    }
-                    content={
-                      <Select
-                        value={frigatePlusSettings.model.id}
-                        onValueChange={(value) =>
-                          handleFrigatePlusConfigChange({
-                            model: { id: value as string },
-                          })
-                        }
                       >
+                        {t("frigatePlus.apiKey.plusLink")}
+                        <LuExternalLink className="ml-2 inline-flex size-3" />
+                      </Link>
+                    </div>
+                  )}
+                </>
+              }
+              content={
+                <div className="flex items-center gap-2">
+                  {config?.plus?.enabled ? (
+                    <CheckCircle2 className="h-5 w-5 text-green-500" />
+                  ) : (
+                    <XCircle className="h-5 w-5 text-red-500" />
+                  )}
+                  <span className="text-sm">
+                    {config?.plus?.enabled
+                      ? t("frigatePlus.apiKey.validated")
+                      : t("frigatePlus.apiKey.notValidated")}
+                  </span>
+                </div>
+              }
+            />
+          </SettingsGroupCard>
+
+          {config?.plus?.enabled && (
+            <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
+          )}
+
+          {config?.plus?.enabled && (
+            <SettingsGroupCard title={t("frigatePlus.cardTitles.otherModels")}>
+              <SplitCardRow
+                label={t("frigatePlus.modelInfo.availableModels")}
+                description={
+                  <Trans ns="views/settings">
+                    frigatePlus.modelInfo.modelSelect
+                  </Trans>
+                }
+                content={
+                  <div className="flex w-full items-center gap-2">
+                    <Select
+                      value={frigatePlusSettings.model.id}
+                      onValueChange={(value) =>
+                        handleFrigatePlusConfigChange({
+                          model: { id: value as string },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="w-full">
                         {frigatePlusSettings.model.id &&
-                        availableModels?.[frigatePlusSettings.model.id] ? (
+                        availableModels?.[frigatePlusSettings.model.id]
-                          <SelectTrigger className="w-full">
+                          ? new Date(
-                            {new Date(
                               availableModels[
                                 frigatePlusSettings.model.id
                               ].trainDate,
                             ).toLocaleString() +
-                              " " +
+                            " " +
-                              availableModels[frigatePlusSettings.model.id]
+                            availableModels[frigatePlusSettings.model.id]
-                                .baseModel +
+                              .baseModel +
-                              " (" +
+                            " (" +
-                              (availableModels[frigatePlusSettings.model.id]
+                            (availableModels[frigatePlusSettings.model.id]
-                                .isBaseModel
+                              .isBaseModel
-                                ? t(
+                              ? t(
-                                    "frigatePlus.modelInfo.plusModelType.baseModel",
+                                  "frigatePlus.modelInfo.plusModelType.baseModel",
+                                )
+                              : t(
+                                  "frigatePlus.modelInfo.plusModelType.userModel",
+                                )) +
+                            ") " +
+                            availableModels[frigatePlusSettings.model.id].name +
+                            " (" +
+                            availableModels[frigatePlusSettings.model.id]
+                              .width +
+                            "x" +
+                            availableModels[frigatePlusSettings.model.id]
+                              .height +
+                            ")"
+                          : isLoadingModels
+                            ? t("frigatePlus.modelInfo.loadingAvailableModels")
+                            : t("frigatePlus.modelInfo.selectModel")}
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        <SelectGroup>
+                          {filteredModelEntries.length === 0 ? (
+                            <div className="px-4 py-3 text-center text-sm text-muted-foreground">
+                              {t("frigatePlus.modelInfo.noModelsAvailable")}
+                            </div>
+                          ) : (
+                            filteredModelEntries.map(([id, model]) => (
+                              <SelectItem
+                                key={id}
+                                className="cursor-pointer"
+                                value={id}
+                                disabled={
+                                  !model.supportedDetectors.includes(
+                                    Object.values(config.detectors)[0].type,
                                   )
-                                : t(
+                                }
-                                    "frigatePlus.modelInfo.plusModelType.userModel",
+                              >
-                                  )) +
+                                {new Date(model.trainDate).toLocaleString()}{" "}
-                              ") " +
+                                <div>
-                              availableModels[frigatePlusSettings.model.id]
+                                  {model.baseModel} {" ("}
-                                .name +
+                                  {model.isBaseModel
-                              " (" +
+                                    ? t(
-                              availableModels[frigatePlusSettings.model.id]
+                                        "frigatePlus.modelInfo.plusModelType.baseModel",
-                                .width +
+                                      )
-                              "x" +
+                                    : t(
-                              availableModels[frigatePlusSettings.model.id]
+                                        "frigatePlus.modelInfo.plusModelType.userModel",
-                                .height +
+                                      )}
-                              ")"}
+                                  {")"}
-                          </SelectTrigger>
+                                </div>
-                        ) : (
+                                <div>
-                          <SelectTrigger className="w-full">
+                                  {model.name} (
-                            {t("frigatePlus.modelInfo.loadingAvailableModels")}
+                                  {model.width + "x" + model.height})
-                          </SelectTrigger>
+                                </div>
-                        )}
+                                <div>
-
+                                  {t(
-                        <SelectContent>
+                                    "frigatePlus.modelInfo.supportedDetectors",
-                          <SelectGroup>
+                                  )}
-                            {Object.entries(availableModels || {}).map(
+                                  : {model.supportedDetectors.join(", ")}
-                              ([id, model]) => (
+                                </div>
-                                <SelectItem
+                                <div className="text-xs text-muted-foreground">
-                                  key={id}
+                                  {id}
-                                  className="cursor-pointer"
+                                </div>
-                                  value={id}
+                              </SelectItem>
-                                  disabled={
+                            ))
-                                    !model.supportedDetectors.includes(
+                          )}
-                                      Object.values(config.detectors)[0].type,
+                        </SelectGroup>
-                                    )
+                      </SelectContent>
-                                  }
+                    </Select>
-                                >
+                    <Popover>
-                                  {new Date(model.trainDate).toLocaleString()}{" "}
+                      <PopoverTrigger asChild>
-                                  <div>
+                        <button
-                                    {model.baseModel} {" ("}
+                          type="button"
-                                    {model.isBaseModel
+                          className="focus:outline-none"
-                                      ? t(
+                          aria-label={t(
-                                          "frigatePlus.modelInfo.plusModelType.baseModel",
+                            "frigatePlus.modelInfo.filter.ariaLabel",
-                                        )
+                          )}
-                                      : t(
-                                          "frigatePlus.modelInfo.plusModelType.userModel",
-                                        )}
-                                    {")"}
-                                  </div>
-                                  <div>
-                                    {model.name} (
-                                    {model.width + "x" + model.height})
-                                  </div>
-                                  <div>
-                                    {t(
-                                      "frigatePlus.modelInfo.supportedDetectors",
-                                    )}
-                                    : {model.supportedDetectors.join(", ")}
-                                  </div>
-                                  <div className="text-xs text-muted-foreground">
-                                    {id}
-                                  </div>
-                                </SelectItem>
-                              ),
-                            )}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    }
-                  />
-                </SettingsGroupCard>
-              )}
-
-              <SettingsGroupCard
-                title={t("frigatePlus.cardTitles.configuration")}
-              >
-                <SplitCardRow
-                  label={t("frigatePlus.snapshotConfig.title")}
-                  description={
-                    <>
-                      <p>
-                        <Trans ns="views/settings">
-                          frigatePlus.snapshotConfig.desc
-                        </Trans>
-                      </p>
-                      <div className="mt-2 flex items-center text-primary-variant">
-                        <Link
-                          to={getLocaleDocUrl("plus/faq")}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline"
                         >
-                          {t("readTheDocumentation", { ns: "common" })}
+                          <LuFilter
-                          <LuExternalLink className="ml-2 inline-flex size-3" />
+                            className={cn(
-                        </Link>
+                              "size-4",
-                      </div>
+                              isFilterActive
-                    </>
+                                ? "text-selected"
-                  }
+                                : "text-secondary-foreground",
-                  content={
-                    <div className="space-y-3">
-                      <div className="overflow-x-auto">
-                        <table className="w-full text-sm">
-                          <thead>
-                            <tr className="border-b border-secondary">
-                              <th className="px-4 py-2 text-left">
-                                {t("frigatePlus.snapshotConfig.table.camera")}
-                              </th>
-                              <th className="px-4 py-2 text-center">
-                                {t(
-                                  "frigatePlus.snapshotConfig.table.snapshots",
-                                )}
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {Object.entries(config.cameras).map(
-                              ([name, camera]) => (
-                                <tr
-                                  key={name}
-                                  className="border-b border-secondary"
-                                >
-                                  <td className="px-4 py-2">
-                                    <CameraNameLabel camera={name} />
-                                  </td>
-                                  <td className="px-4 py-2 text-center">
-                                    {camera.snapshots.enabled ? (
-                                      <CheckCircle2 className="mx-auto size-5 text-green-500" />
-                                    ) : (
-                                      <XCircle className="mx-auto size-5 text-danger" />
-                                    )}
-                                  </td>
-                                </tr>
-                              ),
                             )}
-                          </tbody>
+                          />
-                        </table>
+                        </button>
-                      </div>
+                      </PopoverTrigger>
-                    </div>
+                      <PopoverContent align="end" className="w-56">
-                  }
+                        <div className="space-y-3">
-                />
+                          <div className="text-sm text-primary-variant">
-              </SettingsGroupCard>
+                            {t("frigatePlus.modelInfo.filter.ariaLabel")}
-            </div>
+                          </div>
-          </div>
+                          <div className="flex items-center justify-between">
-        </div>
+                            <Label
+                              htmlFor="filterBaseModels"
+                              className="cursor-pointer text-primary"
+                            >
+                              {t("frigatePlus.modelInfo.filter.baseModels")}
+                            </Label>
+                            <Switch
+                              id="filterBaseModels"
+                              checked={showBaseModels}
+                              onCheckedChange={setShowBaseModels}
+                            />
+                          </div>
+                          <div className="flex items-center justify-between">
+                            <Label
+                              htmlFor="filterFineTunedModels"
+                              className="cursor-pointer text-primary"
+                            >
+                              {t(
+                                "frigatePlus.modelInfo.filter.fineTunedModels",
+                              )}
+                            </Label>
+                            <Switch
+                              id="filterFineTunedModels"
+                              checked={showFineTunedModels}
+                              onCheckedChange={setShowFineTunedModels}
+                            />
+                          </div>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                }
+              />
+            </SettingsGroupCard>
+          )}
 
-        <div className="sticky bottom-0 z-50 w-full border-t border-secondary bg-background pb-5 pt-0 md:pr-2">
+          <SettingsGroupCard title={t("frigatePlus.cardTitles.configuration")}>
-          <div className="flex flex-col items-center gap-4 pt-2 md:flex-row md:justify-end">
+            <SplitCardRow
-            <div className="flex w-full items-center gap-2 md:w-auto">
+              label={t("frigatePlus.snapshotConfig.title")}
-              <Button
+              description={
-                className="flex min-w-36 flex-1 gap-2"
+                <>
-                variant="outline"
+                  <p>
-                aria-label={t("button.reset", { ns: "common" })}
+                    <Trans ns="views/settings">
-                onClick={onCancel}
+                      frigatePlus.snapshotConfig.desc
-              >
+                    </Trans>
-                {t("button.reset", { ns: "common" })}
+                  </p>
-              </Button>
+                  <div className="mt-2 flex items-center text-primary-variant">
-              <Button
+                    <Link
-                variant="select"
+                      to={getLocaleDocUrl("plus/faq")}
-                disabled={!changedValue || isLoading}
+                      target="_blank"
-                className="flex min-w-36 flex-1 gap-2"
+                      rel="noopener noreferrer"
-                aria-label={t("button.save", { ns: "common" })}
+                      className="inline"
-                onClick={saveToConfig}
+                    >
-              >
+                      {t("readTheDocumentation", { ns: "common" })}
-                {isLoading ? (
+                      <LuExternalLink className="ml-2 inline-flex size-3" />
-                  <>
+                    </Link>
-                    <ActivityIndicator className="h-4 w-4" />
+                  </div>
-                    {t("button.saving", { ns: "common" })}
+                </>
-                  </>
+              }
-                ) : (
+              content={
-                  t("button.save", { ns: "common" })
+                <div className="space-y-3">
-                )}
+                  <div className="overflow-x-auto">
-              </Button>
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-secondary">
+                          <th className="px-4 py-2 text-left">
+                            {t("frigatePlus.snapshotConfig.table.camera")}
+                          </th>
+                          <th className="px-4 py-2 text-center">
+                            {t("frigatePlus.snapshotConfig.table.snapshots")}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {Object.entries(config.cameras).map(
+                          ([name, camera]) => (
+                            <tr
+                              key={name}
+                              className="border-b border-secondary"
+                            >
+                              <td className="px-4 py-2">
+                                <CameraNameLabel camera={name} />
+                              </td>
+                              <td className="px-4 py-2 text-center">
+                                {camera.snapshots.enabled ? (
+                                  <CheckCircle2 className="mx-auto size-5 text-green-500" />
+                                ) : (
+                                  <XCircle className="mx-auto size-5 text-danger" />
+                                )}
+                              </td>
+                            </tr>
+                          ),
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              }
+            />
+          </SettingsGroupCard>
+        </div>
+      </div>
+
+      <div className="sticky bottom-0 z-50 mt-6 w-full border-t border-secondary bg-background pt-0">
+        <div
+          className={cn(
+            "flex flex-col items-center gap-4 pt-2 md:flex-row",
+            changedValue ? "justify-between" : "justify-end",
+          )}
+        >
+          {changedValue && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-unsaved">
+                {t("unsavedChanges")}
+              </span>
             </div>
+          )}
+          <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
+            {changedValue && (
+              <Button
+                onClick={onCancel}
+                variant="outline"
+                disabled={isLoading}
+                className="flex min-w-36 flex-1 gap-2"
+              >
+                {t("button.undo", { ns: "common" })}
+              </Button>
+            )}
+            <Button
+              onClick={saveToConfig}
+              variant="select"
+              disabled={!changedValue || isLoading}
+              className="flex min-w-36 flex-1 gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <ActivityIndicator className="h-4 w-4" />
+                  {t("button.saving", { ns: "common" })}
+                </>
+              ) : (
+                t("button.save", { ns: "common" })
+              )}
+            </Button>
           </div>
         </div>
       </div>
+      <RestartDialog
+        isOpen={restartDialogOpen}
+        onClose={() => setRestartDialogOpen(false)}
+        onRestart={() => sendRestart("restart")}
+      />
     </div>
   );
 }

web/src/views/settings/Go2RtcStreamsSettingsView.tsx

@@ -385,7 +385,7 @@ export default function Go2RtcStreamsSettingsView({
               </span>
             </div>
           )}
-          <div className="flex w-full items-center gap-2 md:w-auto">
+          <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
             {hasChanges && (
               <Button
                 onClick={onReset}

web/src/views/settings/components/FrigatePlusCurrentModelSummary.tsx

@@ -16,14 +16,11 @@ export default function FrigatePlusCurrentModelSummary({
 
   return (
     <SettingsGroupCard title={t("frigatePlus.cardTitles.currentModel")}>
-      {plusModel === undefined && (
+      {!plusModel && (
         <p className="text-muted-foreground">
-          {t("frigatePlus.modelInfo.loading")}
+          {t("frigatePlus.modelInfo.noModelLoaded")}
         </p>
       )}
-      {plusModel === null && (
-        <p className="text-danger">{t("frigatePlus.modelInfo.error")}</p>
-      )}
       {plusModel && (
         <div className="space-y-6">
           <SplitCardRow

web/src/views/system/GeneralMetrics.tsx

@@ -450,7 +450,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        if (stats.temp !== undefined) {
+        if (stats?.temp !== undefined) {
           hasValidGpu = true;
           series[key].data.push({ x: statsIdx + 1, y: stats.temp });
         }
@@ -562,7 +562,7 @@ export default function GeneralMetrics({
           series[key] = { name: key, data: [] };
         }
 
-        if (stats.temp !== undefined) {
+        if (stats?.temp !== undefined) {
           hasValidNpu = true;
           series[key].data.push({ x: statsIdx + 1, y: stats.temp });
         }