UI tweaks: add width and height, fix select

This commit is contained in:
leccelecce 2025-03-24 10:01:41 +00:00 committed by james
parent 2c15ce27f5
commit 1706d2907b
2 changed files with 60 additions and 34 deletions

View File

@ -397,6 +397,8 @@ export interface FrigateConfig {
trainDate: string; trainDate: string;
baseModel: string; baseModel: string;
supportedDetectors: string[]; supportedDetectors: string[];
width: number;
height: number;
}; };
}; };

View File

@ -29,6 +29,8 @@ type FrigatePlusModel = {
supportedDetectors: string[]; supportedDetectors: string[];
trainDate: string; trainDate: string;
baseModel: string; baseModel: string;
width: number;
height: number;
}; };
type FrigatePlusSettings = { type FrigatePlusSettings = {
@ -67,15 +69,20 @@ export default function FrigatePlusSettingsView({
}, },
); );
const { data: availableModels } = useSWR<FrigatePlusModel[]>("/plus/models", { const { data: availableModels = {} } = useSWR<
fallbackData: [], Record<string, FrigatePlusModel>
fetcher: (url) => >("/plus/models", {
axios fallbackData: {},
.get(url, { fetcher: async (url) => {
params: { filterByCurrentModelDetector: true }, const res = await axios.get(url, { withCredentials: true });
withCredentials: true, return res.data.reduce(
}) (obj: Record<string, FrigatePlusModel>, model: FrigatePlusModel) => {
.then((res) => res.data), obj[model.id] = model;
return obj;
},
{},
);
},
}); });
useEffect(() => { useEffect(() => {
@ -260,7 +267,13 @@ export default function FrigatePlusSettingsView({
<Label className="text-muted-foreground"> <Label className="text-muted-foreground">
{t("frigatePlus.modelInfo.modelType")} {t("frigatePlus.modelInfo.modelType")}
</Label> </Label>
<p>{config.model.plus.name}</p> <p>
{config.model.plus.name} (
{config.model.plus.width +
"x" +
config.model.plus.height}
)
</p>
</div> </div>
<div> <div>
<Label className="text-muted-foreground"> <Label className="text-muted-foreground">
@ -308,33 +321,44 @@ export default function FrigatePlusSettingsView({
} }
> >
<SelectTrigger> <SelectTrigger>
{new Date( {(() => {
config.model.plus.trainDate, const modelId = frigatePlusSettings?.model?.id;
).toLocaleString()}{" "} return modelId &&
({config.model.plus.baseModel}) availableModels?.[modelId]?.trainDate
? new Date(
availableModels[modelId].trainDate,
).toLocaleString()
: "N/A";
})()}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
{availableModels?.map((model) => ( {Object.entries(availableModels || {}).map(
<SelectItem ([id, model]) => (
key={model.id} <SelectItem
className="cursor-pointer" key={id}
value={model.id} className="cursor-pointer"
disabled={ value={id}
model.type != config.model.model_type || disabled={
!model.supportedDetectors.includes( model.type != config.model.model_type ||
Object.values(config.detectors)[0].type, !model.supportedDetectors.includes(
) Object.values(config.detectors)[0]
} .type,
> )
{new Date(model.trainDate).toLocaleString()}{" "} }
({model.baseModel}) ( >
{model.supportedDetectors.join(", ")}) {new Date(
<div className="text-xs text-muted-foreground"> model.trainDate,
{model.id} ).toLocaleString()}{" "}
</div> ({model.baseModel}) (
</SelectItem> {model.supportedDetectors.join(", ")}) (
))} {model.width + "x" + model.height})
<div className="text-xs text-muted-foreground">
{id}
</div>
</SelectItem>
),
)}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>