administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-09 13:31: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",

29
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,6 +448,14 @@ export default function DetectorsAndModelSettingsView({
</TabsList> </TabsList>
<TabsContent value="plus"> <TabsContent value="plus">
<SplitCardRow
label={t("frigatePlus.modelInfo.availableModels")}
description={
<Trans ns="views/settings">
frigatePlus.modelInfo.modelSelect
</Trans>
}
content={
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<Select <Select
value={state.plusModelId} value={state.plusModelId}
@ -478,8 +489,12 @@ export default function DetectorsAndModelSettingsView({
availableModels[state.plusModelId].height + availableModels[state.plusModelId].height +
")" ")"
: isLoadingModels : isLoadingModels
? t("frigatePlus.modelInfo.loadingAvailableModels") ? t(
: t("detectorsAndModel.plusModel.noModelSelected")} "frigatePlus.modelInfo.loadingAvailableModels",
)
: t(
"detectorsAndModel.plusModel.noModelSelected",
)}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
@ -523,7 +538,9 @@ export default function DetectorsAndModelSettingsView({
"detectorsAndModel.plusModel.requiresDetector", "detectorsAndModel.plusModel.requiresDetector",
{ {
detector: detector:
model.supportedDetectors.join(", "), model.supportedDetectors.join(
", ",
),
}, },
)} )}
</div> </div>
@ -593,6 +610,8 @@ export default function DetectorsAndModelSettingsView({
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
}
/>
</TabsContent> </TabsContent>
<TabsContent value="custom"> <TabsContent value="custom">