administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-05 13:07:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Move event group to separate comp

Browse Source
This commit is contained in:
Nicolas Mowen 2025-03-31 14:14:09 -06:00
parent 3bda53ea04
commit 30dd8b593f
1 changed files with 100 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -402,8 +402,7 @@ function TrainingGrid({
onClickFace, onClickFace,
onRefresh, onRefresh,
}: TrainingGridProps) { }: TrainingGridProps) {
const { t } = useTranslation(["views/faceLibrary", "views/explore"]); const { t } = useTranslation(["views/faceLibrary"]);
const navigate = useNavigate();
// face data // face data
@ -516,72 +515,18 @@ function TrainingGrid({
<div className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"> <div className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1">
{Object.entries(faceGroups).map(([key, group]) => { {Object.entries(faceGroups).map(([key, group]) => {
const event = events?.find((ev) => ev.id == key); const event = events?.find((ev) => ev.id == key);
return ( return (
<div <FaceAttemptGroup
key={key} key={key}
className={cn( config={config}
"flex flex-col gap-2 rounded-lg bg-card p-2", group={group}
isMobile && "w-full", event={event}
)} faceNames={faceNames}
> selectedFaces={selectedFaces}
<div className="flex flex-row justify-between"> onClickFace={onClickFace}
<div className="capitalize"> onSelectEvent={setSelectedEvent}
Person onRefresh={onRefresh}
{event?.sub_label />
? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
: ": Unknown"}
</div>
{event && (
<Tooltip>
<TooltipTrigger>
<div
className="cursor-pointer"
onClick={() => {
navigate(`/explore?event_id=${event.id}`);
}}
>
<LuSearch className="size-4 text-muted-foreground" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
{t("details.item.button.viewInExplore", {
ns: "views/explore",
})}
</TooltipContent>
</TooltipPortal>
</Tooltip>
)}
</div>
<div
className={cn(
"gap-2",
isDesktop
? "flex flex-row flex-wrap"
: "grid grid-cols-2 sm:grid-cols-5 lg:grid-cols-6",
)}
>
{group.map((data: RecognizedFaceData) => (
<FaceAttempt
key={data.filename}
data={data}
faceNames={faceNames}
recognitionConfig={config.face_recognition}
selected={selectedFaces.includes(data.filename)}
onClick={(data, meta) => {
if (meta || selectedFaces.length > 0) {
onClickFace(data.filename, true);
} else if (event) {
setSelectedEvent(event);
}
}}
onRefresh={onRefresh}
/>
))}
</div>
</div>
); );
})} })}
</div> </div>
@ -589,6 +534,95 @@ function TrainingGrid({
); );
} }
type FaceAttemptGroupProps = {
config: FrigateConfig;
group: RecognizedFaceData[];
event?: Event;
faceNames: string[];
selectedFaces: string[];
onClickFace: (image: string, ctrl: boolean) => void;
onSelectEvent: (event: Event) => void;
onRefresh: () => void;
};
function FaceAttemptGroup({
config,
group,
event,
faceNames,
selectedFaces,
onClickFace,
onSelectEvent,
onRefresh,
}: FaceAttemptGroupProps) {
const navigate = useNavigate();
const { t } = useTranslation(["views/faceLibrary", "views/explore"]);
return (
<div
className={cn(
"flex flex-col gap-2 rounded-lg bg-card p-2",
isMobile && "w-full",
)}
>
<div className="flex flex-row justify-between">
<div className="capitalize">
Person
{event?.sub_label
? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
: ": Unknown"}
</div>
{event && (
<Tooltip>
<TooltipTrigger>
<div
className="cursor-pointer"
onClick={() => {
navigate(`/explore?event_id=${event.id}`);
}}
>
<LuSearch className="size-4 text-muted-foreground" />
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
{t("details.item.button.viewInExplore", {
ns: "views/explore",
})}
</TooltipContent>
</TooltipPortal>
</Tooltip>
)}
</div>
<div
className={cn(
"gap-2",
isDesktop
? "flex flex-row flex-wrap"
: "grid grid-cols-2 sm:grid-cols-5 lg:grid-cols-6",
)}
>
{group.map((data: RecognizedFaceData) => (
<FaceAttempt
key={data.filename}
data={data}
faceNames={faceNames}
recognitionConfig={config.face_recognition}
selected={selectedFaces.includes(data.filename)}
onClick={(data, meta) => {
if (meta || selectedFaces.length > 0) {
onClickFace(data.filename, true);
} else if (event) {
onSelectEvent(event);
}
}}
onRefresh={onRefresh}
/>
))}
</div>
</div>
);
}
type FaceAttemptProps = { type FaceAttemptProps = {
data: RecognizedFaceData; data: RecognizedFaceData;
faceNames: string[]; faceNames: string[];