web/package-lock.json

@@ -56,7 +56,6 @@
         "react-day-picker": "^8.10.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.3.1",
-        "react-dropzone": "^14.3.8",
         "react-grid-layout": "^1.5.0",
         "react-hook-form": "^7.52.1",
         "react-i18next": "^15.2.0",
@@ -3527,15 +3526,6 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
-    "node_modules/attr-accept": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
-      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -5122,18 +5112,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/file-selector": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
-      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.7.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -7243,23 +7221,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/react-dropzone": {
-      "version": "14.3.8",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz",
-      "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==",
-      "license": "MIT",
-      "dependencies": {
-        "attr-accept": "^2.2.4",
-        "file-selector": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">= 10.13"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8 || 18.0.0"
-      }
-    },
     "node_modules/react-grid-layout": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.0.tgz",
@@ -8587,10 +8548,9 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tslib": {
-      "version": "2.8.1",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.4.0",

web/package.json

@@ -62,7 +62,6 @@
     "react-day-picker": "^8.10.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.3.8",
     "react-grid-layout": "^1.5.0",
     "react-hook-form": "^7.52.1",
     "react-i18next": "^15.2.0",

web/public/locales/en/views/faceLibrary.json

@@ -1,7 +1,6 @@
 {
   "description": {
-    "addFace": "Walk through adding a new collection to the Face Library.",
+    "addFace": "Walk through adding a new face to the Face Library."
-    "placeholder": "Enter a name for this collection"
   },
   "details": {
     "person": "Person",
@@ -16,47 +15,30 @@
     "desc": "Upload an image to scan for faces and include for {{pageToggle}}"
   },
   "createFaceLibrary": {
-    "title": "Create Collection",
+    "title": "Create Face Library",
-    "desc": "Create a new collection",
+    "desc": "Create a new face library",
     "new": "Create New Face",
-    "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
+    "nextSteps": "It is recommended to use the Train tab to select and train images for each person as they are detected. When building a strong foundation it is strongly recommended to only train on images that are straight-on. Ignore images from cameras that recognize faces from an angle."
   },
   "train": {
     "title": "Train",
     "aria": "Select train"
   },
   "selectItem": "Select {{item}}",
-  "selectFace": "Select Face",
-  "deleteFaceLibrary": {
-    "title": "Delete Name",
-    "desc": "Are you sure you want to delete the collection {{name}}? This will permanently delete all associated faces."
-  },
   "button": {
     "deleteFaceAttempts": "Delete Face Attempts",
     "addFace": "Add Face",
     "uploadImage": "Upload Image",
     "reprocessFace": "Reprocess Face"
   },
-  "imageEntry": {
+  "readTheDocs": "Read the documentation to view more details on refining images for the Face Library",
-    "validation": {
-      "selectImage": "Please select an image file."
-    },
-    "dropActive": "Drop the image here...",
-    "dropInstructions": "Drag and drop an image here, or click to select",
-    "maxSize": "Max size: {{size}}MB"
-  },
-  "readTheDocs": "Read the documentation",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",
   "toast": {
     "success": {
       "uploadedImage": "Successfully uploaded image.",
       "addFaceLibrary": "{{name}} has successfully been added to the Face Library!",
-      "deletedFace_one": "Successfully deleted {{count}} face.",
+      "deletedFace": "Successfully deleted face.",
-      "deletedFace_other": "Successfully deleted {{count}} faces.",
-      "deletedName_zero": "Empty collection deleted successfully.",
-      "deletedName_one": "{{count}} face has been successfully deleted.",
-      "deletedName_other": "{{count}} faces have been successfully deleted.",
       "trainedFace": "Successfully trained face.",
       "updatedFaceScore": "Successfully updated face score."
     },
@@ -64,7 +46,6 @@
       "uploadingImageFailed": "Failed to upload image: {{errorMessage}}",
       "addFaceLibraryFailed": "Failed to set face name: {{errorMessage}}",
       "deleteFaceFailed": "Failed to delete: {{errorMessage}}",
-      "deleteNameFailed": "Failed to delete name: {{errorMessage}}",
       "trainFailed": "Failed to train: {{errorMessage}}",
       "updateFaceScoreFailed": "Failed to update face score: {{errorMessage}}"
     }

web/src/components/input/ImageEntry.tsx

@@ -1,82 +1,38 @@
-import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import {
+import { Input } from "@/components/ui/input";
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useState } from "react";
+import React, { useCallback } from "react";
-import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+
-import { LuUpload, LuX } from "react-icons/lu";
 import { z } from "zod";
 
 type ImageEntryProps = {
   onSave: (file: File) => void;
   children?: React.ReactNode;
-  maxSize?: number;
-  accept?: Record<string, string[]>;
 };
-
+export default function ImageEntry({ onSave, children }: ImageEntryProps) {
-export default function ImageEntry({
-  onSave,
-  children,
-  maxSize = 10 * 1024 * 1024, // 10MB default
-  accept = { "image/*": [".jpeg", ".jpg", ".png", ".gif", ".webp"] },
-}: ImageEntryProps) {
-  const { t } = useTranslation(["views/faceLibrary"]);
-  const [preview, setPreview] = useState<string | null>(null);
-
   const formSchema = z.object({
-    file: z.instanceof(File, { message: "Please select an image file." }),
+    file: z.instanceof(FileList, { message: "Please select an image file." }),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
+  const fileRef = form.register("file");
 
-  const onDrop = useCallback(
+  // upload handler
-    (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        const file = acceptedFiles[0];
-        form.setValue("file", file, { shouldValidate: true });
-
-        // Create preview
-        const objectUrl = URL.createObjectURL(file);
-        setPreview(objectUrl);
-
-        // Clean up preview URL when component unmounts
-        return () => URL.revokeObjectURL(objectUrl);
-      }
-    },
-    [form],
-  );
-
-  const { getRootProps, getInputProps, isDragActive, isDragReject } =
-    useDropzone({
-      onDrop,
-      maxSize,
-      accept,
-      multiple: false,
-    });
 
   const onSubmit = useCallback(
     (data: z.infer<typeof formSchema>) => {
-      if (!data.file) return;
+      if (!data["file"] || Object.keys(data.file).length == 0) {
-      onSave(data.file);
+        return;
+      }
+
+      onSave(data["file"]["0"]);
     },
     [onSave],
   );
 
-  const clearSelection = () => {
-    form.reset();
-    setPreview(null);
-  };
-
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -86,55 +42,16 @@ export default function ImageEntry({
           render={() => (
             <FormItem>
               <FormControl>
-                <div className="w-full">
+                <Input
-                  {!preview ? (
+                  className="aspect-video h-40 w-full"
-                    <div
+                  type="file"
-                      {...getRootProps()}
+                  {...fileRef}
-                      className={cn(
-                        "flex h-40 flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors",
-                        isDragActive && "border-primary bg-primary/5",
-                        isDragReject && "border-destructive bg-destructive/5",
-                        "cursor-pointer hover:border-primary hover:bg-primary/5",
-                      )}
-                    >
-                      <input {...getInputProps()} />
-                      <LuUpload className="mb-2 h-10 w-10 text-muted-foreground" />
-                      <p className="text-center text-sm text-muted-foreground">
-                        {isDragActive
-                          ? t("imageEntry.dropActive")
-                          : t("imageEntry.dropInstructions")}
-                      </p>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {t("imageEntry.maxSize", {
-                          size: Math.round(maxSize / (1024 * 1024)),
-                        })}
-                      </p>
-                    </div>
-                  ) : (
-                    <div className="relative h-40 w-full">
-                      <img
-                        src={preview}
-                        alt="Preview"
-                        className="h-full w-full rounded-lg border object-contain"
                 />
-                      <Button
-                        type="button"
-                        variant="destructive"
-                        size="icon"
-                        className="absolute right-2 top-2 size-5 rounded-full"
-                        onClick={clearSelection}
-                      >
-                        <LuX className="size-3" />
-                      </Button>
-                    </div>
-                  )}
-                </div>
               </FormControl>
-              <FormMessage />
             </FormItem>
           )}
         />
-        <div className="mt-4 flex justify-end">{children}</div>
+        {children}
       </form>
     </Form>
   );

web/src/components/input/TextEntry.tsx

@@ -1,10 +1,4 @@
-import {
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useCallback } from "react";
@@ -20,47 +14,50 @@ type TextEntryProps = {
   children?: React.ReactNode;
 };
 export default function TextEntry({
-  defaultValue = "",
+  defaultValue,
   placeholder,
-  allowEmpty = false,
+  allowEmpty,
   onSave,
   children,
 }: TextEntryProps) {
   const formSchema = z.object({
-    text: allowEmpty
+    text: z.string(),
-      ? z.string().optional()
-      : z.string().min(1, "Field is required"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { text: defaultValue },
   });
+  const fileRef = form.register("text");
+
+  // upload handler
 
   const onSubmit = useCallback(
     (data: z.infer<typeof formSchema>) => {
-      onSave(data.text || "");
+      if (!allowEmpty && !data["text"]) {
+        return;
+      }
+      onSave(data["text"]);
     },
-    [onSave],
+    [onSave, allowEmpty],
   );
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={form.handleSubmit(onSubmit)}>
         <FormField
           control={form.control}
           name="text"
-          render={({ field }) => (
+          render={() => (
             <FormItem>
               <FormControl>
                 <Input
-                  {...field}
+                  className="aspect-video h-8 w-full"
-                  className="w-full"
                   placeholder={placeholder}
                   type="text"
+                  {...fileRef}
                 />
               </FormControl>
-              <FormMessage className="text-xs text-destructive" />
             </FormItem>
           )}
         />

web/src/components/overlay/detail/FaceCreateWizardDialog.tsx

@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 import axios from "axios";
 import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { LuExternalLink } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@@ -101,7 +101,7 @@ export default function CreateFaceWizardDialog({
       }}
     >
       <Content
-        className={cn("flex flex-col gap-4", isDesktop ? "max-w-3xl" : "p-4")}
+        className={cn("flex flex-col gap-4", isDesktop ? "max-w-[50%]" : "p-4")}
       >
         <Header>
           <Title>{t("button.addFace")}</Title>
@@ -110,7 +110,7 @@ export default function CreateFaceWizardDialog({
         <StepIndicator steps={STEPS} currentStep={step} />
         {step == 0 && (
           <TextEntry
-            placeholder={t("description.placeholder")}
+            placeholder="Enter Face Name"
             onSave={(name) => {
               setName(name);
               setStep(1);
@@ -133,16 +133,12 @@ export default function CreateFaceWizardDialog({
           </ImageEntry>
         )}
         {step == 2 && (
-          <div className="mt-2">
+          <div>
             {t("toast.success.addFaceLibrary", { name })}
-            <p className="py-4 text-sm text-primary-variant">
+            <p className="py-4 text-sm text-secondary-foreground">
-              <ul className="list-inside list-disc">
+              {t("createFaceLibrary.nextSteps")}
-                <Trans ns="views/faceLibrary">
-                  createFaceLibrary.nextSteps
-                </Trans>
-              </ul>
             </p>
-            <div className="my-2 flex items-center text-sm text-primary">
+            <div className="text-s my-4 flex items-center text-primary">
               <Link
                 to="https://docs.frigate.video/configuration/face_recognition"
                 target="_blank"

web/src/pages/FaceLibrary.tsx

@@ -19,9 +19,10 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
-  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Toaster } from "@/components/ui/sonner";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import {
   Tooltip,
   TooltipContent,
@@ -173,28 +174,16 @@ export default function FaceLibrary() {
   );
 
   const onDelete = useCallback(
-    (name: string, ids: string[], isName: boolean = false) => {
+    (name: string, ids: string[]) => {
       axios
         .post(`/faces/${name}/delete`, { ids })
         .then((resp) => {
           setSelectedFaces([]);
 
           if (resp.status == 200) {
-            if (isName) {
+            toast.success(t("toast.success.deletedFace"), {
-              toast.success(
-                t("toast.success.deletedName", { count: ids.length }),
-                {
               position: "top-center",
-                },
+            });
-              );
-            } else {
-              toast.success(
-                t("toast.success.deletedFace", { count: ids.length }),
-                {
-                  position: "top-center",
-                },
-              );
-            }
 
             if (faceImages.length == 1) {
               // face has been deleted
@@ -209,15 +198,9 @@ export default function FaceLibrary() {
             error.response?.data?.message ||
             error.response?.data?.detail ||
             "Unknown error";
-          if (isName) {
-            toast.error(t("toast.error.deleteNameFailed", { errorMessage }), {
-              position: "top-center",
-            });
-          } else {
           toast.error(t("toast.error.deleteFaceFailed", { errorMessage }), {
             position: "top-center",
           });
-          }
         });
     },
     [faceImages, refreshFaces, setPageToggle, t],
@@ -275,7 +258,6 @@ export default function FaceLibrary() {
           faces={faces}
           trainImages={trainImages}
           setPageToggle={setPageToggle}
-          onDelete={onDelete}
         />
         {selectedFaces?.length > 0 ? (
           <div className="flex items-center justify-center gap-2">
@@ -339,7 +321,6 @@ type LibrarySelectorProps = {
   faces: string[];
   trainImages: string[];
   setPageToggle: (toggle: string | undefined) => void;
-  onDelete: (name: string, ids: string[], isName: boolean) => void;
 };
 function LibrarySelector({
   pageToggle,
@@ -347,117 +328,79 @@ function LibrarySelector({
   faces,
   trainImages,
   setPageToggle,
-  onDelete,
 }: LibrarySelectorProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
-  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
 
-  const handleDeleteFace = useCallback(
+  return isDesktop ? (
-    (faceName: string) => {
+    <ScrollArea className="w-full whitespace-nowrap">
-      // Get all image IDs for this face
+      <div className="flex flex-row">
-      const imageIds = faceData?.[faceName] || [];
+        <ToggleGroup
-
+          className="*:rounded-md *:px-3 *:py-4"
-      onDelete(faceName, imageIds, true);
+          type="single"
-      setPageToggle("train");
+          size="sm"
-    },
+          value={pageToggle}
-    [faceData, onDelete, setPageToggle],
+          onValueChange={(value: string) => {
-  );
+            if (value) {
-
+              setPageToggle(value);
-  return (
-    <>
-      <Dialog
-        open={!!confirmDelete}
-        onOpenChange={(open) => !open && setConfirmDelete(null)}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("deleteFaceLibrary.title")}</DialogTitle>
-            <DialogDescription>
-              {t("deleteFaceLibrary.desc", { name: confirmDelete })}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => setConfirmDelete(null)}>
-              {t("button.cancel", { ns: "common" })}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                if (confirmDelete) {
-                  handleDeleteFace(confirmDelete);
-                  setConfirmDelete(null);
             }
           }}
         >
-              {t("button.delete", { ns: "common" })}
+          {trainImages.length > 0 && (
-            </Button>
+            <>
-          </div>
+              <ToggleGroupItem
-        </DialogContent>
+                value="train"
-      </Dialog>
+                className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == "train" ? "" : "*:text-muted-foreground"}`}
+                data-nav-item="train"
+                aria-label={t("train.aria")}
+              >
+                <div>{t("train.title")}</div>
+              </ToggleGroupItem>
+              <div>|</div>
+            </>
+          )}
 
+          {Object.values(faces).map((face) => (
+            <ToggleGroupItem
+              key={face}
+              className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == face ? "" : "*:text-muted-foreground"}`}
+              value={face}
+              data-nav-item={face}
+              aria-label={t("selectItem", { item: face })}
+            >
+              <div className="capitalize">
+                {face} ({faceData?.[face].length})
+              </div>
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+        <ScrollBar orientation="horizontal" className="h-0" />
+      </div>
+    </ScrollArea>
+  ) : (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-          <Button className="flex justify-between capitalize">
+        <Button className="capitalize">{pageToggle}</Button>
-            {pageToggle || t("selectFace")}
-            <span className="ml-2 text-primary-variant">
-              ({(pageToggle && faceData?.[pageToggle]?.length) || 0})
-            </span>
-          </Button>
       </DropdownMenuTrigger>
-        <DropdownMenuContent
+      <DropdownMenuContent>
-          className="scrollbar-container max-h-[40dvh] min-w-[220px] overflow-y-auto"
-          align="start"
-        >
         {trainImages.length > 0 && (
           <DropdownMenuItem
-              className="flex cursor-pointer items-center justify-start gap-2"
+            className="capitalize"
             aria-label={t("train.aria")}
             onClick={() => setPageToggle("train")}
           >
             <div>{t("train.title")}</div>
-              <div className="text-secondary-foreground">
-                ({trainImages.length})
-              </div>
           </DropdownMenuItem>
         )}
-          {trainImages.length > 0 && faces.length > 0 && (
-            <>
-              <DropdownMenuSeparator />
-              <div className="mb-1 ml-1.5 text-xs text-secondary-foreground">
-                Collections
-              </div>
-            </>
-          )}
         {Object.values(faces).map((face) => (
           <DropdownMenuItem
-              key={face}
+            className="capitalize"
-              className="group flex items-center justify-between"
-            >
-              <div
-                className="flex-grow cursor-pointer capitalize"
             onClick={() => setPageToggle(face)}
           >
-                {face}
+            {face} ({faceData?.[face].length})
-                <span className="ml-2 text-muted-foreground">
-                  ({faceData?.[face].length})
-                </span>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7 opacity-0 transition-opacity group-hover:opacity-100"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmDelete(face);
-                }}
-              >
-                <LuTrash2 className="size-4 text-destructive" />
-              </Button>
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
     </DropdownMenu>
-    </>
   );
 }