administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 01:57:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

apply component to explore, face, and classification views

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-27 07:28:27 -05:00
parent fc017782dd
commit 681d00accd
3 changed files with 34 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/menu/SearchResultActions.tsx
View File

@ -42,6 +42,7 @@ import useSWR from "swr";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { BsFillLightningFill } from "react-icons/bs"; import { BsFillLightningFill } from "react-icons/bs";
import BlurredIconButton from "../button/BlurredIconButton";
type SearchResultActionsProps = { type SearchResultActionsProps = {
searchResult: SearchResult; searchResult: SearchResult;
@ -213,15 +214,13 @@ export default function SearchResultActions({
{config?.semantic_search?.enabled && {config?.semantic_search?.enabled &&
searchResult.data.type == "object" && ( searchResult.data.type == "object" && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton
{/* blurred circular hover background */} onClick={findSimilar}
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> aria-label={t("itemMenu.findSimilar.aria")}
<MdImageSearch >
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" <MdImageSearch className="size-5" />
onClick={findSimilar} </BlurredIconButton>
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.findSimilar.label")} {t("itemMenu.findSimilar.label")}
@ -236,14 +235,13 @@ export default function SearchResultActions({
searchResult.data.type == "object" && searchResult.data.type == "object" &&
!searchResult.plus_id && ( !searchResult.plus_id && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> onClick={showSnapshot}
<FrigatePlusIcon aria-label={t("itemMenu.submitToPlus.aria")}
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" >
onClick={showSnapshot} <FrigatePlusIcon className="size-5" />
/> </BlurredIconButton>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("itemMenu.submitToPlus.label")} {t("itemMenu.submitToPlus.label")}
@ -252,11 +250,10 @@ export default function SearchResultActions({
)} )}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <FiMoreVertical className="size-5" />
<FiMoreVertical className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end">{menuItems}</DropdownMenuContent> <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

20
web/src/pages/FaceLibrary.tsx
View File

@ -5,6 +5,7 @@ import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog"; import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog"; import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import BlurredIconButton from "@/components/button/BlurredIconButton";
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -858,20 +859,15 @@ function FaceAttemptGroup({
faceNames={faceNames} faceNames={faceNames}
onTrainAttempt={(name) => onTrainAttempt(data, name)} onTrainAttempt={(name) => onTrainAttempt(data, name)}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <AddFaceIcon className="size-5" />
<AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</FaceSelectionDialog> </FaceSelectionDialog>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger asChild>
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton onClick={() => onReprocess(data)}>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <LuRefreshCw className="size-5" />
<LuRefreshCw </BlurredIconButton>
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
onClick={() => onReprocess(data)}
/>
</div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{t("button.reprocessFace")}</TooltipContent> <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
</Tooltip> </Tooltip>

15
web/src/views/classification/ModelTrainingView.tsx
View File

@ -51,6 +51,7 @@ import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog"; import ClassificationSelectionDialog from "@/components/overlay/ClassificationSelectionDialog";
import { TbCategoryPlus } from "react-icons/tb"; import { TbCategoryPlus } from "react-icons/tb";
import BlurredIconButton from "@/components/button/BlurredIconButton";
import { useModelState } from "@/api/ws"; import { useModelState } from "@/api/ws";
import { ModelState } from "@/types/ws"; import { ModelState } from "@/types/ws";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
@ -811,10 +812,9 @@ function StateTrainGrid({
image={data.filename} image={data.filename}
onRefresh={onRefresh} onRefresh={onRefresh}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <TbCategoryPlus className="size-5" />
<TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</ClassificationSelectionDialog> </ClassificationSelectionDialog>
</ClassificationCard> </ClassificationCard>
</div> </div>
@ -961,10 +961,9 @@ function ObjectTrainGrid({
image={data.filename} image={data.filename}
onRefresh={onRefresh} onRefresh={onRefresh}
> >
<div className="group relative inline-flex items-center justify-center"> <BlurredIconButton>
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" /> <TbCategoryPlus className="size-5" />
<TbCategoryPlus className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" /> </BlurredIconButton>
</div>
</ClassificationSelectionDialog> </ClassificationSelectionDialog>
</> </>
)} )}