Generic classification card (#20379)

* Refactor face card into generic classification card

* Update classification data card to use classification card

* Refactor state training grid to use classification card

* Refactor grouped face card into generic component

* Combine classification objects by event

* Fixup

* Cleanup

* Cleanup

* Do not fail if a single event is not found

* Save original frame

* Cleanup

* Undo

web/src/views/classification/ModelSelectionView.tsx

@@ -38,7 +38,11 @@ export default function ModelSelectionView({
   return (
     <div className="flex size-full gap-2 p-2">
       {classificationConfigs.map((config) => (
-        <ModelCard config={config} onClick={() => onClick(config)} />
+        <ModelCard
+          key={config.name}
+          config={config}
+          onClick={() => onClick(config)}
+        />
       ))}
     </div>
   );

web/src/views/classification/ModelTrainingView.tsx

@@ -1,4 +1,3 @@
-import { baseUrl } from "@/api/baseUrl";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -60,7 +59,16 @@ 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 { TrainFilter } from "@/types/classification";
+import { ClassificationItemData, TrainFilter } from "@/types/classification";
+import {
+  ClassificationCard,
+  GroupedClassificationCard,
+} from "@/components/card/ClassificationCard";
+import { Event } from "@/types/event";
+import SearchDetailDialog, {
+  SearchTab,
+} from "@/components/overlay/detail/SearchDetailDialog";
+import { SearchResult } from "@/types/search";
 
 type ModelTrainingViewProps = {
   model: CustomClassificationModelConfig;
@@ -626,53 +634,34 @@ function DatasetGrid({
       className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
     >
       {classData.map((image) => (
-        <div
-          className={cn(
-            "flex w-60 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]",
-            selectedImages.includes(image)
-              ? "shadow-selected outline-selected"
-              : "outline-transparent duration-500",
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-
-            if (e.ctrlKey || e.metaKey) {
-              onClickImages([image], true);
-            }
+        <ClassificationCard
+          key={image}
+          className="w-60 gap-4 rounded-lg bg-card p-2"
+          imgClassName="size-auto"
+          data={{
+            filename: image,
+            filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
+            name: "",
           }}
+          selected={selectedImages.includes(image)}
+          i18nLibrary="views/classificationModel"
+          onClick={(data, _) => onClickImages([data.filename], true)}
         >
-          <div
-            className={cn(
-              "w-full overflow-hidden p-2 *:text-card-foreground",
-              isMobile && "flex justify-center",
-            )}
-          >
-            <img
-              className="rounded-lg"
-              src={`${baseUrl}clips/${modelName}/dataset/${categoryName}/${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 w-full 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([image]);
-                      }}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("button.deleteClassificationAttempts")}
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
+          <Tooltip>
+            <TooltipTrigger>
+              <LuTrash2
+                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete([image]);
+                }}
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              {t("button.deleteClassificationAttempts")}
+            </TooltipContent>
+          </Tooltip>
+        </ClassificationCard>
       ))}
     </div>
   );
@@ -700,20 +689,19 @@ function TrainGrid({
   onRefresh,
   onDelete,
 }: TrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
-  const trainData = useMemo(
+  const trainData = useMemo<ClassificationItemData[]>(
     () =>
       trainImages
         .map((raw) => {
           const parts = raw.replaceAll(".webp", "").split("-");
-          const rawScore = Number.parseFloat(parts[2]);
+          const rawScore = Number.parseFloat(parts[4]);
           return {
-            raw,
-            timestamp: parts[0],
-            label: parts[1],
-            score: rawScore * 100,
-            truePositive: rawScore >= model.threshold,
+            filename: raw,
+            filepath: `clips/${model.name}/train/${raw}`,
+            timestamp: Number.parseFloat(parts[2]),
+            eventId: `${parts[0]}-${parts[1]}`,
+            name: parts[3],
+            score: rawScore,
           };
         })
         .filter((data) => {
@@ -721,10 +709,7 @@ function TrainGrid({
             return true;
           }
 
-          if (
-            trainFilter.classes &&
-            !trainFilter.classes.includes(data.label)
-          ) {
+          if (trainFilter.classes && !trainFilter.classes.includes(data.name)) {
             return false;
           }
 
@@ -744,10 +729,68 @@ function TrainGrid({
 
           return true;
         })
-        .sort((a, b) => b.timestamp.localeCompare(a.timestamp)),
+        .sort((a, b) => b.timestamp - a.timestamp),
     [model, trainImages, trainFilter],
   );
 
+  if (model.state_config) {
+    return (
+      <StateTrainGrid
+        model={model}
+        contentRef={contentRef}
+        classes={classes}
+        trainData={trainData}
+        selectedImages={selectedImages}
+        onClickImages={onClickImages}
+        onRefresh={onRefresh}
+        onDelete={onDelete}
+      />
+    );
+  }
+
+  return (
+    <ObjectTrainGrid
+      model={model}
+      contentRef={contentRef}
+      classes={classes}
+      trainData={trainData}
+      selectedImages={selectedImages}
+      onClickImages={onClickImages}
+      onRefresh={onRefresh}
+      onDelete={onDelete}
+    />
+  );
+}
+
+type StateTrainGridProps = {
+  model: CustomClassificationModelConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  classes: string[];
+  trainData?: ClassificationItemData[];
+  selectedImages: string[];
+  onClickImages: (images: string[], ctrl: boolean) => void;
+  onRefresh: () => void;
+  onDelete: (ids: string[]) => void;
+};
+function StateTrainGrid({
+  model,
+  contentRef,
+  classes,
+  trainData,
+  selectedImages,
+  onClickImages,
+  onRefresh,
+  onDelete,
+}: StateTrainGridProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  const threshold = useMemo(() => {
+    return {
+      recognition: model.threshold,
+      unknown: model.threshold,
+    };
+  }, [model]);
+
   return (
     <div
       ref={contentRef}
@@ -757,74 +800,208 @@ function TrainGrid({
       )}
     >
       {trainData?.map((data) => (
-        <div
-          key={data.timestamp}
-          className={cn(
-            "flex w-56 cursor-pointer flex-col gap-2 rounded-lg bg-card outline outline-[3px]",
-            selectedImages.includes(data.raw)
-              ? "shadow-selected outline-selected"
-              : "outline-transparent duration-500",
-            isMobile && "w-[48%]",
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClickImages([data.raw], e.ctrlKey || e.metaKey);
-          }}
+        <ClassificationCard
+          key={data.filename}
+          className="w-60 gap-2 rounded-lg bg-card p-2"
+          imgClassName="size-auto"
+          data={data}
+          threshold={threshold}
+          selected={selectedImages.includes(data.filename)}
+          i18nLibrary="views/classificationModel"
+          showArea={false}
+          onClick={(data, meta) => onClickImages([data.filename], meta)}
         >
-          <div
-            className={cn(
-              "w-full overflow-hidden p-2 *:text-card-foreground",
-              isMobile && "flex justify-center",
-            )}
+          <ClassificationSelectionDialog
+            classes={classes}
+            modelName={model.name}
+            image={data.filename}
+            onRefresh={onRefresh}
           >
-            <img
-              className="w-56 rounded-lg"
-              src={`${baseUrl}clips/${model.name}/train/${data.raw}`}
-            />
-          </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">
-                  {data.label.replaceAll("_", " ")}
-                </div>
-                <div
-                  className={cn(
-                    "",
-                    data.truePositive ? "text-success" : "text-danger",
-                  )}
-                >
-                  {data.score}%
-                </div>
-              </div>
-              <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-                <ClassificationSelectionDialog
-                  classes={classes}
-                  modelName={model.name}
-                  image={data.raw}
-                  onRefresh={onRefresh}
-                >
-                  <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
-                </ClassificationSelectionDialog>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <LuTrash2
-                      className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDelete([data.raw]);
-                      }}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("button.deleteClassificationAttempts")}
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
+            <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+          </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>
   );
 }
+
+type ObjectTrainGridProps = {
+  model: CustomClassificationModelConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  classes: string[];
+  trainData?: ClassificationItemData[];
+  selectedImages: string[];
+  onClickImages: (images: string[], ctrl: boolean) => void;
+  onRefresh: () => void;
+  onDelete: (ids: string[]) => void;
+};
+function ObjectTrainGrid({
+  model,
+  contentRef,
+  classes,
+  trainData,
+  selectedImages,
+  onClickImages,
+  onRefresh,
+  onDelete,
+}: ObjectTrainGridProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  // item data
+
+  const groups = useMemo(() => {
+    const groups: { [eventId: string]: ClassificationItemData[] } = {};
+
+    trainData
+      ?.sort((a, b) => a.eventId!.localeCompare(b.eventId!))
+      .reverse()
+      .forEach((data) => {
+        if (groups[data.eventId!]) {
+          groups[data.eventId!].push(data);
+        } else {
+          groups[data.eventId!] = [data];
+        }
+      });
+
+    return groups;
+  }, [trainData]);
+
+  const eventIdsQuery = useMemo(() => Object.keys(groups).join(","), [groups]);
+
+  const { data: events } = useSWR<Event[]>([
+    "event_ids",
+    { ids: eventIdsQuery },
+  ]);
+
+  const threshold = useMemo(() => {
+    return {
+      recognition: model.threshold,
+      unknown: model.threshold,
+    };
+  }, [model]);
+
+  // selection
+
+  const [selectedEvent, setSelectedEvent] = useState<Event>();
+  const [dialogTab, setDialogTab] = useState<SearchTab>("details");
+
+  // handlers
+
+  const handleClickEvent = useCallback(
+    (
+      group: ClassificationItemData[],
+      event: Event | undefined,
+      meta: boolean,
+    ) => {
+      if (event && selectedImages.length == 0 && !meta) {
+        setSelectedEvent(event);
+      } else {
+        const anySelected =
+          group.find((item) => selectedImages.includes(item.filename)) !=
+          undefined;
+
+        if (anySelected) {
+          // deselect all
+          const toDeselect: string[] = [];
+          group.forEach((item) => {
+            if (selectedImages.includes(item.filename)) {
+              toDeselect.push(item.filename);
+            }
+          });
+          onClickImages(toDeselect, false);
+        } else {
+          // select all
+          onClickImages(
+            group.map((item) => item.filename),
+            true,
+          );
+        }
+      }
+    },
+    [selectedImages, onClickImages],
+  );
+
+  return (
+    <>
+      <SearchDetailDialog
+        search={
+          selectedEvent ? (selectedEvent as unknown as SearchResult) : undefined
+        }
+        page={dialogTab}
+        setSimilarity={undefined}
+        setSearchPage={setDialogTab}
+        setSearch={(search) => setSelectedEvent(search as unknown as Event)}
+        setInputFocused={() => {}}
+      />
+
+      <div
+        ref={contentRef}
+        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+      >
+        {Object.entries(groups).map(([key, group]) => {
+          const event = events?.find((ev) => ev.id == key);
+          return (
+            <GroupedClassificationCard
+              key={key}
+              group={group}
+              event={event}
+              threshold={threshold}
+              selectedItems={selectedImages}
+              i18nLibrary="views/classificationModel"
+              objectType={model.object_config?.objects?.at(0) ?? "Object"}
+              onClick={(data) => {
+                if (data) {
+                  onClickImages([data.filename], true);
+                } else {
+                  handleClickEvent(group, event, true);
+                }
+              }}
+              onSelectEvent={() => {}}
+            >
+              {(data) => (
+                <>
+                  <ClassificationSelectionDialog
+                    classes={classes}
+                    modelName={model.name}
+                    image={data.filename}
+                    onRefresh={onRefresh}
+                  >
+                    <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+                  </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>
+          );
+        })}
+      </div>
+    </>
+  );
+}