Cleanup

docs/docs/configuration/reference.md

@@ -671,20 +671,18 @@ lpr:
   # Optional: List of regex replacement rules to normalize detected plates (default: shown below)
   replace_rules: {}
 
-# Optional: Configuration for AI generated tracked object descriptions
+# Optional: Configuration for AI / LLM provider
 # WARNING: Depending on the provider, this will send thumbnails over the internet
-# to Google or OpenAI's LLMs to generate descriptions. It can be overridden at
+# to Google or OpenAI's LLMs to generate descriptions. GenAI features can be configured at
-# the camera level (enabled: False) to enhance privacy for indoor cameras.
+# the camera level to enhance privacy for indoor cameras.
 genai:
-  # Optional: Enable AI description generation (default: shown below)
+  # Required: Provider must be one of ollama, gemini, or openai
-  enabled: False
-  # Required if enabled: Provider must be one of ollama, gemini, or openai
   provider: ollama
   # Required if provider is ollama. May also be used for an OpenAI API compatible backend with the openai provider.
   base_url: http://localhost::11434
   # Required if gemini or openai
   api_key: "{FRIGATE_GENAI_API_KEY}"
-  # Required if enabled: The model to use with the provider.
+  # Required: The model to use with the provider.
   model: gemini-1.5-flash
   # Optional additional args to pass to the GenAI Provider (default: None)
   provider_options:

frigate/config/classification.py

@@ -69,7 +69,7 @@ class BirdClassificationConfig(FrigateBaseModel):
 
 
 class CustomClassificationStateCameraConfig(FrigateBaseModel):
-    crop: list[int, int, int, int] = Field(
+    crop: list[float, float, float, float] = Field(
         title="Crop of image frame on this camera to run classification on."
     )
 

frigate/data_processing/real_time/custom_classification.py

@@ -35,6 +35,10 @@ except ModuleNotFoundError:
 logger = logging.getLogger(__name__)
 
 
+MAX_CLASSIFICATION_VERIFICATION_ATTEMPTS = 6
+MAX_CLASSIFICATION_ATTEMPTS = 12
+
+
 class CustomStateClassificationProcessor(RealTimeProcessorApi):
     def __init__(
         self,
@@ -96,10 +100,10 @@ class CustomStateClassificationProcessor(RealTimeProcessorApi):
 
         camera_config = self.model_config.state_config.cameras[camera]
         crop = [
-            camera_config.crop[0],
+            camera_config.crop[0] * self.config.cameras[camera].detect.width,
-            camera_config.crop[1],
+            camera_config.crop[1] * self.config.cameras[camera].detect.height,
-            camera_config.crop[2],
+            camera_config.crop[2] * self.config.cameras[camera].detect.width,
-            camera_config.crop[3],
+            camera_config.crop[3] * self.config.cameras[camera].detect.height,
         ]
         should_run = False
 
@@ -264,6 +268,26 @@ class CustomObjectClassificationProcessor(RealTimeProcessorApi):
         if obj_data["label"] not in self.model_config.object_config.objects:
             return
 
+        if (
+            obj_data["id"] in self.detected_objects
+            and len(self.detected_objects[obj_data["id"]])
+            >= MAX_CLASSIFICATION_VERIFICATION_ATTEMPTS
+        ):
+            # if we are at max attempts after rec and we have a rec
+            if obj_data.get("sub_label"):
+                logger.debug(
+                    "Not processing due to hitting max attempts after true recognition."
+                )
+                return
+
+            # if we don't have a rec and are at max attempts
+            if (
+                len(self.detected_objects[obj_data["id"]])
+                >= MAX_CLASSIFICATION_ATTEMPTS
+            ):
+                logger.debug("Not processing due to hitting max rec attempts.")
+                return
+
         now = datetime.datetime.now().timestamp()
         x, y, x2, y2 = calculate_region(
             frame.shape,

web/public/locales/en/views/classificationModel.json

@@ -41,13 +41,17 @@
     "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },
   "train": {
-    "title": "Train",
+    "title": "Recent Classifications",
-    "aria": "Select Train"
+    "aria": "Select Recent Classifications"
   },
   "categories": "Classes",
   "createCategory": {
     "new": "Create New Class"
   },
   "categorizeImageAs": "Classify Image As:",
-  "categorizeImage": "Classify Image"
+  "categorizeImage": "Classify Image",
+  "wizard": {
+    "title": "Create New Classification",
+    "description": "Create a new state or object classification model."
+  }
 }

web/public/locales/en/views/faceLibrary.json

@@ -33,8 +33,8 @@
     }
   },
   "train": {
-    "title": "Train",
+    "title": "Recent Recognitions",
-    "aria": "Select train",
+    "aria": "Select recent recognitions",
     "empty": "There are no recent face recognition attempts"
   },
   "selectItem": "Select {{item}}",

web/src/components/card/ClassificationCard.tsx

@@ -17,7 +17,6 @@ import { useNavigate } from "react-router-dom";
 import { getTranslatedLabel } from "@/utils/i18n";
 
 type ClassificationCardProps = {
-  className?: string;
   imgClassName?: string;
   data: ClassificationItemData;
   threshold?: ClassificationThreshold;
@@ -28,7 +27,6 @@ type ClassificationCardProps = {
   children?: React.ReactNode;
 };
 export function ClassificationCard({
-  className,
   imgClassName,
   data,
   threshold,
@@ -72,59 +70,62 @@ export function ClassificationCard({
   }, [showArea, imageLoaded]);
 
   return (
-    <>
+    <div
-      <div
+      className={cn(
+        "relative flex size-48 cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        selected
+          ? "shadow-selected outline-selected"
+          : "outline-transparent duration-500",
+      )}
+    >
+      <img
+        ref={imgRef}
         className={cn(
-          "relative flex cursor-pointer flex-col rounded-lg outline outline-[3px]",
+          "absolute bottom-0 left-0 right-0 top-0 size-full",
-          className,
+          imgClassName,
-          selected
+          isMobile && "w-full",
-            ? "shadow-selected outline-selected"
-            : "outline-transparent duration-500",
         )}
-      >
+        onLoad={() => setImageLoaded(true)}
-        <div className="relative w-full select-none overflow-hidden rounded-lg">
+        src={`${baseUrl}${data.filepath}`}
-          <img
+        onClick={(e) => {
-            ref={imgRef}
+          e.stopPropagation();
-            onLoad={() => setImageLoaded(true)}
+          onClick(data, e.metaKey || e.ctrlKey);
-            className={cn("size-44", imgClassName, isMobile && "w-full")}
+        }}
-            src={`${baseUrl}${data.filepath}`}
+      />
-            onClick={(e) => {
+      {false && imageArea != undefined && (
-              e.stopPropagation();
+        <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
-              onClick(data, e.metaKey || e.ctrlKey);
+          {t("information.pixels", { ns: "common", area: imageArea })}
-            }}
+        </div>
-          />
+      )}
-          {imageArea != undefined && (
+      <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
-            <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-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
-              {t("information.pixels", { ns: "common", area: imageArea })}
+        <div
+          className={cn(
+            "flex flex-col items-start text-white",
+            data.score ? "text-xs" : "text-sm",
+          )}
+        >
+          <div className="smart-capitalize">
+            {data.name == "unknown" ? t("details.unknown") : data.name}
+          </div>
+          {data.score && (
+            <div
+              className={cn(
+                "",
+                scoreStatus == "match" && "text-success",
+                scoreStatus == "potential" && "text-orange-400",
+                scoreStatus == "unknown" && "text-danger",
+              )}
+            >
+              {Math.round(data.score * 100)}%
             </div>
           )}
         </div>
-        <div className="select-none p-2">
+        <div className="flex flex-row items-start justify-end gap-5 md:gap-2">
-          <div className="flex w-full flex-row items-center justify-between gap-2">
+          {children}
-            <div className="flex flex-col items-start text-xs text-primary-variant">
-              <div className="smart-capitalize">
-                {data.name == "unknown" ? t("details.unknown") : data.name}
-              </div>
-              {data.score && (
-                <div
-                  className={cn(
-                    "",
-                    scoreStatus == "match" && "text-success",
-                    scoreStatus == "potential" && "text-orange-400",
-                    scoreStatus == "unknown" && "text-danger",
-                  )}
-                >
-                  {Math.round(data.score * 100)}%
-                </div>
-              )}
-            </div>
-            <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-              {children}
-            </div>
-          </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

web/src/components/card/ExportCard.tsx

@@ -145,7 +145,7 @@ export default function ExportCard({
           <>
             {exportedRecording.thumb_path.length > 0 ? (
               <img
-                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
+                className="absolute inset-0 aspect-video size-full rounded-lg object-cover md:rounded-2xl"
                 src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
                 onLoad={() => setLoading(false)}
               />
@@ -224,10 +224,9 @@ export default function ExportCard({
         {loading && (
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[50%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl" />
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
+        <div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize">
-            {exportedRecording.name.replaceAll("_", " ")}
+          {exportedRecording.name.replaceAll("_", " ")}
-          </div>
         </div>
       </div>
     </>

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import StepIndicator from "../indicators/StepIndicator";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { useState } from "react";
+
+const STEPS = [
+  "classificationWizard.steps.nameAndDefine",
+  "classificationWizard.steps.stateArea",
+  "classificationWizard.steps.chooseExamples",
+  "classificationWizard.steps.train",
+];
+
+type ClassificationModelWizardDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+export default function ClassificationModelWizardDialog({
+  open,
+  onClose,
+}: ClassificationModelWizardDialogProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  // step management
+  const [currentStep, _] = useState(0);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose;
+        }
+      }}
+    >
+      <DialogContent
+        className="max-h-[90dvh] max-w-4xl overflow-y-auto"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <StepIndicator
+          steps={STEPS}
+          currentStep={currentStep}
+          variant="dots"
+          className="mb-4 justify-start"
+        />
+        <DialogHeader>
+          <DialogTitle>{t("wizard.title")}</DialogTitle>
+          {currentStep === 0 && (
+            <DialogDescription>{t("wizard.description")}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="pb-4">
+          <div className="size-full"></div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -20,15 +20,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop, isMobile } from "react-device-detect";
-import { LuPlus } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 import TextEntryDialog from "./dialog/TextEntryDialog";
 import { Button } from "../ui/button";
-import { MdCategory } from "react-icons/md";
 import axios from "axios";
 import { toast } from "sonner";
+import { Separator } from "../ui/separator";
 
 type ClassificationSelectionDialogProps = {
   className?: string;
@@ -97,7 +96,7 @@ export default function ClassificationSelectionDialog({
       );
 
   return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
       {newClass && (
         <TextEntryDialog
           open={true}
@@ -128,23 +127,22 @@ export default function ClassificationSelectionDialog({
                 isMobile && "gap-2 pb-4",
               )}
             >
-              <SelectorItem
-                className="flex cursor-pointer gap-2 smart-capitalize"
-                onClick={() => setNewClass(true)}
-              >
-                <LuPlus />
-                {t("createCategory.new")}
-              </SelectorItem>
               {classes.sort().map((category) => (
                 <SelectorItem
                   key={category}
                   className="flex cursor-pointer gap-2 smart-capitalize"
                   onClick={() => onCategorizeImage(category)}
                 >
-                  <MdCategory />
                   {category.replaceAll("_", " ")}
                 </SelectorItem>
               ))}
+              <Separator />
+              <SelectorItem
+                className="flex cursor-pointer gap-2 smart-capitalize"
+                onClick={() => setNewClass(true)}
+              >
+                {t("createCategory.new")}
+              </SelectorItem>
             </div>
           </SelectorContent>
         </Selector>

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -62,7 +62,7 @@ export default function FaceSelectionDialog({
       );
 
   return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
       {newFace && (
         <TextEntryDialog
           open={true}

web/src/components/overlay/dialog/TrainFilterDialog.tsx

@@ -60,7 +60,7 @@ export default function TrainFilterDialog({
           moreFiltersSelected ? "text-white" : "text-secondary-foreground",
         )}
       />
-      {isDesktop && t("more")}
+      {isDesktop && t("filter")}
     </Button>
   );
   const content = (
@@ -122,7 +122,7 @@ export default function TrainFilterDialog({
   return (
     <PlatformAwareSheet
       trigger={trigger}
-      title={t("more")}
+      title={t("filter")}
       content={content}
       contentClassName={cn(
         "w-auto lg:min-w-[275px] scrollbar-container h-full overflow-auto px-4",

web/src/pages/FaceLibrary.tsx

@@ -881,12 +881,12 @@ function FaceAttemptGroup({
             faceNames={faceNames}
             onTrainAttempt={(name) => onTrainAttempt(data, name)}
           >
-            <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            <AddFaceIcon className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground" />
           </FaceSelectionDialog>
           <Tooltip>
             <TooltipTrigger>
               <LuRefreshCw
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground"
                 onClick={() => onReprocess(data)}
               />
             </TooltipTrigger>
@@ -940,7 +940,6 @@ function FaceGrid({
     >
       {sortedFaces.map((image: string) => (
         <ClassificationCard
-          className="gap-2 rounded-lg bg-card p-2"
           key={image}
           data={{
             name: pageToggle,
@@ -954,7 +953,7 @@ function FaceGrid({
           <Tooltip>
             <TooltipTrigger>
               <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-5 cursor-pointer text-gray-200 hover:text-danger"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete(pageToggle, [image]);

web/src/types/frigateConfig.ts

@@ -304,10 +304,10 @@ export type CustomClassificationModelConfig = {
   enabled: boolean;
   name: string;
   threshold: number;
-  object_config: null | {
+  object_config?: {
     objects: string[];
   };
-  state_config: null | {
+  state_config?: {
     cameras: {
       [cameraName: string]: {
         crop: [number, number, number, number];

web/src/views/classification/ModelSelectionView.tsx

@@ -1,31 +1,61 @@
 import { baseUrl } from "@/api/baseUrl";
+import ClassificationModelWizardDialog from "@/components/classification/ClassificationModelWizardDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 import { cn } from "@/lib/utils";
 import {
   CustomClassificationModelConfig,
   FrigateConfig,
 } from "@/types/frigateConfig";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import { FaFolderPlus } from "react-icons/fa";
 import useSWR from "swr";
 
+const allModelTypes = ["objects", "states"] as const;
+type ModelType = (typeof allModelTypes)[number];
+
 type ModelSelectionViewProps = {
   onClick: (model: CustomClassificationModelConfig) => void;
 };
 export default function ModelSelectionView({
   onClick,
 }: ModelSelectionViewProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+  const [page, setPage] = useState<ModelType>("objects");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
 
+  // data
+
   const classificationConfigs = useMemo(() => {
     if (!config) {
       return [];
     }
 
-    return Object.values(config.classification.custom);
+    const allModels = Object.values(config.classification.custom);
-  }, [config]);
+
+    return allModels.filter((model) => {
+      if (pageToggle == "objects" && model.object_config != undefined) {
+        return true;
+      }
+
+      if (pageToggle == "states" && model.state_config != undefined) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [config, pageToggle]);
+
+  // new model wizard
+
+  const [newModel, setNewModel] = useState(false);
 
   if (!config) {
     return <ActivityIndicator />;
@@ -36,14 +66,62 @@ export default function ModelSelectionView({
   }
 
   return (
-    <div className="flex size-full gap-2 p-2">
+    <div className="flex size-full flex-col p-2">
-      {classificationConfigs.map((config) => (
+      <ClassificationModelWizardDialog
-        <ModelCard
+        open={newModel}
-          key={config.name}
+        onClose={() => setNewModel(false)}
-          config={config}
+      />
-          onClick={() => onClick(config)}
+
-        />
+      <div className="flex h-12 w-full items-center justify-between">
-      ))}
+        <div className="flex flex-row items-center">
+          <ToggleGroup
+            className="*:rounded-md *:px-3 *:py-4"
+            type="single"
+            size="sm"
+            value={pageToggle}
+            onValueChange={(value: ModelType) => {
+              if (value) {
+                // Restrict viewer navigation
+                setPageToggle(value);
+              }
+            }}
+          >
+            {allModelTypes.map((item) => (
+              <ToggleGroupItem
+                key={item}
+                className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                value={item}
+                data-nav-item={item}
+                aria-label={t("selectItem", {
+                  ns: "common",
+                  item: t("menu." + item),
+                })}
+              >
+                <div className="smart-capitalize">{t("menu." + item)}</div>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+        <div className="flex flex-row items-center">
+          <Button
+            className="flex flex-row items-center gap-2"
+            variant="select"
+            onClick={() => setNewModel(true)}
+          >
+            <FaFolderPlus />
+            Add Classification
+          </Button>
+        </div>
+      </div>
+      <div className="flex size-full gap-2 p-2">
+        {classificationConfigs.map((config) => (
+          <ModelCard
+            key={config.name}
+            config={config}
+            onClick={() => onClick(config)}
+          />
+        ))}
+      </div>
     </div>
   );
 }
@@ -57,46 +135,37 @@ function ModelCard({ config, onClick }: ModelCardProps) {
     [id: string]: string[];
   }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });
 
-  const coverImages = useMemo(() => {
+  const coverImage = useMemo(() => {
     if (!dataset) {
-      return {};
+      return undefined;
     }
 
-    const imageMap: { [key: string]: string } = {};
+    const keys = Object.keys(dataset).filter((key) => key != "none");
+    const selectedKey = keys[0];
 
-    for (const [key, imageList] of Object.entries(dataset)) {
+    return {
-      if (imageList.length > 0) {
+      name: selectedKey,
-        imageMap[key] = imageList[0];
+      img: dataset[selectedKey][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]",
+        "relative size-60 cursor-pointer overflow-hidden rounded-lg",
         "outline-transparent duration-500",
         isMobile && "w-full",
       )}
       onClick={() => onClick()}
     >
-      <div
+      <img
-        className={cn("grid size-48 grid-cols-2 gap-2", isMobile && "w-full")}
+        className={cn("size-full", isMobile && "w-full")}
-      >
+        src={`${baseUrl}clips/${config.name}/dataset/${coverImage?.name}/${coverImage?.img}`}
-        {Object.entries(coverImages).map(([key, image]) => (
+      />
-          <img
+      <div className="absolute bottom-0 h-[50%] w-full bg-gradient-to-t from-black/60 to-transparent" />
-            key={key}
+      <div className="absolute bottom-2 left-3 text-lg smart-capitalize">
-            className=""
+        {config.name}
-            src={`${baseUrl}clips/${config.name}/dataset/${key}/${image}`}
-          />
-        ))}
-      </div>
-      <div className="smart-capitalize">
-        {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
-        Classification)
       </div>
     </div>
   );

web/src/views/classification/ModelTrainingView.tsx

@@ -56,7 +56,6 @@ import { ModelState } from "@/types/ws";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useNavigate } from "react-router-dom";
 import { IoMdArrowRoundBack } from "react-icons/io";
-import { MdAutoFixHigh } from "react-icons/md";
 import TrainFilterDialog from "@/components/overlay/dialog/TrainFilterDialog";
 import useApiFilter from "@/hooks/use-api-filter";
 import { ClassificationItemData, TrainFilter } from "@/types/classification";
@@ -69,6 +68,7 @@ import SearchDetailDialog, {
   SearchTab,
 } from "@/components/overlay/detail/SearchDetailDialog";
 import { SearchResult } from "@/types/search";
+import { HiSparkles } from "react-icons/hi";
 
 type ModelTrainingViewProps = {
   model: CustomClassificationModelConfig;
@@ -378,12 +378,13 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
             <Button
               className="flex justify-center gap-2"
               onClick={trainModel}
+              variant="select"
               disabled={modelState != "complete"}
             >
               {modelState == "training" ? (
                 <ActivityIndicator size={20} />
               ) : (
-                <MdAutoFixHigh className="text-secondary-foreground" />
+                <HiSparkles className="text-white" />
               )}
               {isDesktop && t("button.trainModel")}
             </Button>
@@ -636,7 +637,6 @@ function DatasetGrid({
       {classData.map((image) => (
         <ClassificationCard
           key={image}
-          className="w-60 gap-4 rounded-lg bg-card p-2"
           imgClassName="size-auto"
           data={{
             filename: image,
@@ -650,7 +650,7 @@ function DatasetGrid({
           <Tooltip>
             <TooltipTrigger>
               <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-5 cursor-pointer text-primary-variant hover:text-danger"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete([image]);
@@ -757,7 +757,6 @@ function TrainGrid({
       selectedImages={selectedImages}
       onClickImages={onClickImages}
       onRefresh={onRefresh}
-      onDelete={onDelete}
     />
   );
 }
@@ -780,10 +779,7 @@ function StateTrainGrid({
   selectedImages,
   onClickImages,
   onRefresh,
-  onDelete,
 }: StateTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
   const threshold = useMemo(() => {
     return {
       recognition: model.threshold,
@@ -802,7 +798,6 @@ function StateTrainGrid({
       {trainData?.map((data) => (
         <ClassificationCard
           key={data.filename}
-          className="w-60 gap-2 rounded-lg bg-card p-2"
           imgClassName="size-auto"
           data={data}
           threshold={threshold}
@@ -817,22 +812,8 @@ function StateTrainGrid({
             image={data.filename}
             onRefresh={onRefresh}
           >
-            <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground" />
           </ClassificationSelectionDialog>
-          <Tooltip>
-            <TooltipTrigger>
-              <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete([data.filename]);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("button.deleteClassificationAttempts")}
-            </TooltipContent>
-          </Tooltip>
         </ClassificationCard>
       ))}
     </div>
@@ -847,7 +828,6 @@ type ObjectTrainGridProps = {
   selectedImages: string[];
   onClickImages: (images: string[], ctrl: boolean) => void;
   onRefresh: () => void;
-  onDelete: (ids: string[]) => void;
 };
 function ObjectTrainGrid({
   model,
@@ -857,10 +837,7 @@ function ObjectTrainGrid({
   selectedImages,
   onClickImages,
   onRefresh,
-  onDelete,
 }: ObjectTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
   // item data
 
   const groups = useMemo(() => {
@@ -980,22 +957,8 @@ function ObjectTrainGrid({
                     image={data.filename}
                     onRefresh={onRefresh}
                   >
-                    <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+                    <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground" />
                   </ClassificationSelectionDialog>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <LuTrash2
-                        className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDelete([data.filename]);
-                        }}
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {t("button.deleteClassificationAttempts")}
-                    </TooltipContent>
-                  </Tooltip>
                 </>
               )}
             </GroupedClassificationCard>