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

Always show train tab

Browse Source
This commit is contained in:
Nicolas Mowen 2025-05-06 13:19:45 -06:00
parent 146e113645
commit 03bfff713e
2 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/public/locales/en/views/faceLibrary.json
View File

@ -29,7 +29,8 @@
}, },
"train": { "train": {
"title": "Train", "title": "Train",
"aria": "Select train" "aria": "Select train",
"empty": "There are no recent face recognition attempts"
}, },
"selectItem": "Select {{item}}", "selectItem": "Select {{item}}",
"selectFace": "Select Face", "selectFace": "Select Face",

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

@ -46,6 +46,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
LuFolderCheck,
LuImagePlus, LuImagePlus,
LuInfo, LuInfo,
LuPencil, LuPencil,
@ -69,7 +70,7 @@ export default function FaceLibrary() {
document.title = t("documentTitle"); document.title = t("documentTitle");
}, [t]); }, [t]);
const [page, setPage] = useState<string>(); const [page, setPage] = useState<string>("train");
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100); const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
// face data // face data
@ -92,20 +93,6 @@ export default function FaceLibrary() {
[faceData], [faceData],
); );
useEffect(() => {
if (!pageToggle) {
if (trainImages.length > 0) {
setPageToggle("train");
} else if (faces) {
setPageToggle(faces[0]);
}
} else if (pageToggle == "train" && trainImages.length == 0) {
setPageToggle(faces[0]);
}
// we need to listen on the value of the faces list
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [trainImages, faces]);
// upload // upload
const [upload, setUpload] = useState(false); const [upload, setUpload] = useState(false);
@ -371,7 +358,7 @@ type LibrarySelectorProps = {
faceData?: FaceLibraryData; faceData?: FaceLibraryData;
faces: string[]; faces: string[];
trainImages: string[]; trainImages: string[];
setPageToggle: (toggle: string | undefined) => void; setPageToggle: (toggle: string) => void;
onDelete: (name: string, ids: string[], isName: boolean) => void; onDelete: (name: string, ids: string[], isName: boolean) => void;
onRename: (old_name: string, new_name: string) => void; onRename: (old_name: string, new_name: string) => void;
}; };
@ -463,18 +450,16 @@ function LibrarySelector({
className="scrollbar-container max-h-[40dvh] min-w-[220px] overflow-y-auto" className="scrollbar-container max-h-[40dvh] min-w-[220px] overflow-y-auto"
align="start" align="start"
> >
{trainImages.length > 0 && ( <DropdownMenuItem
<DropdownMenuItem className="flex cursor-pointer items-center justify-start gap-2"
className="flex cursor-pointer items-center justify-start gap-2" aria-label={t("train.aria")}
aria-label={t("train.aria")} onClick={() => setPageToggle("train")}
onClick={() => setPageToggle("train")} >
> <div>{t("train.title")}</div>
<div>{t("train.title")}</div> <div className="text-secondary-foreground">
<div className="text-secondary-foreground"> ({trainImages.length})
({trainImages.length}) </div>
</div> </DropdownMenuItem>
</DropdownMenuItem>
)}
{trainImages.length > 0 && faces.length > 0 && ( {trainImages.length > 0 && faces.length > 0 && (
<> <>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -624,6 +609,15 @@ function TrainingGrid({
config?.ui.timezone, config?.ui.timezone,
); );
if (attemptImages.length == 0) {
return (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderCheck className="size-16" />
{t("train.empty")}
</div>
);
}
return ( return (
<> <>
<Dialog <Dialog