forked from Github/frigate
Embeddings UI updates (#14378)
* Handle Frigate+ submitted case * Add search settings and rename general to ui settings * Add platform aware sheet component * use two columns on mobile view * Add cameras page to more filters * clean up search settings view * Add time range to side filter * better match with ui settings * fix icon size * use two columns on mobile view * clean up search settings view * Add zones and saving logic * Add all filters to side panel * better match with ui settings * fix icon size * Fix mobile fitler page * Fix embeddings access * Cleanup * Fix scroll * fix double scrollbars and add separators on mobile too * two columns on mobile * italics for emphasis --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen
@@ -73,13 +73,17 @@ export default function SearchView({
|
||||
const [columnCount, setColumnCount] = usePersistence("exploreGridColumns", 4);
|
||||
const effectiveColumnCount = useMemo(() => columnCount ?? 4, [columnCount]);
|
||||
|
||||
const gridClassName = cn("grid w-full gap-2 px-1 gap-2 lg:gap-4 md:mx-2", {
|
||||
"sm:grid-cols-2": effectiveColumnCount <= 2,
|
||||
"sm:grid-cols-3": effectiveColumnCount === 3,
|
||||
"sm:grid-cols-4": effectiveColumnCount === 4,
|
||||
"sm:grid-cols-5": effectiveColumnCount === 5,
|
||||
"sm:grid-cols-6": effectiveColumnCount === 6,
|
||||
});
|
||||
const gridClassName = cn(
|
||||
"grid w-full gap-2 px-1 gap-2 lg:gap-4 md:mx-2",
|
||||
isMobileOnly && "grid-cols-2",
|
||||
{
|
||||
"sm:grid-cols-2": effectiveColumnCount <= 2,
|
||||
"sm:grid-cols-3": effectiveColumnCount === 3,
|
||||
"sm:grid-cols-4": effectiveColumnCount === 4,
|
||||
"sm:grid-cols-5": effectiveColumnCount === 5,
|
||||
"sm:grid-cols-6": effectiveColumnCount === 6,
|
||||
},
|
||||
);
|
||||
|
||||
// suggestions values
|
||||
|
||||
|
||||
288
web/src/views/settings/SearchSettingsView.tsx
Normal file
288
web/src/views/settings/SearchSettingsView.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { FrigateConfig, SearchModelSize } from "@/types/frigateConfig";
|
||||
import useSWR from "swr";
|
||||
import axios from "axios";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { useCallback, useContext, useEffect, useState } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { toast } from "sonner";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LuExternalLink } from "react-icons/lu";
|
||||
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
type SearchSettingsViewProps = {
|
||||
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
type SearchSettings = {
|
||||
enabled?: boolean;
|
||||
reindex?: boolean;
|
||||
model_size?: SearchModelSize;
|
||||
};
|
||||
|
||||
export default function SearchSettingsView({
|
||||
setUnsavedChanges,
|
||||
}: SearchSettingsViewProps) {
|
||||
const { data: config, mutate: updateConfig } =
|
||||
useSWR<FrigateConfig>("config");
|
||||
const [changedValue, setChangedValue] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
|
||||
|
||||
const [searchSettings, setSearchSettings] = useState<SearchSettings>({
|
||||
enabled: undefined,
|
||||
reindex: undefined,
|
||||
model_size: undefined,
|
||||
});
|
||||
|
||||
const [origSearchSettings, setOrigSearchSettings] = useState<SearchSettings>({
|
||||
enabled: undefined,
|
||||
reindex: undefined,
|
||||
model_size: undefined,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (config) {
|
||||
if (searchSettings?.enabled == undefined) {
|
||||
setSearchSettings({
|
||||
enabled: config.semantic_search.enabled,
|
||||
reindex: config.semantic_search.reindex,
|
||||
model_size: config.semantic_search.model_size,
|
||||
});
|
||||
}
|
||||
|
||||
setOrigSearchSettings({
|
||||
enabled: config.semantic_search.enabled,
|
||||
reindex: config.semantic_search.reindex,
|
||||
model_size: config.semantic_search.model_size,
|
||||
});
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [config]);
|
||||
|
||||
const handleSearchConfigChange = (newConfig: Partial<SearchSettings>) => {
|
||||
setSearchSettings((prevConfig) => ({ ...prevConfig, ...newConfig }));
|
||||
setUnsavedChanges(true);
|
||||
setChangedValue(true);
|
||||
};
|
||||
|
||||
const saveToConfig = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.put(
|
||||
`config/set?semantic_search.enabled=${searchSettings.enabled}&semantic_search.reindex=${searchSettings.reindex}&semantic_search.model_size=${searchSettings.model_size}`,
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success("Search settings have been saved.", {
|
||||
position: "top-center",
|
||||
});
|
||||
setChangedValue(false);
|
||||
updateConfig();
|
||||
} else {
|
||||
toast.error(`Failed to save config changes: ${res.statusText}`, {
|
||||
position: "top-center",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(
|
||||
`Failed to save config changes: ${error.response.data.message}`,
|
||||
{ position: "top-center" },
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, [
|
||||
updateConfig,
|
||||
searchSettings.enabled,
|
||||
searchSettings.reindex,
|
||||
searchSettings.model_size,
|
||||
]);
|
||||
|
||||
const onCancel = useCallback(() => {
|
||||
setSearchSettings(origSearchSettings);
|
||||
setChangedValue(false);
|
||||
removeMessage("search_settings", "search_settings");
|
||||
}, [origSearchSettings, removeMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (changedValue) {
|
||||
addMessage(
|
||||
"search_settings",
|
||||
`Unsaved search settings changes`,
|
||||
undefined,
|
||||
"search_settings",
|
||||
);
|
||||
} else {
|
||||
removeMessage("search_settings", "search_settings");
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [changedValue]);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Search Settings - Frigate";
|
||||
}, []);
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex size-full flex-col md:flex-row">
|
||||
<Toaster position="top-center" closeButton={true} />
|
||||
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
|
||||
<Heading as="h3" className="my-2">
|
||||
Search Settings
|
||||
</Heading>
|
||||
<Separator className="my-2 flex bg-secondary" />
|
||||
<Heading as="h4" className="my-2">
|
||||
Semantic Search
|
||||
</Heading>
|
||||
<div className="max-w-6xl">
|
||||
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
|
||||
<p>
|
||||
Semantic Search in Frigate allows you to find tracked objects
|
||||
within your review items using either the image itself, a
|
||||
user-defined text description, or an automatically generated one.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-primary">
|
||||
<Link
|
||||
to="https://docs.frigate.video/configuration/semantic_search"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline"
|
||||
>
|
||||
Read the Documentation
|
||||
<LuExternalLink className="ml-2 inline-flex size-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full max-w-lg flex-col space-y-6">
|
||||
<div className="flex flex-row items-center">
|
||||
<Switch
|
||||
id="enabled"
|
||||
className="mr-3"
|
||||
disabled={searchSettings.enabled === undefined}
|
||||
checked={searchSettings.enabled === true}
|
||||
onCheckedChange={(isChecked) => {
|
||||
handleSearchConfigChange({ enabled: isChecked });
|
||||
}}
|
||||
/>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="enabled">Enabled</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row items-center">
|
||||
<Switch
|
||||
id="reindex"
|
||||
className="mr-3"
|
||||
disabled={searchSettings.reindex === undefined}
|
||||
checked={searchSettings.reindex === true}
|
||||
onCheckedChange={(isChecked) => {
|
||||
handleSearchConfigChange({ reindex: isChecked });
|
||||
}}
|
||||
/>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="reindex">Re-Index On Startup</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-sm text-muted-foreground">
|
||||
Re-indexing will reprocess all thumbnails and descriptions (if
|
||||
enabled) and apply the embeddings on each startup.{" "}
|
||||
<em>Don't forget to disable the option after restarting!</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col space-y-6">
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-md">Model Size</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
<p>
|
||||
The size of the model used for semantic search embeddings.
|
||||
</p>
|
||||
<ul className="list-disc pl-5 text-sm">
|
||||
<li>
|
||||
Using <em>small</em> employs a quantized version of the
|
||||
model that uses less RAM and runs faster on CPU with a very
|
||||
negligible difference in embedding quality.
|
||||
</li>
|
||||
<li>
|
||||
Using <em>large</em> employs the full Jina model and will
|
||||
automatically run on the GPU if applicable.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Select
|
||||
value={searchSettings.model_size}
|
||||
onValueChange={(value) =>
|
||||
handleSearchConfigChange({
|
||||
model_size: value as SearchModelSize,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-20">
|
||||
{searchSettings.model_size}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{["small", "large"].map((size) => (
|
||||
<SelectItem
|
||||
key={size}
|
||||
className="cursor-pointer"
|
||||
value={size}
|
||||
>
|
||||
{size}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-2 flex bg-secondary" />
|
||||
|
||||
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
|
||||
<Button className="flex flex-1" onClick={onCancel}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
disabled={!changedValue || isLoading}
|
||||
className="flex flex-1"
|
||||
onClick={saveToConfig}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<ActivityIndicator />
|
||||
<span>Saving...</span>
|
||||
</div>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
|
||||
const WEEK_STARTS_ON = ["Sunday", "Monday"];
|
||||
|
||||
export default function GeneralSettingsView() {
|
||||
export default function UiSettingsView() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
const clearStoredLayouts = useCallback(() => {
|
||||
Reference in New Issue
Block a user