mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-21 12:36:42 +03:00
Compare commits
1 Commits
1a69bce3be
...
7f08f8337f
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7f08f8337f |
@ -320,12 +320,6 @@ http {
|
|||||||
add_header Cache-Control "public";
|
add_header Cache-Control "public";
|
||||||
}
|
}
|
||||||
|
|
||||||
location /fonts/ {
|
|
||||||
access_log off;
|
|
||||||
expires 1y;
|
|
||||||
add_header Cache-Control "public";
|
|
||||||
}
|
|
||||||
|
|
||||||
location /locales/ {
|
location /locales/ {
|
||||||
access_log off;
|
access_log off;
|
||||||
add_header Cache-Control "public";
|
add_header Cache-Control "public";
|
||||||
|
|||||||
@ -70,7 +70,7 @@ You should have at least 8 GB of RAM available (or VRAM if running on GPU) to ru
|
|||||||
genai:
|
genai:
|
||||||
provider: ollama
|
provider: ollama
|
||||||
base_url: http://localhost:11434
|
base_url: http://localhost:11434
|
||||||
model: qwen3-vl:4b
|
model: llava:7b
|
||||||
```
|
```
|
||||||
|
|
||||||
## Google Gemini
|
## Google Gemini
|
||||||
|
|||||||
@ -35,18 +35,19 @@ Each model is available in multiple parameter sizes (3b, 4b, 8b, etc.). Larger s
|
|||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
|
|
||||||
If you are trying to use a single model for Frigate and HomeAssistant, it will need to support vision and tools calling. qwen3-VL supports vision and tools simultaneously in Ollama.
|
If you are trying to use a single model for Frigate and HomeAssistant, it will need to support vision and tools calling. https://github.com/skye-harris/ollama-modelfiles contains optimized model configs for this task.
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
The following models are recommended:
|
The following models are recommended:
|
||||||
|
|
||||||
| Model | Notes |
|
| Model | Notes |
|
||||||
| ----------------- | -------------------------------------------------------------------- |
|
| ----------------- | ----------------------------------------------------------- |
|
||||||
| `qwen3-vl` | Strong visual and situational understanding, higher vram requirement |
|
| `qwen3-vl` | Strong visual and situational understanding |
|
||||||
| `Intern3.5VL` | Relatively fast with good vision comprehension |
|
| `Intern3.5VL` | Relatively fast with good vision comprehension |
|
||||||
| `gemma3` | Strong frame-to-frame understanding, slower inference times |
|
| `gemma3` | Strong frame-to-frame understanding, slower inference times |
|
||||||
| `qwen2.5-vl` | Fast but capable model with good vision comprehension |
|
| `qwen2.5-vl` | Fast but capable model with good vision comprehension |
|
||||||
|
| `llava-phi3` | Lightweight and fast model with vision comprehension |
|
||||||
|
|
||||||
:::note
|
:::note
|
||||||
|
|
||||||
|
|||||||
@ -362,7 +362,7 @@ def stats_snapshot(
|
|||||||
stats["embeddings"]["review_description_speed"] = round(
|
stats["embeddings"]["review_description_speed"] = round(
|
||||||
embeddings_metrics.review_desc_speed.value * 1000, 2
|
embeddings_metrics.review_desc_speed.value * 1000, 2
|
||||||
)
|
)
|
||||||
stats["embeddings"]["review_description_events_per_second"] = round(
|
stats["embeddings"]["review_descriptions"] = round(
|
||||||
embeddings_metrics.review_desc_dps.value, 2
|
embeddings_metrics.review_desc_dps.value, 2
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -370,7 +370,7 @@ def stats_snapshot(
|
|||||||
stats["embeddings"]["object_description_speed"] = round(
|
stats["embeddings"]["object_description_speed"] = round(
|
||||||
embeddings_metrics.object_desc_speed.value * 1000, 2
|
embeddings_metrics.object_desc_speed.value * 1000, 2
|
||||||
)
|
)
|
||||||
stats["embeddings"]["object_description_events_per_second"] = round(
|
stats["embeddings"]["object_descriptions"] = round(
|
||||||
embeddings_metrics.object_desc_dps.value, 2
|
embeddings_metrics.object_desc_dps.value, 2
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -378,7 +378,7 @@ def stats_snapshot(
|
|||||||
stats["embeddings"][f"{key}_classification_speed"] = round(
|
stats["embeddings"][f"{key}_classification_speed"] = round(
|
||||||
embeddings_metrics.classification_speeds[key].value * 1000, 2
|
embeddings_metrics.classification_speeds[key].value * 1000, 2
|
||||||
)
|
)
|
||||||
stats["embeddings"][f"{key}_classification_events_per_second"] = round(
|
stats["embeddings"][f"{key}_classification"] = round(
|
||||||
embeddings_metrics.classification_cps[key].value, 2
|
embeddings_metrics.classification_cps[key].value, 2
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@ -177,10 +177,6 @@
|
|||||||
"noCameras": {
|
"noCameras": {
|
||||||
"title": "No Cameras Configured",
|
"title": "No Cameras Configured",
|
||||||
"description": "Get started by connecting a camera to Frigate.",
|
"description": "Get started by connecting a camera to Frigate.",
|
||||||
"buttonText": "Add Camera",
|
"buttonText": "Add Camera"
|
||||||
"restricted": {
|
|
||||||
"title": "No Cameras Available",
|
|
||||||
"description": "You don't have permission to view any cameras in this group."
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -169,7 +169,6 @@
|
|||||||
"enrichments": {
|
"enrichments": {
|
||||||
"title": "Enrichments",
|
"title": "Enrichments",
|
||||||
"infPerSecond": "Inferences Per Second",
|
"infPerSecond": "Inferences Per Second",
|
||||||
"averageInf": "Average Inference Time",
|
|
||||||
"embeddings": {
|
"embeddings": {
|
||||||
"image_embedding": "Image Embedding",
|
"image_embedding": "Image Embedding",
|
||||||
"text_embedding": "Text Embedding",
|
"text_embedding": "Text Embedding",
|
||||||
@ -181,13 +180,7 @@
|
|||||||
"plate_recognition_speed": "Plate Recognition Speed",
|
"plate_recognition_speed": "Plate Recognition Speed",
|
||||||
"text_embedding_speed": "Text Embedding Speed",
|
"text_embedding_speed": "Text Embedding Speed",
|
||||||
"yolov9_plate_detection_speed": "YOLOv9 Plate Detection Speed",
|
"yolov9_plate_detection_speed": "YOLOv9 Plate Detection Speed",
|
||||||
"yolov9_plate_detection": "YOLOv9 Plate Detection",
|
"yolov9_plate_detection": "YOLOv9 Plate Detection"
|
||||||
"review_description": "Review Description",
|
|
||||||
"review_description_speed": "Review Description Speed",
|
|
||||||
"review_description_events_per_second": "Review Description",
|
|
||||||
"object_description": "Object Description",
|
|
||||||
"object_description_speed": "Object Description Speed",
|
|
||||||
"object_description_events_per_second": "Object Description"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@ import useSWR from "swr";
|
|||||||
import { MdHome } from "react-icons/md";
|
import { MdHome } from "react-icons/md";
|
||||||
import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
|
import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
|
||||||
import { Button, buttonVariants } from "../ui/button";
|
import { Button, buttonVariants } from "../ui/button";
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useMemo, useState } from "react";
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
import { LuPencil, LuPlus } from "react-icons/lu";
|
import { LuPencil, LuPlus } from "react-icons/lu";
|
||||||
import {
|
import {
|
||||||
@ -87,8 +87,6 @@ type CameraGroupSelectorProps = {
|
|||||||
export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
||||||
const { t } = useTranslation(["components/camera"]);
|
const { t } = useTranslation(["components/camera"]);
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
const allowedCameras = useAllowedCameras();
|
|
||||||
const isCustomRole = useIsCustomRole();
|
|
||||||
|
|
||||||
// tooltip
|
// tooltip
|
||||||
|
|
||||||
@ -121,22 +119,10 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
const allGroups = Object.entries(config.camera_groups);
|
return Object.entries(config.camera_groups).sort(
|
||||||
|
(a, b) => a[1].order - b[1].order,
|
||||||
// If custom role, filter out groups where user has no accessible cameras
|
|
||||||
if (isCustomRole) {
|
|
||||||
return allGroups
|
|
||||||
.filter(([, groupConfig]) => {
|
|
||||||
// Check if user has access to at least one camera in this group
|
|
||||||
return groupConfig.cameras.some((cameraName) =>
|
|
||||||
allowedCameras.includes(cameraName),
|
|
||||||
);
|
);
|
||||||
})
|
}, [config]);
|
||||||
.sort((a, b) => a[1].order - b[1].order);
|
|
||||||
}
|
|
||||||
|
|
||||||
return allGroups.sort((a, b) => a[1].order - b[1].order);
|
|
||||||
}, [config, allowedCameras, isCustomRole]);
|
|
||||||
|
|
||||||
// add group
|
// add group
|
||||||
|
|
||||||
@ -153,7 +139,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
|||||||
activeGroup={group}
|
activeGroup={group}
|
||||||
setGroup={setGroup}
|
setGroup={setGroup}
|
||||||
deleteGroup={deleteGroup}
|
deleteGroup={deleteGroup}
|
||||||
isCustomRole={isCustomRole}
|
|
||||||
/>
|
/>
|
||||||
<Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
|
<Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
|
||||||
<div
|
<div
|
||||||
@ -221,7 +206,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{!isCustomRole && (
|
|
||||||
<Button
|
<Button
|
||||||
className="bg-secondary text-muted-foreground"
|
className="bg-secondary text-muted-foreground"
|
||||||
aria-label={t("group.add")}
|
aria-label={t("group.add")}
|
||||||
@ -230,7 +214,6 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
|||||||
>
|
>
|
||||||
<LuPlus className="size-4 text-primary" />
|
<LuPlus className="size-4 text-primary" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
{isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
|
{isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
|
||||||
</div>
|
</div>
|
||||||
</Scroller>
|
</Scroller>
|
||||||
@ -245,7 +228,6 @@ type NewGroupDialogProps = {
|
|||||||
activeGroup?: string;
|
activeGroup?: string;
|
||||||
setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
|
setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
|
||||||
deleteGroup: () => void;
|
deleteGroup: () => void;
|
||||||
isCustomRole?: boolean;
|
|
||||||
};
|
};
|
||||||
function NewGroupDialog({
|
function NewGroupDialog({
|
||||||
open,
|
open,
|
||||||
@ -254,7 +236,6 @@ function NewGroupDialog({
|
|||||||
activeGroup,
|
activeGroup,
|
||||||
setGroup,
|
setGroup,
|
||||||
deleteGroup,
|
deleteGroup,
|
||||||
isCustomRole,
|
|
||||||
}: NewGroupDialogProps) {
|
}: NewGroupDialogProps) {
|
||||||
const { t } = useTranslation(["components/camera"]);
|
const { t } = useTranslation(["components/camera"]);
|
||||||
const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
|
const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
|
||||||
@ -280,12 +261,6 @@ function NewGroupDialog({
|
|||||||
`${activeGroup}-draggable-layout`,
|
`${activeGroup}-draggable-layout`,
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
setEditState("none");
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
// callbacks
|
// callbacks
|
||||||
|
|
||||||
const onDeleteGroup = useCallback(
|
const onDeleteGroup = useCallback(
|
||||||
@ -374,7 +349,13 @@ function NewGroupDialog({
|
|||||||
position="top-center"
|
position="top-center"
|
||||||
closeButton={true}
|
closeButton={true}
|
||||||
/>
|
/>
|
||||||
<Overlay open={open} onOpenChange={setOpen}>
|
<Overlay
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
setEditState("none");
|
||||||
|
setOpen(open);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Content
|
<Content
|
||||||
className={cn(
|
className={cn(
|
||||||
"scrollbar-container overflow-y-auto",
|
"scrollbar-container overflow-y-auto",
|
||||||
@ -390,7 +371,6 @@ function NewGroupDialog({
|
|||||||
>
|
>
|
||||||
<Title>{t("group.label")}</Title>
|
<Title>{t("group.label")}</Title>
|
||||||
<Description className="sr-only">{t("group.edit")}</Description>
|
<Description className="sr-only">{t("group.edit")}</Description>
|
||||||
{!isCustomRole && (
|
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute",
|
"absolute",
|
||||||
@ -413,7 +393,6 @@ function NewGroupDialog({
|
|||||||
<LuPlus />
|
<LuPlus />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</Header>
|
</Header>
|
||||||
<div className="flex flex-col gap-4 md:gap-3">
|
<div className="flex flex-col gap-4 md:gap-3">
|
||||||
{currentGroups.map((group) => (
|
{currentGroups.map((group) => (
|
||||||
@ -422,7 +401,6 @@ function NewGroupDialog({
|
|||||||
group={group}
|
group={group}
|
||||||
onDeleteGroup={() => onDeleteGroup(group[0])}
|
onDeleteGroup={() => onDeleteGroup(group[0])}
|
||||||
onEditGroup={() => onEditGroup(group)}
|
onEditGroup={() => onEditGroup(group)}
|
||||||
isReadOnly={isCustomRole}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -534,14 +512,12 @@ type CameraGroupRowProps = {
|
|||||||
group: [string, CameraGroupConfig];
|
group: [string, CameraGroupConfig];
|
||||||
onDeleteGroup: () => void;
|
onDeleteGroup: () => void;
|
||||||
onEditGroup: () => void;
|
onEditGroup: () => void;
|
||||||
isReadOnly?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function CameraGroupRow({
|
export function CameraGroupRow({
|
||||||
group,
|
group,
|
||||||
onDeleteGroup,
|
onDeleteGroup,
|
||||||
onEditGroup,
|
onEditGroup,
|
||||||
isReadOnly,
|
|
||||||
}: CameraGroupRowProps) {
|
}: CameraGroupRowProps) {
|
||||||
const { t } = useTranslation(["components/camera"]);
|
const { t } = useTranslation(["components/camera"]);
|
||||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||||
@ -588,7 +564,7 @@ export function CameraGroupRow({
|
|||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
|
|
||||||
{isMobile && !isReadOnly && (
|
{isMobile && (
|
||||||
<>
|
<>
|
||||||
<DropdownMenu modal={!isDesktop}>
|
<DropdownMenu modal={!isDesktop}>
|
||||||
<DropdownMenuTrigger>
|
<DropdownMenuTrigger>
|
||||||
@ -613,7 +589,7 @@ export function CameraGroupRow({
|
|||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{!isMobile && !isReadOnly && (
|
{!isMobile && (
|
||||||
<div className="flex flex-row items-center gap-2">
|
<div className="flex flex-row items-center gap-2">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
|
|||||||
@ -807,15 +807,6 @@ function ObjectDetailsTab({
|
|||||||
}
|
}
|
||||||
}, [search]);
|
}, [search]);
|
||||||
|
|
||||||
const isEventsKey = useCallback((key: unknown): boolean => {
|
|
||||||
const candidate = Array.isArray(key) ? key[0] : key;
|
|
||||||
const EVENTS_KEY_PATTERNS = ["events", "events/search", "events/explore"];
|
|
||||||
return (
|
|
||||||
typeof candidate === "string" &&
|
|
||||||
EVENTS_KEY_PATTERNS.some((p) => candidate.includes(p))
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const updateDescription = useCallback(() => {
|
const updateDescription = useCallback(() => {
|
||||||
if (!search) {
|
if (!search) {
|
||||||
return;
|
return;
|
||||||
@ -830,7 +821,11 @@ function ObjectDetailsTab({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
mutate(
|
mutate(
|
||||||
(key) => isEventsKey(key),
|
(key) =>
|
||||||
|
typeof key === "string" &&
|
||||||
|
(key.includes("events") ||
|
||||||
|
key.includes("events/search") ||
|
||||||
|
key.includes("events/explore")),
|
||||||
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
||||||
mapSearchResults(currentData, (event) =>
|
mapSearchResults(currentData, (event) =>
|
||||||
event.id === search.id
|
event.id === search.id
|
||||||
@ -843,7 +838,6 @@ function ObjectDetailsTab({
|
|||||||
revalidate: false,
|
revalidate: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
setSearch({ ...search, data: { ...search.data, description: desc } });
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
const errorMessage =
|
const errorMessage =
|
||||||
@ -860,7 +854,7 @@ function ObjectDetailsTab({
|
|||||||
);
|
);
|
||||||
setDesc(search.data.description);
|
setDesc(search.data.description);
|
||||||
});
|
});
|
||||||
}, [desc, search, mutate, t, mapSearchResults, isEventsKey, setSearch]);
|
}, [desc, search, mutate, t, mapSearchResults]);
|
||||||
|
|
||||||
const regenerateDescription = useCallback(
|
const regenerateDescription = useCallback(
|
||||||
(source: "snapshot" | "thumbnails") => {
|
(source: "snapshot" | "thumbnails") => {
|
||||||
@ -927,7 +921,11 @@ function ObjectDetailsTab({
|
|||||||
});
|
});
|
||||||
|
|
||||||
mutate(
|
mutate(
|
||||||
(key) => isEventsKey(key),
|
(key) =>
|
||||||
|
typeof key === "string" &&
|
||||||
|
(key.includes("events") ||
|
||||||
|
key.includes("events/search") ||
|
||||||
|
key.includes("events/explore")),
|
||||||
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
||||||
mapSearchResults(currentData, (event) =>
|
mapSearchResults(currentData, (event) =>
|
||||||
event.id === search.id
|
event.id === search.id
|
||||||
@ -974,7 +972,7 @@ function ObjectDetailsTab({
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[search, apiHost, mutate, setSearch, t, mapSearchResults, isEventsKey],
|
[search, apiHost, mutate, setSearch, t, mapSearchResults],
|
||||||
);
|
);
|
||||||
|
|
||||||
// recognized plate
|
// recognized plate
|
||||||
@ -998,7 +996,11 @@ function ObjectDetailsTab({
|
|||||||
});
|
});
|
||||||
|
|
||||||
mutate(
|
mutate(
|
||||||
(key) => isEventsKey(key),
|
(key) =>
|
||||||
|
typeof key === "string" &&
|
||||||
|
(key.includes("events") ||
|
||||||
|
key.includes("events/search") ||
|
||||||
|
key.includes("events/explore")),
|
||||||
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
||||||
mapSearchResults(currentData, (event) =>
|
mapSearchResults(currentData, (event) =>
|
||||||
event.id === search.id
|
event.id === search.id
|
||||||
@ -1045,7 +1047,7 @@ function ObjectDetailsTab({
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[search, apiHost, mutate, setSearch, t, mapSearchResults, isEventsKey],
|
[search, apiHost, mutate, setSearch, t, mapSearchResults],
|
||||||
);
|
);
|
||||||
|
|
||||||
// speech transcription
|
// speech transcription
|
||||||
@ -1101,9 +1103,12 @@ function ObjectDetailsTab({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setState("submitted");
|
setState("submitted");
|
||||||
setSearch({ ...search, plus_id: "new_upload" });
|
|
||||||
mutate(
|
mutate(
|
||||||
(key) => isEventsKey(key),
|
(key) =>
|
||||||
|
typeof key === "string" &&
|
||||||
|
(key.includes("events") ||
|
||||||
|
key.includes("events/search") ||
|
||||||
|
key.includes("events/explore")),
|
||||||
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
(currentData: SearchResult[][] | SearchResult[] | undefined) =>
|
||||||
mapSearchResults(currentData, (event) =>
|
mapSearchResults(currentData, (event) =>
|
||||||
event.id === search.id
|
event.id === search.id
|
||||||
@ -1117,7 +1122,7 @@ function ObjectDetailsTab({
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
[search, mutate, mapSearchResults, setSearch, isEventsKey],
|
[search, mutate, mapSearchResults],
|
||||||
);
|
);
|
||||||
|
|
||||||
const popoverContainerRef = useRef<HTMLDivElement | null>(null);
|
const popoverContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|||||||
@ -6,68 +6,31 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { Event } from "@/types/event";
|
import { Event } from "@/types/event";
|
||||||
import { isDesktop, isMobile, isSafari } from "react-device-detect";
|
import { isDesktop, isMobile } from "react-device-detect";
|
||||||
|
import { ObjectSnapshotTab } from "../detail/SearchDetailDialog";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
|
||||||
import axios from "axios";
|
|
||||||
import { useTranslation, Trans } from "react-i18next";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
|
||||||
import { FaCheckCircle } from "react-icons/fa";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
|
||||||
import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
|
|
||||||
import { baseUrl } from "@/api/baseUrl";
|
|
||||||
import { getTranslatedLabel } from "@/utils/i18n";
|
|
||||||
import useImageLoaded from "@/hooks/use-image-loaded";
|
|
||||||
|
|
||||||
export type FrigatePlusDialogProps = {
|
type FrigatePlusDialogProps = {
|
||||||
upload?: Event;
|
upload?: Event;
|
||||||
dialog?: boolean;
|
dialog?: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onEventUploaded: () => void;
|
onEventUploaded: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function FrigatePlusDialog({
|
export function FrigatePlusDialog({
|
||||||
upload,
|
upload,
|
||||||
dialog = true,
|
dialog = true,
|
||||||
onClose,
|
onClose,
|
||||||
onEventUploaded,
|
onEventUploaded,
|
||||||
}: FrigatePlusDialogProps) {
|
}: FrigatePlusDialogProps) {
|
||||||
const { t, i18n } = useTranslation(["components/dialog"]);
|
if (!upload) {
|
||||||
|
return;
|
||||||
type SubmissionState = "reviewing" | "uploading" | "submitted";
|
}
|
||||||
const [state, setState] = useState<SubmissionState>(
|
if (dialog) {
|
||||||
upload?.plus_id ? "submitted" : "reviewing",
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
setState(upload?.plus_id ? "submitted" : "reviewing");
|
|
||||||
}, [upload?.plus_id]);
|
|
||||||
|
|
||||||
const onSubmitToPlus = useCallback(
|
|
||||||
async (falsePositive: boolean) => {
|
|
||||||
if (!upload) return;
|
|
||||||
falsePositive
|
|
||||||
? axios.put(`events/${upload.id}/false_positive`)
|
|
||||||
: axios.post(`events/${upload.id}/plus`, { include_annotation: 1 });
|
|
||||||
setState("submitted");
|
|
||||||
onEventUploaded();
|
|
||||||
},
|
|
||||||
[upload, onEventUploaded],
|
|
||||||
);
|
|
||||||
|
|
||||||
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
|
|
||||||
const showCard =
|
|
||||||
!!upload &&
|
|
||||||
upload.data.type === "object" &&
|
|
||||||
upload.plus_id !== "not_enabled" &&
|
|
||||||
upload.end_time &&
|
|
||||||
upload.label !== "on_demand";
|
|
||||||
|
|
||||||
if (!dialog || !upload) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={true} onOpenChange={(open) => (!open ? onClose() : null)}>
|
<Dialog
|
||||||
|
open={upload != undefined}
|
||||||
|
onOpenChange={(open) => (!open ? onClose() : null)}
|
||||||
|
>
|
||||||
<DialogContent
|
<DialogContent
|
||||||
className={cn(
|
className={cn(
|
||||||
"scrollbar-container overflow-y-auto",
|
"scrollbar-container overflow-y-auto",
|
||||||
@ -82,123 +45,12 @@ export function FrigatePlusDialog({
|
|||||||
Submit this snapshot to Frigate+
|
Submit this snapshot to Frigate+
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
<ObjectSnapshotTab
|
||||||
<div className="relative size-full">
|
search={upload}
|
||||||
<ImageLoadingIndicator
|
onEventUploaded={onEventUploaded}
|
||||||
className="absolute inset-0 aspect-video min-h-[60dvh] w-full"
|
|
||||||
imgLoaded={imgLoaded}
|
|
||||||
/>
|
/>
|
||||||
<div className={imgLoaded ? "visible" : "invisible"}>
|
|
||||||
<TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
|
|
||||||
<div className="flex flex-col space-y-3">
|
|
||||||
<TransformComponent
|
|
||||||
wrapperStyle={{ width: "100%", height: "100%" }}
|
|
||||||
contentStyle={{
|
|
||||||
position: "relative",
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{upload.id && (
|
|
||||||
<div className="relative mx-auto">
|
|
||||||
<img
|
|
||||||
ref={imgRef}
|
|
||||||
className="mx-auto max-h-[60dvh] rounded-lg bg-black object-contain"
|
|
||||||
src={`${baseUrl}api/events/${upload.id}/snapshot.jpg`}
|
|
||||||
alt={`${upload.label}`}
|
|
||||||
loading={isSafari ? "eager" : "lazy"}
|
|
||||||
onLoad={onImgLoad}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</TransformComponent>
|
|
||||||
|
|
||||||
{showCard && (
|
|
||||||
<Card className="p-1 text-sm md:p-2">
|
|
||||||
<CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
|
|
||||||
<div className="flex flex-col space-y-3">
|
|
||||||
<div className="text-lg leading-none">
|
|
||||||
{t("explore.plus.submitToPlus.label")}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{t("explore.plus.submitToPlus.desc")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-1 flex-col justify-center gap-2 md:ml-8 md:w-auto md:justify-end">
|
|
||||||
{state === "reviewing" && (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
{i18n.language === "en" ? (
|
|
||||||
/^[aeiou]/i.test(upload.label || "") ? (
|
|
||||||
<Trans
|
|
||||||
ns="components/dialog"
|
|
||||||
values={{ label: upload.label }}
|
|
||||||
>
|
|
||||||
explore.plus.review.question.ask_an
|
|
||||||
</Trans>
|
|
||||||
) : (
|
|
||||||
<Trans
|
|
||||||
ns="components/dialog"
|
|
||||||
values={{ label: upload.label }}
|
|
||||||
>
|
|
||||||
explore.plus.review.question.ask_a
|
|
||||||
</Trans>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<Trans
|
|
||||||
ns="components/dialog"
|
|
||||||
values={{
|
|
||||||
untranslatedLabel: upload.label,
|
|
||||||
translatedLabel: getTranslatedLabel(
|
|
||||||
upload.label,
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
explore.plus.review.question.ask_full
|
|
||||||
</Trans>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-row gap-2">
|
|
||||||
<Button
|
|
||||||
className="flex-1 bg-success"
|
|
||||||
aria-label={t("button.yes", { ns: "common" })}
|
|
||||||
onClick={() => {
|
|
||||||
setState("uploading");
|
|
||||||
onSubmitToPlus(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("button.yes", { ns: "common" })}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className="flex-1 text-white"
|
|
||||||
aria-label={t("button.no", { ns: "common" })}
|
|
||||||
variant="destructive"
|
|
||||||
onClick={() => {
|
|
||||||
setState("uploading");
|
|
||||||
onSubmitToPlus(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("button.no", { ns: "common" })}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{state === "uploading" && <ActivityIndicator />}
|
|
||||||
{state === "submitted" && (
|
|
||||||
<div className="flex flex-row items-center justify-center gap-2">
|
|
||||||
<FaCheckCircle className="size-4 text-success" />
|
|
||||||
{t("explore.plus.review.state.submitted")}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TransformWrapper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import {
|
|||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import Hls from "hls.js";
|
import Hls from "hls.js";
|
||||||
import { isDesktop, isMobile } from "react-device-detect";
|
import { isAndroid, isDesktop, isMobile } from "react-device-detect";
|
||||||
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
||||||
import VideoControls from "./VideoControls";
|
import VideoControls from "./VideoControls";
|
||||||
import { VideoResolutionType } from "@/types/live";
|
import { VideoResolutionType } from "@/types/live";
|
||||||
@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
|
|||||||
import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay";
|
import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay";
|
||||||
|
|
||||||
// Android native hls does not seek correctly
|
// Android native hls does not seek correctly
|
||||||
const USE_NATIVE_HLS = false;
|
const USE_NATIVE_HLS = !isAndroid;
|
||||||
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
|
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
|
||||||
const unsupportedErrorCodes = [
|
const unsupportedErrorCodes = [
|
||||||
MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
|
MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
|
||||||
|
|||||||
@ -111,7 +111,7 @@ export default function DynamicVideoPlayer({
|
|||||||
const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
|
const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
|
||||||
const [source, setSource] = useState<HlsSource>({
|
const [source, setSource] = useState<HlsSource>({
|
||||||
playlist: `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
|
playlist: `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
|
||||||
startPosition: startTimestamp ? startTimestamp - timeRange.after : 0,
|
startPosition: startTimestamp ? timeRange.after - startTimestamp : 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
// start at correct time
|
// start at correct time
|
||||||
|
|||||||
@ -377,7 +377,7 @@ export default function Step1NameCamera({
|
|||||||
);
|
);
|
||||||
return selectedBrand &&
|
return selectedBrand &&
|
||||||
selectedBrand.value != "other" ? (
|
selectedBrand.value != "other" ? (
|
||||||
<Popover modal={true}>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|||||||
@ -600,7 +600,7 @@ export default function Step3StreamConfig({
|
|||||||
<Label className="text-sm font-medium text-primary-variant">
|
<Label className="text-sm font-medium text-primary-variant">
|
||||||
{t("cameraWizard.step3.roles")}
|
{t("cameraWizard.step3.roles")}
|
||||||
</Label>
|
</Label>
|
||||||
<Popover modal={true}>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
||||||
<LuInfo className="size-3" />
|
<LuInfo className="size-3" />
|
||||||
@ -670,7 +670,7 @@ export default function Step3StreamConfig({
|
|||||||
<Label className="text-sm font-medium text-primary-variant">
|
<Label className="text-sm font-medium text-primary-variant">
|
||||||
{t("cameraWizard.step3.featuresTitle")}
|
{t("cameraWizard.step3.featuresTitle")}
|
||||||
</Label>
|
</Label>
|
||||||
<Popover modal={true}>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
<Button variant="ghost" size="sm" className="h-4 w-4 p-0">
|
||||||
<LuInfo className="size-3" />
|
<LuInfo className="size-3" />
|
||||||
|
|||||||
@ -93,23 +93,19 @@ function Live() {
|
|||||||
const allowedCameras = useAllowedCameras();
|
const allowedCameras = useAllowedCameras();
|
||||||
|
|
||||||
const includesBirdseye = useMemo(() => {
|
const includesBirdseye = useMemo(() => {
|
||||||
// Restricted users should never have access to birdseye
|
|
||||||
if (isCustomRole) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
config &&
|
config &&
|
||||||
Object.keys(config.camera_groups).length &&
|
Object.keys(config.camera_groups).length &&
|
||||||
cameraGroup &&
|
cameraGroup &&
|
||||||
config.camera_groups[cameraGroup] &&
|
config.camera_groups[cameraGroup] &&
|
||||||
cameraGroup != "default"
|
cameraGroup != "default" &&
|
||||||
|
(!isCustomRole || "birdseye" in allowedCameras)
|
||||||
) {
|
) {
|
||||||
return config.camera_groups[cameraGroup].cameras.includes("birdseye");
|
return config.camera_groups[cameraGroup].cameras.includes("birdseye");
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}, [config, cameraGroup, isCustomRole]);
|
}, [config, cameraGroup, allowedCameras, isCustomRole]);
|
||||||
|
|
||||||
const cameras = useMemo(() => {
|
const cameras = useMemo(() => {
|
||||||
if (!config) {
|
if (!config) {
|
||||||
|
|||||||
@ -39,7 +39,6 @@ import {
|
|||||||
AlertDialogTitle,
|
AlertDialogTitle,
|
||||||
} from "@/components/ui/alert-dialog";
|
} from "@/components/ui/alert-dialog";
|
||||||
import BlurredIconButton from "@/components/button/BlurredIconButton";
|
import BlurredIconButton from "@/components/button/BlurredIconButton";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
|
||||||
|
|
||||||
const allModelTypes = ["objects", "states"] as const;
|
const allModelTypes = ["objects", "states"] as const;
|
||||||
type ModelType = (typeof allModelTypes)[number];
|
type ModelType = (typeof allModelTypes)[number];
|
||||||
@ -333,7 +332,9 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
|
|||||||
<ImageShadowOverlay lowerClassName="h-[30%] z-0" />
|
<ImageShadowOverlay lowerClassName="h-[30%] z-0" />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Skeleton className="flex size-full items-center justify-center" />
|
<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">
|
<div className="absolute bottom-2 left-3 text-lg text-white smart-capitalize">
|
||||||
{config.name}
|
{config.name}
|
||||||
|
|||||||
@ -20,14 +20,7 @@ import {
|
|||||||
FrigateConfig,
|
FrigateConfig,
|
||||||
} from "@/types/frigateConfig";
|
} from "@/types/frigateConfig";
|
||||||
import { ReviewSegment } from "@/types/review";
|
import { ReviewSegment } from "@/types/review";
|
||||||
import {
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
useCallback,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
import {
|
import {
|
||||||
isDesktop,
|
isDesktop,
|
||||||
isMobile,
|
isMobile,
|
||||||
@ -53,8 +46,6 @@ import { useStreamingSettings } from "@/context/streaming-settings-provider";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { EmptyCard } from "@/components/card/EmptyCard";
|
import { EmptyCard } from "@/components/card/EmptyCard";
|
||||||
import { BsFillCameraVideoOffFill } from "react-icons/bs";
|
import { BsFillCameraVideoOffFill } from "react-icons/bs";
|
||||||
import { AuthContext } from "@/context/auth-context";
|
|
||||||
import { useIsCustomRole } from "@/hooks/use-is-custom-role";
|
|
||||||
|
|
||||||
type LiveDashboardViewProps = {
|
type LiveDashboardViewProps = {
|
||||||
cameras: CameraConfig[];
|
cameras: CameraConfig[];
|
||||||
@ -383,6 +374,10 @@ export default function LiveDashboardView({
|
|||||||
onSaveMuting(true);
|
onSaveMuting(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (cameras.length == 0 && !includeBirdseye) {
|
||||||
|
return <NoCameraView />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
|
className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
|
||||||
@ -444,10 +439,6 @@ export default function LiveDashboardView({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{cameras.length == 0 && !includeBirdseye ? (
|
|
||||||
<NoCameraView />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{!fullscreen && events && events.length > 0 && (
|
{!fullscreen && events && events.length > 0 && (
|
||||||
<ScrollArea>
|
<ScrollArea>
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
@ -503,8 +494,7 @@ export default function LiveDashboardView({
|
|||||||
)}
|
)}
|
||||||
{cameras.map((camera) => {
|
{cameras.map((camera) => {
|
||||||
let grow;
|
let grow;
|
||||||
const aspectRatio =
|
const aspectRatio = camera.detect.width / camera.detect.height;
|
||||||
camera.detect.width / camera.detect.height;
|
|
||||||
if (aspectRatio > 2) {
|
if (aspectRatio > 2) {
|
||||||
grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
|
grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
|
||||||
} else if (aspectRatio < 1) {
|
} else if (aspectRatio < 1) {
|
||||||
@ -513,12 +503,10 @@ export default function LiveDashboardView({
|
|||||||
grow = "aspect-video";
|
grow = "aspect-video";
|
||||||
}
|
}
|
||||||
const availableStreams = camera.live.streams || {};
|
const availableStreams = camera.live.streams || {};
|
||||||
const firstStreamEntry =
|
const firstStreamEntry = Object.values(availableStreams)[0] || "";
|
||||||
Object.values(availableStreams)[0] || "";
|
|
||||||
|
|
||||||
const streamNameFromSettings =
|
const streamNameFromSettings =
|
||||||
currentGroupStreamingSettings?.[camera.name]?.streamName ||
|
currentGroupStreamingSettings?.[camera.name]?.streamName || "";
|
||||||
"";
|
|
||||||
const streamExists =
|
const streamExists =
|
||||||
streamNameFromSettings &&
|
streamNameFromSettings &&
|
||||||
Object.values(availableStreams).includes(
|
Object.values(availableStreams).includes(
|
||||||
@ -547,9 +535,7 @@ export default function LiveDashboardView({
|
|||||||
camera={camera.name}
|
camera={camera.name}
|
||||||
cameraGroup={cameraGroup}
|
cameraGroup={cameraGroup}
|
||||||
streamName={streamName}
|
streamName={streamName}
|
||||||
preferredLiveMode={
|
preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
|
||||||
preferredLiveModes[camera.name] ?? "mse"
|
|
||||||
}
|
|
||||||
isRestreamed={isRestreamedStates[camera.name]}
|
isRestreamed={isRestreamedStates[camera.name]}
|
||||||
supportsAudio={
|
supportsAudio={
|
||||||
supportsAudioOutputStates[streamName]?.supportsAudio ??
|
supportsAudioOutputStates[streamName]?.supportsAudio ??
|
||||||
@ -580,13 +566,9 @@ export default function LiveDashboardView({
|
|||||||
windowVisible && visibleCameras.includes(camera.name)
|
windowVisible && visibleCameras.includes(camera.name)
|
||||||
}
|
}
|
||||||
cameraConfig={camera}
|
cameraConfig={camera}
|
||||||
preferredLiveMode={
|
preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
|
||||||
preferredLiveModes[camera.name] ?? "mse"
|
|
||||||
}
|
|
||||||
autoLive={autoLive ?? globalAutoLive}
|
autoLive={autoLive ?? globalAutoLive}
|
||||||
showStillWithoutActivity={
|
showStillWithoutActivity={showStillWithoutActivity ?? true}
|
||||||
showStillWithoutActivity ?? true
|
|
||||||
}
|
|
||||||
alwaysShowCameraName={displayCameraNames}
|
alwaysShowCameraName={displayCameraNames}
|
||||||
useWebGL={useWebGL}
|
useWebGL={useWebGL}
|
||||||
playInBackground={false}
|
playInBackground={false}
|
||||||
@ -594,9 +576,7 @@ export default function LiveDashboardView({
|
|||||||
streamName={streamName}
|
streamName={streamName}
|
||||||
onClick={() => onSelectCamera(camera.name)}
|
onClick={() => onSelectCamera(camera.name)}
|
||||||
onError={(e) => handleError(camera.name, e)}
|
onError={(e) => handleError(camera.name, e)}
|
||||||
onResetLiveMode={() =>
|
onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
|
||||||
resetPreferredLiveMode(camera.name)
|
|
||||||
}
|
|
||||||
playAudio={audioStates[camera.name] ?? false}
|
playAudio={audioStates[camera.name] ?? false}
|
||||||
volume={volumeStates[camera.name]}
|
volume={volumeStates[camera.name]}
|
||||||
/>
|
/>
|
||||||
@ -652,34 +632,21 @@ export default function LiveDashboardView({
|
|||||||
toggleFullscreen={toggleFullscreen}
|
toggleFullscreen={toggleFullscreen}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function NoCameraView() {
|
function NoCameraView() {
|
||||||
const { t } = useTranslation(["views/live"]);
|
const { t } = useTranslation(["views/live"]);
|
||||||
const { auth } = useContext(AuthContext);
|
|
||||||
const isCustomRole = useIsCustomRole();
|
|
||||||
|
|
||||||
// Check if this is a restricted user with no cameras in this group
|
|
||||||
const isRestricted = isCustomRole && auth.isAuthenticated;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex size-full items-center justify-center">
|
<div className="flex size-full items-center justify-center">
|
||||||
<EmptyCard
|
<EmptyCard
|
||||||
icon={<BsFillCameraVideoOffFill className="size-8" />}
|
icon={<BsFillCameraVideoOffFill className="size-8" />}
|
||||||
title={
|
title={t("noCameras.title")}
|
||||||
isRestricted ? t("noCameras.restricted.title") : t("noCameras.title")
|
description={t("noCameras.description")}
|
||||||
}
|
buttonText={t("noCameras.buttonText")}
|
||||||
description={
|
link="/settings?page=cameraManagement"
|
||||||
isRestricted
|
|
||||||
? t("noCameras.restricted.description")
|
|
||||||
: t("noCameras.description")
|
|
||||||
}
|
|
||||||
buttonText={!isRestricted ? t("noCameras.buttonText") : undefined}
|
|
||||||
link={!isRestricted ? "/settings?page=cameraManagement" : undefined}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -198,9 +198,9 @@ export default function TriggerView({
|
|||||||
|
|
||||||
return axios
|
return axios
|
||||||
.put("config/set", configBody)
|
.put("config/set", configBody)
|
||||||
.then(async (configResponse) => {
|
.then((configResponse) => {
|
||||||
if (configResponse.status === 200) {
|
if (configResponse.status === 200) {
|
||||||
await updateConfig();
|
updateConfig();
|
||||||
const displayName =
|
const displayName =
|
||||||
friendly_name && friendly_name !== ""
|
friendly_name && friendly_name !== ""
|
||||||
? `${friendly_name} (${name})`
|
? `${friendly_name} (${name})`
|
||||||
@ -353,9 +353,9 @@ export default function TriggerView({
|
|||||||
|
|
||||||
return axios
|
return axios
|
||||||
.put("config/set", configBody)
|
.put("config/set", configBody)
|
||||||
.then(async (configResponse) => {
|
.then((configResponse) => {
|
||||||
if (configResponse.status === 200) {
|
if (configResponse.status === 200) {
|
||||||
await updateConfig();
|
updateConfig();
|
||||||
const friendly =
|
const friendly =
|
||||||
config?.cameras?.[selectedCamera]?.semantic_search
|
config?.cameras?.[selectedCamera]?.semantic_search
|
||||||
?.triggers?.[name]?.friendly_name;
|
?.triggers?.[name]?.friendly_name;
|
||||||
|
|||||||
@ -67,14 +67,13 @@ export default function EnrichmentMetrics({
|
|||||||
|
|
||||||
// features stats
|
// features stats
|
||||||
|
|
||||||
const groupedEnrichmentMetrics = useMemo(() => {
|
const embeddingInferenceTimeSeries = useMemo(() => {
|
||||||
if (!statsHistory) {
|
if (!statsHistory) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
const series: {
|
const series: {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
rawKey: string;
|
|
||||||
name: string;
|
name: string;
|
||||||
metrics: Threshold;
|
metrics: Threshold;
|
||||||
data: { x: number; y: number }[];
|
data: { x: number; y: number }[];
|
||||||
@ -91,7 +90,6 @@ export default function EnrichmentMetrics({
|
|||||||
|
|
||||||
if (!(key in series)) {
|
if (!(key in series)) {
|
||||||
series[key] = {
|
series[key] = {
|
||||||
rawKey,
|
|
||||||
name: t("enrichments.embeddings." + rawKey),
|
name: t("enrichments.embeddings." + rawKey),
|
||||||
metrics: getThreshold(rawKey),
|
metrics: getThreshold(rawKey),
|
||||||
data: [],
|
data: [],
|
||||||
@ -101,57 +99,7 @@ export default function EnrichmentMetrics({
|
|||||||
series[key].data.push({ x: statsIdx + 1, y: stat });
|
series[key].data.push({ x: statsIdx + 1, y: stat });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
return Object.values(series);
|
||||||
// Group series by category (extract base name from raw key)
|
|
||||||
const grouped: {
|
|
||||||
[category: string]: {
|
|
||||||
categoryName: string;
|
|
||||||
speedSeries?: {
|
|
||||||
name: string;
|
|
||||||
metrics: Threshold;
|
|
||||||
data: { x: number; y: number }[];
|
|
||||||
};
|
|
||||||
eventsSeries?: {
|
|
||||||
name: string;
|
|
||||||
metrics: Threshold;
|
|
||||||
data: { x: number; y: number }[];
|
|
||||||
};
|
|
||||||
};
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
Object.values(series).forEach((s) => {
|
|
||||||
// Extract base category name from raw key
|
|
||||||
// All metrics follow the pattern: {base}_speed and {base}_events_per_second
|
|
||||||
let categoryKey = s.rawKey;
|
|
||||||
let isSpeed = false;
|
|
||||||
|
|
||||||
if (s.rawKey.endsWith("_speed")) {
|
|
||||||
categoryKey = s.rawKey.replace("_speed", "");
|
|
||||||
isSpeed = true;
|
|
||||||
} else if (s.rawKey.endsWith("_events_per_second")) {
|
|
||||||
categoryKey = s.rawKey.replace("_events_per_second", "");
|
|
||||||
isSpeed = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get translated category name
|
|
||||||
const categoryName = t("enrichments.embeddings." + categoryKey);
|
|
||||||
|
|
||||||
if (!(categoryKey in grouped)) {
|
|
||||||
grouped[categoryKey] = {
|
|
||||||
categoryName,
|
|
||||||
speedSeries: undefined,
|
|
||||||
eventsSeries: undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isSpeed) {
|
|
||||||
grouped[categoryKey].speedSeries = s;
|
|
||||||
} else {
|
|
||||||
grouped[categoryKey].eventsSeries = s;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return Object.values(grouped);
|
|
||||||
}, [statsHistory, t, getThreshold]);
|
}, [statsHistory, t, getThreshold]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -162,43 +110,36 @@ export default function EnrichmentMetrics({
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"mt-4 grid w-full grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4",
|
"mt-4 grid w-full grid-cols-1 gap-2 sm:grid-cols-3",
|
||||||
|
embeddingInferenceTimeSeries && "sm:grid-cols-4",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{statsHistory.length != 0 ? (
|
{statsHistory.length != 0 ? (
|
||||||
<>
|
<>
|
||||||
{groupedEnrichmentMetrics.map((group) => (
|
{embeddingInferenceTimeSeries.map((series) => (
|
||||||
<div
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
||||||
key={group.categoryName}
|
<div className="mb-5 smart-capitalize">{series.name}</div>
|
||||||
className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl"
|
{series.name.endsWith("Speed") ? (
|
||||||
>
|
|
||||||
<div className="mb-5 smart-capitalize">
|
|
||||||
{group.categoryName}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{group.speedSeries && (
|
|
||||||
<ThresholdBarGraph
|
<ThresholdBarGraph
|
||||||
key={`${group.categoryName}-speed`}
|
key={series.name}
|
||||||
graphId={`${group.categoryName}-inference`}
|
graphId={`${series.name}-inference`}
|
||||||
name={t("enrichments.averageInf")}
|
name={series.name}
|
||||||
unit="ms"
|
unit="ms"
|
||||||
threshold={group.speedSeries.metrics}
|
threshold={series.metrics}
|
||||||
updateTimes={updateTimes}
|
updateTimes={updateTimes}
|
||||||
data={[group.speedSeries]}
|
data={[series]}
|
||||||
/>
|
/>
|
||||||
)}
|
) : (
|
||||||
{group.eventsSeries && (
|
|
||||||
<EventsPerSecondsLineGraph
|
<EventsPerSecondsLineGraph
|
||||||
key={`${group.categoryName}-events`}
|
key={series.name}
|
||||||
graphId={`${group.categoryName}-fps`}
|
graphId={`${series.name}-fps`}
|
||||||
unit=""
|
unit=""
|
||||||
name={t("enrichments.infPerSecond")}
|
name={t("enrichments.infPerSecond")}
|
||||||
updateTimes={updateTimes}
|
updateTimes={updateTimes}
|
||||||
data={[group.eventsSeries]}
|
data={[series]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -729,9 +729,12 @@ export default function GeneralMetrics({
|
|||||||
) : (
|
) : (
|
||||||
<Skeleton className="aspect-video w-full" />
|
<Skeleton className="aspect-video w-full" />
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
{statsHistory[0]?.npu_usages && (
|
{statsHistory[0]?.npu_usages && (
|
||||||
<>
|
<div
|
||||||
|
className={cn("mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2")}
|
||||||
|
>
|
||||||
{statsHistory.length != 0 ? (
|
{statsHistory.length != 0 ? (
|
||||||
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
@ -752,9 +755,7 @@ export default function GeneralMetrics({
|
|||||||
) : (
|
) : (
|
||||||
<Skeleton className="aspect-video w-full" />
|
<Skeleton className="aspect-video w-full" />
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user