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/card/ExportCard.tsx

@@ -21,6 +21,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { shareOrCopy } from "@/utils/browserUtil";
 import { useTranslation } from "react-i18next";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
 
 type ExportProps = {
   className: string;
@@ -145,7 +146,7 @@ export default function ExportCard({
           <>
             {exportedRecording.thumb_path.length > 0 ? (
               <img
-                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
+                className="absolute inset-0 aspect-video size-full rounded-lg object-cover md:rounded-2xl"
                 src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
                 onLoad={() => setLoading(false)}
               />
@@ -224,10 +225,9 @@ export default function ExportCard({
         {loading && (
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
-            {exportedRecording.name.replaceAll("_", " ")}
-          </div>
+        <ImageShadowOverlay />
+        <div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize">
+          {exportedRecording.name.replaceAll("_", " ")}
         </div>
       </div>
     </>