mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-06-21 03:41:55 +03:00
add Frigate+ model selector with filter popover to merged page
This commit is contained in:
Josh Hawkins
parent
d776777a9f
commit
e7f047e915
@ -1,7 +1,8 @@
|
||||
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LuExternalLink } from "react-icons/lu";
|
||||
import { LuExternalLink, LuFilter } from "react-icons/lu";
|
||||
import axios from "axios";
|
||||
import useSWR from "swr";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||
@ -11,6 +12,20 @@ import Heading from "@/components/ui/heading";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from "@/components/ui/select";
|
||||
import type { FrigateConfig } from "@/types/frigateConfig";
|
||||
import type {
|
||||
SectionStatus,
|
||||
@ -30,6 +45,18 @@ type PageState = {
|
||||
customModel: ConfigSectionData;
|
||||
};
|
||||
|
||||
type FrigatePlusModel = {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
isBaseModel: boolean;
|
||||
supportedDetectors: string[];
|
||||
trainDate: string;
|
||||
baseModel: string;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
const STATUS_BAR_KEY = "detectors_and_model";
|
||||
|
||||
const deriveInitialState = (config: FrigateConfig): PageState => {
|
||||
@ -45,6 +72,10 @@ const deriveInitialState = (config: FrigateConfig): PageState => {
|
||||
} else {
|
||||
modelTab = "custom";
|
||||
}
|
||||
// Fallback: if Plus is not enabled, prefer Custom regardless of saved path
|
||||
if (!plusEnabled && modelTab === "plus") {
|
||||
modelTab = "custom";
|
||||
}
|
||||
|
||||
const plusModelId = config.model?.plus?.id;
|
||||
const { plus: _plus, ...modelWithoutPlus } = (config.model ?? {}) as Record<
|
||||
@ -85,6 +116,53 @@ export default function DetectorsAndModelSettingsView(
|
||||
hasValidationErrors: false,
|
||||
});
|
||||
|
||||
const [showBaseModels, setShowBaseModels] = useState(true);
|
||||
const [showFineTunedModels, setShowFineTunedModels] = useState(true);
|
||||
|
||||
const plusEnabled = Boolean(config?.plus?.enabled);
|
||||
|
||||
const { data: availableModels = {}, isLoading: isLoadingModels } = useSWR<
|
||||
Record<string, FrigatePlusModel>
|
||||
>(plusEnabled ? "/plus/models" : null, {
|
||||
fallbackData: {},
|
||||
fetcher: async (url) => {
|
||||
const res = await axios.get(url, { withCredentials: true });
|
||||
return res.data.reduce(
|
||||
(obj: Record<string, FrigatePlusModel>, model: FrigatePlusModel) => {
|
||||
obj[model.id] = model;
|
||||
return obj;
|
||||
},
|
||||
{},
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const filteredModelEntries = useMemo(
|
||||
() =>
|
||||
Object.entries(availableModels || {}).filter(([, model]) =>
|
||||
model.isBaseModel ? showBaseModels : showFineTunedModels,
|
||||
),
|
||||
[availableModels, showBaseModels, showFineTunedModels],
|
||||
);
|
||||
|
||||
const isFilterActive = !showBaseModels || !showFineTunedModels;
|
||||
|
||||
const currentDetectorType = useMemo(() => {
|
||||
if (!state) return undefined;
|
||||
const values = Object.values(state.detectors ?? {});
|
||||
if (values.length === 0) return undefined;
|
||||
const first = values[0] as { type?: string } | undefined;
|
||||
return first?.type;
|
||||
}, [state]);
|
||||
|
||||
const isModelCompatible = useCallback(
|
||||
(model: FrigatePlusModel) =>
|
||||
currentDetectorType
|
||||
? model.supportedDetectors.includes(currentDetectorType)
|
||||
: true,
|
||||
[currentDetectorType],
|
||||
);
|
||||
|
||||
const handleChildPendingChange = useCallback(
|
||||
(
|
||||
sectionKey: string,
|
||||
@ -238,7 +316,7 @@ export default function DetectorsAndModelSettingsView(
|
||||
}
|
||||
>
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="plus" disabled={!config.plus?.enabled}>
|
||||
<TabsTrigger value="plus" disabled={!plusEnabled}>
|
||||
{t("detectorsAndModel.tabs.plus")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="custom">
|
||||
@ -247,9 +325,160 @@ export default function DetectorsAndModelSettingsView(
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="plus">
|
||||
<div className="py-4 text-sm text-muted-foreground">
|
||||
Frigate+ model selector — added in Task 7.
|
||||
</div>
|
||||
{!plusEnabled ? (
|
||||
<p className="py-4 text-sm text-muted-foreground">
|
||||
{t("detectorsAndModel.plusModel.plusDisabled")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<Select
|
||||
value={state.plusModelId}
|
||||
onValueChange={(value) =>
|
||||
setState((prev) =>
|
||||
prev ? { ...prev, plusModelId: value } : prev,
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
{state.plusModelId &&
|
||||
availableModels?.[state.plusModelId]
|
||||
? new Date(
|
||||
availableModels[state.plusModelId].trainDate,
|
||||
).toLocaleString() +
|
||||
" " +
|
||||
availableModels[state.plusModelId].baseModel +
|
||||
" (" +
|
||||
(availableModels[state.plusModelId].isBaseModel
|
||||
? t(
|
||||
"frigatePlus.modelInfo.plusModelType.baseModel",
|
||||
)
|
||||
: t(
|
||||
"frigatePlus.modelInfo.plusModelType.userModel",
|
||||
)) +
|
||||
") " +
|
||||
availableModels[state.plusModelId].name +
|
||||
" (" +
|
||||
availableModels[state.plusModelId].width +
|
||||
"x" +
|
||||
availableModels[state.plusModelId].height +
|
||||
")"
|
||||
: isLoadingModels
|
||||
? t("frigatePlus.modelInfo.loadingAvailableModels")
|
||||
: t("detectorsAndModel.plusModel.noModelSelected")}
|
||||
</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={!isModelCompatible(model)}
|
||||
>
|
||||
{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>
|
||||
{!isModelCompatible(model) && (
|
||||
<div className="text-xs text-danger">
|
||||
{t(
|
||||
"detectorsAndModel.plusModel.requiresDetector",
|
||||
{
|
||||
detector:
|
||||
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"
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="custom">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user