Classification Model UI (#18571)

* Setup basic training structure

* Build out route

* Handle model configs

* Add image fetch APIs

* Implement model training screen with dataset selection

* Implement viewing of training images

* Adjust directories

* Implement viewing of images

* Add support for deleting images

* Implement full deletion

* Implement classification model training

* Improve naming

* More renaming

* Improve layout

* Reduce logging

* Cleanup

web/src/views/classification/ModelSelectionView.tsx

@@ -0,0 +1,63 @@
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { cn } from "@/lib/utils";
+import {
+  CustomClassificationModelConfig,
+  FrigateConfig,
+} from "@/types/frigateConfig";
+import { useMemo } from "react";
+import { isMobile } from "react-device-detect";
+import useSWR from "swr";
+
+type ModelSelectionViewProps = {
+  onClick: (model: CustomClassificationModelConfig) => void;
+};
+export default function ModelSelectionView({
+  onClick,
+}: ModelSelectionViewProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const classificationConfigs = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.values(config.classification.custom);
+  }, [config]);
+
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
+  if (classificationConfigs.length == 0) {
+    return <div>You need to setup a custom model configuration.</div>;
+  }
+
+  return (
+    <div className="flex size-full gap-2 p-2">
+      {classificationConfigs.map((config) => (
+        <div
+          key={config.name}
+          className={cn(
+            "flex h-52 cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
+            "outline-transparent duration-500",
+            isMobile && "w-full",
+          )}
+          onClick={() => onClick(config)}
+          onContextMenu={() => {
+            // e.stopPropagation();
+            // e.preventDefault();
+            // handleClickEvent(true);
+          }}
+        >
+          <div className="size-48"></div>
+          <div className="smart-capitalize">
+            {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
+            Classification)
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}