fix sub label score and add info popover

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

@@ -5,7 +5,8 @@
   },
   "details": {
     "person": "Person",
-    "confidence": "Confidence",
+    "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 for the face and associated object",
     "timestamp": "Timestamp"

web/src/pages/FaceLibrary.tsx

@@ -21,6 +21,11 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Toaster } from "@/components/ui/sonner";
 import {
   Tooltip,
@@ -42,6 +47,7 @@ import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import {
   LuImagePlus,
+  LuInfo,
   LuPencil,
   LuRefreshCw,
   LuScanFace,
@@ -647,10 +653,23 @@ function TrainingGrid({
           {selectedEvent?.data.sub_label_score && (
             <div className="flex flex-col gap-1.5">
               <div className="text-sm text-primary/40">
-                {t("details.confidence")}
+                <div className="flex flex-row items-center gap-1">
+                  {t("details.subLabelScore")}
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <div className="cursor-pointer p-0">
+                        <LuInfo className="size-4" />
+                        <span className="sr-only">Info</span>
+                      </div>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-80">
+                      {t("details.scoreInfo")}
+                    </PopoverContent>
+                  </Popover>
+                </div>
               </div>
               <div className="text-sm smart-capitalize">
-                {Math.round(selectedEvent?.data?.sub_label_score || 0) * 100}%
+                {Math.round((selectedEvent?.data?.sub_label_score || 0) * 100)}%
               </div>
             </div>
           )}