Refactor face card into generic classification card

frigate/data_processing/post/review_descriptions.py

@@ -248,9 +248,7 @@ def run_analysis(
         "id": final_data["id"],
         "camera": camera,
         "zones": final_data["data"]["zones"],
-        "start": datetime.datetime.fromtimestamp(final_data["start_time"]).strftime(
+        "start": "03:33:10 AM",
-            "%A, %I:%M %p"
-        ),
         "duration": round(final_data["end_time"] - final_data["start_time"]),
     }
 

web/src/components/card/ClassificationCard.tsx

@@ -0,0 +1,118 @@
+import { baseUrl } from "@/api/baseUrl";
+import useContextMenu from "@/hooks/use-contextmenu";
+import { cn } from "@/lib/utils";
+import {
+  ClassificationItemData,
+  ClassificationThreshold,
+} from "@/types/classification";
+import { useMemo, useRef, useState } from "react";
+import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+
+type ClassificationCardProps = {
+  className?: string;
+  data: ClassificationItemData;
+  threshold?: ClassificationThreshold;
+  selected: boolean;
+  i18nLibrary: string;
+  onClick: (data: ClassificationItemData, meta: boolean) => void;
+  children?: React.ReactNode;
+};
+export function ClassificationCard({
+  className,
+  data,
+  threshold,
+  selected,
+  i18nLibrary,
+  onClick,
+  children,
+}: ClassificationCardProps) {
+  const { t } = useTranslation([i18nLibrary]);
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const scoreStatus = useMemo(() => {
+    if (!data.score || !threshold) {
+      return "unknown";
+    }
+
+    if (data.score >= threshold.recognition) {
+      return "match";
+    } else if (data.score >= threshold.unknown) {
+      return "potential";
+    } else {
+      return "unknown";
+    }
+  }, [data, threshold]);
+
+  // interaction
+
+  const imgRef = useRef<HTMLImageElement | null>(null);
+
+  useContextMenu(imgRef, () => {
+    onClick(data, true);
+  });
+
+  const imageArea = useMemo(() => {
+    if (imgRef.current == null || !imageLoaded) {
+      return undefined;
+    }
+
+    return imgRef.current.naturalWidth * imgRef.current.naturalHeight;
+  }, [imageLoaded]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative flex cursor-pointer flex-col rounded-lg outline outline-[3px]",
+          className,
+          selected
+            ? "shadow-selected outline-selected"
+            : "outline-transparent duration-500",
+        )}
+      >
+        <div className="relative w-full select-none overflow-hidden rounded-lg">
+          <img
+            ref={imgRef}
+            onLoad={() => setImageLoaded(true)}
+            className={cn("size-44", 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("pixels", { area: imageArea })}
+            </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>
+      </div>
+    </>
+  );
+}

web/src/pages/FaceLibrary.tsx

@@ -1,4 +1,3 @@
-import { baseUrl } from "@/api/baseUrl";
 import TimeAgo from "@/components/dynamic/TimeAgo";
 import AddFaceIcon from "@/components/icons/AddFaceIcon";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -37,13 +36,12 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import useContextMenu from "@/hooks/use-contextmenu";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import { cn } from "@/lib/utils";
 import { Event } from "@/types/event";
-import { FaceLibraryData, RecognizedFaceData } from "@/types/face";
+import { FaceLibraryData } from "@/types/face";
-import { FaceRecognitionConfig, FrigateConfig } from "@/types/frigateConfig";
+import { FrigateConfig } from "@/types/frigateConfig";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import axios from "axios";
 import {
@@ -72,6 +70,8 @@ import SearchDetailDialog, {
   SearchTab,
 } from "@/components/overlay/detail/SearchDetailDialog";
 import { SearchResult } from "@/types/search";
+import { ClassificationCard } from "@/components/card/ClassificationCard";
+import { ClassificationItemData } from "@/types/classification";
 
 export default function FaceLibrary() {
   const { t } = useTranslation(["views/faceLibrary"]);
@@ -641,7 +641,7 @@ function TrainingGrid({
   // face data
 
   const faceGroups = useMemo(() => {
-    const groups: { [eventId: string]: RecognizedFaceData[] } = {};
+    const groups: { [eventId: string]: ClassificationItemData[] } = {};
 
     const faces = attemptImages
       .map((image) => {
@@ -650,6 +650,7 @@ function TrainingGrid({
         try {
           return {
             filename: image,
+            filepath: `clips/faces/train/${image}`,
             timestamp: Number.parseFloat(parts[2]),
             eventId: `${parts[0]}-${parts[1]}`,
             name: parts[3],
@@ -739,7 +740,7 @@ function TrainingGrid({
 
 type FaceAttemptGroupProps = {
   config: FrigateConfig;
-  group: RecognizedFaceData[];
+  group: ClassificationItemData[];
   event?: Event;
   faceNames: string[];
   selectedFaces: string[];
@@ -767,6 +768,23 @@ function FaceAttemptGroup({
     [group, selectedFaces],
   );
 
+  const threshold = useMemo(() => {
+    return {
+      recognition: config.face_recognition.recognition_threshold,
+      unknown: config.face_recognition.unknown_score,
+    };
+  }, [config]);
+
+  const time = useMemo(() => {
+    const item = group[0];
+
+    if (!item?.timestamp) {
+      return undefined;
+    }
+
+    return item.timestamp * 1000;
+  }, [group]);
+
   // interaction
 
   const handleClickEvent = useCallback(
@@ -799,6 +817,63 @@ function FaceAttemptGroup({
     [event, group, selectedFaces, onClickFaces, onSelectEvent],
   );
 
+  // api calls
+
+  const onTrainAttempt = useCallback(
+    (data: ClassificationItemData, trainName: string) => {
+      axios
+        .post(`/faces/train/${trainName}/classify`, {
+          training_file: data.filename,
+        })
+        .then((resp) => {
+          if (resp.status == 200) {
+            toast.success(t("toast.success.trainedFace"), {
+              position: "top-center",
+            });
+            onRefresh();
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(t("toast.error.trainFailed", { errorMessage }), {
+            position: "top-center",
+          });
+        });
+    },
+    [onRefresh, t],
+  );
+
+  const onReprocess = useCallback(
+    (data: ClassificationItemData) => {
+      axios
+        .post(`/faces/reprocess`, { training_file: data.filename })
+        .then((resp) => {
+          if (resp.status == 200) {
+            toast.success(t("toast.success.updatedFaceScore"), {
+              position: "top-center",
+            });
+            onRefresh();
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(
+            t("toast.error.updateFaceScoreFailed", { errorMessage }),
+            {
+              position: "top-center",
+            },
+          );
+        });
+    },
+    [onRefresh, t],
+  );
+
   return (
     <div
       className={cn(
@@ -827,11 +902,13 @@ function FaceAttemptGroup({
               ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
               : ": " + t("details.unknown")}
           </div>
-          <TimeAgo
+          {time && (
-            className="text-sm text-secondary-foreground"
+            <TimeAgo
-            time={group[0].timestamp * 1000}
+              className="text-sm text-secondary-foreground"
-            dense
+              time={time}
-          />
+              dense
+            />
+          )}
         </div>
         {event && (
           <Tooltip>
@@ -864,15 +941,15 @@ function FaceAttemptGroup({
             : "grid grid-cols-2 sm:grid-cols-5 lg:grid-cols-6",
         )}
       >
-        {group.map((data: RecognizedFaceData) => (
+        {group.map((data: ClassificationItemData) => (
-          <FaceAttempt
+          <ClassificationCard
             key={data.filename}
             data={data}
-            faceNames={faceNames}
+            threshold={threshold}
-            recognitionConfig={config.face_recognition}
             selected={
               allFacesSelected ? false : selectedFaces.includes(data.filename)
             }
+            i18nLibrary="views/faceLibrary"
             onClick={(data, meta) => {
               if (meta || selectedFaces.length > 0) {
                 onClickFaces([data.filename], true);
@@ -880,178 +957,29 @@ function FaceAttemptGroup({
                 onSelectEvent(event);
               }
             }}
-            onRefresh={onRefresh}
+          >
-          />
+            <FaceSelectionDialog
+              faceNames={faceNames}
+              onTrainAttempt={(name) => onTrainAttempt(data, name)}
+            >
+              <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            </FaceSelectionDialog>
+            <Tooltip>
+              <TooltipTrigger>
+                <LuRefreshCw
+                  className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                  onClick={() => onReprocess(data)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
+            </Tooltip>
+          </ClassificationCard>
         ))}
       </div>
     </div>
   );
 }
 
-type FaceAttemptProps = {
-  data: RecognizedFaceData;
-  faceNames: string[];
-  recognitionConfig: FaceRecognitionConfig;
-  selected: boolean;
-  onClick: (data: RecognizedFaceData, meta: boolean) => void;
-  onRefresh: () => void;
-};
-function FaceAttempt({
-  data,
-  faceNames,
-  recognitionConfig,
-  selected,
-  onClick,
-  onRefresh,
-}: FaceAttemptProps) {
-  const { t } = useTranslation(["views/faceLibrary"]);
-  const [imageLoaded, setImageLoaded] = useState(false);
-
-  const scoreStatus = useMemo(() => {
-    if (data.score >= recognitionConfig.recognition_threshold) {
-      return "match";
-    } else if (data.score >= recognitionConfig.unknown_score) {
-      return "potential";
-    } else {
-      return "unknown";
-    }
-  }, [data, recognitionConfig]);
-
-  // interaction
-
-  const imgRef = useRef<HTMLImageElement | null>(null);
-
-  useContextMenu(imgRef, () => {
-    onClick(data, true);
-  });
-
-  const imageArea = useMemo(() => {
-    if (imgRef.current == null || !imageLoaded) {
-      return undefined;
-    }
-
-    return imgRef.current.naturalWidth * imgRef.current.naturalHeight;
-  }, [imageLoaded]);
-
-  // api calls
-
-  const onTrainAttempt = useCallback(
-    (trainName: string) => {
-      axios
-        .post(`/faces/train/${trainName}/classify`, {
-          training_file: data.filename,
-        })
-        .then((resp) => {
-          if (resp.status == 200) {
-            toast.success(t("toast.success.trainedFace"), {
-              position: "top-center",
-            });
-            onRefresh();
-          }
-        })
-        .catch((error) => {
-          const errorMessage =
-            error.response?.data?.message ||
-            error.response?.data?.detail ||
-            "Unknown error";
-          toast.error(t("toast.error.trainFailed", { errorMessage }), {
-            position: "top-center",
-          });
-        });
-    },
-    [data, onRefresh, t],
-  );
-
-  const onReprocess = useCallback(() => {
-    axios
-      .post(`/faces/reprocess`, { training_file: data.filename })
-      .then((resp) => {
-        if (resp.status == 200) {
-          toast.success(t("toast.success.updatedFaceScore"), {
-            position: "top-center",
-          });
-          onRefresh();
-        }
-      })
-      .catch((error) => {
-        const errorMessage =
-          error.response?.data?.message ||
-          error.response?.data?.detail ||
-          "Unknown error";
-        toast.error(t("toast.error.updateFaceScoreFailed", { errorMessage }), {
-          position: "top-center",
-        });
-      });
-  }, [data, onRefresh, t]);
-
-  return (
-    <>
-      <div
-        className={cn(
-          "relative flex cursor-pointer flex-col rounded-lg outline outline-[3px]",
-          selected
-            ? "shadow-selected outline-selected"
-            : "outline-transparent duration-500",
-        )}
-      >
-        <div className="relative w-full select-none overflow-hidden rounded-lg">
-          <img
-            ref={imgRef}
-            onLoad={() => setImageLoaded(true)}
-            className={cn("size-44", isMobile && "w-full")}
-            src={`${baseUrl}clips/faces/train/${data.filename}`}
-            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("pixels", { area: imageArea })}
-            </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>
-              <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">
-              <FaceSelectionDialog
-                faceNames={faceNames}
-                onTrainAttempt={onTrainAttempt}
-              >
-                <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
-              </FaceSelectionDialog>
-              <Tooltip>
-                <TooltipTrigger>
-                  <LuRefreshCw
-                    className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                    onClick={() => onReprocess()}
-                  />
-                </TooltipTrigger>
-                <TooltipContent>{t("button.reprocessFace")}</TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
 type FaceGridProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
   faceImages: string[];
@@ -1093,80 +1021,32 @@ function FaceGrid({
       )}
     >
       {sortedFaces.map((image: string) => (
-        <FaceImage
+        <ClassificationCard
+          className="gap-2 rounded-lg bg-card p-2"
           key={image}
-          name={pageToggle}
+          data={{
-          image={image}
+            name: pageToggle,
+            filename: image,
+            filepath: `clips/faces/${pageToggle}/${image}`,
+          }}
           selected={selectedFaces.includes(image)}
-          onClickFaces={onClickFaces}
+          i18nLibrary="views/faceLibrary"
-          onDelete={onDelete}
+          onClick={(data, meta) => onClickFaces([data.filename], meta)}
-        />
+        >
+          <Tooltip>
+            <TooltipTrigger>
+              <LuTrash2
+                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(pageToggle, [image]);
+                }}
+              />
+            </TooltipTrigger>
+            <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
+          </Tooltip>
+        </ClassificationCard>
       ))}
     </div>
   );
 }
-
-type FaceImageProps = {
-  name: string;
-  image: string;
-  selected: boolean;
-  onClickFaces: (images: string[], ctrl: boolean) => void;
-  onDelete: (name: string, ids: string[]) => void;
-};
-function FaceImage({
-  name,
-  image,
-  selected,
-  onClickFaces,
-  onDelete,
-}: FaceImageProps) {
-  const { t } = useTranslation(["views/faceLibrary"]);
-
-  return (
-    <div
-      className={cn(
-        "flex cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]",
-        selected
-          ? "shadow-selected outline-selected"
-          : "outline-transparent duration-500",
-      )}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClickFaces([image], e.ctrlKey || e.metaKey);
-      }}
-    >
-      <div
-        className={cn(
-          "w-full overflow-hidden p-2 *:text-card-foreground",
-          isMobile && "flex justify-center",
-        )}
-      >
-        <img
-          className="h-40 rounded-lg"
-          src={`${baseUrl}clips/faces/${name}/${image}`}
-        />
-      </div>
-      <div className="rounded-b-lg bg-card p-3">
-        <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">{name}</div>
-          </div>
-          <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-            <Tooltip>
-              <TooltipTrigger>
-                <LuTrash2
-                  className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete(name, [image]);
-                  }}
-                />
-              </TooltipTrigger>
-              <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

web/src/types/classification.ts

@@ -6,3 +6,17 @@ export type TrainFilter = {
   min_score?: number;
   max_score?: number;
 };
+
+export type ClassificationItemData = {
+  filepath: string;
+  filename: string;
+  name: string;
+  timestamp?: number;
+  eventId?: string;
+  score?: number;
+};
+
+export type ClassificationThreshold = {
+  recognition: number;
+  unknown: number;
+};

web/src/types/face.ts

@@ -1,11 +1,3 @@
 export type FaceLibraryData = {
   [faceName: string]: string[];
 };
-
-export type RecognizedFaceData = {
-  filename: string;
-  timestamp: number;
-  eventId: string;
-  name: string;
-  score: number;
-};

web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
-const proxyHost = process.env.PROXY_HOST || "localhost:5000";
+const proxyHost = process.env.PROXY_HOST || "192.168.50.106:5002";
 
 // https://vitejs.dev/config/
 export default defineConfig({