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

Update classification data card to use classification card

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-07 06:55:41 -06:00
parent 304d39790a
commit 3378ad07b1
3 changed files with 35 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/public/locales/en/common.json
View File

@ -263,5 +263,8 @@
"desc": "Page not found" "desc": "Page not found"
}, },
"selectItem": "Select {{item}}", "selectItem": "Select {{item}}",
"readTheDocumentation": "Read the documentation" "readTheDocumentation": "Read the documentation",
"information": {
"pixels": "{{area}}px"
}
} }

6
web/src/components/card/ClassificationCard.tsx
View File

@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
type ClassificationCardProps = { type ClassificationCardProps = {
className?: string; className?: string;
imgClassName?: string;
data: ClassificationItemData; data: ClassificationItemData;
threshold?: ClassificationThreshold; threshold?: ClassificationThreshold;
selected: boolean; selected: boolean;
@ -20,6 +21,7 @@ type ClassificationCardProps = {
}; };
export function ClassificationCard({ export function ClassificationCard({
className, className,
imgClassName,
data, data,
threshold, threshold,
selected, selected,
@ -75,7 +77,7 @@ export function ClassificationCard({
<img <img
ref={imgRef} ref={imgRef}
onLoad={() => setImageLoaded(true)} onLoad={() => setImageLoaded(true)}
className={cn("size-44", isMobile && "w-full")} className={cn("size-44", imgClassName, isMobile && "w-full")}
src={`${baseUrl}${data.filepath}`} src={`${baseUrl}${data.filepath}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -84,7 +86,7 @@ export function ClassificationCard({
/> />
{imageArea != undefined && ( {imageArea != undefined && (
<div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white"> <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
{t("pixels", { area: imageArea })} {t("information.pixels", { ns: "common", area: imageArea })}
</div> </div>
)} )}
</div> </div>

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

@ -61,6 +61,7 @@ import { MdAutoFixHigh } from "react-icons/md";
import TrainFilterDialog from "@/components/overlay/dialog/TrainFilterDialog"; import TrainFilterDialog from "@/components/overlay/dialog/TrainFilterDialog";
import useApiFilter from "@/hooks/use-api-filter"; import useApiFilter from "@/hooks/use-api-filter";
import { TrainFilter } from "@/types/classification"; import { TrainFilter } from "@/types/classification";
import { ClassificationCard } from "@/components/card/ClassificationCard";
type ModelTrainingViewProps = { type ModelTrainingViewProps = {
model: CustomClassificationModelConfig; model: CustomClassificationModelConfig;
@ -626,53 +627,34 @@ function DatasetGrid({
className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2" className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
> >
{classData.map((image) => ( {classData.map((image) => (
<div <ClassificationCard
className={cn( key={image}
"flex w-60 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]", className="w-60 gap-4 rounded-lg bg-card p-2"
selectedImages.includes(image) imgClassName="size-auto"
? "shadow-selected outline-selected" data={{
: "outline-transparent duration-500", filename: image,
)} filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
onClick={(e) => { name: "",
e.stopPropagation();
if (e.ctrlKey || e.metaKey) {
onClickImages([image], true);
}
}} }}
selected={selectedImages.includes(image)}
i18nLibrary="views/classificationModel"
onClick={(data, _) => onClickImages([data.filename], true)}
> >
<div <Tooltip>
className={cn( <TooltipTrigger>
"w-full overflow-hidden p-2 *:text-card-foreground", <LuTrash2
isMobile && "flex justify-center", className="size-5 cursor-pointer text-primary-variant hover:text-primary"
)} onClick={(e) => {
> e.stopPropagation();
<img onDelete([image]);
className="rounded-lg" }}
src={`${baseUrl}clips/${modelName}/dataset/${categoryName}/${image}`} />
/> </TooltipTrigger>
</div> <TooltipContent>
<div className="rounded-b-lg bg-card p-3"> {t("button.deleteClassificationAttempts")}
<div className="flex w-full flex-row items-center justify-between gap-2"> </TooltipContent>
<div className="flex w-full flex-row items-start justify-end gap-5 md:gap-4"> </Tooltip>
<Tooltip> </ClassificationCard>
<TooltipTrigger>
<LuTrash2
className="size-5 cursor-pointer text-primary-variant hover:text-primary"
onClick={(e) => {
e.stopPropagation();
onDelete([image]);
}}
/>
</TooltipTrigger>
<TooltipContent>
{t("button.deleteClassificationAttempts")}
</TooltipContent>
</Tooltip>
</div>
</div>
</div>
</div>
))} ))}
</div> </div>
); );