Reclassification (#22603)

* add ability to reclassify images

* add ability to reclassify faces

* work around radix pointer events issue again

frigate/api/classification.py

@@ -338,6 +338,82 @@ async def recognize_face(request: Request, file: UploadFile):
     )
 
 
+@router.post(
+    "/faces/{name}/reclassify",
+    response_model=GenericResponse,
+    dependencies=[Depends(require_role(["admin"]))],
+    summary="Reclassify a face image to a different name",
+    description="""Moves a single face image from one person's folder to another.
+    The image is moved and renamed, and the face classifier is cleared to
+    incorporate the change. Returns a success message or an error if the
+    image or target name is invalid.""",
+)
+def reclassify_face_image(request: Request, name: str, body: dict = None):
+    if not request.app.frigate_config.face_recognition.enabled:
+        return JSONResponse(
+            status_code=400,
+            content={"message": "Face recognition is not enabled.", "success": False},
+        )
+
+    json: dict[str, Any] = body or {}
+    image_id = sanitize_filename(json.get("id", ""))
+    new_name = sanitize_filename(json.get("new_name", ""))
+
+    if not image_id or not new_name:
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": "Both 'id' and 'new_name' are required.",
+                }
+            ),
+            status_code=400,
+        )
+
+    if new_name == name:
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": "New name must differ from the current name.",
+                }
+            ),
+            status_code=400,
+        )
+
+    source_folder = os.path.join(FACE_DIR, sanitize_filename(name))
+    source_file = os.path.join(source_folder, image_id)
+
+    if not os.path.isfile(source_file):
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": f"Image not found: {image_id}",
+                }
+            ),
+            status_code=404,
+        )
+
+    target_filename = f"{new_name}-{datetime.datetime.now().timestamp()}.webp"
+    target_folder = os.path.join(FACE_DIR, new_name)
+
+    os.makedirs(target_folder, exist_ok=True)
+    shutil.move(source_file, os.path.join(target_folder, target_filename))
+
+    # Clean up empty source folder
+    if os.path.exists(source_folder) and not os.listdir(source_folder):
+        os.rmdir(source_folder)
+
+    context: EmbeddingsContext = request.app.embeddings
+    context.clear_face_classifier()
+
+    return JSONResponse(
+        content=({"success": True, "message": "Successfully reclassified face."}),
+        status_code=200,
+    )
+
+
 @router.post(
     "/faces/{name}/delete",
     response_model=GenericResponse,
@@ -787,6 +863,101 @@ def delete_classification_dataset_images(
     )
 
 
+@router.post(
+    "/classification/{name}/dataset/{category}/reclassify",
+    response_model=GenericResponse,
+    dependencies=[Depends(require_role(["admin"]))],
+    summary="Reclassify a dataset image to a different category",
+    description="""Moves a single dataset image from one category to another.
+    The image is re-saved as PNG in the target category and removed from the source.""",
+)
+def reclassify_classification_image(
+    request: Request, name: str, category: str, body: dict = None
+):
+    config: FrigateConfig = request.app.frigate_config
+
+    if name not in config.classification.custom:
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": f"{name} is not a known classification model.",
+                }
+            ),
+            status_code=404,
+        )
+
+    json: dict[str, Any] = body or {}
+    image_id = sanitize_filename(json.get("id", ""))
+    new_category = sanitize_filename(json.get("new_category", ""))
+
+    if not image_id or not new_category:
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": "Both 'id' and 'new_category' are required.",
+                }
+            ),
+            status_code=400,
+        )
+
+    if new_category == category:
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": "New category must differ from the current category.",
+                }
+            ),
+            status_code=400,
+        )
+
+    sanitized_name = sanitize_filename(name)
+    source_folder = os.path.join(
+        CLIPS_DIR, sanitized_name, "dataset", sanitize_filename(category)
+    )
+    source_file = os.path.join(source_folder, image_id)
+
+    if not os.path.isfile(source_file):
+        return JSONResponse(
+            content=(
+                {
+                    "success": False,
+                    "message": f"Image not found: {image_id}",
+                }
+            ),
+            status_code=404,
+        )
+
+    random_id = "".join(random.choices(string.ascii_lowercase + string.digits, k=6))
+    timestamp = datetime.datetime.now().timestamp()
+    new_name = f"{new_category}-{timestamp}-{random_id}.png"
+    target_folder = os.path.join(CLIPS_DIR, sanitized_name, "dataset", new_category)
+
+    os.makedirs(target_folder, exist_ok=True)
+
+    img = cv2.imread(source_file)
+    cv2.imwrite(os.path.join(target_folder, new_name), img)
+    os.unlink(source_file)
+
+    # Clean up empty source folder (unless it is "none")
+    if (
+        os.path.exists(source_folder)
+        and not os.listdir(source_folder)
+        and category.lower() != "none"
+    ):
+        os.rmdir(source_folder)
+
+    # Mark dataset as changed so UI knows retraining is needed
+    write_training_metadata(sanitized_name, 0)
+
+    return JSONResponse(
+        content=({"success": True, "message": "Successfully reclassified image."}),
+        status_code=200,
+    )
+
+
 @router.put(
     "/classification/{name}/dataset/{old_category}/rename",
     response_model=GenericResponse,

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

@@ -26,6 +26,7 @@
       "deletedModel_one": "Successfully deleted {{count}} model",
       "deletedModel_other": "Successfully deleted {{count}} models",
       "categorizedImage": "Successfully Classified Image",
+      "reclassifiedImage": "Successfully Reclassified Image",
       "trainedModel": "Successfully trained model.",
       "trainingModel": "Successfully started model training.",
       "updatedModel": "Successfully updated model configuration",
@@ -43,7 +44,8 @@
       "trainingFailed": "Model training failed. Check Frigate logs for details.",
       "trainingFailedToStart": "Failed to start model training: {{errorMessage}}",
       "updateModelFailed": "Failed to update model: {{errorMessage}}",
-      "renameCategoryFailed": "Failed to rename class: {{errorMessage}}"
+      "renameCategoryFailed": "Failed to rename class: {{errorMessage}}",
+      "reclassifyFailed": "Failed to reclassify image: {{errorMessage}}"
     }
   },
   "deleteCategory": {
@@ -92,6 +94,8 @@
   },
   "categorizeImageAs": "Classify Image As:",
   "categorizeImage": "Classify Image",
+  "reclassifyImageAs": "Reclassify Image As:",
+  "reclassifyImage": "Reclassify Image",
   "menu": {
     "objects": "Objects",
     "states": "States"

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

@@ -66,6 +66,8 @@
   "nofaces": "No faces available",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",
+  "reclassifyFaceAs": "Reclassify Face as:",
+  "reclassifyFace": "Reclassify Face",
   "toast": {
     "success": {
       "uploadedImage": "Successfully uploaded image.",
@@ -77,6 +79,7 @@
       "deletedName_other": "{{count}} faces have been successfully deleted.",
       "renamedFace": "Successfully renamed face to {{name}}",
       "trainedFace": "Successfully trained face.",
+      "reclassifiedFace": "Successfully reclassified face.",
       "updatedFaceScore": "Successfully updated face score to {{name}} ({{score}})."
     },
     "error": {
@@ -86,6 +89,7 @@
       "deleteNameFailed": "Failed to delete name: {{errorMessage}}",
       "renameFaceFailed": "Failed to rename face: {{errorMessage}}",
       "trainFailed": "Failed to train: {{errorMessage}}",
+      "reclassifyFailed": "Failed to reclassify face: {{errorMessage}}",
       "updateFaceScoreFailed": "Failed to update face score: {{errorMessage}}"
     }
   }

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -34,7 +34,11 @@ type ClassificationSelectionDialogProps = {
   classes: string[];
   modelName: string;
   image: string;
-  onRefresh: () => void;
+  onRefresh?: () => void;
+  onCategorize?: (category: string) => void;
+  excludeCategory?: string;
+  dialogLabel?: string;
+  tooltipLabel?: string;
   children: ReactNode;
 };
 export default function ClassificationSelectionDialog({
@@ -43,12 +47,21 @@ export default function ClassificationSelectionDialog({
   modelName,
   image,
   onRefresh,
+  onCategorize,
+  excludeCategory,
+  dialogLabel,
+  tooltipLabel,
   children,
 }: ClassificationSelectionDialogProps) {
   const { t } = useTranslation(["views/classificationModel"]);
 
   const onCategorizeImage = useCallback(
     (category: string) => {
+      if (onCategorize) {
+        onCategorize(category);
+        return;
+      }
+
       axios
         .post(`/classification/${modelName}/dataset/categorize`, {
           category,
@@ -59,7 +72,7 @@ export default function ClassificationSelectionDialog({
             toast.success(t("toast.success.categorizedImage"), {
               position: "top-center",
             });
-            onRefresh();
+            onRefresh?.();
           }
         })
         .catch((error) => {
@@ -72,7 +85,13 @@ export default function ClassificationSelectionDialog({
           });
         });
     },
-    [modelName, image, onRefresh, t],
+    [modelName, image, onRefresh, onCategorize, t],
+  );
+
+  const filteredClasses = useMemo(
+    () =>
+      excludeCategory ? classes.filter((c) => c !== excludeCategory) : classes,
+    [classes, excludeCategory],
   );
 
   const isChildButton = useMemo(
@@ -111,6 +130,7 @@ export default function ClassificationSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
+            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
@@ -118,14 +138,16 @@ export default function ClassificationSelectionDialog({
                 <DrawerDescription>Details</DrawerDescription>
               </DrawerHeader>
             )}
-            <DropdownMenuLabel>{t("categorizeImageAs")}</DropdownMenuLabel>
+            <DropdownMenuLabel>
+              {dialogLabel ?? t("categorizeImageAs")}
+            </DropdownMenuLabel>
             <div
               className={cn(
                 "flex max-h-[40dvh] flex-col overflow-y-auto",
                 isMobile && "gap-2 pb-4",
               )}
             >
-              {classes
+              {filteredClasses
                 .sort((a, b) => {
                   if (a === "none") return 1;
                   if (b === "none") return -1;
@@ -152,7 +174,7 @@ export default function ClassificationSelectionDialog({
             </div>
           </SelectorContent>
         </Selector>
-        <TooltipContent>{t("categorizeImage")}</TooltipContent>
+        <TooltipContent>{tooltipLabel ?? t("categorizeImage")}</TooltipContent>
       </Tooltip>
     </div>
   );

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -30,17 +30,29 @@ import { Button } from "../ui/button";
 type FaceSelectionDialogProps = {
   className?: string;
   faceNames: string[];
+  excludeName?: string;
+  dialogLabel?: string;
+  tooltipLabel?: string;
   onTrainAttempt: (name: string) => void;
   children: ReactNode;
 };
 export default function FaceSelectionDialog({
   className,
   faceNames,
+  excludeName,
+  dialogLabel,
+  tooltipLabel,
   onTrainAttempt,
   children,
 }: FaceSelectionDialogProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
 
+  const filteredNames = useMemo(
+    () =>
+      excludeName ? faceNames.filter((n) => n !== excludeName) : faceNames,
+    [faceNames, excludeName],
+  );
+
   const isChildButton = useMemo(
     () => React.isValidElement(children) && children.type === Button,
     [children],
@@ -79,6 +91,7 @@ export default function FaceSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
+            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
@@ -86,14 +99,16 @@ export default function FaceSelectionDialog({
                 <DrawerDescription>Details</DrawerDescription>
               </DrawerHeader>
             )}
-            <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
+            <DropdownMenuLabel>
+              {dialogLabel ?? t("trainFaceAs")}
+            </DropdownMenuLabel>
             <div
               className={cn(
                 "flex max-h-[40dvh] flex-col overflow-y-auto overflow-x-hidden",
                 isMobile && "gap-2 pb-4",
               )}
             >
-              {faceNames.sort().map((faceName) => (
+              {filteredNames.sort().map((faceName) => (
                 <SelectorItem
                   key={faceName}
                   className="flex cursor-pointer gap-2 smart-capitalize"
@@ -112,7 +127,7 @@ export default function FaceSelectionDialog({
             </div>
           </SelectorContent>
         </Selector>
-        <TooltipContent>{t("trainFace")}</TooltipContent>
+        <TooltipContent>{tooltipLabel ?? t("trainFace")}</TooltipContent>
       </Tooltip>
     </div>
   );

web/src/pages/FaceLibrary.tsx

@@ -266,6 +266,34 @@ export default function FaceLibrary() {
     [setPageToggle, refreshFaces, t],
   );
 
+  const onReclassify = useCallback(
+    (image: string, newName: string) => {
+      axios
+        .post(`/faces/${pageToggle}/reclassify`, {
+          id: image,
+          new_name: newName,
+        })
+        .then((resp) => {
+          if (resp.status == 200) {
+            toast.success(t("toast.success.reclassifiedFace"), {
+              position: "top-center",
+            });
+            refreshFaces();
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(t("toast.error.reclassifyFailed", { errorMessage }), {
+            position: "top-center",
+          });
+        });
+    },
+    [pageToggle, refreshFaces, t],
+  );
+
   // keyboard
 
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -452,10 +480,12 @@ export default function FaceLibrary() {
           <FaceGrid
             contentRef={contentRef}
             faceImages={faceImages}
+            faceNames={faces}
             pageToggle={pageToggle}
             selectedFaces={selectedFaces}
             onClickFaces={onClickFaces}
             onDelete={onDelete}
+            onReclassify={onReclassify}
           />
         ))
       )}
@@ -601,11 +631,11 @@ function LibrarySelector({
               className="group flex items-center justify-between p-0"
             >
               <div
-                className="flex-grow cursor-pointer"
+                className="flex-grow cursor-pointer px-2 py-1.5"
                 onClick={() => setPageToggle(face)}
               >
                 {face}
-                <span className="ml-2 px-2 py-1.5 text-muted-foreground">
+                <span className="ml-2 text-muted-foreground">
                   ({faceData?.[face].length})
                 </span>
               </div>
@@ -983,18 +1013,22 @@ function FaceAttemptGroup({
 type FaceGridProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
   faceImages: string[];
+  faceNames: string[];
   pageToggle: string;
   selectedFaces: string[];
   onClickFaces: (images: string[], ctrl: boolean) => void;
   onDelete: (name: string, ids: string[]) => void;
+  onReclassify: (image: string, newName: string) => void;
 };
 function FaceGrid({
   contentRef,
   faceImages,
+  faceNames,
   pageToggle,
   selectedFaces,
   onClickFaces,
   onDelete,
+  onReclassify,
 }: FaceGridProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
 
@@ -1032,6 +1066,17 @@ function FaceGrid({
             i18nLibrary="views/faceLibrary"
             onClick={(data, meta) => onClickFaces([data.filename], meta)}
           >
+            <FaceSelectionDialog
+              faceNames={faceNames}
+              excludeName={pageToggle}
+              dialogLabel={t("reclassifyFaceAs")}
+              tooltipLabel={t("reclassifyFace")}
+              onTrainAttempt={(newName) => onReclassify(image, newName)}
+            >
+              <BlurredIconButton>
+                <AddFaceIcon className="size-5" />
+              </BlurredIconButton>
+            </FaceSelectionDialog>
             <Tooltip>
               <TooltipTrigger>
                 <LuTrash2

web/src/views/classification/ModelTrainingView.tsx

@@ -304,6 +304,37 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
     [pageToggle, model, refreshTrain, refreshDataset, t],
   );
 
+  const onReclassify = useCallback(
+    (image: string, newCategory: string) => {
+      axios
+        .post(
+          `/classification/${model.name}/dataset/${pageToggle}/reclassify`,
+          {
+            id: image,
+            new_category: newCategory,
+          },
+        )
+        .then((resp) => {
+          if (resp.status == 200) {
+            toast.success(t("toast.success.reclassifiedImage"), {
+              position: "top-center",
+            });
+            refreshDataset();
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(t("toast.error.reclassifyFailed", { errorMessage }), {
+            position: "top-center",
+          });
+        });
+    },
+    [pageToggle, model, refreshDataset, t],
+  );
+
   // keyboard
 
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -535,10 +566,12 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
           contentRef={contentRef}
           modelName={model.name}
           categoryName={pageToggle}
+          classes={Object.keys(dataset || {})}
           images={dataset?.[pageToggle] || []}
           selectedImages={selectedImages}
           onClickImages={onClickImages}
           onDelete={onDelete}
+          onReclassify={onReclassify}
         />
       )}
     </div>
@@ -776,19 +809,23 @@ type DatasetGridProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
   modelName: string;
   categoryName: string;
+  classes: string[];
   images: string[];
   selectedImages: string[];
   onClickImages: (images: string[], ctrl: boolean) => void;
   onDelete: (ids: string[]) => void;
+  onReclassify: (image: string, newCategory: string) => void;
 };
 function DatasetGrid({
   contentRef,
   modelName,
   categoryName,
+  classes,
   images,
   selectedImages,
   onClickImages,
   onDelete,
+  onReclassify,
 }: DatasetGridProps) {
   const { t } = useTranslation(["views/classificationModel"]);
 
@@ -816,10 +853,23 @@ function DatasetGrid({
             i18nLibrary="views/classificationModel"
             onClick={(data, _) => onClickImages([data.filename], true)}
           >
+            <ClassificationSelectionDialog
+              classes={classes}
+              modelName={modelName}
+              image={image}
+              excludeCategory={categoryName}
+              dialogLabel={t("reclassifyImageAs")}
+              tooltipLabel={t("reclassifyImage")}
+              onCategorize={(newCat) => onReclassify(image, newCat)}
+            >
+              <BlurredIconButton>
+                <TbCategoryPlus className="size-5" />
+              </BlurredIconButton>
+            </ClassificationSelectionDialog>
             <Tooltip>
               <TooltipTrigger>
                 <LuTrash2
-                  className="size-5 cursor-pointer text-primary-variant hover:text-danger"
+                  className="size-5 cursor-pointer text-gray-200 hover:text-danger"
                   onClick={(e) => {
                     e.stopPropagation();
                     onDelete([image]);