Embeddings UI updates (#14378)

* Handle Frigate+ submitted case * Add search settings and rename general to ui settings * Add platform aware sheet component * use two columns on mobile view * Add cameras page to more filters * clean up search settings view * Add time range to side filter * better match with ui settings * fix icon size * use two columns on mobile view * clean up search settings view * Add zones and saving logic * Add all filters to side panel * better match with ui settings * fix icon size * Fix mobile fitler page * Fix embeddings access * Cleanup * Fix scroll * fix double scrollbars and add separators on mobile too * two columns on mobile * italics for emphasis --------- Co-authored-by: Josh Hawkins <[email protected]>
blakeblackshear · Oct 16, 2024 · 3f1ab66 · 3f1ab66
1 parent b75efcb
commit 3f1ab66
Show file tree

Hide file tree

Showing 11 changed files with 919 additions and 798 deletions.
diff --git a/frigate/embeddings/embeddings.py b/frigate/embeddings/embeddings.py
@@ -178,7 +178,7 @@ def batch_upsert_description(self, event_descriptions: dict[str, str]) -> ndarra
         embeddings = []
 
         for desc in event_descriptions.values():
-            embeddings.append(self.text_embedding([desc]))
+            embeddings.append(self.text_embedding([desc])[0])
 
         ids = list(event_descriptions.keys())
 

diff --git a/web/src/components/card/SearchThumbnailFooter.tsx b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -10,8 +10,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -33,6 +31,7 @@ import { baseUrl } from "@/api/baseUrl";
 import axios from "axios";
 import { toast } from "sonner";
 import { MdImageSearch } from "react-icons/md";
+import { isMobileOnly } from "react-device-detect";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -109,7 +108,9 @@ export default function SearchThumbnailFooter({
           showFrigatePlus ? (searchResult as unknown as Event) : undefined
         }
         onClose={() => setShowFrigatePlus(false)}
-        onEventUploaded={() => {}}
+        onEventUploaded={() => {
+          searchResult.plus_id = "submitted";
+        }}
       />
 
       <div className="flex flex-col items-start text-xs">
@@ -122,10 +123,12 @@ export default function SearchThumbnailFooter({
         )}
         {formattedDate}
       </div>
-      <div className="flex flex-row items-center justify-end gap-8 md:gap-4">
-        {config?.plus?.enabled &&
+      <div className="flex flex-row items-center justify-end gap-6 md:gap-4">
+        {!isMobileOnly &&
+          config?.plus?.enabled &&
           searchResult.has_snapshot &&
-          searchResult.end_time && (
+          searchResult.end_time &&
+          !searchResult.plus_id && (
             <Tooltip>
               <TooltipTrigger>
                 <FrigatePlusIcon
@@ -154,10 +157,6 @@ export default function SearchThumbnailFooter({
             <LuMoreVertical className="size-5 cursor-pointer text-primary" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align={"end"}>
-            <DropdownMenuLabel className="mt-0.5">
-              Tracked Object Actions
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator className="mt-1" />
             {searchResult.has_clip && (
               <DropdownMenuItem>
                 <a
@@ -189,6 +188,20 @@ export default function SearchThumbnailFooter({
               <FaArrowsRotate className="mr-2 size-4" />
               <span>View object lifecycle</span>
             </DropdownMenuItem>
+
+            {isMobileOnly &&
+              config?.plus?.enabled &&
+              searchResult.has_snapshot &&
+              searchResult.end_time &&
+              !searchResult.plus_id && (
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => setShowFrigatePlus(true)}
+                >
+                  <FrigatePlusIcon className="mr-2 size-4 cursor-pointer text-primary" />
+                  <span>Submit to Frigate+</span>
+                </DropdownMenuItem>
+              )}
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => setDeleteDialogOpen(true)}

diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
@@ -69,6 +69,70 @@ export function CamerasFilterButton({
     </Button>
   );
   const content = (
+    <CamerasFilterContent
+      allCameras={allCameras}
+      groups={groups}
+      currentCameras={currentCameras}
+      setCurrentCameras={setCurrentCameras}
+      setOpen={setOpen}
+      updateCameraFilter={updateCameraFilter}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCurrentCameras(selectedCameras);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      modal={false}
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setCurrentCameras(selectedCameras);
+        }
+        setOpen(open);
+      }}
+    >
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>{content}</DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+type CamerasFilterContentProps = {
+  allCameras: string[];
+  currentCameras: string[] | undefined;
+  groups: [string, CameraGroupConfig][];
+  setCurrentCameras: (cameras: string[] | undefined) => void;
+  setOpen: (open: boolean) => void;
+  updateCameraFilter: (cameras: string[] | undefined) => void;
+};
+export function CamerasFilterContent({
+  allCameras,
+  currentCameras,
+  groups,
+  setCurrentCameras,
+  setOpen,
+  updateCameraFilter,
+}: CamerasFilterContentProps) {
+  return (
     <>
       {isMobile && (
         <>
@@ -158,40 +222,4 @@ export function CamerasFilterButton({
       </div>
     </>
   );
-
-  if (isMobile) {
-    return (
-      <Drawer
-        open={open}
-        onOpenChange={(open) => {
-          if (!open) {
-            setCurrentCameras(selectedCameras);
-          }
-
-          setOpen(open);
-        }}
-      >
-        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
-          {content}
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-
-  return (
-    <DropdownMenu
-      modal={false}
-      open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          setCurrentCameras(selectedCameras);
-        }
-        setOpen(open);
-      }}
-    >
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-      <DropdownMenuContent>{content}</DropdownMenuContent>
-    </DropdownMenu>
-  );
 }