score filter frontend

web/src/components/overlay/dialog/SearchFilterDialog.tsx

@@ -23,6 +23,8 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { DualThumbSlider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
 
 type SearchFilterDialogProps = {
   config?: FrigateConfig;
@@ -54,6 +56,7 @@ export default function SearchFilterDialog({
     () =>
       currentFilter &&
       (currentFilter.time_range ||
+        (currentFilter.min_score && currentFilter.max_score) ||
         (currentFilter.zones?.length ?? 0) > 0 ||
         (currentFilter.sub_labels?.length ?? 0) > 0 ||
         (currentFilter.search_type?.length ?? 2) !== 2),
@@ -97,6 +100,13 @@ export default function SearchFilterDialog({
           setCurrentFilter({ ...currentFilter, sub_labels: newSubLabels })
         }
       />
+      <ScoreFilterContent
+        minScore={currentFilter.min_score}
+        maxScore={currentFilter.max_score}
+        setScoreRange={(min, max) =>
+          setCurrentFilter({ ...currentFilter, min_score: min, max_score: max })
+        }
+      />
       {config?.semantic_search?.enabled &&
         !currentFilter?.search_type?.includes("similarity") && (
           <SearchTypeContent
@@ -133,6 +143,8 @@ export default function SearchFilterDialog({
               zones: undefined,
               sub_labels: undefined,
               search_type: ["thumbnail", "description"],
+              min_score: undefined,
+              max_score: undefined,
             }));
           }}
         >
@@ -420,6 +432,58 @@ export function SubFilterContent({
   );
 }
 
+type ScoreFilterContentProps = {
+  minScore: number | undefined;
+  maxScore: number | undefined;
+  setScoreRange: (min: number | undefined, max: number | undefined) => void;
+};
+export function ScoreFilterContent({
+  minScore,
+  maxScore,
+  setScoreRange,
+}: ScoreFilterContentProps) {
+  return (
+    <div className="overflow-x-hidden">
+      <DropdownMenuSeparator className="mb-3" />
+      <div className="mb-3 text-lg">Score</div>
+      <div className="flex items-center gap-1">
+        <Input
+          className="w-12"
+          inputMode="numeric"
+          value={Math.round((minScore ?? 0.5) * 100)}
+          onChange={(e) => {
+            const value = e.target.value;
+
+            if (value) {
+              setScoreRange(parseInt(value) / 100.0, maxScore ?? 1.0);
+            }
+          }}
+        />
+        <DualThumbSlider
+          className="w-full"
+          min={0.5}
+          max={1.0}
+          step={0.01}
+          value={[minScore ?? 0.5, maxScore ?? 1.0]}
+          onValueChange={([min, max]) => setScoreRange(min, max)}
+        />
+        <Input
+          className="w-12"
+          inputMode="numeric"
+          value={Math.round((maxScore ?? 1.0) * 100)}
+          onChange={(e) => {
+            const value = e.target.value;
+
+            if (value) {
+              setScoreRange(minScore ?? 0.5, parseInt(value) / 100.0);
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
 type SearchTypeContentProps = {
   searchSources: SearchSource[] | undefined;
   setSearchSources: (sources: SearchSource[] | undefined) => void;

web/src/pages/Explore.tsx

@@ -103,6 +103,8 @@ export default function Explore() {
           after: searchSearchParams["after"],
           time_range: searchSearchParams["time_range"],
           search_type: searchSearchParams["search_type"],
+          min_score: searchSearchParams["min_score"],
+          max_score: searchSearchParams["max_score"],
           limit:
             Object.keys(searchSearchParams).length == 0 ? API_LIMIT : undefined,
           timezone,
@@ -129,6 +131,8 @@ export default function Explore() {
         after: searchSearchParams["after"],
         time_range: searchSearchParams["time_range"],
         search_type: searchSearchParams["search_type"],
+        min_score: searchSearchParams["min_score"],
+        max_score: searchSearchParams["max_score"],
         event_id: searchSearchParams["event_id"],
         timezone,
         include_thumbnails: 0,

web/src/types/search.ts

@@ -56,6 +56,8 @@ export type SearchFilter = {
   zones?: string[];
   before?: number;
   after?: number;
+  min_score?: number;
+  max_score?: number;
   time_range?: string;
   search_type?: SearchSource[];
   event_id?: string;
@@ -71,6 +73,8 @@ export type SearchQueryParams = {
   zones?: string[];
   before?: string;
   after?: string;
+  min_score?: number;
+  max_score?: number;
   search_type?: string;
   limit?: number;
   in_progress?: number;

web/src/views/search/SearchView.tsx

@@ -144,6 +144,8 @@ export default function SearchView({
           : ["12:00AM-11:59PM"],
       before: [formatDateToLocaleString()],
       after: [formatDateToLocaleString(-5)],
+      min_score: ["50"],
+      max_score: ["100"],
     }),
     [config, allLabels, allZones, allSubLabels],
   );