Miscellaneous Fixes (#21033)

* catch failed image embedding in triggers

* move scrollbar to edge on platform aware dialog drawers

* add i18n key

* show negotiated mse codecs in console on error

* try changing rocm

* Improve toast consistency

* add attribute area and score to detail stream tooltip

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

docker/rocm/rocm.hcl

@@ -2,7 +2,7 @@ variable "AMDGPU" {
   default = "gfx900"
 }
 variable "ROCM" {
-  default = "7.1"
+  default = "7.1.0"
 }
 variable "HSA_OVERRIDE_GFX_VERSION" {
   default = ""

docs/docs/configuration/live.md

@@ -232,7 +232,7 @@ When your browser runs into problems playing back your camera streams, it will l
 - **mse-decode**
 
   - What it means: The browser reported a decoding error while trying to play the stream, which usually is a result of a codec incompatibility or corrupted frames.
-  - What to try: Ensure your camera/restream is using H.264 video and AAC audio (these are the most compatible). If your camera uses a non-standard audio codec, configure `go2rtc` to transcode the stream to AAC. Try another browser (some browsers have stricter MSE/codec support) and, for iPhone, ensure you're on iOS 17.1 or newer.
+  - What to try: Check the browser console for the supported and negotiated codecs. Ensure your camera/restream is using H.264 video and AAC audio (these are the most compatible). If your camera uses a non-standard audio codec, configure `go2rtc` to transcode the stream to AAC. Try another browser (some browsers have stricter MSE/codec support) and, for iPhone, ensure you're on iOS 17.1 or newer.
 
   - Possible console messages from the player code:
 

frigate/api/event.py

@@ -1753,7 +1753,7 @@ def create_trigger_embedding(
                     body.data, (base64.b64encode(thumbnail).decode("ASCII"))
                 )
 
-        if embedding is None:
+        if not embedding:
             return JSONResponse(
                 content={
                     "success": False,
@@ -1888,7 +1888,7 @@ def update_trigger_embedding(
                 body.data, (base64.b64encode(thumbnail).decode("ASCII"))
             )
 
-        if embedding is None:
+        if not embedding:
             return JSONResponse(
                 content={
                     "success": False,

web/public/locales/en/components/dialog.json

@@ -53,6 +53,7 @@
     "selectOrExport": "Select or Export",
     "toast": {
       "success": "Successfully started export. View the file in the exports page.",
+      "view": "View",
       "error": {
         "failed": "Failed to start export: {{error}}",
         "endTimeMustAfterStartTime": "End time must be after start time",

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

@@ -61,7 +61,8 @@
       "header": {
         "zones": "Zones",
         "ratio": "Ratio",
-        "area": "Area"
+        "area": "Area",
+        "score": "Score"
       }
     },
     "annotationSettings": {

web/src/components/card/ReviewCard.tsx

@@ -87,7 +87,7 @@ export default function ReviewCard({
             position: "top-center",
             action: (
               <a href="/export" target="_blank" rel="noopener noreferrer">
-                <Button>View</Button>
+                <Button>{t("export.toast.view")}</Button>
               </a>
             ),
           });

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

@@ -148,7 +148,9 @@ export default function Step3ChooseExamples({
       // Step 3: Kick off training
       await axios.post(`/classification/${step1Data.modelName}/train`);
 
-      toast.success(t("wizard.step3.trainingStarted"));
+      toast.success(t("wizard.step3.trainingStarted"), {
+        closeButton: true,
+      });
       setIsTraining(true);
     },
     [step1Data, step2Data, t],

web/src/components/filter/SearchFilterGroup.tsx

@@ -314,11 +314,10 @@ function GeneralFilterButton({
     <PlatformAwareDialog
       trigger={trigger}
       content={content}
-      contentClassName={
-        isDesktop
-          ? "scrollbar-container h-auto max-h-[80dvh] overflow-y-auto"
-          : "max-h-[75dvh] overflow-hidden p-4"
-      }
+      contentClassName={cn(
+        "scrollbar-container h-auto overflow-y-auto",
+        isDesktop ? "max-h-[80dvh]" : "px-4",
+      )}
       open={open}
       onOpenChange={(open) => {
         if (!open) {
@@ -510,11 +509,10 @@ function SortTypeButton({
     <PlatformAwareDialog
       trigger={trigger}
       content={content}
-      contentClassName={
-        isDesktop
-          ? "scrollbar-container h-auto max-h-[80dvh] overflow-y-auto"
-          : "max-h-[75dvh] overflow-hidden p-4"
-      }
+      contentClassName={cn(
+        "scrollbar-container h-auto overflow-y-auto",
+        isDesktop ? "max-h-[80dvh]" : "px-4",
+      )}
       open={open}
       onOpenChange={(open) => {
         if (!open) {

web/src/components/overlay/ExportDialog.tsx

@@ -97,7 +97,7 @@ export default function ExportDialog({
             position: "top-center",
             action: (
               <a href="/export" target="_blank" rel="noopener noreferrer">
-                <Button>View</Button>
+                <Button>{t("export.toast.view")}</Button>
               </a>
             ),
           });

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -106,7 +106,9 @@ export default function MobileReviewSettingsDrawer({
               position: "top-center",
               action: (
                 <a href="/export" target="_blank" rel="noopener noreferrer">
-                  <Button>View</Button>
+                  <Button>
+                    {t("export.toast.view", { ns: "components/dialog" })}
+                  </Button>
                 </a>
               ),
             },

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -44,8 +44,8 @@ export default function PlatformAwareDialog({
     return (
       <Drawer open={open} onOpenChange={onOpenChange}>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden px-4">
-          {content}
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          <div className={contentClassName}>{content}</div>
         </DrawerContent>
       </Drawer>
     );

web/src/components/player/MsePlayer.tsx

@@ -94,12 +94,19 @@ function MSEPlayer({
       console.error(
         `${camera} - MSE error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-player-error-messages`,
       );
+
       if (mseCodecRef.current) {
         // eslint-disable-next-line no-console
-        console.error(`${camera} - MSE codec in use: ${mseCodecRef.current}`);
+        console.error(
+          `${camera} - Browser negotiated codecs: ${mseCodecRef.current}`,
+        );
+        // eslint-disable-next-line no-console
+        console.error(`${camera} - Supported codecs: ${CODECS.join(", ")}`);
       }
       onError?.(error);
     },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [camera, onError],
   );
 

web/src/components/settings/SearchSettings.tsx

@@ -136,11 +136,10 @@ export default function ExploreSettings({
     <PlatformAwareDialog
       trigger={trigger}
       content={content}
-      contentClassName={
-        isDesktop
-          ? "scrollbar-container h-auto max-h-[80dvh] overflow-y-auto"
-          : "max-h-[75dvh] overflow-hidden p-4"
-      }
+      contentClassName={cn(
+        "scrollbar-container h-auto overflow-y-auto",
+        isDesktop ? "max-h-[80dvh]" : "px-4",
+      )}
       open={open}
       onOpenChange={(open) => {
         setOpen(open);

web/src/components/timeline/DetailStream.tsx

@@ -681,22 +681,62 @@ function LifecycleItem({
       })
     : "";
 
-  const ratio =
+  const ratio = useMemo(
+    () =>
       Array.isArray(item?.data.box) && item?.data.box.length >= 4
         ? (aspectRatio * (item?.data.box[2] / item?.data.box[3])).toFixed(2)
-      : "N/A";
-  const areaPx =
+        : "N/A",
+    [aspectRatio, item],
+  );
+
+  const areaPx = useMemo(
+    () =>
       Array.isArray(item?.data.box) && item?.data.box.length >= 4
         ? Math.round(
             (config?.cameras[item?.camera]?.detect?.width ?? 0) *
               (config?.cameras[item?.camera]?.detect?.height ?? 0) *
               (item?.data.box[2] * item?.data.box[3]),
           )
-      : undefined;
-  const areaPct =
+        : undefined,
+    [config, item],
+  );
+
+  const areaPct = useMemo(
+    () =>
       Array.isArray(item?.data.box) && item?.data.box.length >= 4
         ? (item?.data.box[2] * item?.data.box[3]).toFixed(4)
-      : undefined;
+        : undefined,
+    [item],
+  );
+
+  const attributeAreaPx = useMemo(
+    () =>
+      Array.isArray(item?.data.attribute_box) &&
+      item?.data.attribute_box.length >= 4
+        ? Math.round(
+            (config?.cameras[item?.camera]?.detect?.width ?? 0) *
+              (config?.cameras[item?.camera]?.detect?.height ?? 0) *
+              (item?.data.attribute_box[2] * item?.data.attribute_box[3]),
+          )
+        : undefined,
+    [config, item],
+  );
+
+  const attributeAreaPct = useMemo(
+    () =>
+      Array.isArray(item?.data.attribute_box) &&
+      item?.data.attribute_box.length >= 4
+        ? (item?.data.attribute_box[2] * item?.data.attribute_box[3]).toFixed(4)
+        : undefined,
+    [item],
+  );
+
+  const score = useMemo(() => {
+    if (item?.data?.score !== undefined) {
+      return (item.data.score * 100).toFixed(0) + "%";
+    }
+    return "N/A";
+  }, [item?.data?.score]);
 
   return (
     <div
@@ -733,6 +773,13 @@ function LifecycleItem({
           <TooltipContent>
             <div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground">
               <div className="flex flex-col gap-1">
+                <div className="flex items-start gap-1">
+                  <span className="text-muted-foreground">
+                    {t("trackingDetails.lifecycleItemDesc.header.score")}
+                  </span>
+                  <span className="font-medium text-foreground">{score}</span>
+                </div>
+
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
                     {t("trackingDetails.lifecycleItemDesc.header.ratio")}
@@ -742,7 +789,13 @@ function LifecycleItem({
 
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.area")}
+                    {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                    {attributeAreaPx !== undefined &&
+                      attributeAreaPct !== undefined && (
+                        <span className="text-muted-foreground">
+                          ({getTranslatedLabel(item.data.label)})
+                        </span>
+                      )}
                   </span>
                   {areaPx !== undefined && areaPct !== undefined ? (
                     <span className="font-medium text-foreground">
@@ -754,6 +807,26 @@ function LifecycleItem({
                     <span>N/A</span>
                   )}
                 </div>
+
+                {attributeAreaPx !== undefined &&
+                  attributeAreaPct !== undefined && (
+                    <div className="flex items-start gap-1">
+                      <span className="text-muted-foreground">
+                        {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                        {attributeAreaPx !== undefined &&
+                          attributeAreaPct !== undefined && (
+                            <span className="text-muted-foreground">
+                              ({getTranslatedLabel(item.data.attribute)})
+                            </span>
+                          )}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {attributeAreaPx} {t("pixels", { ns: "common" })}{" "}
+                        <span className="text-secondary-foreground">·</span>{" "}
+                        {attributeAreaPct}%
+                      </span>
+                    </div>
+                  )}
               </div>
             </div>
           </TooltipContent>
@@ -820,7 +893,7 @@ function ObjectTimeline({
   }, [config, fullTimeline, review]);
 
   if (isValidating && (!timeline || timeline.length === 0)) {
-    return <ActivityIndicator className="ml-2 size-3" />;
+    return <ActivityIndicator className="ml-2.5 size-3" />;
   }
 
   if (!timeline || timeline.length === 0) {

web/src/pages/FaceLibrary.tsx

@@ -808,6 +808,7 @@ function FaceAttemptGroup({
           if (resp.status == 200) {
             toast.success(t("toast.success.trainedFace"), {
               position: "top-center",
+              closeButton: true,
             });
             onRefresh();
           }

web/src/views/classification/ModelTrainingView.tsx

@@ -104,12 +104,14 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
     if (modelState == "complete") {
       toast.success(t("toast.success.trainedModel"), {
         position: "top-center",
+        closeButton: true,
       });
       setWasTraining(false);
       refreshDataset();
     } else if (modelState == "failed") {
       toast.error(t("toast.error.trainingFailed"), {
         position: "top-center",
+        closeButton: true,
       });
       setWasTraining(false);
     }
@@ -182,6 +184,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
           setWasTraining(true);
           toast.success(t("toast.success.trainingModel"), {
             position: "top-center",
+            closeButton: true,
           });
         }
       })
@@ -193,6 +196,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
 
         toast.error(t("toast.error.trainingFailedToStart", { errorMessage }), {
           position: "top-center",
+          closeButton: true,
         });
       });
   }, [model, t]);

web/src/views/events/EventView.tsx

@@ -219,7 +219,9 @@ export default function EventView({
                 position: "top-center",
                 action: (
                   <a href="/export" target="_blank" rel="noopener noreferrer">
-                    <Button>View</Button>
+                    <Button>
+                      {t("export.toast.view", { ns: "components/dialog" })}
+                    </Button>
                   </a>
                 ),
               },