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

Add similarity search

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-14 19:07:27 -05:00
parent 778fd7b84c
commit 5684e4124b
3 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/card/SearchThumbnail.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo } from "react";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { getIconForLabel } from "@/utils/iconUtil"; import { getIconForLabel } from "@/utils/iconUtil";
import useSWR from "swr"; import useSWR from "swr";
@ -12,8 +12,6 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { SearchResult } from "@/types/search"; import { SearchResult } from "@/types/search";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
import { Event } from "@/types/event";
type SearchThumbnailProps = { type SearchThumbnailProps = {
searchResult: SearchResult; searchResult: SearchResult;
@ -30,8 +28,6 @@ export default function SearchThumbnail({
// interactions // interactions
const [showFrigatePlus, setShowFrigatePlus] = useState(false);
const handleOnClick = useCallback(() => { const handleOnClick = useCallback(() => {
onClick(searchResult); onClick(searchResult);
}, [searchResult, onClick]); }, [searchResult, onClick]);
@ -58,14 +54,6 @@ export default function SearchThumbnail({
return ( return (
<div className="relative size-full cursor-pointer" onClick={handleOnClick}> <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
<FrigatePlusDialog
upload={
showFrigatePlus ? (searchResult as unknown as Event) : undefined
}
onClose={() => setShowFrigatePlus(false)}
onEventUploaded={() => {}}
/>
<ImageLoadingIndicator <ImageLoadingIndicator
className="absolute inset-0" className="absolute inset-0"
imgLoaded={imgLoaded} imgLoaded={imgLoaded}

25
web/src/components/card/SearchThumbnailFooter.tsx
View File

@ -13,7 +13,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { import {
LuActivity,
LuCamera, LuCamera,
LuDownload, LuDownload,
LuMoreVertical, LuMoreVertical,
@ -23,13 +22,16 @@ import {
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon"; import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog"; import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import { FaArrowsRotate } from "react-icons/fa6";
type SearchThumbnailProps = { type SearchThumbnailProps = {
searchResult: SearchResult; searchResult: SearchResult;
findSimilar: () => void;
}; };
export default function SearchThumbnailFooter({ export default function SearchThumbnailFooter({
searchResult, searchResult,
findSimilar,
}: SearchThumbnailProps) { }: SearchThumbnailProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -70,7 +72,7 @@ export default function SearchThumbnailFooter({
searchResult.has_snapshot && searchResult.has_snapshot &&
searchResult.end_time && ( searchResult.end_time && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger>
<FrigatePlusIcon <FrigatePlusIcon
className="size-5 cursor-pointer text-white" className="size-5 cursor-pointer text-white"
onClick={() => setShowFrigatePlus(true)} onClick={() => setShowFrigatePlus(true)}
@ -80,12 +82,17 @@ export default function SearchThumbnailFooter({
</Tooltip> </Tooltip>
)} )}
<Tooltip> {config?.semantic_search?.enabled && (
<TooltipTrigger asChild> <Tooltip>
<LuSearch className="size-5 cursor-pointer text-white" /> <TooltipTrigger>
</TooltipTrigger> <LuSearch
<TooltipContent>Find similar</TooltipContent> className="size-5 cursor-pointer text-white"
</Tooltip> onClick={findSimilar}
/>
</TooltipTrigger>
<TooltipContent>Find similar</TooltipContent>
</Tooltip>
)}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
@ -101,7 +108,7 @@ export default function SearchThumbnailFooter({
<span>Download snapshot</span> <span>Download snapshot</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<LuActivity className="mr-2 size-4" /> <FaArrowsRotate className="mr-2 size-4" />
<span>View object lifecycle</span> <span>View object lifecycle</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>

9
web/src/views/search/SearchView.tsx
View File

@ -428,7 +428,14 @@ export default function SearchView({
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`} className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
/> />
<div className="flex w-full items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground"> <div className="flex w-full items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
<SearchThumbnailFooter searchResult={value} /> <SearchThumbnailFooter
searchResult={value}
findSimilar={() => {
if (config?.semantic_search.enabled) {
setSimilaritySearch(value);
}
}}
/>
</div> </div>
</div> </div>
); );