diff --git a/web/src/components/image/EventThumbnail.tsx b/web/src/components/image/EventThumbnail.tsx
index f6b2a25a2..7c187230c 100644
--- a/web/src/components/image/EventThumbnail.tsx
+++ b/web/src/components/image/EventThumbnail.tsx
@@ -2,6 +2,7 @@ import { baseUrl } from "@/api/baseUrl";
import { Event as FrigateEvent } from "@/types/event";
import { LuStar } from "react-icons/lu";
import TimeAgo from "../dynamic/TimeAgo";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
type EventThumbnailProps = {
event: FrigateEvent;
@@ -9,22 +10,35 @@ type EventThumbnailProps = {
};
export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
return (
-
-
(onFavorite ? onFavorite(e, event) : null)}
- fill={event.retain_indefinitely ? "currentColor" : "none"}
- />
-
-
-
+
+
+
+
(onFavorite ? onFavorite(e, event) : null)}
+ fill={event.retain_indefinitely ? "currentColor" : "none"}
+ />
+
-
-
+
+
+ {`${event.label} ${
+ event.sub_label ? `(${event.sub_label})` : ""
+ } detected with score of ${(event.data.score * 100).toFixed(0)}% ${
+ event.data.sub_label_score
+ ? `(${event.data.sub_label_score * 100}%)`
+ : ""
+ }`}
+
+
);
}
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 164576ac9..c50c0d4d2 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -1,6 +1,7 @@
import { EventThumbnail } from "@/components/image/EventThumbnail";
import LivePlayer from "@/components/player/LivePlayer";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { TooltipProvider } from "@/components/ui/tooltip";
import { Event as FrigateEvent } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig";
import axios from "axios";
@@ -57,17 +58,19 @@ function Live() {
<>
{events && events.length > 0 && (
-
- {events.map((event) => {
- return (
-
- );
- })}
-
+
+
+ {events.map((event) => {
+ return (
+
+ );
+ })}
+
+
)}
diff --git a/web/src/types/event.ts b/web/src/types/event.ts
index 69e09577a..0e7aa9916 100644
--- a/web/src/types/event.ts
+++ b/web/src/types/event.ts
@@ -1,25 +1,26 @@
export interface Event {
- id: string;
- label: string;
- sub_label?: string;
- camera: string;
- start_time: number;
- end_time?: number;
- false_positive: boolean;
- zones: string[];
- thumbnail: string;
- has_clip: boolean;
- has_snapshot: boolean;
- retain_indefinitely: boolean;
- plus_id?: string;
- model_hash?: string;
- data: {
- top_score: number;
- score: number;
- region: number[];
- box: number[];
- area: number;
- ratio: number;
- type: "object" | "audio" | "manual";
- }
-}
\ No newline at end of file
+ id: string;
+ label: string;
+ sub_label?: string;
+ camera: string;
+ start_time: number;
+ end_time?: number;
+ false_positive: boolean;
+ zones: string[];
+ thumbnail: string;
+ has_clip: boolean;
+ has_snapshot: boolean;
+ retain_indefinitely: boolean;
+ plus_id?: string;
+ model_hash?: string;
+ data: {
+ top_score: number;
+ score: number;
+ sub_label_score?: number;
+ region: number[];
+ box: number[];
+ area: number;
+ ratio: number;
+ type: "object" | "audio" | "manual";
+ };
+}