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

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/ImageShadowOverlay.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+type ImageShadowOverlayProps = {
+  upperClassName?: string;
+  lowerClassName?: string;
+};
+export function ImageShadowOverlay({
+  upperClassName,
+  lowerClassName,
+}: ImageShadowOverlayProps) {
+  return (
+    <>
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl",
+          upperClassName,
+        )}
+      />
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl",
+          lowerClassName,
+        )}
+      />
+    </>
+  );
+}

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",