mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-29 01:57:41 +03:00
Adjust webUI for object and review description feature
This commit is contained in:
parent
35b132b68e
commit
bbb89b0bbd
@ -150,9 +150,13 @@
|
|||||||
"title": "Streams",
|
"title": "Streams",
|
||||||
"desc": "Temporarily disable a camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>"
|
"desc": "Temporarily disable a camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>"
|
||||||
},
|
},
|
||||||
"genai": {
|
"object_descriptions": {
|
||||||
"title": "Generative AI",
|
"title": "Generative AI Object Descriptions",
|
||||||
"desc": "Temporarily enable/disable Generative AI for this camera. When disabled, AI generated descriptions will not be requested for tracked objects on this camera."
|
"desc": "Temporarily enable/disable Generative AI object descriptions for this camera. When disabled, AI generated descriptions will not be requested for tracked objects on this camera."
|
||||||
|
},
|
||||||
|
"review_descriptions": {
|
||||||
|
"title": "Generative AI Review Descriptions",
|
||||||
|
"desc": "Temporarily enable/disable Generative AI review descriptions for this camera. When disabled, AI generated descriptions will not be requested for review items on this camera."
|
||||||
},
|
},
|
||||||
"review": {
|
"review": {
|
||||||
"title": "Review",
|
"title": "Review",
|
||||||
|
|||||||
@ -68,7 +68,8 @@ function useValue(): useValueReturn {
|
|||||||
autotracking,
|
autotracking,
|
||||||
alerts,
|
alerts,
|
||||||
detections,
|
detections,
|
||||||
genai,
|
object_descriptions,
|
||||||
|
review_descriptions,
|
||||||
} = state["config"];
|
} = state["config"];
|
||||||
cameraStates[`${name}/recordings/state`] = record ? "ON" : "OFF";
|
cameraStates[`${name}/recordings/state`] = record ? "ON" : "OFF";
|
||||||
cameraStates[`${name}/enabled/state`] = enabled ? "ON" : "OFF";
|
cameraStates[`${name}/enabled/state`] = enabled ? "ON" : "OFF";
|
||||||
@ -90,7 +91,12 @@ function useValue(): useValueReturn {
|
|||||||
cameraStates[`${name}/review_detections/state`] = detections
|
cameraStates[`${name}/review_detections/state`] = detections
|
||||||
? "ON"
|
? "ON"
|
||||||
: "OFF";
|
: "OFF";
|
||||||
cameraStates[`${name}/genai/state`] = genai ? "ON" : "OFF";
|
cameraStates[`${name}/object_descriptions/state`] = object_descriptions
|
||||||
|
? "ON"
|
||||||
|
: "OFF";
|
||||||
|
cameraStates[`${name}/review_descriptions/state`] = review_descriptions
|
||||||
|
? "ON"
|
||||||
|
: "OFF";
|
||||||
});
|
});
|
||||||
|
|
||||||
setWsState((prevState) => ({
|
setWsState((prevState) => ({
|
||||||
@ -278,14 +284,31 @@ export function useDetectionsState(camera: string): {
|
|||||||
return { payload: payload as ToggleableSetting, send };
|
return { payload: payload as ToggleableSetting, send };
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useGenAIState(camera: string): {
|
export function useObjectDescriptionState(camera: string): {
|
||||||
payload: ToggleableSetting;
|
payload: ToggleableSetting;
|
||||||
send: (payload: ToggleableSetting, retain?: boolean) => void;
|
send: (payload: ToggleableSetting, retain?: boolean) => void;
|
||||||
} {
|
} {
|
||||||
const {
|
const {
|
||||||
value: { payload },
|
value: { payload },
|
||||||
send,
|
send,
|
||||||
} = useWs(`${camera}/genai/state`, `${camera}/genai/set`);
|
} = useWs(
|
||||||
|
`${camera}/object_descriptions/state`,
|
||||||
|
`${camera}/object_descriptions/set`,
|
||||||
|
);
|
||||||
|
return { payload: payload as ToggleableSetting, send };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useReviewDescriptionState(camera: string): {
|
||||||
|
payload: ToggleableSetting;
|
||||||
|
send: (payload: ToggleableSetting, retain?: boolean) => void;
|
||||||
|
} {
|
||||||
|
const {
|
||||||
|
value: { payload },
|
||||||
|
send,
|
||||||
|
} = useWs(
|
||||||
|
`${camera}/review_descriptions/state`,
|
||||||
|
`${camera}/review_descriptions/set`,
|
||||||
|
);
|
||||||
return { payload: payload as ToggleableSetting, send };
|
return { payload: payload as ToggleableSetting, send };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -218,6 +218,12 @@ export interface CameraConfig {
|
|||||||
mode: string;
|
mode: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
genai?: {
|
||||||
|
enabled: boolean;
|
||||||
|
enabled_in_config: boolean;
|
||||||
|
alerts: boolean;
|
||||||
|
detections: boolean;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
rtmp: {
|
rtmp: {
|
||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
|
|||||||
@ -64,7 +64,8 @@ export interface FrigateCameraState {
|
|||||||
autotracking: boolean;
|
autotracking: boolean;
|
||||||
alerts: boolean;
|
alerts: boolean;
|
||||||
detections: boolean;
|
detections: boolean;
|
||||||
genai: boolean;
|
object_descriptions: boolean;
|
||||||
|
review_descriptions: boolean;
|
||||||
};
|
};
|
||||||
motion: boolean;
|
motion: boolean;
|
||||||
objects: ObjectType[];
|
objects: ObjectType[];
|
||||||
|
|||||||
@ -35,7 +35,8 @@ import {
|
|||||||
useAlertsState,
|
useAlertsState,
|
||||||
useDetectionsState,
|
useDetectionsState,
|
||||||
useEnabledState,
|
useEnabledState,
|
||||||
useGenAIState,
|
useObjectDescriptionState,
|
||||||
|
useReviewDescriptionState,
|
||||||
} from "@/api/ws";
|
} from "@/api/ws";
|
||||||
import CameraEditForm from "@/components/settings/CameraEditForm";
|
import CameraEditForm from "@/components/settings/CameraEditForm";
|
||||||
import { LuPlus } from "react-icons/lu";
|
import { LuPlus } from "react-icons/lu";
|
||||||
@ -150,8 +151,10 @@ export default function CameraSettingsView({
|
|||||||
const { payload: detectionsState, send: sendDetections } =
|
const { payload: detectionsState, send: sendDetections } =
|
||||||
useDetectionsState(selectedCamera);
|
useDetectionsState(selectedCamera);
|
||||||
|
|
||||||
const { payload: genAIState, send: sendGenAI } =
|
const { payload: objDescState, send: sendObjDesc } =
|
||||||
useGenAIState(selectedCamera);
|
useObjectDescriptionState(selectedCamera);
|
||||||
|
const { payload: revDescState, send: sendRevDesc } =
|
||||||
|
useReviewDescriptionState(selectedCamera);
|
||||||
|
|
||||||
const handleCheckedChange = useCallback(
|
const handleCheckedChange = useCallback(
|
||||||
(isChecked: boolean) => {
|
(isChecked: boolean) => {
|
||||||
@ -418,7 +421,9 @@ export default function CameraSettingsView({
|
|||||||
<Separator className="my-2 flex bg-secondary" />
|
<Separator className="my-2 flex bg-secondary" />
|
||||||
|
|
||||||
<Heading as="h4" className="my-2">
|
<Heading as="h4" className="my-2">
|
||||||
<Trans ns="views/settings">camera.genai.title</Trans>
|
<Trans ns="views/settings">
|
||||||
|
camera.object_descriptions.title
|
||||||
|
</Trans>
|
||||||
</Heading>
|
</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="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
|
||||||
@ -426,9 +431,9 @@ export default function CameraSettingsView({
|
|||||||
<Switch
|
<Switch
|
||||||
id="alerts-enabled"
|
id="alerts-enabled"
|
||||||
className="mr-3"
|
className="mr-3"
|
||||||
checked={genAIState == "ON"}
|
checked={objDescState == "ON"}
|
||||||
onCheckedChange={(isChecked) => {
|
onCheckedChange={(isChecked) => {
|
||||||
sendGenAI(isChecked ? "ON" : "OFF");
|
sendObjDesc(isChecked ? "ON" : "OFF");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="space-y-0.5">
|
<div className="space-y-0.5">
|
||||||
@ -438,7 +443,44 @@ export default function CameraSettingsView({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 text-sm text-muted-foreground">
|
<div className="mt-3 text-sm text-muted-foreground">
|
||||||
<Trans ns="views/settings">camera.genai.desc</Trans>
|
<Trans ns="views/settings">
|
||||||
|
camera.object_descriptions.desc
|
||||||
|
</Trans>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{cameraConfig?.review?.genai?.enabled_in_config && (
|
||||||
|
<>
|
||||||
|
<Separator className="my-2 flex bg-secondary" />
|
||||||
|
|
||||||
|
<Heading as="h4" className="my-2">
|
||||||
|
<Trans ns="views/settings">
|
||||||
|
camera.review_descriptions.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={revDescState == "ON"}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
sendRevDesc(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.review_descriptions.desc
|
||||||
|
</Trans>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user