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

Wrap Frigate+ model selector in SplitCardRow with label and description

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-16 16:38:38 -05:00
parent 96d081fad5
commit 8daf8e1d2a
2 changed files with 168 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1135,7 +1135,7 @@
"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.", "noModelLoaded": "No Frigate+ model is currently loaded.",
"availableModels": "Available Models", "availableModels": "Available Frigate+ models",
"loadingAvailableModels": "Loading available models…", "loadingAvailableModels": "Loading available models…",
"selectModel": "Select a model", "selectModel": "Select a model",
"noModelsAvailable": "No models available", "noModelsAvailable": "No models available",

315
web/src/views/settings/DetectorsAndModelSettingsView.tsx
View File

@ -1,5 +1,5 @@
import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { LuExternalLink, LuFilter } from "react-icons/lu"; import { LuExternalLink, LuFilter } from "react-icons/lu";
import { toast } from "sonner"; import { toast } from "sonner";
@ -36,7 +36,10 @@ import type {
SettingsPageProps, SettingsPageProps,
} from "@/views/settings/SingleSectionPage"; } from "@/views/settings/SingleSectionPage";
import type { ConfigSectionData } from "@/types/configForm"; import type { ConfigSectionData } from "@/types/configForm";
import { SettingsGroupCard } from "@/components/card/SettingsGroupCard"; import {
SettingsGroupCard,
SplitCardRow,
} from "@/components/card/SettingsGroupCard";
import { ConfigSectionTemplate } from "@/components/config-form/sections"; import { ConfigSectionTemplate } from "@/components/config-form/sections";
import { ConfigMessageBanner } from "@/components/config-form/ConfigMessageBanner"; import { ConfigMessageBanner } from "@/components/config-form/ConfigMessageBanner";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -445,154 +448,170 @@ export default function DetectorsAndModelSettingsView({
</TabsList> </TabsList>
<TabsContent value="plus"> <TabsContent value="plus">
<div className="flex w-full items-center gap-2"> <SplitCardRow
<Select label={t("frigatePlus.modelInfo.availableModels")}
value={state.plusModelId} description={
onValueChange={(value) => <Trans ns="views/settings">
setState((prev) => frigatePlus.modelInfo.modelSelect
prev ? { ...prev, plusModelId: value } : prev, </Trans>
) }
} content={
> <div className="flex w-full items-center gap-2">
<SelectTrigger className="w-full"> <Select
{state.plusModelId && value={state.plusModelId}
availableModels?.[state.plusModelId] onValueChange={(value) =>
? new Date( setState((prev) =>
availableModels[state.plusModelId].trainDate, prev ? { ...prev, plusModelId: value } : prev,
).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 <SelectTrigger className="w-full">
className={cn( {state.plusModelId &&
"size-4", availableModels?.[state.plusModelId]
isFilterActive ? new Date(
? "text-selected" availableModels[state.plusModelId].trainDate,
: "text-secondary-foreground", ).toLocaleString() +
)} " " +
/> availableModels[state.plusModelId].baseModel +
</button> " (" +
</PopoverTrigger> (availableModels[state.plusModelId].isBaseModel
<PopoverContent align="end" className="w-56"> ? t(
<div className="space-y-3"> "frigatePlus.modelInfo.plusModelType.baseModel",
<div className="text-sm text-primary-variant"> )
{t("frigatePlus.modelInfo.filter.ariaLabel")} : t(
</div> "frigatePlus.modelInfo.plusModelType.userModel",
<div className="flex items-center justify-between"> )) +
<Label ") " +
htmlFor="filterBaseModels" availableModels[state.plusModelId].name +
className="cursor-pointer text-primary" " (" +
> availableModels[state.plusModelId].width +
{t("frigatePlus.modelInfo.filter.baseModels")} "x" +
</Label> availableModels[state.plusModelId].height +
<Switch ")"
id="filterBaseModels" : isLoadingModels
checked={showBaseModels} ? t(
onCheckedChange={setShowBaseModels} "frigatePlus.modelInfo.loadingAvailableModels",
/> )
</div> : t(
<div className="flex items-center justify-between"> "detectorsAndModel.plusModel.noModelSelected",
<Label )}
htmlFor="filterFineTunedModels" </SelectTrigger>
className="cursor-pointer text-primary" <SelectContent>
> <SelectGroup>
{t( {filteredModelEntries.length === 0 ? (
"frigatePlus.modelInfo.filter.fineTunedModels", <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>
))
)} )}
</Label> </SelectGroup>
<Switch </SelectContent>
id="filterFineTunedModels" </Select>
checked={showFineTunedModels} <Popover>
onCheckedChange={setShowFineTunedModels} <PopoverTrigger asChild>
/> <button
</div> type="button"
</div> className="focus:outline-none"
</PopoverContent> aria-label={t(
</Popover> "frigatePlus.modelInfo.filter.ariaLabel",
</div> )}
>
<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>
<TabsContent value="custom"> <TabsContent value="custom">