administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add tooltip for classification group

Browse Source
This commit is contained in:
Nicolas Mowen 2025-11-04 08:04:30 -07:00
parent 2e288109f4
commit 08967aa196
3 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/public/locales/en/views/classificationModel.json
View File

@ -1,5 +1,8 @@
{ {
"documentTitle": "Classification Models", "documentTitle": "Classification Models",
"details": {
"scoreInfo": "Score represents the average classification confidence across all detections of this object."
},
"button": { "button": {
"deleteClassificationAttempts": "Delete Classification Images", "deleteClassificationAttempts": "Delete Classification Images",
"renameCategory": "Rename Class", "renameCategory": "Rename Class",

3
web/public/locales/en/views/faceLibrary.json
View File

@ -6,7 +6,8 @@
}, },
"details": { "details": {
"timestamp": "Timestamp", "timestamp": "Timestamp",
"unknown": "Unknown" "unknown": "Unknown",
"scoreInfo": "Score is a weighted average of all face scores, weighted by the size of the face in each image."
}, },
"documentTitle": "Face Library - Frigate", "documentTitle": "Face Library - Frigate",
"uploadFaceImage": { "uploadFaceImage": {

36
web/src/components/card/ClassificationCard.tsx
View File

@ -11,7 +11,8 @@ import { isDesktop, isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { LuSearch } from "react-icons/lu"; import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { LuSearch, LuInfo } from "react-icons/lu";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { HiSquare2Stack } from "react-icons/hi2"; import { HiSquare2Stack } from "react-icons/hi2";
@ -321,14 +322,31 @@ export function GroupedClassificationCard({
? event.sub_label ? event.sub_label
: t(noClassificationLabel)} : t(noClassificationLabel)}
{event?.sub_label && event.sub_label !== "none" && ( {event?.sub_label && event.sub_label !== "none" && (
<div <div className="flex items-center gap-1">
className={cn( <div
"", className={cn(
bestScoreStatus == "match" && "text-success", "",
bestScoreStatus == "potential" && "text-orange-400", bestScoreStatus == "match" && "text-success",
bestScoreStatus == "unknown" && "text-danger", bestScoreStatus == "potential" && "text-orange-400",
)} bestScoreStatus == "unknown" && "text-danger",
>{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div> )}
>{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
<Popover>
<PopoverTrigger asChild>
<button
className="focus:outline-none"
aria-label={t("details.scoreInfo", {
ns: i18nLibrary,
})}
>
<LuInfo className="size-3" />
</button>
</PopoverTrigger>
<PopoverContent className="w-80 text-sm">
{t("details.scoreInfo", { ns: i18nLibrary })}
</PopoverContent>
</Popover>
</div>
)} )}
</ContentTitle> </ContentTitle>
<ContentDescription className={cn("", isMobile && "px-2")}> <ContentDescription className={cn("", isMobile && "px-2")}>