.cursor/rules/frontend-always-use-translation-files.mdc

@@ -1,6 +0,0 @@
----
-globs: ["**/*.ts", "**/*.tsx"]
-alwaysApply: false
----
-
-Never write strings in the frontend directly, always write to and reference the relevant translations file.

docs/docs/configuration/custom_classification/object_classification.md

@@ -12,18 +12,7 @@ Object classification models are lightweight and run very fast on CPU. Inference
 Training the model does briefly use a high amount of system resources for about 1–3 minutes per training run. On lower-power devices, training may take longer.
 When running the `-tensorrt` image, Nvidia GPUs will automatically be used to accelerate training.
 
-## Classes
-
-Classes are the categories your model will learn to distinguish between. Each class represents a distinct visual category that the model will predict.
-
-For object classification:
-
-- Define classes that represent different types or attributes of the detected object
-- Examples: For `person` objects, classes might be `delivery_person`, `resident`, `stranger`
-- Include a `none` class for objects that don't fit any specific category
-- Keep classes visually distinct to improve accuracy
-
-### Classification Type
+### Sub label vs Attribute
 
 - **Sub label**:
 

docs/docs/configuration/custom_classification/state_classification.md

@@ -12,17 +12,6 @@ State classification models are lightweight and run very fast on CPU. Inference
 Training the model does briefly use a high amount of system resources for about 1–3 minutes per training run. On lower-power devices, training may take longer.
 When running the `-tensorrt` image, Nvidia GPUs will automatically be used to accelerate training.
 
-## Classes
-
-Classes are the different states an area on your camera can be in. Each class represents a distinct visual state that the model will learn to recognize.
-
-For state classification:
-
-- Define classes that represent mutually exclusive states
-- Examples: `open` and `closed` for a garage door, `on` and `off` for lights
-- Use at least 2 classes (typically binary states work best)
-- Keep class names clear and descriptive
-
 ## Example use cases
 
 - **Door state**: Detect if a garage or front door is open vs closed.

frigate/api/classification.py

@@ -167,7 +167,8 @@ def train_face(request: Request, name: str, body: dict = None):
     new_name = f"{sanitized_name}-{datetime.datetime.now().timestamp()}.webp"
     new_file_folder = os.path.join(FACE_DIR, f"{sanitized_name}")
 
-    os.makedirs(new_file_folder, exist_ok=True)
+    if not os.path.exists(new_file_folder):
+        os.mkdir(new_file_folder)
 
     if training_file_name:
         shutil.move(training_file, os.path.join(new_file_folder, new_name))
@@ -715,7 +716,8 @@ def categorize_classification_image(request: Request, name: str, body: dict = No
         CLIPS_DIR, sanitize_filename(name), "dataset", category
     )
 
-    os.makedirs(new_file_folder, exist_ok=True)
+    if not os.path.exists(new_file_folder):
+        os.mkdir(new_file_folder)
 
     # use opencv because webp images can not be used to train
     img = cv2.imread(training_file)

frigate/data_processing/real_time/custom_classification.py

@@ -53,17 +53,9 @@ class CustomStateClassificationProcessor(RealTimeProcessorApi):
         self.tensor_output_details: dict[str, Any] | None = None
         self.labelmap: dict[int, str] = {}
         self.classifications_per_second = EventsPerSecond()
-
-        if (
-            self.metrics
-            and self.model_config.name in self.metrics.classification_speeds
-        ):
-            self.inference_speed = InferenceSpeed(
-                self.metrics.classification_speeds[self.model_config.name]
-            )
-        else:
-            self.inference_speed = None
-
+        self.inference_speed = InferenceSpeed(
+            self.metrics.classification_speeds[self.model_config.name]
+        )
         self.last_run = datetime.datetime.now().timestamp()
         self.__build_detector()
 
@@ -91,14 +83,12 @@ class CustomStateClassificationProcessor(RealTimeProcessorApi):
 
     def __update_metrics(self, duration: float) -> None:
         self.classifications_per_second.update()
-        if self.inference_speed:
-            self.inference_speed.update(duration)
+        self.inference_speed.update(duration)
 
     def process_frame(self, frame_data: dict[str, Any], frame: np.ndarray):
-        if self.metrics and self.model_config.name in self.metrics.classification_cps:
-            self.metrics.classification_cps[
-                self.model_config.name
-            ].value = self.classifications_per_second.eps()
+        self.metrics.classification_cps[
+            self.model_config.name
+        ].value = self.classifications_per_second.eps()
         camera = frame_data.get("camera")
 
         if camera not in self.model_config.state_config.cameras:
@@ -233,17 +223,9 @@ class CustomObjectClassificationProcessor(RealTimeProcessorApi):
         self.detected_objects: dict[str, float] = {}
         self.labelmap: dict[int, str] = {}
         self.classifications_per_second = EventsPerSecond()
-
-        if (
-            self.metrics
-            and self.model_config.name in self.metrics.classification_speeds
-        ):
-            self.inference_speed = InferenceSpeed(
-                self.metrics.classification_speeds[self.model_config.name]
-            )
-        else:
-            self.inference_speed = None
-
+        self.inference_speed = InferenceSpeed(
+            self.metrics.classification_speeds[self.model_config.name]
+        )
         self.__build_detector()
 
     @redirect_output_to_logger(logger, logging.DEBUG)
@@ -269,14 +251,12 @@ class CustomObjectClassificationProcessor(RealTimeProcessorApi):
 
     def __update_metrics(self, duration: float) -> None:
         self.classifications_per_second.update()
-        if self.inference_speed:
-            self.inference_speed.update(duration)
+        self.inference_speed.update(duration)
 
     def process_frame(self, obj_data, frame):
-        if self.metrics and self.model_config.name in self.metrics.classification_cps:
-            self.metrics.classification_cps[
-                self.model_config.name
-            ].value = self.classifications_per_second.eps()
+        self.metrics.classification_cps[
+            self.model_config.name
+        ].value = self.classifications_per_second.eps()
 
         if obj_data["false_positive"]:
             return

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

@@ -1,5 +1,4 @@
 {
-  "documentTitle": "Classification Models",
   "button": {
     "deleteClassificationAttempts": "Delete Classification Images",
     "renameCategory": "Rename Class",
@@ -52,26 +51,20 @@
   "categorizeImageAs": "Classify Image As:",
   "categorizeImage": "Classify Image",
   "noModels": {
-    "object": {
-      "title": "No Object Classification Models",
-      "description": "Create a custom model to classify detected objects.",
-      "buttonText": "Create Object Model"
-    },
-    "state": {
-      "title": "No State Classification Models",
-      "description": "Create a custom model to monitor and classify state changes in specific camera areas.",
-      "buttonText": "Create State Model"
-    }
+    "title": "No Classification Models",
+    "description": "Create a custom model to classify objects or monitor state changes in your cameras.",
+    "buttonText": "Create Classification Model"
   },
   "wizard": {
     "title": "Create New Classification",
     "steps": {
       "nameAndDefine": "Name & Define",
       "stateArea": "State Area",
-      "chooseExamples": "Choose Examples"
+      "chooseExamples": "Choose Examples",
+      "train": "Train"
     },
     "step1": {
-      "description": "State models monitor fixed camera areas for changes (e.g., door open/closed). Object models add classifications to detected objects (e.g., known animals, delivery persons, etc.).",
+      "description": "Create a new state or object classification model.",
       "name": "Name",
       "namePlaceholder": "Enter model name...",
       "type": "Type",
@@ -80,14 +73,9 @@
       "objectLabel": "Object Label",
       "objectLabelPlaceholder": "Select object type...",
       "classificationType": "Classification Type",
-      "classificationTypeTip": "Learn about classification types",
-      "classificationTypeDesc": "Sub Labels add additional text to the object label (e.g., 'Person: UPS'). Attributes are searchable metadata stored separately in the object metadata.",
       "classificationSubLabel": "Sub Label",
       "classificationAttribute": "Attribute",
       "classes": "Classes",
-      "classesTip": "Learn about classes",
-      "classesStateDesc": "Define the different states your camera area can be in. For example: 'open' and 'closed' for a garage door.",
-      "classesObjectDesc": "Define the different categories to classify detected objects into. For example: 'delivery_person', 'resident', 'stranger' for person classification.",
       "classPlaceholder": "Enter class name...",
       "errors": {
         "nameRequired": "Model name is required",
@@ -108,17 +96,18 @@
       "selectCameraPrompt": "Select a camera from the list to define its monitoring area"
     },
     "step3": {
-      "selectImagesPrompt": "Select all images with: {{className}}",
-      "selectImagesDescription": "Click on images to select them. Click Continue when you're done with this class.",
+      "description": "Classify the example images below. These samples will be used to train your model.",
       "generating": {
         "title": "Generating Sample Images",
-        "description": "Frigate is pulling representative images from your recordings. This may take a moment..."
+        "description": "We're pulling representative images from your recordings. This may take a moment..."
       },
       "training": {
         "title": "Training Model",
-        "description": "Your model is being trained in the background. Close this dialog, and your model will start running as soon as training is complete."
+        "description": "Your model is being trained in the background. You can close this wizard and the training will continue."
       },
       "retryGenerate": "Retry Generation",
+      "selectClass": "Select class...",
+      "none": "None",
       "noImages": "No sample images generated",
       "classifying": "Classifying & Training...",
       "trainingStarted": "Training started successfully",

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

@@ -5,6 +5,10 @@
     "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },
   "details": {
+    "subLabelScore": "Sub Label Score",
+    "scoreInfo": "The sub label score is the weighted score for all of the recognized face confidences, so this may differ from the score shown on the snapshot.",
+    "face": "Face Details",
+    "faceDesc": "Details of the tracked object that generated this face",
     "timestamp": "Timestamp",
     "unknown": "Unknown"
   },
@@ -15,6 +19,8 @@
   },
   "collections": "Collections",
   "createFaceLibrary": {
+    "title": "Create Collection",
+    "desc": "Create a new collection",
     "new": "Create New Face",
     "nextSteps": "To build a strong foundation:<li>Use the Recent Recognitions 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>"
   },
@@ -31,6 +37,8 @@
     "aria": "Select recent recognitions",
     "empty": "There are no recent face recognition attempts"
   },
+  "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."
@@ -61,6 +69,7 @@
     "maxSize": "Max size: {{size}}MB"
   },
   "nofaces": "No faces available",
+  "pixels": "{{area}}px",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",
   "toast": {

web/src/components/card/ClassificationCard.tsx

@@ -126,7 +126,6 @@ export const ClassificationCard = forwardRef<
           imgClassName,
           isMobile && "w-full",
         )}
-        loading="lazy"
         onLoad={() => setImageLoaded(true)}
         src={`${baseUrl}${data.filepath}`}
       />

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -30,7 +30,6 @@ const STATE_STEPS = [
 type ClassificationModelWizardDialogProps = {
   open: boolean;
   onClose: () => void;
-  defaultModelType?: "state" | "object";
 };
 
 type WizardState = {
@@ -93,7 +92,6 @@ function wizardReducer(state: WizardState, action: WizardAction): WizardState {
 export default function ClassificationModelWizardDialog({
   open,
   onClose,
-  defaultModelType,
 }: ClassificationModelWizardDialogProps) {
   const { t } = useTranslation(["views/classificationModel"]);
 
@@ -137,12 +135,7 @@ export default function ClassificationModelWizardDialog({
       <DialogContent
         className={cn(
           "",
-          isDesktop &&
-            wizardState.currentStep == 0 &&
-            "max-h-[90%] overflow-y-auto xl:max-h-[80%]",
-          isDesktop &&
-            wizardState.currentStep > 0 &&
-            "max-h-[90%] max-w-[70%] overflow-y-auto xl:max-h-[80%]",
+          isDesktop && "max-h-[75dvh] max-w-6xl overflow-y-auto",
         )}
         onInteractOutside={(e) => {
           e.preventDefault();
@@ -173,7 +166,6 @@ export default function ClassificationModelWizardDialog({
           {wizardState.currentStep === 0 && (
             <Step1NameAndDefine
               initialData={wizardState.step1Data}
-              defaultModelType={defaultModelType}
               onNext={handleStep1Next}
               onCancel={handleCancel}
             />

web/src/components/classification/wizard/Step1NameAndDefine.tsx

@@ -22,16 +22,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { useTranslation } from "react-i18next";
 import { useMemo } from "react";
-import { LuX, LuPlus, LuInfo, LuExternalLink } from "react-icons/lu";
+import { LuX } from "react-icons/lu";
+import { MdAddBox } from "react-icons/md";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { getTranslatedLabel } from "@/utils/i18n";
-import { useDocDomain } from "@/hooks/use-doc-domain";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 
 export type ModelType = "state" | "object";
 export type ObjectClassificationType = "sub_label" | "attribute";
@@ -46,20 +41,17 @@ export type Step1FormData = {
 
 type Step1NameAndDefineProps = {
   initialData?: Partial<Step1FormData>;
-  defaultModelType?: "state" | "object";
   onNext: (data: Step1FormData) => void;
   onCancel: () => void;
 };
 
 export default function Step1NameAndDefine({
   initialData,
-  defaultModelType,
   onNext,
   onCancel,
 }: Step1NameAndDefineProps) {
   const { t } = useTranslation(["views/classificationModel"]);
   const { data: config } = useSWR<FrigateConfig>("config");
-  const { getLocaleDocUrl } = useDocDomain();
 
   const objectLabels = useMemo(() => {
     if (!config) return [];
@@ -155,7 +147,7 @@ export default function Step1NameAndDefine({
     resolver: zodResolver(step1FormData),
     defaultValues: {
       modelName: initialData?.modelName || "",
-      modelType: initialData?.modelType || defaultModelType || "state",
+      modelType: initialData?.modelType || "state",
       objectLabel: initialData?.objectLabel,
       objectType: initialData?.objectType || "sub_label",
       classes: initialData?.classes?.length ? initialData.classes : [""],
@@ -202,9 +194,7 @@ export default function Step1NameAndDefine({
             name="modelName"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="text-primary-variant">
-                  {t("wizard.step1.name")}
-                </FormLabel>
+                <FormLabel>{t("wizard.step1.name")}</FormLabel>
                 <FormControl>
                   <Input
                     className="h-8"
@@ -222,9 +212,7 @@ export default function Step1NameAndDefine({
             name="modelType"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="text-primary-variant">
-                  {t("wizard.step1.type")}
-                </FormLabel>
+                <FormLabel>{t("wizard.step1.type")}</FormLabel>
                 <FormControl>
                   <RadioGroup
                     onValueChange={field.onChange}
@@ -273,9 +261,7 @@ export default function Step1NameAndDefine({
                 name="objectLabel"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="text-primary-variant">
-                      {t("wizard.step1.objectLabel")}
-                    </FormLabel>
+                    <FormLabel>{t("wizard.step1.objectLabel")}</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
@@ -311,42 +297,9 @@ export default function Step1NameAndDefine({
                 name="objectType"
                 render={({ field }) => (
                   <FormItem>
-                    <div className="flex items-center gap-1">
-                      <FormLabel className="text-primary-variant">
-                        {t("wizard.step1.classificationType")}
-                      </FormLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-4 w-4 p-0"
-                          >
-                            <LuInfo className="size-3" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="pointer-events-auto w-80 text-xs">
-                          <div className="flex flex-col gap-2">
-                            <div className="text-sm">
-                              {t("wizard.step1.classificationTypeDesc")}
-                            </div>
-                            <div className="mt-3 flex items-center text-primary">
-                              <a
-                                href={getLocaleDocUrl(
-                                  "configuration/custom_classification/object_classification#classification-type",
-                                )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline cursor-pointer"
-                              >
-                                {t("readTheDocumentation", { ns: "common" })}
-                                <LuExternalLink className="ml-2 inline-flex size-3" />
-                              </a>
-                            </div>
-                          </div>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
+                    <FormLabel>
+                      {t("wizard.step1.classificationType")}
+                    </FormLabel>
                     <FormControl>
                       <RadioGroup
                         onValueChange={field.onChange}
@@ -392,50 +345,11 @@ export default function Step1NameAndDefine({
 
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1">
-                <FormLabel className="text-primary-variant">
-                  {t("wizard.step1.classes")}
-                </FormLabel>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button variant="ghost" size="sm" className="h-4 w-4 p-0">
-                      <LuInfo className="size-3" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="pointer-events-auto w-80 text-xs">
-                    <div className="flex flex-col gap-2">
-                      <div className="text-sm">
-                        {watchedModelType === "state"
-                          ? t("wizard.step1.classesStateDesc")
-                          : t("wizard.step1.classesObjectDesc")}
-                      </div>
-                      <div className="mt-3 flex items-center text-primary">
-                        <a
-                          href={getLocaleDocUrl(
-                            watchedModelType === "state"
-                              ? "configuration/custom_classification/state_classification"
-                              : "configuration/custom_classification/object_classification",
-                          )}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline cursor-pointer"
-                        >
-                          {t("readTheDocumentation", { ns: "common" })}
-                          <LuExternalLink className="ml-2 inline-flex size-3" />
-                        </a>
-                      </div>
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-              <Button
-                type="button"
-                variant="secondary"
-                className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+              <FormLabel>{t("wizard.step1.classes")}</FormLabel>
+              <MdAddBox
+                className="size-7 cursor-pointer text-primary hover:text-primary/80"
                 onClick={handleAddClass}
-              >
-                <LuPlus />
-              </Button>
+              />
             </div>
             <div className="space-y-2">
               {watchedClasses.map((_, index) => (

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -8,7 +8,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { LuX, LuPlus } from "react-icons/lu";
+import { MdAddBox } from "react-icons/md";
+import { LuX } from "react-icons/lu";
 import { Stage, Layer, Rect, Transformer } from "react-konva";
 import Konva from "konva";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -246,11 +247,12 @@ export default function Step2StateArea({
                 <PopoverTrigger asChild>
                   <Button
                     type="button"
-                    variant="secondary"
-                    className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6 p-0"
                     aria-label="Add camera"
                   >
-                    <LuPlus />
+                    <MdAddBox className="size-6 text-primary" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent
@@ -260,7 +262,7 @@ export default function Step2StateArea({
                   onOpenAutoFocus={(e) => e.preventDefault()}
                 >
                   <div className="flex flex-col gap-2">
-                    <Heading as="h4" className="text-sm text-primary-variant">
+                    <Heading as="h4" className="text-sm font-medium">
                       {t("wizard.step2.selectCamera")}
                     </Heading>
                     <div className="scrollbar-container flex max-h-[30vh] flex-col gap-1 overflow-y-auto">
@@ -283,13 +285,7 @@ export default function Step2StateArea({
                 </PopoverContent>
               </Popover>
             ) : (
-              <Button
-                variant="secondary"
-                className="size-6 cursor-not-allowed rounded-md bg-muted p-1 text-muted-foreground"
-                disabled
-              >
-                <LuPlus />
-              </Button>
+              <MdAddBox className="size-6 cursor-not-allowed text-muted" />
             )}
           </div>
 

web/src/components/classification/wizard/Step3ChooseExamples.tsx

@@ -1,4 +1,11 @@
 import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -40,9 +47,6 @@ export default function Step3ChooseExamples({
     [imageName: string]: string;
   }>(initialData?.imageClassifications || {});
   const [isTraining, setIsTraining] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [currentClassIndex, setCurrentClassIndex] = useState(0);
-  const [selectedImages, setSelectedImages] = useState<Set<string>>(new Set());
 
   const { data: trainImages, mutate: refreshTrainImages } = useSWR<string[]>(
     hasGenerated ? `classification/${step1Data.modelName}/train` : null,
@@ -53,165 +57,16 @@ export default function Step3ChooseExamples({
     return trainImages;
   }, [trainImages]);
 
-  const toggleImageSelection = useCallback((imageName: string) => {
-    setSelectedImages((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(imageName)) {
-        newSet.delete(imageName);
-      } else {
-        newSet.add(imageName);
-      }
-      return newSet;
-    });
-  }, []);
-
-  // Get all classes (excluding "none" - it will be auto-assigned)
-  const allClasses = useMemo(() => {
-    return [...step1Data.classes];
-  }, [step1Data.classes]);
-
-  const currentClass = allClasses[currentClassIndex];
-
-  const processClassificationsAndTrain = useCallback(
-    async (classifications: { [imageName: string]: string }) => {
-      // Step 1: Create config for the new model
-      const modelConfig: {
-        enabled: boolean;
-        name: string;
-        threshold: number;
-        state_config?: {
-          cameras: Record<string, { crop: number[] }>;
-          motion: boolean;
-        };
-        object_config?: { objects: string[]; classification_type: string };
-      } = {
-        enabled: true,
-        name: step1Data.modelName,
-        threshold: 0.8,
-      };
-
-      if (step1Data.modelType === "state") {
-        // State model config
-        const cameras: Record<string, { crop: number[] }> = {};
-        step2Data?.cameraAreas.forEach((area) => {
-          cameras[area.camera] = {
-            crop: area.crop,
-          };
-        });
-
-        modelConfig.state_config = {
-          cameras,
-          motion: true,
-        };
-      } else {
-        // Object model config
-        modelConfig.object_config = {
-          objects: step1Data.objectLabel ? [step1Data.objectLabel] : [],
-          classification_type: step1Data.objectType || "sub_label",
-        } as { objects: string[]; classification_type: string };
-      }
-
-      // Update config via config API
-      await axios.put("/config/set", {
-        requires_restart: 0,
-        update_topic: `config/classification/custom/${step1Data.modelName}`,
-        config_data: {
-          classification: {
-            custom: {
-              [step1Data.modelName]: modelConfig,
-            },
-          },
-        },
-      });
-
-      // Step 2: Classify each image by moving it to the correct category folder
-      const categorizePromises = Object.entries(classifications).map(
-        ([imageName, className]) => {
-          if (!className) return Promise.resolve();
-          return axios.post(
-            `/classification/${step1Data.modelName}/dataset/categorize`,
-            {
-              training_file: imageName,
-              category: className === "none" ? "none" : className,
-            },
-          );
-        },
-      );
-      await Promise.all(categorizePromises);
-
-      // Step 3: Kick off training
-      await axios.post(`/classification/${step1Data.modelName}/train`);
-
-      toast.success(t("wizard.step3.trainingStarted"));
-      setIsTraining(true);
+  const handleClassificationChange = useCallback(
+    (imageName: string, className: string) => {
+      setImageClassifications((prev) => ({
+        ...prev,
+        [imageName]: className,
+      }));
     },
-    [step1Data, step2Data, t],
+    [],
   );
 
-  const handleContinueClassification = useCallback(async () => {
-    // Mark selected images with current class
-    const newClassifications = { ...imageClassifications };
-    selectedImages.forEach((imageName) => {
-      newClassifications[imageName] = currentClass;
-    });
-
-    // Check if we're on the last class to select
-    const isLastClass = currentClassIndex === allClasses.length - 1;
-
-    if (isLastClass) {
-      // Assign remaining unclassified images
-      unknownImages.slice(0, 24).forEach((imageName) => {
-        if (!newClassifications[imageName]) {
-          // For state models with 2 classes, assign to the last class
-          // For object models, assign to "none"
-          if (step1Data.modelType === "state" && allClasses.length === 2) {
-            newClassifications[imageName] = allClasses[allClasses.length - 1];
-          } else {
-            newClassifications[imageName] = "none";
-          }
-        }
-      });
-
-      // All done, trigger training immediately
-      setImageClassifications(newClassifications);
-      setIsProcessing(true);
-
-      try {
-        await processClassificationsAndTrain(newClassifications);
-      } catch (error) {
-        const axiosError = error as {
-          response?: { data?: { message?: string; detail?: string } };
-          message?: string;
-        };
-        const errorMessage =
-          axiosError.response?.data?.message ||
-          axiosError.response?.data?.detail ||
-          axiosError.message ||
-          "Failed to classify images";
-
-        toast.error(
-          t("wizard.step3.errors.classifyFailed", { error: errorMessage }),
-        );
-        setIsProcessing(false);
-      }
-    } else {
-      // Move to next class
-      setImageClassifications(newClassifications);
-      setCurrentClassIndex((prev) => prev + 1);
-      setSelectedImages(new Set());
-    }
-  }, [
-    selectedImages,
-    currentClass,
-    currentClassIndex,
-    allClasses,
-    imageClassifications,
-    unknownImages,
-    step1Data,
-    processClassificationsAndTrain,
-    t,
-  ]);
-
   const generateExamples = useCallback(async () => {
     setIsGenerating(true);
 
@@ -280,9 +135,77 @@ export default function Step3ChooseExamples({
   }, []);
 
   const handleContinue = useCallback(async () => {
-    setIsProcessing(true);
     try {
-      await processClassificationsAndTrain(imageClassifications);
+      // Step 1: Create config for the new model
+      const modelConfig: {
+        enabled: boolean;
+        name: string;
+        threshold: number;
+        state_config?: {
+          cameras: Record<string, { crop: number[] }>;
+          motion: boolean;
+        };
+        object_config?: { objects: string[]; classification_type: string };
+      } = {
+        enabled: true,
+        name: step1Data.modelName,
+        threshold: 0.8,
+      };
+
+      if (step1Data.modelType === "state") {
+        // State model config
+        const cameras: Record<string, { crop: number[] }> = {};
+        step2Data?.cameraAreas.forEach((area) => {
+          cameras[area.camera] = {
+            crop: area.crop,
+          };
+        });
+
+        modelConfig.state_config = {
+          cameras,
+          motion: true,
+        };
+      } else {
+        // Object model config
+        modelConfig.object_config = {
+          objects: step1Data.objectLabel ? [step1Data.objectLabel] : [],
+          classification_type: step1Data.objectType || "sub_label",
+        } as { objects: string[]; classification_type: string };
+      }
+
+      // Update config via config API
+      await axios.put("/config/set", {
+        requires_restart: 0,
+        update_topic: `config/classification/custom/${step1Data.modelName}`,
+        config_data: {
+          classification: {
+            custom: {
+              [step1Data.modelName]: modelConfig,
+            },
+          },
+        },
+      });
+
+      // Step 2: Classify each image by moving it to the correct category folder
+      const categorizePromises = Object.entries(imageClassifications).map(
+        ([imageName, className]) => {
+          if (!className) return Promise.resolve();
+          return axios.post(
+            `/classification/${step1Data.modelName}/dataset/categorize`,
+            {
+              training_file: imageName,
+              category: className === "none" ? "none" : className,
+            },
+          );
+        },
+      );
+      await Promise.all(categorizePromises);
+
+      // Step 3: Kick off training
+      await axios.post(`/classification/${step1Data.modelName}/train`);
+
+      toast.success(t("wizard.step3.trainingStarted"));
+      setIsTraining(true);
     } catch (error) {
       const axiosError = error as {
         response?: { data?: { message?: string; detail?: string } };
@@ -297,25 +220,14 @@ export default function Step3ChooseExamples({
       toast.error(
         t("wizard.step3.errors.classifyFailed", { error: errorMessage }),
       );
-      setIsProcessing(false);
     }
-  }, [imageClassifications, processClassificationsAndTrain, t]);
-
-  const unclassifiedImages = useMemo(() => {
-    if (!unknownImages) return [];
-    const images = unknownImages.slice(0, 24);
-
-    // Only filter if we have any classifications
-    if (Object.keys(imageClassifications).length === 0) {
-      return images;
-    }
-
-    return images.filter((img) => !imageClassifications[img]);
-  }, [unknownImages, imageClassifications]);
+  }, [imageClassifications, step1Data, step2Data, t]);
 
   const allImagesClassified = useMemo(() => {
-    return unclassifiedImages.length === 0;
-  }, [unclassifiedImages]);
+    if (!unknownImages || unknownImages.length === 0) return false;
+    const imagesToClassify = unknownImages.slice(0, 24);
+    return imagesToClassify.every((img) => imageClassifications[img]);
+  }, [unknownImages, imageClassifications]);
 
   return (
     <div className="flex flex-col gap-6">
@@ -348,18 +260,9 @@ export default function Step3ChooseExamples({
         </div>
       ) : hasGenerated ? (
         <div className="flex flex-col gap-4">
-          {!allImagesClassified && (
-            <div className="text-center">
-              <h3 className="text-lg font-medium">
-                {t("wizard.step3.selectImagesPrompt", {
-                  className: currentClass,
-                })}
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                {t("wizard.step3.selectImagesDescription")}
-              </p>
-            </div>
-          )}
+          <div className="text-sm text-muted-foreground">
+            {t("wizard.step3.description")}
+          </div>
           <div
             className={cn(
               "rounded-lg bg-secondary/30 p-4",
@@ -367,42 +270,58 @@ export default function Step3ChooseExamples({
             )}
           >
             {!unknownImages || unknownImages.length === 0 ? (
-              <div className="flex h-[40vh] flex-col items-center justify-center gap-4">
+              <div className="flex h-[40vh] items-center justify-center">
                 <p className="text-muted-foreground">
                   {t("wizard.step3.noImages")}
                 </p>
-                <Button onClick={generateExamples} variant="select">
-                  {t("wizard.step3.retryGenerate")}
-                </Button>
-              </div>
-            ) : allImagesClassified && isProcessing ? (
-              <div className="flex h-[40vh] flex-col items-center justify-center gap-4">
-                <ActivityIndicator className="size-12" />
-                <p className="text-lg font-medium">
-                  {t("wizard.step3.classifying")}
-                </p>
               </div>
             ) : (
-              <div className="grid grid-cols-2 gap-4 sm:grid-cols-6">
-                {unclassifiedImages.map((imageName, index) => {
-                  const isSelected = selectedImages.has(imageName);
-                  return (
-                    <div
-                      key={imageName}
-                      className={cn(
-                        "aspect-square cursor-pointer overflow-hidden rounded-lg border-2 bg-background transition-all",
-                        isSelected && "border-selected ring-2 ring-selected",
-                      )}
-                      onClick={() => toggleImageSelection(imageName)}
-                    >
-                      <img
-                        src={`${baseUrl}clips/${step1Data.modelName}/train/${imageName}`}
-                        alt={`Example ${index + 1}`}
-                        className="h-full w-full object-cover"
-                      />
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-6">
+                {unknownImages.slice(0, 24).map((imageName, index) => (
+                  <div
+                    key={imageName}
+                    className="group relative aspect-square overflow-hidden rounded-lg border bg-background"
+                  >
+                    <img
+                      src={`${baseUrl}clips/${step1Data.modelName}/train/${imageName}`}
+                      alt={`Example ${index + 1}`}
+                      className="h-full w-full object-cover"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 p-2">
+                      <Select
+                        value={imageClassifications[imageName] || ""}
+                        onValueChange={(value) =>
+                          handleClassificationChange(imageName, value)
+                        }
+                      >
+                        <SelectTrigger className="h-7 bg-background/20 text-xs">
+                          <SelectValue
+                            placeholder={t("wizard.step3.selectClass")}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {step1Data.modelType === "object" && (
+                            <SelectItem
+                              value="none"
+                              className="cursor-pointer text-xs"
+                            >
+                              {t("wizard.step3.none")}
+                            </SelectItem>
+                          )}
+                          {step1Data.classes.map((className) => (
+                            <SelectItem
+                              key={className}
+                              value={className}
+                              className="cursor-pointer text-xs"
+                            >
+                              {className}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </div>
-                  );
-                })}
+                  </div>
+                ))}
               </div>
             )}
           </div>
@@ -425,16 +344,11 @@ export default function Step3ChooseExamples({
           </Button>
           <Button
             type="button"
-            onClick={
-              allImagesClassified
-                ? handleContinue
-                : handleContinueClassification
-            }
+            onClick={handleContinue}
             variant="select"
             className="flex items-center justify-center gap-2 sm:flex-1"
-            disabled={!hasGenerated || isGenerating || isProcessing}
+            disabled={!hasGenerated || isGenerating || !allImagesClassified}
           >
-            {isProcessing && <ActivityIndicator className="size-4" />}
             {t("button.continue", { ns: "common" })}
           </Button>
         </div>

web/src/views/classification/ModelSelectionView.tsx

@@ -10,14 +10,13 @@ import {
   CustomClassificationModelConfig,
   FrigateConfig,
 } from "@/types/frigateConfig";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { FaFolderPlus } from "react-icons/fa";
 import { MdModelTraining } from "react-icons/md";
 import useSWR from "swr";
 import Heading from "@/components/ui/heading";
-import { useOverlayState } from "@/hooks/use-overlay-state";
 
 const allModelTypes = ["objects", "states"] as const;
 type ModelType = (typeof allModelTypes)[number];
@@ -29,12 +28,8 @@ export default function ModelSelectionView({
   onClick,
 }: ModelSelectionViewProps) {
   const { t } = useTranslation(["views/classificationModel"]);
-  const [page, setPage] = useOverlayState<ModelType>("objects", "objects");
-  const [pageToggle, setPageToggle] = useOptimisticState(
-    page || "objects",
-    setPage,
-    100,
-  );
+  const [page, setPage] = useState<ModelType>("objects");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const { data: config, mutate: refreshConfig } = useSWR<FrigateConfig>(
     "config",
     {
@@ -42,12 +37,6 @@ export default function ModelSelectionView({
     },
   );
 
-  // title
-
-  useEffect(() => {
-    document.title = t("documentTitle");
-  }, [t]);
-
   // data
 
   const classificationConfigs = useMemo(() => {
@@ -80,11 +69,25 @@ export default function ModelSelectionView({
     return <ActivityIndicator />;
   }
 
+  if (classificationConfigs.length == 0) {
+    return (
+      <>
+        <ClassificationModelWizardDialog
+          open={newModel}
+          onClose={() => {
+            setNewModel(false);
+            refreshConfig();
+          }}
+        />
+        <NoModelsView onCreateModel={() => setNewModel(true)} />;
+      </>
+    );
+  }
+
   return (
     <div className="flex size-full flex-col p-2">
       <ClassificationModelWizardDialog
         open={newModel}
-        defaultModelType={pageToggle === "objects" ? "object" : "state"}
         onClose={() => {
           setNewModel(false);
           refreshConfig();
@@ -100,6 +103,7 @@ export default function ModelSelectionView({
             value={pageToggle}
             onValueChange={(value: ModelType) => {
               if (value) {
+                // Restrict viewer navigation
                 setPageToggle(value);
               }
             }}
@@ -132,45 +136,31 @@ export default function ModelSelectionView({
         </div>
       </div>
       <div className="flex size-full gap-2 p-2">
-        {selectedClassificationConfigs.length === 0 ? (
-          <NoModelsView
-            onCreateModel={() => setNewModel(true)}
-            modelType={pageToggle}
+        {selectedClassificationConfigs.map((config) => (
+          <ModelCard
+            key={config.name}
+            config={config}
+            onClick={() => onClick(config)}
           />
-        ) : (
-          selectedClassificationConfigs.map((config) => (
-            <ModelCard
-              key={config.name}
-              config={config}
-              onClick={() => onClick(config)}
-            />
-          ))
-        )}
+        ))}
       </div>
     </div>
   );
 }
 
-function NoModelsView({
-  onCreateModel,
-  modelType,
-}: {
-  onCreateModel: () => void;
-  modelType: ModelType;
-}) {
+function NoModelsView({ onCreateModel }: { onCreateModel: () => void }) {
   const { t } = useTranslation(["views/classificationModel"]);
-  const typeKey = modelType === "objects" ? "object" : "state";
 
   return (
     <div className="flex size-full items-center justify-center">
       <div className="flex flex-col items-center gap-2">
         <MdModelTraining className="size-8" />
-        <Heading as="h4">{t(`noModels.${typeKey}.title`)}</Heading>
+        <Heading as="h4">{t("noModels.title")}</Heading>
         <div className="mb-3 text-center text-secondary-foreground">
-          {t(`noModels.${typeKey}.description`)}
+          {t("noModels.description")}
         </div>
         <Button size="sm" variant="select" onClick={onCreateModel}>
-          {t(`noModels.${typeKey}.buttonText`)}
+          {t("noModels.buttonText")}
         </Button>
       </div>
     </div>

web/src/views/classification/ModelTrainingView.tsx

@@ -642,7 +642,6 @@ function DatasetGrid({
               filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
               name: "",
             }}
-            showArea={false}
             selected={selectedImages.includes(image)}
             i18nLibrary="views/classificationModel"
             onClick={(data, _) => onClickImages([data.filename], true)}