administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-06 03:51:14 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

frigate+ pane updates

Browse Source 
- 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
This commit is contained in:
Josh Hawkins 2026-05-11 15:03:31 -05:00
parent cd7ee16e50
commit a4c6e11642
3 changed files with 240 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/public/locales/en/views/settings.json
View File

@ -1128,8 +1128,16 @@
"cameras": "Cameras", "cameras": "Cameras",
"loading": "Loading model information…", "loading": "Loading model information…",
"error": "Failed to load model information", "error": "Failed to load model information",
"noModelLoaded": "No Frigate+ model is currently loaded.",
"availableModels": "Available Models", "availableModels": "Available Models",
"loadingAvailableModels": "Loading 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." "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", "unsavedChanges": "Unsaved Frigate+ settings changes",

356
web/src/views/settings/FrigatePlusSettingsView.tsx
View File

@ -1,5 +1,5 @@
import Heading from "@/components/ui/heading"; 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 { Toaster } from "@/components/ui/sonner";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import { toast } from "sonner"; import { toast } from "sonner";
@ -10,7 +10,7 @@ import { CheckCircle2, XCircle } from "lucide-react";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom"; 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 { StatusBarMessagesContext } from "@/context/statusbar-provider";
import { import {
Select, Select,
@ -19,6 +19,14 @@ import {
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
} from "@/components/ui/select"; } 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 { useDocDomain } from "@/hooks/use-doc-domain";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel"; import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { import {
@ -26,6 +34,8 @@ import {
SplitCardRow, SplitCardRow,
} from "@/components/card/SettingsGroupCard"; } from "@/components/card/SettingsGroupCard";
import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary"; import FrigatePlusCurrentModelSummary from "@/views/settings/components/FrigatePlusCurrentModelSummary";
import { useRestart } from "@/api/ws";
import RestartDialog from "@/components/overlay/dialog/RestartDialog";
type FrigatePlusModel = { type FrigatePlusModel = {
id: string; id: string;
@ -58,6 +68,8 @@ export default function FrigatePlusSettingsView({
useSWR<FrigateConfig>("config"); useSWR<FrigateConfig>("config");
const [changedValue, setChangedValue] = useState(false); const [changedValue, setChangedValue] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const { send: sendRestart } = useRestart();
const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!; 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> Record<string, FrigatePlusModel>
>("/plus/models", { >("/plus/models", {
fallbackData: {}, 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(() => { useEffect(() => {
if (config) { if (config) {
if (frigatePlusSettings?.model.id == undefined) { if (frigatePlusSettings?.model.id == undefined) {
@ -128,47 +153,60 @@ export default function FrigatePlusSettingsView({
const saveToConfig = useCallback(async () => { const saveToConfig = useCallback(async () => {
setIsLoading(true); 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, 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( toast.error(
t("toast.save.error.title", { errorMessage, ns: "common" }), t("frigatePlus.toast.error", { errorMessage: res.statusText }),
{ {
position: "top-center", 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]); }, [updateConfig, addMessage, frigatePlusSettings, t]);
const onCancel = useCallback(() => { const onCancel = useCallback(() => {
@ -255,11 +293,11 @@ export default function FrigatePlusSettingsView({
/> />
</SettingsGroupCard> </SettingsGroupCard>
{config?.model.plus && ( {config?.plus?.enabled && (
<FrigatePlusCurrentModelSummary plusModel={config.model.plus} /> <FrigatePlusCurrentModelSummary plusModel={config.model.plus} />
)} )}
{config?.model.plus && ( {config?.plus?.enabled && (
<SettingsGroupCard <SettingsGroupCard
title={t("frigatePlus.cardTitles.otherModels")} title={t("frigatePlus.cardTitles.otherModels")}
> >
@ -271,96 +309,157 @@ export default function FrigatePlusSettingsView({
</Trans> </Trans>
} }
content={ content={
<Select <div className="flex w-full items-center gap-2">
value={frigatePlusSettings.model.id} <Select
onValueChange={(value) => value={frigatePlusSettings.model.id}
handleFrigatePlusConfigChange({ onValueChange={(value) =>
model: { id: value as string }, handleFrigatePlusConfigChange({
}) model: { id: value as string },
} })
> }
{frigatePlusSettings.model.id && >
availableModels?.[frigatePlusSettings.model.id] ? (
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
{new Date( {frigatePlusSettings.model.id &&
availableModels[ availableModels?.[frigatePlusSettings.model.id]
frigatePlusSettings.model.id ? new Date(
].trainDate, availableModels[
).toLocaleString() + frigatePlusSettings.model.id
" " + ].trainDate,
availableModels[frigatePlusSettings.model.id] ).toLocaleString() +
.baseModel + " " +
" (" + availableModels[frigatePlusSettings.model.id]
(availableModels[frigatePlusSettings.model.id] .baseModel +
.isBaseModel " (" +
? t( (availableModels[frigatePlusSettings.model.id]
"frigatePlus.modelInfo.plusModelType.baseModel", .isBaseModel
) ? t(
: t( "frigatePlus.modelInfo.plusModelType.baseModel",
"frigatePlus.modelInfo.plusModelType.userModel",
)) +
") " +
availableModels[frigatePlusSettings.model.id]
.name +
" (" +
availableModels[frigatePlusSettings.model.id]
.width +
"x" +
availableModels[frigatePlusSettings.model.id]
.height +
")"}
</SelectTrigger>
) : (
<SelectTrigger className="w-full">
{t("frigatePlus.modelInfo.loadingAvailableModels")}
</SelectTrigger>
)}
<SelectContent>
<SelectGroup>
{Object.entries(availableModels || {}).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",
)) +
") " +
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,
)
}
>
{new Date(model.trainDate).toLocaleString()}{" "}
<div>
{model.baseModel} {" ("}
{model.isBaseModel
? t(
"frigatePlus.modelInfo.plusModelType.baseModel",
)
: 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>
<Popover>
<PopoverTrigger asChild>
<button
type="button"
className="focus:outline-none"
aria-label={t(
"frigatePlus.modelInfo.filter.ariaLabel",
)}
>
<LuFilter
className={cn(
"size-4",
isFilterActive
? "text-selected"
: "text-secondary-foreground",
)}
/>
</button>
</PopoverTrigger>
<PopoverContent align="end" className="w-56">
<div className="space-y-3">
<div className="text-sm text-primary-variant">
{t("frigatePlus.modelInfo.filter.ariaLabel")}
</div>
<div className="flex items-center justify-between">
<Label
htmlFor="filterBaseModels"
className="cursor-pointer text-primary"
> >
{new Date(model.trainDate).toLocaleString()}{" "} {t("frigatePlus.modelInfo.filter.baseModels")}
<div> </Label>
{model.baseModel} {" ("} <Switch
{model.isBaseModel id="filterBaseModels"
? t( checked={showBaseModels}
"frigatePlus.modelInfo.plusModelType.baseModel", onCheckedChange={setShowBaseModels}
) />
: t( </div>
"frigatePlus.modelInfo.plusModelType.userModel", <div className="flex items-center justify-between">
)} <Label
{")"} htmlFor="filterFineTunedModels"
</div> className="cursor-pointer text-primary"
<div> >
{model.name} ( {t(
{model.width + "x" + model.height}) "frigatePlus.modelInfo.filter.fineTunedModels",
</div> )}
<div> </Label>
{t( <Switch
"frigatePlus.modelInfo.supportedDetectors", id="filterFineTunedModels"
)} checked={showFineTunedModels}
: {model.supportedDetectors.join(", ")} onCheckedChange={setShowFineTunedModels}
</div> />
<div className="text-xs text-muted-foreground"> </div>
{id} </div>
</div> </PopoverContent>
</SelectItem> </Popover>
), </div>
)}
</SelectGroup>
</SelectContent>
</Select>
} }
/> />
</SettingsGroupCard> </SettingsGroupCard>
@ -469,6 +568,11 @@ export default function FrigatePlusSettingsView({
</div> </div>
</div> </div>
</div> </div>
<RestartDialog
isOpen={restartDialogOpen}
onClose={() => setRestartDialogOpen(false)}
onRestart={() => sendRestart("restart")}
/>
</div> </div>
); );
} }

7
web/src/views/settings/components/FrigatePlusCurrentModelSummary.tsx
View File

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