Improvements to gradients and making face library consistent

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,
@@ -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,8 +41,8 @@
     "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },
   "train": {
-    "title": "Train",
-    "aria": "Select Train"
+    "title": "Recent Classifications",
+    "aria": "Select Recent Classifications"
   },
   "categories": "Classes",
   "createCategory": {

web/src/components/card/ClassificationCard.tsx

@@ -72,59 +72,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]",
-          className,
-          selected
-            ? "shadow-selected outline-selected"
-            : "outline-transparent duration-500",
+          "absolute bottom-0 left-0 right-0 top-0 size-full",
+          imgClassName,
+          isMobile && "w-full",
         )}
-      >
-        <div className="relative w-full select-none overflow-hidden rounded-lg">
-          <img
-            ref={imgRef}
-            onLoad={() => setImageLoaded(true)}
-            className={cn("size-44", imgClassName, isMobile && "w-full")}
-            src={`${baseUrl}${data.filepath}`}
-            onClick={(e) => {
-              e.stopPropagation();
-              onClick(data, e.metaKey || e.ctrlKey);
-            }}
-          />
-          {imageArea != undefined && (
-            <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
-              {t("information.pixels", { ns: "common", area: imageArea })}
+        onLoad={() => setImageLoaded(true)}
+        src={`${baseUrl}${data.filepath}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick(data, e.metaKey || e.ctrlKey);
+        }}
+      />
+      {false && imageArea != undefined && (
+        <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
+          {t("information.pixels", { ns: "common", area: imageArea })}
+        </div>
+      )}
+      <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
+      <div className="absolute bottom-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
+        <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 w-full flex-row items-center justify-between gap-2">
-            <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 className="flex flex-row items-start justify-end gap-5 md:gap-2">
+          {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

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>
@@ -954,7 +954,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/views/classification/ModelSelectionView.tsx

@@ -1,31 +1,56 @@
 import { baseUrl } from "@/api/baseUrl";
 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);
-  }, [config]);
+    const allModels = Object.values(config.classification.custom);
+
+    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]);
 
   if (!config) {
     return <ActivityIndicator />;
@@ -36,14 +61,53 @@ export default function ModelSelectionView({
   }
 
   return (
-    <div className="flex size-full gap-2 p-2">
-      {classificationConfigs.map((config) => (
-        <ModelCard
-          key={config.name}
-          config={config}
-          onClick={() => onClick(config)}
-        />
-      ))}
+    <div className="flex size-full flex-col p-2">
+      <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">
+            <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 +121,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)) {
-      if (imageList.length > 0) {
-        imageMap[key] = imageList[0];
-      }
-    }
-
-    return imageMap;
+    return {
+      name: selectedKey,
+      img: dataset[selectedKey][0],
+    };
   }, [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
-        className={cn("grid size-48 grid-cols-2 gap-2", isMobile && "w-full")}
-      >
-        {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)
+      <img
+        className={cn("size-full", isMobile && "w-full")}
+        src={`${baseUrl}clips/${config.name}/dataset/${coverImage?.name}/${coverImage?.img}`}
+      />
+      <div className="absolute bottom-0 h-[50%] w-full bg-gradient-to-t from-black/60 to-transparent" />
+      <div className="absolute bottom-2 left-3 text-lg smart-capitalize">
+        {config.name}
       </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>
@@ -650,7 +651,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 +758,6 @@ function TrainGrid({
       selectedImages={selectedImages}
       onClickImages={onClickImages}
       onRefresh={onRefresh}
-      onDelete={onDelete}
     />
   );
 }
@@ -780,10 +780,7 @@ function StateTrainGrid({
   selectedImages,
   onClickImages,
   onRefresh,
-  onDelete,
 }: StateTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
   const threshold = useMemo(() => {
     return {
       recognition: model.threshold,
@@ -817,22 +814,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 +830,6 @@ type ObjectTrainGridProps = {
   selectedImages: string[];
   onClickImages: (images: string[], ctrl: boolean) => void;
   onRefresh: () => void;
-  onDelete: (ids: string[]) => void;
 };
 function ObjectTrainGrid({
   model,
@@ -857,10 +839,7 @@ function ObjectTrainGrid({
   selectedImages,
   onClickImages,
   onRefresh,
-  onDelete,
 }: ObjectTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
   // item data
 
   const groups = useMemo(() => {
@@ -980,22 +959,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>