Cleanup

docs/docs/configuration/reference.md

@@ -671,20 +671,18 @@ lpr:
   # Optional: List of regex replacement rules to normalize detected plates (default: shown below)
   replace_rules: {}
 
-# Optional: Configuration for AI generated tracked object descriptions
+# Optional: Configuration for AI / LLM provider
 # WARNING: Depending on the provider, this will send thumbnails over the internet
-# to Google or OpenAI's LLMs to generate descriptions. It can be overridden at
-# the camera level (enabled: False) to enhance privacy for indoor cameras.
+# to Google or OpenAI's LLMs to generate descriptions. GenAI features can be configured at
+# the camera level to enhance privacy for indoor cameras.
 genai:
-  # Optional: Enable AI description generation (default: shown below)
-  enabled: False
-  # Required if enabled: Provider must be one of ollama, gemini, or openai
+  # Required: Provider must be one of ollama, gemini, or openai
   provider: ollama
   # Required if provider is ollama. May also be used for an OpenAI API compatible backend with the openai provider.
   base_url: http://localhost::11434
   # Required if gemini or openai
   api_key: "{FRIGATE_GENAI_API_KEY}"
-  # Required if enabled: The model to use with the provider.
+  # Required: The model to use with the provider.
   model: gemini-1.5-flash
   # Optional additional args to pass to the GenAI Provider (default: None)
   provider_options:

frigate/config/classification.py

@@ -69,7 +69,7 @@ class BirdClassificationConfig(FrigateBaseModel):
 
 
 class CustomClassificationStateCameraConfig(FrigateBaseModel):
-    crop: list[int, int, int, int] = Field(
+    crop: list[float, float, float, float] = Field(
         title="Crop of image frame on this camera to run classification on."
     )
 

frigate/data_processing/real_time/custom_classification.py

@@ -100,10 +100,10 @@ class CustomStateClassificationProcessor(RealTimeProcessorApi):
 
         camera_config = self.model_config.state_config.cameras[camera]
         crop = [
-            camera_config.crop[0],
-            camera_config.crop[1],
-            camera_config.crop[2],
-            camera_config.crop[3],
+            camera_config.crop[0] * self.config.cameras[camera].detect.width,
+            camera_config.crop[1] * self.config.cameras[camera].detect.height,
+            camera_config.crop[2] * self.config.cameras[camera].detect.width,
+            camera_config.crop[3] * self.config.cameras[camera].detect.height,
         ]
         should_run = False
 

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

@@ -49,5 +49,9 @@
     "new": "Create New Class"
   },
   "categorizeImageAs": "Classify Image As:",
-  "categorizeImage": "Classify Image"
+  "categorizeImage": "Classify Image",
+  "wizard": {
+    "title": "Create New Classification",
+    "description": "Create a new state or object classification model."
+  }
 }

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

@@ -33,8 +33,8 @@
     }
   },
   "train": {
-    "title": "Train",
-    "aria": "Select train",
+    "title": "Recent Recognitions",
+    "aria": "Select recent recognitions",
     "empty": "There are no recent face recognition attempts"
   },
   "selectItem": "Select {{item}}",

web/src/components/card/ClassificationCard.tsx

@@ -17,7 +17,6 @@ import { useNavigate } from "react-router-dom";
 import { getTranslatedLabel } from "@/utils/i18n";
 
 type ClassificationCardProps = {
-  className?: string;
   imgClassName?: string;
   data: ClassificationItemData;
   threshold?: ClassificationThreshold;
@@ -28,7 +27,6 @@ type ClassificationCardProps = {
   children?: React.ReactNode;
 };
 export function ClassificationCard({
-  className,
   imgClassName,
   data,
   threshold,

web/src/components/card/ExportCard.tsx

@@ -145,7 +145,7 @@ export default function ExportCard({
           <>
             {exportedRecording.thumb_path.length > 0 ? (
               <img
-                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
+                className="absolute inset-0 aspect-video size-full rounded-lg object-cover md:rounded-2xl"
                 src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
                 onLoad={() => setLoading(false)}
               />
@@ -224,10 +224,9 @@ export default function ExportCard({
         {loading && (
           <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
-            {exportedRecording.name.replaceAll("_", " ")}
-          </div>
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[50%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl" />
+        <div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize">
+          {exportedRecording.name.replaceAll("_", " ")}
         </div>
       </div>
     </>

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import StepIndicator from "../indicators/StepIndicator";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { useState } from "react";
+
+const STEPS = [
+  "classificationWizard.steps.nameAndDefine",
+  "classificationWizard.steps.stateArea",
+  "classificationWizard.steps.chooseExamples",
+  "classificationWizard.steps.train",
+];
+
+type ClassificationModelWizardDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+export default function ClassificationModelWizardDialog({
+  open,
+  onClose,
+}: ClassificationModelWizardDialogProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  // step management
+  const [currentStep, _] = useState(0);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose;
+        }
+      }}
+    >
+      <DialogContent
+        className="max-h-[90dvh] max-w-4xl overflow-y-auto"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <StepIndicator
+          steps={STEPS}
+          currentStep={currentStep}
+          variant="dots"
+          className="mb-4 justify-start"
+        />
+        <DialogHeader>
+          <DialogTitle>{t("wizard.title")}</DialogTitle>
+          {currentStep === 0 && (
+            <DialogDescription>{t("wizard.description")}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="pb-4">
+          <div className="size-full"></div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/FaceLibrary.tsx

@@ -940,7 +940,6 @@ function FaceGrid({
     >
       {sortedFaces.map((image: string) => (
         <ClassificationCard
-          className="gap-2 rounded-lg bg-card p-2"
           key={image}
           data={{
             name: pageToggle,

web/src/types/frigateConfig.ts

@@ -304,10 +304,10 @@ export type CustomClassificationModelConfig = {
   enabled: boolean;
   name: string;
   threshold: number;
-  object_config: null | {
+  object_config?: {
     objects: string[];
   };
-  state_config: null | {
+  state_config?: {
     cameras: {
       [cameraName: string]: {
         crop: [number, number, number, number];

web/src/views/classification/ModelSelectionView.tsx

@@ -1,4 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
+import ClassificationModelWizardDialog from "@/components/classification/ClassificationModelWizardDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -52,6 +53,10 @@ export default function ModelSelectionView({
     });
   }, [config, pageToggle]);
 
+  // new model wizard
+
+  const [newModel, setNewModel] = useState(false);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -62,6 +67,11 @@ export default function ModelSelectionView({
 
   return (
     <div className="flex size-full flex-col p-2">
+      <ClassificationModelWizardDialog
+        open={newModel}
+        onClose={() => setNewModel(false)}
+      />
+
       <div className="flex h-12 w-full items-center justify-between">
         <div className="flex flex-row items-center">
           <ToggleGroup
@@ -93,7 +103,11 @@ export default function ModelSelectionView({
           </ToggleGroup>
         </div>
         <div className="flex flex-row items-center">
-          <Button className="flex flex-row items-center gap-2" variant="select">
+          <Button
+            className="flex flex-row items-center gap-2"
+            variant="select"
+            onClick={() => setNewModel(true)}
+          >
             <FaFolderPlus />
             Add Classification
           </Button>

web/src/views/classification/ModelTrainingView.tsx

@@ -637,7 +637,6 @@ function DatasetGrid({
       {classData.map((image) => (
         <ClassificationCard
           key={image}
-          className="w-60 gap-4 rounded-lg bg-card p-2"
           imgClassName="size-auto"
           data={{
             filename: image,
@@ -799,7 +798,6 @@ function StateTrainGrid({
       {trainData?.map((data) => (
         <ClassificationCard
           key={data.filename}
-          className="w-60 gap-2 rounded-lg bg-card p-2"
           imgClassName="size-auto"
           data={data}
           threshold={threshold}