Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-08-08 13:51:01 +02:00
Code Issues Projects Releases Wiki Activity

Classification model cover images (#18843)

Browse Source 
* Move to separate component

* Add cover images for clssification models
This commit is contained in:
Nicolas Mowen 2025-06-23 08:40:28 -06:00
parent b17f0c4a30
commit da2d52645f
1 changed files with 54 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/views/classification/ModelSelectionView.tsx
View File

@ -1,3 +1,4 @@
import { baseUrl } from "@/api/baseUrl";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { cn } from "@/lib/utils";
import {
@ -37,27 +38,60 @@ export default function ModelSelectionView({
return (
<div className="flex size-full gap-2 p-2">
{classificationConfigs.map((config) => (
<div
key={config.name}
className={cn(
"flex h-52 cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
"outline-transparent duration-500",
isMobile && "w-full",
)}
onClick={() => onClick(config)}
onContextMenu={() => {
// e.stopPropagation();
// e.preventDefault();
// handleClickEvent(true);
}}
>
<div className="size-48"></div>
<div className="smart-capitalize">
{config.name} ({config.state_config != null ? "State" : "Object"}{" "}
Classification)
</div>
</div>
<ModelCard config={config} onClick={() => onClick(config)} />
))}
</div>
);
}
type ModelCardProps = {
config: CustomClassificationModelConfig;
onClick: () => void;
};
function ModelCard({ config, onClick }: ModelCardProps) {
const { data: dataset } = useSWR<{
[id: string]: string[];
}>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });
const coverImages = useMemo(() => {
if (!dataset) {
return {};
}
const imageMap: { [key: string]: string } = {};
for (const [key, imageList] of Object.entries(dataset)) {
if (imageList.length > 0) {
imageMap[key] = imageList[0];
}
}
return imageMap;
}, [dataset]);
return (
<div
key={config.name}
className={cn(
"flex h-60 cursor-pointer flex-col items-center gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
"outline-transparent duration-500",
isMobile && "w-full",
)}
onClick={() => onClick()}
>
<div className="grid size-48 grid-cols-2 gap-2">
{Object.entries(coverImages).map(([key, image]) => (
<img
key={key}
className=""
src={`${baseUrl}clips/${config.name}/dataset/${key}/${image}`}
/>
))}
</div>
<div className="smart-capitalize">
{config.name} ({config.state_config != null ? "State" : "Object"}{" "}
Classification)
</div>
</div>
);
}