+ {t("form.firstTimeLogin")} +
+ + {t("readTheDocumentation", { ns: "common" })} + {
+ const isMeta = e.metaKey || e.ctrlKey;
+ if (isMeta) {
+ e.stopPropagation();
+ }
+ onClick(data, isMeta);
+ }}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ onClick(data, true);
+ }}
+ >
+ ![]()
-
- ![]()
setImageLoaded(true)}
- className={cn("size-44", imgClassName, isMobile && "w-full")}
- src={`${baseUrl}${data.filepath}`}
- onClick={(e) => {
- e.stopPropagation();
- onClick(data, e.metaKey || e.ctrlKey);
- }}
- />
- {imageArea != undefined && (
-
- {t("information.pixels", { ns: "common", area: imageArea })}
+ loading="lazy"
+ onLoad={() => setImageLoaded(true)}
+ src={`${baseUrl}${data.filepath}`}
+ />
+ (() => {
+ let best: undefined | ClassificationItemData = undefined;
+
+ group.forEach((item) => {
+ if (item?.name != undefined && item.name != "none") {
+ if (
+ best?.score == undefined ||
+ (item.score && best.score < item.score)
+ ) {
+ best = item;
+ }
+ }
+ });
+
+ if (!best) {
+ return group.at(-1);
+ }
+
+ const bestTyped: ClassificationItemData = best;
+ return {
+ ...bestTyped,
+ name: event ? (event.sub_label ?? t("details.unknown")) : bestTyped.name,
+ score: event?.data?.sub_label_score || bestTyped.score,
+ };
+ }, [group, event, t]);
+
+ const bestScoreStatus = useMemo(() => {
+ if (!bestItem?.score || !threshold) {
+ return "unknown";
+ }
+
+ if (bestItem.score >= threshold.recognition) {
+ return "match";
+ } else if (bestItem.score >= threshold.unknown) {
+ return "potential";
+ } else {
+ return "unknown";
+ }
+ }, [bestItem, threshold]);
const time = useMemo(() => {
const item = group[0];
@@ -170,94 +249,143 @@ export function GroupedClassificationCard({
return item.timestamp * 1000;
}, [group]);
- return (
- e.preventDefault()}
+ >
+ <>
+
+
+
+
+
);
}
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index cf0685caa..d57a30b52 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -21,6 +21,7 @@ import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
import { shareOrCopy } from "@/utils/browserUtil";
import { useTranslation } from "react-i18next";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
type ExportProps = {
className: string;
@@ -145,7 +146,7 @@ export default function ExportCard({
<>
{exportedRecording.thumb_path.length > 0 ? (
![]({`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/",)
setLoading(false)}
/>
@@ -224,10 +225,9 @@ export default function ExportCard({
{loading && (
}
+ | { type: "PREVIOUS_STEP" }
+ | { type: "SET_STEP_1"; payload: Step1FormData }
+ | { type: "SET_STEP_2"; payload: Step2FormData }
+ | { type: "SET_STEP_3"; payload: Step3FormData }
+ | { type: "RESET" };
+
+const initialState: WizardState = {
+ currentStep: 0,
+};
+
+function wizardReducer(state: WizardState, action: WizardAction): WizardState {
+ switch (action.type) {
+ case "SET_STEP_1":
+ return {
+ ...state,
+ step1Data: action.payload,
+ currentStep: 1,
+ };
+ case "SET_STEP_2":
+ return {
+ ...state,
+ step2Data: action.payload,
+ currentStep: 2,
+ };
+ case "SET_STEP_3":
+ return {
+ ...state,
+ step3Data: action.payload,
+ currentStep: 3,
+ };
+ case "NEXT_STEP":
+ return {
+ ...state,
+ ...action.payload,
+ currentStep: state.currentStep + 1,
+ };
+ case "PREVIOUS_STEP":
+ return {
+ ...state,
+ currentStep: Math.max(0, state.currentStep - 1),
+ };
+ case "RESET":
+ return initialState;
+ default:
+ return state;
+ }
+}
+
+export default function ClassificationModelWizardDialog({
+ open,
+ onClose,
+ defaultModelType,
+}: ClassificationModelWizardDialogProps) {
+ const { t } = useTranslation(["views/classificationModel"]);
+
+ const [wizardState, dispatch] = useReducer(wizardReducer, initialState);
+
+ const steps = useMemo(() => {
+ if (!wizardState.step1Data) {
+ return OBJECT_STEPS;
+ }
+ return wizardState.step1Data.modelType === "state"
+ ? STATE_STEPS
+ : OBJECT_STEPS;
+ }, [wizardState.step1Data]);
+
+ const handleStep1Next = (data: Step1FormData) => {
+ dispatch({ type: "SET_STEP_1", payload: data });
+ };
+
+ const handleStep2Next = (data: Step2FormData) => {
+ dispatch({ type: "SET_STEP_2", payload: data });
+ };
+
+ const handleBack = () => {
+ dispatch({ type: "PREVIOUS_STEP" });
+ };
+
+ const handleCancel = () => {
+ dispatch({ type: "RESET" });
+ onClose();
+ };
+
+ return (
+
+ );
+}
diff --git a/web/src/components/classification/wizard/Step1NameAndDefine.tsx b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
new file mode 100644
index 000000000..94e1741da
--- /dev/null
+++ b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
@@ -0,0 +1,498 @@
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { useForm } from "react-hook-form";
+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 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";
+
+export type Step1FormData = {
+ modelName: string;
+ modelType: ModelType;
+ objectLabel?: string;
+ objectType?: ObjectClassificationType;
+ classes: string[];
+};
+
+type Step1NameAndDefineProps = {
+ initialData?: Partial;
+ 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("config");
+ const { getLocaleDocUrl } = useDocDomain();
+
+ const objectLabels = useMemo(() => {
+ if (!config) return [];
+
+ const labels = new Set();
+
+ Object.values(config.cameras).forEach((cameraConfig) => {
+ if (!cameraConfig.enabled || !cameraConfig.enabled_in_config) {
+ return;
+ }
+
+ cameraConfig.objects.track.forEach((label) => {
+ if (!config.model.all_attributes.includes(label)) {
+ labels.add(label);
+ }
+ });
+ });
+
+ return [...labels].sort();
+ }, [config]);
+
+ const step1FormData = z
+ .object({
+ modelName: z
+ .string()
+ .min(1, t("wizard.step1.errors.nameRequired"))
+ .max(64, t("wizard.step1.errors.nameLength"))
+ .refine((value) => !/^\d+$/.test(value), {
+ message: t("wizard.step1.errors.nameOnlyNumbers"),
+ }),
+ modelType: z.enum(["state", "object"]),
+ objectLabel: z.string().optional(),
+ objectType: z.enum(["sub_label", "attribute"]).optional(),
+ classes: z
+ .array(z.string())
+ .min(1, t("wizard.step1.errors.classRequired"))
+ .refine(
+ (classes) => {
+ const nonEmpty = classes.filter((c) => c.trim().length > 0);
+ return nonEmpty.length >= 1;
+ },
+ { message: t("wizard.step1.errors.classRequired") },
+ )
+ .refine(
+ (classes) => {
+ const nonEmpty = classes.filter((c) => c.trim().length > 0);
+ const unique = new Set(nonEmpty.map((c) => c.toLowerCase()));
+ return unique.size === nonEmpty.length;
+ },
+ { message: t("wizard.step1.errors.classesUnique") },
+ ),
+ })
+ .refine(
+ (data) => {
+ // State models require at least 2 classes
+ if (data.modelType === "state") {
+ const nonEmpty = data.classes.filter((c) => c.trim().length > 0);
+ return nonEmpty.length >= 2;
+ }
+ return true;
+ },
+ {
+ message: t("wizard.step1.errors.stateRequiresTwoClasses"),
+ path: ["classes"],
+ },
+ )
+ .refine(
+ (data) => {
+ if (data.modelType === "object") {
+ return data.objectLabel !== undefined && data.objectLabel !== "";
+ }
+ return true;
+ },
+ {
+ message: t("wizard.step1.errors.objectLabelRequired"),
+ path: ["objectLabel"],
+ },
+ )
+ .refine(
+ (data) => {
+ if (data.modelType === "object") {
+ return data.objectType !== undefined;
+ }
+ return true;
+ },
+ {
+ message: t("wizard.step1.errors.objectTypeRequired"),
+ path: ["objectType"],
+ },
+ );
+
+ const form = useForm>({
+ resolver: zodResolver(step1FormData),
+ defaultValues: {
+ modelName: initialData?.modelName || "",
+ modelType: initialData?.modelType || defaultModelType || "state",
+ objectLabel: initialData?.objectLabel,
+ objectType: initialData?.objectType || "sub_label",
+ classes: initialData?.classes?.length ? initialData.classes : [""],
+ },
+ mode: "onChange",
+ });
+
+ const watchedClasses = form.watch("classes");
+ const watchedModelType = form.watch("modelType");
+ const watchedObjectType = form.watch("objectType");
+
+ const handleAddClass = () => {
+ const currentClasses = form.getValues("classes");
+ form.setValue("classes", [...currentClasses, ""], { shouldValidate: true });
+ };
+
+ const handleRemoveClass = (index: number) => {
+ const currentClasses = form.getValues("classes");
+ const newClasses = currentClasses.filter((_, i) => i !== index);
+
+ // Ensure at least one field remains (even if empty)
+ if (newClasses.length === 0) {
+ form.setValue("classes", [""], { shouldValidate: true });
+ } else {
+ form.setValue("classes", newClasses, { shouldValidate: true });
+ }
+ };
+
+ const onSubmit = (data: z.infer) => {
+ // Filter out empty classes
+ const filteredClasses = data.classes.filter((c) => c.trim().length > 0);
+ onNext({
+ ...data,
+ classes: filteredClasses,
+ });
+ };
+
+ return (
+ ;
+ onNext: (data: Step2FormData) => void;
+ onBack: () => void;
+};
+
+export default function Step2StateArea({
+ initialData,
+ onNext,
+ onBack,
+}: Step2StateAreaProps) {
+ const { t } = useTranslation(["views/classificationModel"]);
+ const { data: config } = useSWR("config");
+ const apiHost = useApiHost();
+
+ const [cameraAreas, setCameraAreas] = useState(
+ initialData?.cameraAreas || [],
+ );
+ const [selectedCameraIndex, setSelectedCameraIndex] = useState(0);
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+ const [imageLoaded, setImageLoaded] = useState(false);
+
+ const containerRef = useRef(null);
+ const imageRef = useRef(null);
+ const stageRef = useRef(null);
+ const rectRef = useRef(null);
+ const transformerRef = useRef(null);
+
+ const [{ width: containerWidth }] = useResizeObserver(containerRef);
+
+ const availableCameras = useMemo(() => {
+ if (!config) return [];
+
+ const selectedCameraNames = cameraAreas.map((ca) => ca.camera);
+ return Object.entries(config.cameras)
+ .sort()
+ .filter(
+ ([name, cam]) =>
+ cam.enabled &&
+ cam.enabled_in_config &&
+ !selectedCameraNames.includes(name),
+ )
+ .map(([name]) => ({
+ name,
+ displayName: resolveCameraName(config, name),
+ }));
+ }, [config, cameraAreas]);
+
+ const selectedCamera = useMemo(() => {
+ if (cameraAreas.length === 0) return null;
+ return cameraAreas[selectedCameraIndex];
+ }, [cameraAreas, selectedCameraIndex]);
+
+ const selectedCameraConfig = useMemo(() => {
+ if (!config || !selectedCamera) return null;
+ return config.cameras[selectedCamera.camera];
+ }, [config, selectedCamera]);
+
+ const imageSize = useMemo(() => {
+ if (!containerWidth || !selectedCameraConfig) {
+ return { width: 0, height: 0 };
+ }
+
+ const containerAspectRatio = 16 / 9;
+ const containerHeight = containerWidth / containerAspectRatio;
+
+ const cameraAspectRatio =
+ selectedCameraConfig.detect.width / selectedCameraConfig.detect.height;
+
+ // Fit camera within 16:9 container
+ let imageWidth, imageHeight;
+ if (cameraAspectRatio > containerAspectRatio) {
+ imageWidth = containerWidth;
+ imageHeight = imageWidth / cameraAspectRatio;
+ } else {
+ imageHeight = containerHeight;
+ imageWidth = imageHeight * cameraAspectRatio;
+ }
+
+ return { width: imageWidth, height: imageHeight };
+ }, [containerWidth, selectedCameraConfig]);
+
+ const handleAddCamera = useCallback(
+ (cameraName: string) => {
+ // Calculate a square crop in pixel space
+ const camera = config?.cameras[cameraName];
+ if (!camera) return;
+
+ const cameraAspect = camera.detect.width / camera.detect.height;
+ const cropSize = 0.3;
+ let x1, y1, x2, y2;
+
+ if (cameraAspect >= 1) {
+ const pixelSize = cropSize * camera.detect.height;
+ const normalizedWidth = pixelSize / camera.detect.width;
+ x1 = (1 - normalizedWidth) / 2;
+ y1 = (1 - cropSize) / 2;
+ x2 = x1 + normalizedWidth;
+ y2 = y1 + cropSize;
+ } else {
+ const pixelSize = cropSize * camera.detect.width;
+ const normalizedHeight = pixelSize / camera.detect.height;
+ x1 = (1 - cropSize) / 2;
+ y1 = (1 - normalizedHeight) / 2;
+ x2 = x1 + cropSize;
+ y2 = y1 + normalizedHeight;
+ }
+
+ const newArea: CameraAreaConfig = {
+ camera: cameraName,
+ crop: [x1, y1, x2, y2],
+ };
+ setCameraAreas([...cameraAreas, newArea]);
+ setSelectedCameraIndex(cameraAreas.length);
+ setIsPopoverOpen(false);
+ },
+ [cameraAreas, config],
+ );
+
+ const handleRemoveCamera = useCallback(
+ (index: number) => {
+ const newAreas = cameraAreas.filter((_, i) => i !== index);
+ setCameraAreas(newAreas);
+ if (selectedCameraIndex >= newAreas.length) {
+ setSelectedCameraIndex(Math.max(0, newAreas.length - 1));
+ }
+ },
+ [cameraAreas, selectedCameraIndex],
+ );
+
+ const handleCropChange = useCallback(
+ (crop: [number, number, number, number]) => {
+ const newAreas = [...cameraAreas];
+ newAreas[selectedCameraIndex] = {
+ ...newAreas[selectedCameraIndex],
+ crop,
+ };
+ setCameraAreas(newAreas);
+ },
+ [cameraAreas, selectedCameraIndex],
+ );
+
+ useEffect(() => {
+ setImageLoaded(false);
+ }, [selectedCamera]);
+
+ useEffect(() => {
+ const rect = rectRef.current;
+ const transformer = transformerRef.current;
+
+ if (
+ rect &&
+ transformer &&
+ selectedCamera &&
+ imageSize.width > 0 &&
+ imageLoaded
+ ) {
+ rect.scaleX(1);
+ rect.scaleY(1);
+ transformer.nodes([rect]);
+ transformer.getLayer()?.batchDraw();
+ }
+ }, [selectedCamera, imageSize, imageLoaded]);
+
+ const handleRectChange = useCallback(() => {
+ const rect = rectRef.current;
+
+ if (rect && imageSize.width > 0) {
+ const actualWidth = rect.width() * rect.scaleX();
+ const actualHeight = rect.height() * rect.scaleY();
+
+ // Average dimensions to maintain perfect square
+ const size = (actualWidth + actualHeight) / 2;
+
+ rect.width(size);
+ rect.height(size);
+ rect.scaleX(1);
+ rect.scaleY(1);
+
+ const x1 = rect.x() / imageSize.width;
+ const y1 = rect.y() / imageSize.height;
+ const x2 = (rect.x() + size) / imageSize.width;
+ const y2 = (rect.y() + size) / imageSize.height;
+
+ handleCropChange([x1, y1, x2, y2]);
+ }
+ }, [imageSize, handleCropChange]);
+
+ const handleContinue = useCallback(() => {
+ onNext({ cameraAreas });
+ }, [cameraAreas, onNext]);
+
+ const canContinue = cameraAreas.length > 0;
+
+ return (
+ ;
+ onClose: () => void;
+ onBack: () => void;
+};
+
+export default function Step3ChooseExamples({
+ step1Data,
+ step2Data,
+ initialData,
+ onClose,
+ onBack,
+}: Step3ChooseExamplesProps) {
+ const { t } = useTranslation(["views/classificationModel"]);
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [hasGenerated, setHasGenerated] = useState(
+ initialData?.examplesGenerated || false,
+ );
+ const [imageClassifications, setImageClassifications] = useState<{
+ [imageName: string]: string;
+ }>(initialData?.imageClassifications || {});
+ const [isTraining, setIsTraining] = useState(false);
+ const [isProcessing, setIsProcessing] = useState(false);
+ const [currentClassIndex, setCurrentClassIndex] = useState(0);
+ const [selectedImages, setSelectedImages] = useState>(new Set());
+
+ const { data: trainImages, mutate: refreshTrainImages } = useSWR(
+ hasGenerated ? `classification/${step1Data.modelName}/train` : null,
+ );
+
+ const unknownImages = useMemo(() => {
+ if (!trainImages) return [];
+ 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;
+ 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 = {};
+ 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);
+ },
+ [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);
+
+ try {
+ if (step1Data.modelType === "state") {
+ // For state models, use cameras and crop areas
+ if (!step2Data?.cameraAreas || step2Data.cameraAreas.length === 0) {
+ toast.error(t("wizard.step3.errors.noCameras"));
+ setIsGenerating(false);
+ return;
+ }
+
+ const cameras: { [key: string]: [number, number, number, number] } = {};
+ step2Data.cameraAreas.forEach((area) => {
+ cameras[area.camera] = area.crop;
+ });
+
+ await axios.post("/classification/generate_examples/state", {
+ model_name: step1Data.modelName,
+ cameras,
+ });
+ } else {
+ // For object models, use label
+ if (!step1Data.objectLabel) {
+ toast.error(t("wizard.step3.errors.noObjectLabel"));
+ setIsGenerating(false);
+ return;
+ }
+
+ // For now, use all enabled cameras
+ // TODO: In the future, we might want to let users select specific cameras
+ await axios.post("/classification/generate_examples/object", {
+ model_name: step1Data.modelName,
+ label: step1Data.objectLabel,
+ });
+ }
+
+ setHasGenerated(true);
+ toast.success(t("wizard.step3.generateSuccess"));
+
+ await refreshTrainImages();
+ } 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 generate examples";
+
+ toast.error(
+ t("wizard.step3.errors.generateFailed", { error: errorMessage }),
+ );
+ } finally {
+ setIsGenerating(false);
+ }
+ }, [step1Data, step2Data, t, refreshTrainImages]);
+
+ useEffect(() => {
+ if (!hasGenerated && !isGenerating) {
+ generateExamples();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const handleContinue = useCallback(async () => {
+ setIsProcessing(true);
+ try {
+ await processClassificationsAndTrain(imageClassifications);
+ } 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);
+ }
+ }, [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]);
+
+ const allImagesClassified = useMemo(() => {
+ return unclassifiedImages.length === 0;
+ }, [unclassifiedImages]);
+
+ return (
+
+
+ )}
+ {!count && imageArea != undefined && (
+ {count}
{" "}
+
+ {t("information.pixels", { ns: "common", area: imageArea })}
+
+ )}
+
+
+
);
-}
+});
type GroupedClassificationCardProps = {
group: ClassificationItemData[];
@@ -136,7 +182,6 @@ type GroupedClassificationCardProps = {
i18nLibrary: string;
objectType: string;
onClick: (data: ClassificationItemData | undefined) => void;
- onSelectEvent: (event: Event) => void;
children?: (data: ClassificationItemData) => React.ReactNode;
};
export function GroupedClassificationCard({
@@ -145,20 +190,54 @@ export function GroupedClassificationCard({
threshold,
selectedItems,
i18nLibrary,
- objectType,
onClick,
- onSelectEvent,
children,
}: GroupedClassificationCardProps) {
const navigate = useNavigate();
const { t } = useTranslation(["views/explore", i18nLibrary]);
+ const [detailOpen, setDetailOpen] = useState(false);
// data
- const allItemsSelected = useMemo(
- () => group.every((data) => selectedItems.includes(data.filename)),
- [group, selectedItems],
- );
+ const bestItem = useMemo
+
-
+ {data.name == "unknown" ? t("details.unknown") : data.name}
+
+ {data.score && (
+
+ {Math.round(data.score * 100)}%
)}
-
-
+
-
+
-
-
- {data.name == "unknown" ? t("details.unknown") : data.name}
-
- {data.score && (
-
- {Math.round(data.score * 100)}%
-
- )}
-
- {children}
-
-
+ {children}
{
- if (selectedItems.length) {
- onClick(undefined);
- }
- }}
- onContextMenu={(e) => {
- e.stopPropagation();
- e.preventDefault();
- onClick(undefined);
- }}
- >
-
+
-
-
-
-
-
- {t("details.item.button.viewInExplore", {
- ns: "views/explore",
- })}
-
-
-
- )}
-
+ if (!bestItem) {
+ return null;
+ }
-
-
- {event && (
-
- {getTranslatedLabel(objectType)}
- {event?.sub_label
- ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
- : ": " + t("details.unknown")}
-
- {time && (
- {
- navigate(`/explore?event_id=${event.id}`);
- }}
- >
-
-
+ {
+ if (meta || selectedItems.length > 0) {
+ onClick(undefined);
+ } else {
+ setDetailOpen(true);
+ }
+ }}
+ />
+ {
+ if (!open) {
+ setDetailOpen(false);
+ }
+ }}
>
- {group.map((data: ClassificationItemData) => (
- {
- if (meta || selectedItems.length > 0) {
- onClick(data);
- } else if (event) {
- onSelectEvent(event);
- }
- }}
- >
- {children?.(data)}
-
- ))}
-
-
+
+ {event?.sub_label ? event.sub_label : t("details.unknown")}
+ {event?.sub_label && (
+
+
+ {time && (
+
+
+ {isDesktop && (
+ {`${Math.round((event.data.sub_label_score || 0) * 100)}%`}
+ )}
+
+ {event && (
+
+
+
+
+
+ {t("details.item.button.viewInExplore", {
+ ns: "views/explore",
+ })}
+
+
+
+ )}
+
+ )}
+ {
+ navigate(`/explore?event_id=${event.id}`);
+ }}
+ >
+
+
+ {group.map((data: ClassificationItemData) => (
+
+
+
+ {
+ if (meta || selectedItems.length > 0) {
+ onClick(data);
+ }
+ }}
+ >
+ {children?.(data)}
+
+
+ ))}
+ setLoading(false)}
/>
@@ -224,10 +225,9 @@ export default function ExportCard({
{loading && (
-
diff --git a/web/src/components/classification/ClassificationModelWizardDialog.tsx b/web/src/components/classification/ClassificationModelWizardDialog.tsx
new file mode 100644
index 000000000..e67a95f89
--- /dev/null
+++ b/web/src/components/classification/ClassificationModelWizardDialog.tsx
@@ -0,0 +1,206 @@
+import { useTranslation } from "react-i18next";
+import StepIndicator from "../indicators/StepIndicator";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "../ui/dialog";
+import { useReducer, useMemo } from "react";
+import Step1NameAndDefine, { Step1FormData } from "./wizard/Step1NameAndDefine";
+import Step2StateArea, { Step2FormData } from "./wizard/Step2StateArea";
+import Step3ChooseExamples, {
+ Step3FormData,
+} from "./wizard/Step3ChooseExamples";
+import { cn } from "@/lib/utils";
+import { isDesktop } from "react-device-detect";
+
+const OBJECT_STEPS = [
+ "wizard.steps.nameAndDefine",
+ "wizard.steps.chooseExamples",
+];
+
+const STATE_STEPS = [
+ "wizard.steps.nameAndDefine",
+ "wizard.steps.stateArea",
+ "wizard.steps.chooseExamples",
+];
+
+type ClassificationModelWizardDialogProps = {
+ open: boolean;
+ onClose: () => void;
+ defaultModelType?: "state" | "object";
+};
+
+type WizardState = {
+ currentStep: number;
+ step1Data?: Step1FormData;
+ step2Data?: Step2FormData;
+ step3Data?: Step3FormData;
+};
+
+type WizardAction =
+ | { type: "NEXT_STEP"; payload?: Partial
- {exportedRecording.name.replaceAll("_", " ")}
-
+
+ {exportedRecording.name.replaceAll("_", " ")}
+
+
+
+
+ );
+}
diff --git a/web/src/components/classification/wizard/Step2StateArea.tsx b/web/src/components/classification/wizard/Step2StateArea.tsx
new file mode 100644
index 000000000..38c2fcad7
--- /dev/null
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@@ -0,0 +1,479 @@
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "react-i18next";
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { LuX, LuPlus } from "react-icons/lu";
+import { Stage, Layer, Rect, Transformer } from "react-konva";
+import Konva from "konva";
+import { useResizeObserver } from "@/hooks/resize-observer";
+import { useApiHost } from "@/api";
+import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
+import Heading from "@/components/ui/heading";
+import { isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+
+export type CameraAreaConfig = {
+ camera: string;
+ crop: [number, number, number, number];
+};
+
+export type Step2FormData = {
+ cameraAreas: CameraAreaConfig[];
+};
+
+type Step2StateAreaProps = {
+ initialData?: Partial
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/classification/wizard/Step3ChooseExamples.tsx b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
new file mode 100644
index 000000000..06bb2bbad
--- /dev/null
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@@ -0,0 +1,444 @@
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "react-i18next";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import axios from "axios";
+import { toast } from "sonner";
+import { Step1FormData } from "./Step1NameAndDefine";
+import { Step2FormData } from "./Step2StateArea";
+import useSWR from "swr";
+import { baseUrl } from "@/api/baseUrl";
+import { isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+
+export type Step3FormData = {
+ examplesGenerated: boolean;
+ imageClassifications?: { [imageName: string]: string };
+};
+
+type Step3ChooseExamplesProps = {
+ step1Data: Step1FormData;
+ step2Data?: Step2FormData;
+ initialData?: Partial
+
+
+
+
+
+
+
+
+
+
+ e.preventDefault()}
+ >
+
+
+ ) : (
+
+ )}
+
+
+ {t("wizard.step2.cameras")}
+ {availableCameras.length > 0 ? ( +
+
+ {t("wizard.step2.selectCamera")}
+
+
+
+ {availableCameras.map((cam) => (
+
+ ))}
+
+
+ {cameraAreas.map((area, index) => {
+ const isSelected = index === selectedCameraIndex;
+ const displayName = resolveCameraName(config, area.camera);
+
+ return (
+
+
+ {cameraAreas.length === 0 && (
+ setSelectedCameraIndex(index)}
+ >
+ {displayName}
+
+
+ );
+ })}
+
+ {t("wizard.step2.noCameras")}
+
+ )}
+
+
+
+ {selectedCamera && selectedCameraConfig && imageSize.width > 0 ? (
+
+
+ 
setImageLoaded(true)}
+ />
+
+
+ {
+ const rect = rectRef.current;
+ if (!rect) return pos;
+
+ const size = rect.width();
+ const x = Math.max(
+ 0,
+ Math.min(pos.x, imageSize.width - size),
+ );
+ const y = Math.max(
+ 0,
+ Math.min(pos.y, imageSize.height - size),
+ );
+
+ return { x, y };
+ }}
+ onDragEnd={handleRectChange}
+ onTransformEnd={handleRectChange}
+ />
+ {
+ const minSize = 50;
+ const maxSize = Math.min(
+ imageSize.width,
+ imageSize.height,
+ );
+
+ // Clamp dimensions to stage bounds first
+ const clampedWidth = Math.max(
+ minSize,
+ Math.min(newBox.width, maxSize),
+ );
+ const clampedHeight = Math.max(
+ minSize,
+ Math.min(newBox.height, maxSize),
+ );
+
+ // Enforce square using average
+ const size = (clampedWidth + clampedHeight) / 2;
+
+ // Clamp position to keep square within bounds
+ const x = Math.max(
+ 0,
+ Math.min(newBox.x, imageSize.width - size),
+ );
+ const y = Math.max(
+ 0,
+ Math.min(newBox.y, imageSize.height - size),
+ );
+
+ return {
+ ...newBox,
+ x,
+ y,
+ width: size,
+ height: size,
+ };
+ }}
+ />
+
+
+
+ ) : (
+ setImageLoaded(true)}
+ />
+
+ {t("wizard.step2.selectCameraPrompt")}
+
+ )}
+
+
+
+
+
+ {isTraining ? (
+
+ );
+}
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index c39d47c31..d6df53987 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -495,8 +495,7 @@ export function GeneralFilterContent({
checked={filter.labels === undefined}
onCheckedChange={(isChecked) => {
if (isChecked) {
- const { labels: _labels, ...rest } = filter;
- onUpdateFilter(rest);
+ onUpdateFilter({ ...filter, labels: undefined });
}
}}
/>
@@ -542,8 +541,7 @@ export function GeneralFilterContent({
checked={filter.zones === undefined}
onCheckedChange={(isChecked) => {
if (isChecked) {
- const { zones: _zones, ...rest } = filter;
- onUpdateFilter(rest);
+ onUpdateFilter({ ...filter, zones: undefined });
}
}}
/>
diff --git a/web/src/components/overlay/ClassificationSelectionDialog.tsx b/web/src/components/overlay/ClassificationSelectionDialog.tsx
index f86ced19a..ca5057ee5 100644
--- a/web/src/components/overlay/ClassificationSelectionDialog.tsx
+++ b/web/src/components/overlay/ClassificationSelectionDialog.tsx
@@ -20,15 +20,14 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { isDesktop, isMobile } from "react-device-detect";
-import { LuPlus } from "react-icons/lu";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";
import React, { ReactNode, useCallback, useMemo, useState } from "react";
import TextEntryDialog from "./dialog/TextEntryDialog";
import { Button } from "../ui/button";
-import { MdCategory } from "react-icons/md";
import axios from "axios";
import { toast } from "sonner";
+import { Separator } from "../ui/separator";
type ClassificationSelectionDialogProps = {
className?: string;
@@ -97,7 +96,7 @@ export default function ClassificationSelectionDialog({
);
return (
-
+
+ ) : isGenerating ? (
+
+
+
+ + {t("wizard.step3.training.title")} +
++ {t("wizard.step3.training.description")} +
+
+
+ ) : hasGenerated ? (
+
+
+ + {t("wizard.step3.generating.title")} +
++ {t("wizard.step3.generating.description")} +
+
+ {!allImagesClassified && (
+
+ ) : (
+
+
+ )}
+ + {t("wizard.step3.selectImagesPrompt", { + className: currentClass, + })} +
++ {t("wizard.step3.selectImagesDescription")} +
+
+ {!unknownImages || unknownImages.length === 0 ? (
+
+
+
+ ) : allImagesClassified && isProcessing ? (
+ + {t("wizard.step3.noImages")} +
+ +
+
+ ) : (
+ + {t("wizard.step3.classifying")} +
+
+ {unclassifiedImages.map((imageName, index) => {
+ const isSelected = selectedImages.has(imageName);
+ return (
+
+ )}
+ toggleImageSelection(imageName)}
+ >
+ 
+
+ );
+ })}
+
+
+ )}
+
+ {!isTraining && (
+ + {t("wizard.step3.errors.generationFailed")} +
+ +
+
+
+
+ )}
+
+
{newClass && (
- setNewClass(true)}
- >
-
{classes.sort().map((category) => (
onCategorizeImage(category)}
>
-
))}
+ setNewClass(true)}
+ >
+ {t("createCategory.new")}
+
diff --git a/web/src/components/overlay/FaceSelectionDialog.tsx b/web/src/components/overlay/FaceSelectionDialog.tsx
index 3644ff1cf..174428a12 100644
--- a/web/src/components/overlay/FaceSelectionDialog.tsx
+++ b/web/src/components/overlay/FaceSelectionDialog.tsx
@@ -62,7 +62,7 @@ export default function FaceSelectionDialog({
);
return (
-
+
-
-
+ ;
@@ -335,7 +337,15 @@ export default function CameraWizardDialog({
return (
diff --git a/web/src/components/settings/wizard/Step2StreamConfig.tsx b/web/src/components/settings/wizard/Step2StreamConfig.tsx
index 0a3419940..5827e6467 100644
--- a/web/src/components/settings/wizard/Step2StreamConfig.tsx
+++ b/web/src/components/settings/wizard/Step2StreamConfig.tsx
@@ -151,9 +151,9 @@ export default function Step2StreamConfig({
? `${videoStream.width}x${videoStream.height}`
: undefined;
- const fps = videoStream?.r_frame_rate
- ? parseFloat(videoStream.r_frame_rate.split("/")[0]) /
- parseFloat(videoStream.r_frame_rate.split("/")[1])
+ const fps = videoStream?.avg_frame_rate
+ ? parseFloat(videoStream.avg_frame_rate.split("/")[0]) /
+ parseFloat(videoStream.avg_frame_rate.split("/")[1])
: undefined;
const testResult: TestResult = {
@@ -277,7 +277,7 @@ export default function Step2StreamConfig({
{newFace && (
+
+
+
+ );
+}
diff --git a/web/src/components/overlay/MobileTimelineDrawer.tsx b/web/src/components/overlay/MobileTimelineDrawer.tsx
index ed71f8a23..1d660f928 100644
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/web/src/components/overlay/MobileTimelineDrawer.tsx
@@ -51,6 +51,15 @@ export default function MobileTimelineDrawer({
>
{t("events.label")}
+ {
+ onSelect("detail");
+ setDrawer(false);
+ }}
+ >
+ {t("detail.label")}
+
);
diff --git a/web/src/components/overlay/dialog/TrainFilterDialog.tsx b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
index f4ccf41e1..982523ae9 100644
--- a/web/src/components/overlay/dialog/TrainFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
@@ -60,7 +60,7 @@ export default function TrainFilterDialog({
moreFiltersSelected ? "text-white" : "text-secondary-foreground",
)}
/>
- {isDesktop && t("more")}
+ {isDesktop && t("filter")}
);
const content = (
@@ -122,7 +122,7 @@ export default function TrainFilterDialog({
return (
{player}
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index f61e544eb..1f5ca703a 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -25,6 +25,7 @@ import { PlayerStats } from "./PlayerStats";
import { LuVideoOff } from "react-icons/lu";
import { Trans, useTranslation } from "react-i18next";
import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
type LivePlayerProps = {
cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -328,10 +329,7 @@ export default function LivePlayer({
>
{cameraEnabled &&
((showStillWithoutActivity && !liveReady) || liveReady) && (
- <>
-
-
-
+
-