Fixes (#18338)

* improve spacing of face selection in mobile drawer

* fix spacing

* sort face names alphabetically

* Improve face selection dialog

* Use a state to track when face image loads

The naturalWidth and naturalHeight will always be 0 until the image loads. So we use onLoad and a state to track loading and then calculate the area after it has loaded

* Verify that a camera only tracks objects that are possible to track

* Fix test

* genai docs tweak

* Disable openvino model cache

* Clenaup

* Sanitize floats for estimated speed and angle

Users can configure speed zones in such a way that velocity estimates from Norfair cause a value of inf to be stored as an estimated speed. FastAPI doesn't serialize inf as a float, so trying to return this value would result in an API error. Sanitizing the value before storing should correct this.

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -53,7 +53,13 @@ export default function FaceSelectionDialog({
   const Selector = isDesktop ? DropdownMenu : Drawer;
   const SelectorTrigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const SelectorContent = isDesktop ? DropdownMenuContent : DrawerContent;
-  const SelectorItem = isDesktop ? DropdownMenuItem : DrawerClose;
+  const SelectorItem = isDesktop
+    ? DropdownMenuItem
+    : (props: React.HTMLAttributes<HTMLDivElement>) => (
+        <DrawerClose asChild>
+          <div {...props} className={cn(props.className, "my-2")} />
+        </DrawerClose>
+      );
 
   return (
     <div className={className ?? ""}>
@@ -72,10 +78,7 @@ export default function FaceSelectionDialog({
             <TooltipTrigger asChild={isChildButton}>{children}</TooltipTrigger>
           </SelectorTrigger>
           <SelectorContent
-            className={cn(
-              "max-h-[75dvh] overflow-hidden",
-              isMobile && "mx-1 gap-2 rounded-t-2xl px-4",
-            )}
+            className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
@@ -86,8 +89,8 @@ export default function FaceSelectionDialog({
             <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
             <div
               className={cn(
-                "flex flex-col",
-                isMobile && "gap-2 overflow-y-auto pb-4",
+                "flex max-h-[40dvh] flex-col overflow-y-auto",
+                isMobile && "gap-2 pb-4",
               )}
             >
               <SelectorItem
@@ -97,7 +100,7 @@ export default function FaceSelectionDialog({
                 <LuPlus />
                 {t("createFaceLibrary.new")}
               </SelectorItem>
-              {faceNames.map((faceName) => (
+              {faceNames.sort().map((faceName) => (
                 <SelectorItem
                   key={faceName}
                   className="flex cursor-pointer gap-2 smart-capitalize"