From e7f047e91595dbed0c25b42433ec4b0ea23de7c8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 16 May 2026 08:20:22 -0500
Subject: [PATCH] add Frigate+ model selector with filter popover to merged
 page

---
 .../DetectorsAndModelSettingsView.tsx         | 239 +++++++++++++++++-
 1 file changed, 234 insertions(+), 5 deletions(-)

diff --git a/web/src/views/settings/DetectorsAndModelSettingsView.tsx b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
index cb4de4a2b3..da93371c3c 100644
--- a/web/src/views/settings/DetectorsAndModelSettingsView.tsx
+++ b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
@@ -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">