Classification Model UI Refactor (#20602)

* Add cutoff for object classification * Add selector for classifiction model type * Improve model selection view * Clean up design of classification card * Tweaks * Adjust button colors * Improvements to gradients and making face library consistent * Add basic classification model wizard * Use relative coordinates * Properly get resolution * Clean up exports * Cleanup * Cleanup * Update to use pre-defined component for image shadow * Refactor image grouping * Clean up mobile * Clean up decision logic * Remove max check on classification objects * Increase default number of faces shown * Cleanup * Improve mobile layout * Clenaup * Update vocabulary * Fix layout * Fix page * Cleanup * Choose last item for unknown objects * Move explore button * Cleanup grid * Cleanup classification * Cleanup grid * Cleanup * Set transparency * Set unknown * Don't filter all configs * Check length
2026-03-07 02:18:07 +01:00 · 2025-10-22 07:36:09 -06:00
parent 9638e85a1f
commit d6f5d2b0fa
23 changed files with 666 additions and 434 deletions
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -1,24 +1,39 @@
 import { baseUrl } from "@/api/baseUrl";
+import ClassificationModelWizardDialog from "@/components/classification/ClassificationModelWizardDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ImageShadowOverlay } from "@/components/overlay/ImageShadowOverlay";
+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 [];
@@ -27,6 +42,24 @@ export default function ModelSelectionView({
    return Object.values(config.classification.custom);
  }, [config]);

+  const selectedClassificationConfigs = useMemo(() => {
+    return classificationConfigs.filter((model) => {
+      if (pageToggle == "objects" && model.object_config != undefined) {
+        return true;
+      }
+
+      if (pageToggle == "states" && model.state_config != undefined) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [classificationConfigs, pageToggle]);
+
+  // new model wizard
+
+  const [newModel, setNewModel] = useState(false);
+
  if (!config) {
    return <ActivityIndicator />;
  }
@@ -36,14 +69,62 @@ 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">
+      <ClassificationModelWizardDialog
+        open={newModel}
+        onClose={() => setNewModel(false)}
+      />
+
+      <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">
+        {selectedClassificationConfigs.map((config) => (
+          <ModelCard
+            key={config.name}
+            config={config}
+            onClick={() => onClick(config)}
+          />
+        ))}
+      </div>
    </div>
  );
 }
@@ -57,46 +138,37 @@ function ModelCard({ config, onClick }: ModelCardProps) {
    [id: string]: string[];
  }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });

-  const coverImages = useMemo(() => {
-    if (!dataset) {
-      return {};
+  const coverImage = useMemo(() => {
+    if (!dataset?.length) {
+      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}`}
+      />
+      <ImageShadowOverlay />
+      <div className="absolute bottom-2 left-3 text-lg smart-capitalize">
+        {config.name}
      </div>
    </div>
  );
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -44,7 +44,7 @@ import {
  useRef,
  useState,
 } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isDesktop } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { toast } from "sonner";
@@ -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>
@@ -631,37 +632,36 @@ function DatasetGrid({
  return (
    <div
      ref={contentRef}
-      className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
+      className="scrollbar-container grid grid-cols-2 gap-2 overflow-y-scroll p-1 md:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12"
    >
      {classData.map((image) => (
-        <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)}
-        >
-          <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 key={image} className="aspect-square w-full">
+          <ClassificationCard
+            data={{
+              filename: image,
+              filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
+              name: "",
+            }}
+            selected={selectedImages.includes(image)}
+            i18nLibrary="views/classificationModel"
+            onClick={(data, _) => onClickImages([data.filename], true)}
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <LuTrash2
+                  className="size-5 cursor-pointer text-primary-variant hover:text-danger"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete([image]);
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("button.deleteClassificationAttempts")}
+              </TooltipContent>
+            </Tooltip>
+          </ClassificationCard>
+        </div>
      ))}
    </div>
  );
@@ -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,
@@ -795,45 +791,29 @@ function StateTrainGrid({
    <div
      ref={contentRef}
      className={cn(
-        "scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2",
-        isMobile && "justify-center",
+        "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
      )}
    >
      {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}
-          selected={selectedImages.includes(data.filename)}
-          i18nLibrary="views/classificationModel"
-          showArea={false}
-          onClick={(data, meta) => onClickImages([data.filename], meta)}
-        >
-          <ClassificationSelectionDialog
-            classes={classes}
-            modelName={model.name}
-            image={data.filename}
-            onRefresh={onRefresh}
+        <div key={data.filename} className="aspect-square w-full">
+          <ClassificationCard
+            data={data}
+            threshold={threshold}
+            selected={selectedImages.includes(data.filename)}
+            i18nLibrary="views/classificationModel"
+            showArea={false}
+            onClick={(data, meta) => onClickImages([data.filename], meta)}
          >
-            <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>
+            <ClassificationSelectionDialog
+              classes={classes}
+              modelName={model.name}
+              image={data.filename}
+              onRefresh={onRefresh}
+            >
+              <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+            </ClassificationSelectionDialog>
+          </ClassificationCard>
+        </div>
      ))}
    </div>
  );
@@ -847,7 +827,6 @@ type ObjectTrainGridProps = {
  selectedImages: string[];
  onClickImages: (images: string[], ctrl: boolean) => void;
  onRefresh: () => void;
-  onDelete: (ids: string[]) => void;
 };
 function ObjectTrainGrid({
  model,
@@ -857,10 +836,7 @@ function ObjectTrainGrid({
  selectedImages,
  onClickImages,
  onRefresh,
-  onDelete,
 }: ObjectTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
  // item data

  const groups = useMemo(() => {
@@ -950,55 +926,43 @@ function ObjectTrainGrid({

      <div
        ref={contentRef}
-        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+        className={cn(
+          "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
+        )}
      >
        {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 key={key} className="aspect-square w-full">
+              <GroupedClassificationCard
+                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);
+                  }
+                }}
+              >
+                {(data) => (
+                  <>
+                    <ClassificationSelectionDialog
+                      classes={classes}
+                      modelName={model.name}
+                      image={data.filename}
+                      onRefresh={onRefresh}
+                    >
+                      <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+                    </ClassificationSelectionDialog>
+                  </>
+                )}
+              </GroupedClassificationCard>
+            </div>
          );
        })}
      </div>