diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json index ebff844860..22f6c447e4 100644 --- a/web/public/locales/en/views/settings.json +++ b/web/public/locales/en/views/settings.json @@ -1310,6 +1310,7 @@ "loadingAvailableModels": "Loading available models…", "selectModel": "Select a model", "noModelsAvailable": "No models available", + "showIncompatible": "Show incompatible models", "filter": { "ariaLabel": "Filter models by type", "baseModels": "Base Models", diff --git a/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx b/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx index 70d1bbbbfc..7dce9d6d62 100644 --- a/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx +++ b/web/src/components/config-form/theme/fields/ModelSourcePicker.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useMemo, useState } from "react"; +import { ReactNode, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import useSWR from "swr"; import axios from "axios"; @@ -10,6 +10,7 @@ import { SelectItem, SelectTrigger, } from "@/components/ui/select"; +import { Switch } from "@/components/ui/switch"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import type { FrigateConfig } from "@/types/frigateConfig"; import { describeSupportedDetectors } from "@/utils/plusModels"; @@ -79,10 +80,7 @@ export function ModelSourcePicker({ }, }); - const entries = useMemo( - () => Object.entries(availableModels ?? {}), - [availableModels], - ); + const [showIncompatible, setShowIncompatible] = useState(false); // the tab cannot be derived from the path alone: switching to Frigate+ // leaves the path untouched until a model is picked @@ -102,6 +100,16 @@ export function ModelSourcePicker({ const isCompatible = (model: FrigatePlusModel) => !detector || model.supportedDetectors.includes(detector); + const allEntries = Object.entries(availableModels ?? {}); + const hasIncompatible = allEntries.some(([, model]) => !isCompatible(model)); + + // the saved model stays listed even when incompatible + const entries = showIncompatible + ? allEntries + : allEntries.filter( + ([id, model]) => isCompatible(model) || id === selectedId, + ); + if (!plusEnabled) { return