Dynamically enable/disable GenAI (#19139)

* config

* dispatcher and mqtt

* docs

* use config updater

* add switch to frontend

web/src/api/ws.tsx

@@ -68,6 +68,7 @@ function useValue(): useValueReturn {
         autotracking,
         alerts,
         detections,
+        genai,
       } = state["config"];
       cameraStates[`${name}/recordings/state`] = record ? "ON" : "OFF";
       cameraStates[`${name}/enabled/state`] = enabled ? "ON" : "OFF";
@@ -89,6 +90,7 @@ function useValue(): useValueReturn {
       cameraStates[`${name}/review_detections/state`] = detections
         ? "ON"
         : "OFF";
+      cameraStates[`${name}/genai/state`] = genai ? "ON" : "OFF";
     });
 
     setWsState((prevState) => ({
@@ -276,6 +278,17 @@ export function useDetectionsState(camera: string): {
   return { payload: payload as ToggleableSetting, send };
 }
 
+export function useGenAIState(camera: string): {
+  payload: ToggleableSetting;
+  send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+  const {
+    value: { payload },
+    send,
+  } = useWs(`${camera}/genai/state`, `${camera}/genai/set`);
+  return { payload: payload as ToggleableSetting, send };
+}
+
 export function usePtzCommand(camera: string): {
   payload: string;
   send: (payload: string, retain?: boolean) => void;

web/src/types/ws.ts

@@ -64,6 +64,7 @@ export interface FrigateCameraState {
     autotracking: boolean;
     alerts: boolean;
     detections: boolean;
+    genai: boolean;
   };
   motion: boolean;
   objects: ObjectType[];

web/src/views/settings/CameraSettingsView.tsx

@@ -29,9 +29,14 @@ import { cn } from "@/lib/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
-import { useAlertsState, useDetectionsState, useEnabledState } from "@/api/ws";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { getTranslatedLabel } from "@/utils/i18n";
+import {
+  useAlertsState,
+  useDetectionsState,
+  useEnabledState,
+  useGenAIState,
+} from "@/api/ws";
 import CameraEditForm from "@/components/settings/CameraEditForm";
 import { LuPlus } from "react-icons/lu";
 import {
@@ -145,6 +150,9 @@ export default function CameraSettingsView({
   const { payload: detectionsState, send: sendDetections } =
     useDetectionsState(selectedCamera);
 
+  const { payload: genAIState, send: sendGenAI } =
+    useGenAIState(selectedCamera);
+
   const handleCheckedChange = useCallback(
     (isChecked: boolean) => {
       if (!isChecked) {
@@ -405,6 +413,36 @@ export default function CameraSettingsView({
                   </div>
                 </div>
               </div>
+              {config?.genai?.enabled && (
+                <>
+                  <Separator className="my-2 flex bg-secondary" />
+
+                  <Heading as="h4" className="my-2">
+                    <Trans ns="views/settings">camera.genai.title</Trans>
+                  </Heading>
+
+                  <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
+                    <div className="flex flex-row items-center">
+                      <Switch
+                        id="alerts-enabled"
+                        className="mr-3"
+                        checked={genAIState == "ON"}
+                        onCheckedChange={(isChecked) => {
+                          sendGenAI(isChecked ? "ON" : "OFF");
+                        }}
+                      />
+                      <div className="space-y-0.5">
+                        <Label htmlFor="genai-enabled">
+                          <Trans>button.enabled</Trans>
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="mt-3 text-sm text-muted-foreground">
+                      <Trans ns="views/settings">camera.genai.desc</Trans>
+                    </div>
+                  </div>
+                </>
+              )}
 
               <Separator className="my-2 flex bg-secondary" />