Miscellaneous Fixes (#20866)

* Don't warn when event ids have expired for trigger sync * Import faster_whisper conditinally to avoid illegal instruction * Catch OpenVINO runtime error * fix race condition in detail stream context navigating between tracked objects in Explore would sometimes prevent the object track from appearing * Handle case where classification images are deleted * Adjust default rounded corners on larger screens * Improve flow handling for classification state * Remove images when wizard is cancelled * Improve deletion handling for classes * Set constraints on review buffers * Update to support correct data format * Set minimum duration for recording based review items * Use friendly name in review genai prompt --------- Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
2026-03-07 02:18:07 +01:00 · 2025-11-10 11:03:56 -06:00
parent 99a363c047
commit c371fc0c87
20 changed files with 287 additions and 113 deletions
--- a/web/src/components/classification/ClassificationModelEditDialog.tsx
+++ b/web/src/components/classification/ClassificationModelEditDialog.tsx
@@ -28,6 +28,7 @@ import {
  CustomClassificationModelConfig,
  FrigateConfig,
 } from "@/types/frigateConfig";
+import { ClassificationDatasetResponse } from "@/types/classification";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
@@ -140,16 +141,19 @@ export default function ClassificationModelEditDialog({
  });

  // Fetch dataset to get current classes for state models
-  const { data: dataset } = useSWR<{
-    [id: string]: string[];
-  }>(isStateModel ? `classification/${model.name}/dataset` : null, {
-    revalidateOnFocus: false,
-  });
+  const { data: dataset } = useSWR<ClassificationDatasetResponse>(
+    isStateModel ? `classification/${model.name}/dataset` : null,
+    {
+      revalidateOnFocus: false,
+    },
+  );

  // Update form with classes from dataset when loaded
  useEffect(() => {
-    if (isStateModel && dataset) {
-      const classes = Object.keys(dataset).filter((key) => key !== "none");
+    if (isStateModel && dataset?.categories) {
+      const classes = Object.keys(dataset.categories).filter(
+        (key) => key !== "none",
+      );
      if (classes.length > 0) {
        (form as ReturnType<typeof useForm<StateFormData>>).setValue(
          "classes",
--- a/web/src/components/classification/ClassificationModelWizardDialog.tsx
+++ b/web/src/components/classification/ClassificationModelWizardDialog.tsx
@@ -15,6 +15,7 @@ import Step3ChooseExamples, {
 } from "./wizard/Step3ChooseExamples";
 import { cn } from "@/lib/utils";
 import { isDesktop } from "react-device-detect";
+import axios from "axios";

 const OBJECT_STEPS = [
  "wizard.steps.nameAndDefine",
@@ -120,7 +121,18 @@ export default function ClassificationModelWizardDialog({
    dispatch({ type: "PREVIOUS_STEP" });
  };

-  const handleCancel = () => {
+  const handleCancel = async () => {
+    // Clean up any generated training images if we're cancelling from Step 3
+    if (wizardState.step1Data && wizardState.step3Data?.examplesGenerated) {
+      try {
+        await axios.delete(
+          `/classification/${wizardState.step1Data.modelName}`,
+        );
+      } catch (error) {
+        // Silently fail - user is already cancelling
+      }
+    }
+
    dispatch({ type: "RESET" });
    onClose();
  };
--- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@@ -165,18 +165,15 @@ export default function Step3ChooseExamples({
    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 {
+      // For object models, assign remaining unclassified images to "none"
+      // For state models, this should never happen since we require all images to be classified
+      if (step1Data.modelType !== "state") {
+        unknownImages.slice(0, 24).forEach((imageName) => {
+          if (!newClassifications[imageName]) {
            newClassifications[imageName] = "none";
          }
-        }
-      });
+        });
+      }

      // All done, trigger training immediately
      setImageClassifications(newClassifications);
@@ -316,8 +313,15 @@ export default function Step3ChooseExamples({
      return images;
    }

-    return images.filter((img) => !imageClassifications[img]);
-  }, [unknownImages, imageClassifications]);
+    // If we're viewing a previous class (going back), show images for that class
+    // Otherwise show only unclassified images
+    const currentClassInView = allClasses[currentClassIndex];
+    return images.filter((img) => {
+      const imgClass = imageClassifications[img];
+      // Show if: unclassified OR classified with current class we're viewing
+      return !imgClass || imgClass === currentClassInView;
+    });
+  }, [unknownImages, imageClassifications, allClasses, currentClassIndex]);

  const allImagesClassified = useMemo(() => {
    return unclassifiedImages.length === 0;
@@ -326,15 +330,26 @@ export default function Step3ChooseExamples({
  // For state models on the last class, require all images to be classified
  const isLastClass = currentClassIndex === allClasses.length - 1;
  const canProceed = useMemo(() => {
-    if (
-      step1Data.modelType === "state" &&
-      isLastClass &&
-      !allImagesClassified
-    ) {
-      return false;
+    if (step1Data.modelType === "state" && isLastClass) {
+      // Check if all 24 images will be classified after current selections are applied
+      const totalImages = unknownImages.slice(0, 24).length;
+
+      // Count images that will be classified (either already classified or currently selected)
+      const allImages = unknownImages.slice(0, 24);
+      const willBeClassified = allImages.filter((img) => {
+        return imageClassifications[img] || selectedImages.has(img);
+      }).length;
+
+      return willBeClassified >= totalImages;
    }
    return true;
-  }, [step1Data.modelType, isLastClass, allImagesClassified]);
+  }, [
+    step1Data.modelType,
+    isLastClass,
+    unknownImages,
+    imageClassifications,
+    selectedImages,
+  ]);

  const handleBack = useCallback(() => {
    if (currentClassIndex > 0) {
--- a/web/src/components/overlay/ImageShadowOverlay.tsx
+++ b/web/src/components/overlay/ImageShadowOverlay.tsx
@@ -12,13 +12,13 @@ export function ImageShadowOverlay({
    <>
      <div
        className={cn(
-          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl",
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent",
          upperClassName,
        )}
      />
      <div
        className={cn(
-          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl",
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent",
          lowerClassName,
        )}
      />
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -77,7 +77,10 @@ export default function BirdseyeLivePlayer({
      )}
      onClick={onClick}
    >
-      <ImageShadowOverlay />
+      <ImageShadowOverlay
+        upperClassName="md:rounded-2xl"
+        lowerClassName="md:rounded-2xl"
+      />
      <div className="size-full" ref={playerRef}>
        {player}
      </div>
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -331,7 +331,10 @@ export default function LivePlayer({
    >
      {cameraEnabled &&
        ((showStillWithoutActivity && !liveReady) || liveReady) && (
-          <ImageShadowOverlay />
+          <ImageShadowOverlay
+            upperClassName="md:rounded-2xl"
+            lowerClassName="md:rounded-2xl"
+          />
        )}
      {player}
      {cameraEnabled &&
--- a/web/src/context/detail-stream-context.tsx
+++ b/web/src/context/detail-stream-context.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+} from "react";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";

@@ -36,6 +42,23 @@ export function DetailStreamProvider({
    () => initialSelectedObjectIds ?? [],
  );

+  // When the parent provides a new initialSelectedObjectIds (for example
+  // when navigating between search results) update the selection so children
+  // like `ObjectTrackOverlay` receive the new ids immediately. We only
+  // perform this update when the incoming value actually changes.
+  useEffect(() => {
+    if (
+      initialSelectedObjectIds &&
+      (initialSelectedObjectIds.length !== selectedObjectIds.length ||
+        initialSelectedObjectIds.some((v, i) => selectedObjectIds[i] !== v))
+    ) {
+      setSelectedObjectIds(initialSelectedObjectIds);
+    }
+    // Intentionally include selectedObjectIds to compare previous value and
+    // avoid overwriting user interactions unless the incoming prop changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialSelectedObjectIds]);
+
  const toggleObjectSelection = (id: string | undefined) => {
    if (id === undefined) {
      setSelectedObjectIds([]);
@@ -63,10 +86,33 @@ export function DetailStreamProvider({
    setAnnotationOffset(cfgOffset);
  }, [config, camera]);

-  // Clear selected objects when exiting detail mode or changing cameras
+  // Clear selected objects when exiting detail mode or when the camera
+  // changes for providers that are not initialized with an explicit
+  // `initialSelectedObjectIds` (e.g., the RecordingView). For providers
+  // that receive `initialSelectedObjectIds` (like SearchDetailDialog) we
+  // avoid clearing on camera change to prevent a race with children that
+  // immediately set selection when mounting.
+  const prevCameraRef = useRef<string | undefined>(undefined);
  useEffect(() => {
-    setSelectedObjectIds([]);
-  }, [isDetailMode, camera]);
+    // Always clear when leaving detail mode
+    if (!isDetailMode) {
+      setSelectedObjectIds([]);
+      prevCameraRef.current = camera;
+      return;
+    }
+
+    // If camera changed and the parent did not provide initialSelectedObjectIds,
+    // clear selection to preserve previous behavior.
+    if (
+      prevCameraRef.current !== undefined &&
+      prevCameraRef.current !== camera &&
+      initialSelectedObjectIds === undefined
+    ) {
+      setSelectedObjectIds([]);
+    }
+
+    prevCameraRef.current = camera;
+  }, [isDetailMode, camera, initialSelectedObjectIds]);

  const value: DetailStreamContextType = {
    selectedObjectIds,
--- a/web/src/types/classification.ts
+++ b/web/src/types/classification.ts
@@ -20,3 +20,17 @@ export type ClassificationThreshold = {
  recognition: number;
  unknown: number;
 };
+
+export type ClassificationDatasetResponse = {
+  categories: {
+    [id: string]: string[];
+  };
+  training_metadata: {
+    has_trained: boolean;
+    last_training_date: string | null;
+    last_training_image_count: number;
+    current_image_count: number;
+    new_images_count: number;
+    dataset_changed: boolean;
+  } | null;
+};
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -11,6 +11,7 @@ import {
  CustomClassificationModelConfig,
  FrigateConfig,
 } from "@/types/frigateConfig";
+import { ClassificationDatasetResponse } from "@/types/classification";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaFolderPlus } from "react-icons/fa";
@@ -209,9 +210,10 @@ type ModelCardProps = {
 function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
  const { t } = useTranslation(["views/classificationModel"]);

-  const { data: dataset } = useSWR<{
-    [id: string]: string[];
-  }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });
+  const { data: dataset } = useSWR<ClassificationDatasetResponse>(
+    `classification/${config.name}/dataset`,
+    { revalidateOnFocus: false },
+  );

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -260,20 +262,25 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
  }, []);

  const coverImage = useMemo(() => {
-    if (!dataset) {
+    if (!dataset || !dataset.categories) {
      return undefined;
    }

-    const keys = Object.keys(dataset).filter((key) => key != "none");
-    const selectedKey = keys[0];
+    const keys = Object.keys(dataset.categories).filter((key) => key != "none");
+    if (keys.length === 0) {
+      return undefined;
+    }

-    if (!dataset[selectedKey]) {
+    const selectedKey = keys[0];
+    const images = dataset.categories[selectedKey];
+
+    if (!images || images.length === 0) {
      return undefined;
    }

    return {
      name: selectedKey,
-      img: dataset[selectedKey][0],
+      img: images[0],
    };
  }, [dataset]);

@@ -317,11 +324,19 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
        )}
        onClick={onClick}
      >
-        <img
-          className="size-full"
-          src={`${baseUrl}clips/${config.name}/dataset/${coverImage?.name}/${coverImage?.img}`}
-        />
-        <ImageShadowOverlay lowerClassName="h-[30%] z-0" />
+        {coverImage ? (
+          <>
+            <img
+              className="size-full"
+              src={`${baseUrl}clips/${config.name}/dataset/${coverImage.name}/${coverImage.img}`}
+            />
+            <ImageShadowOverlay lowerClassName="h-[30%] z-0" />
+          </>
+        ) : (
+          <div className="flex size-full items-center justify-center bg-background_alt">
+            <MdModelTraining className="size-16 text-muted-foreground" />
+          </div>
+        )}
        <div className="absolute bottom-2 left-3 text-lg text-white smart-capitalize">
          {config.name}
        </div>
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -59,7 +59,11 @@ import { useNavigate } from "react-router-dom";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import TrainFilterDialog from "@/components/overlay/dialog/TrainFilterDialog";
 import useApiFilter from "@/hooks/use-api-filter";
-import { ClassificationItemData, TrainFilter } from "@/types/classification";
+import {
+  ClassificationDatasetResponse,
+  ClassificationItemData,
+  TrainFilter,
+} from "@/types/classification";
 import {
  ClassificationCard,
  GroupedClassificationCard,
@@ -118,16 +122,10 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
  const { data: trainImages, mutate: refreshTrain } = useSWR<string[]>(
    `classification/${model.name}/train`,
  );
-  const { data: datasetResponse, mutate: refreshDataset } = useSWR<{
-    categories: { [id: string]: string[] };
-    training_metadata: {
-      has_trained: boolean;
-      last_training_date: string | null;
-      last_training_image_count: number;
-      current_image_count: number;
-      new_images_count: number;
-    } | null;
-  }>(`classification/${model.name}/dataset`);
+  const { data: datasetResponse, mutate: refreshDataset } =
+    useSWR<ClassificationDatasetResponse>(
+      `classification/${model.name}/dataset`,
+    );

  const dataset = datasetResponse?.categories || {};
  const trainingMetadata = datasetResponse?.training_metadata;
@@ -264,10 +262,11 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
              );
            }

+            // Always refresh dataset to update the categories list
+            refreshDataset();
+
            if (pageToggle == "train") {
              refreshTrain();
-            } else {
-              refreshDataset();
            }
          }
        })
@@ -445,7 +444,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
                  variant={modelState == "failed" ? "destructive" : "select"}
                  disabled={
                    (modelState != "complete" && modelState != "failed") ||
-                    (trainingMetadata?.new_images_count ?? 0) === 0
+                    !trainingMetadata?.dataset_changed
                  }
                >
                  {modelState == "training" ? (
@@ -466,14 +465,14 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
                  )}
                </Button>
              </TooltipTrigger>
-              {((trainingMetadata?.new_images_count ?? 0) === 0 ||
+              {(!trainingMetadata?.dataset_changed ||
                (modelState != "complete" && modelState != "failed")) && (
                <TooltipPortal>
                  <TooltipContent>
                    {modelState == "training"
                      ? t("tooltip.trainingInProgress")
-                      : trainingMetadata?.new_images_count === 0
-                        ? t("tooltip.noNewImages")
+                      : !trainingMetadata?.dataset_changed
+                        ? t("tooltip.noChanges")
                        : t("tooltip.modelNotReady")}
                  </TooltipContent>
                </TooltipPortal>
@@ -571,27 +570,44 @@ function LibrarySelector({
      >
        <DialogContent>
          <DialogHeader>
-            <DialogTitle>{t("deleteCategory.title")}</DialogTitle>
+            <DialogTitle>
+              {Object.keys(dataset).length <= 2
+                ? t("deleteCategory.minClassesTitle")
+                : t("deleteCategory.title")}
+            </DialogTitle>
            <DialogDescription>
-              {t("deleteCategory.desc", { name: confirmDelete })}
+              {Object.keys(dataset).length <= 2
+                ? t("deleteCategory.minClassesDesc")
+                : t("deleteCategory.desc", { name: confirmDelete })}
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => setConfirmDelete(null)}>
-              {t("button.cancel", { ns: "common" })}
-            </Button>
-            <Button
-              variant="destructive"
-              className="text-white"
-              onClick={() => {
-                if (confirmDelete) {
-                  handleDeleteCategory(confirmDelete);
-                  setConfirmDelete(null);
-                }
-              }}
-            >
-              {t("button.delete", { ns: "common" })}
-            </Button>
+            {Object.keys(dataset).length <= 2 ? (
+              <Button variant="outline" onClick={() => setConfirmDelete(null)}>
+                {t("button.ok", { ns: "common" })}
+              </Button>
+            ) : (
+              <>
+                <Button
+                  variant="outline"
+                  onClick={() => setConfirmDelete(null)}
+                >
+                  {t("button.cancel", { ns: "common" })}
+                </Button>
+                <Button
+                  variant="destructive"
+                  className="text-white"
+                  onClick={() => {
+                    if (confirmDelete) {
+                      handleDeleteCategory(confirmDelete);
+                      setConfirmDelete(null);
+                    }
+                  }}
+                >
+                  {t("button.delete", { ns: "common" })}
+                </Button>
+              </>
+            )}
          </div>
        </DialogContent>
      </Dialog>