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

Improve layout

Browse Source
This commit is contained in:
Nicolas Mowen 2025-06-04 11:10:10 -06:00
parent a34464f5ea
commit 11203398eb
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -505,11 +505,11 @@ function DatasetGrid({
const { t } = useTranslation(["views/classificationModel"]); const { t } = useTranslation(["views/classificationModel"]);
return ( return (
<div className="grid grid-cols-10 gap-2 overflow-y-auto p-2"> <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
{images.map((image) => ( {images.map((image) => (
<div <div
className={cn( className={cn(
"flex h-60 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]", "flex w-60 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]",
selectedImages.includes(image) selectedImages.includes(image)
? "shadow-selected outline-selected" ? "shadow-selected outline-selected"
: "outline-transparent duration-500", : "outline-transparent duration-500",
@ -581,7 +581,8 @@ function TrainGrid({
const trainData = useMemo( const trainData = useMemo(
() => () =>
trainImages.map((raw) => { trainImages
.map((raw) => {
const parts = raw.replaceAll(".webp", "").split("-"); const parts = raw.replaceAll(".webp", "").split("-");
return { return {
raw, raw,
@ -589,17 +590,18 @@ function TrainGrid({
label: parts[1], label: parts[1],
score: Number.parseFloat(parts[2]) * 100, score: Number.parseFloat(parts[2]) * 100,
}; };
}), })
.sort((a, b) => b.timestamp.localeCompare(a.timestamp)),
[trainImages], [trainImages],
); );
return ( return (
<div className="grid grid-cols-10 gap-2 overflow-y-auto px-2"> <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
{trainData?.map((data) => ( {trainData?.map((data) => (
<div <div
key={data.timestamp} key={data.timestamp}
className={cn( className={cn(
"flex cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]", "flex w-56 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]",
selectedImages.includes(data.raw) selectedImages.includes(data.raw)
? "shadow-selected outline-selected" ? "shadow-selected outline-selected"
: "outline-transparent duration-500", : "outline-transparent duration-500",
@ -616,7 +618,7 @@ function TrainGrid({
)} )}
> >
<img <img
className="h-48 rounded-lg" className="w-56 rounded-lg"
src={`${baseUrl}clips/${model.name}/train/${data.raw}`} src={`${baseUrl}clips/${model.name}/train/${data.raw}`}
/> />
</div> </div>