Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embeddings UI updates #14378

Merged
merged 26 commits into from
Oct 16, 2024
Merged
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
e746956
Handle Frigate+ submitted case
NickM-27 Oct 15, 2024
4716ab2
Add search settings and rename general to ui settings
NickM-27 Oct 15, 2024
e11f4b8
Add platform aware sheet component
NickM-27 Oct 15, 2024
d76228a
use two columns on mobile view
hawkeye217 Oct 15, 2024
9d61fe3
Merge branch 'embeddings-ui' of https://github.com/blakeblackshear/fr…
hawkeye217 Oct 15, 2024
9bce6ef
Add cameras page to more filters
NickM-27 Oct 15, 2024
53ac693
clean up search settings view
hawkeye217 Oct 15, 2024
af4a291
Add time range to side filter
NickM-27 Oct 15, 2024
e48f3c5
Merge branch 'embeddings-ui' of github.com:blakeblackshear/frigate in…
NickM-27 Oct 15, 2024
28139f2
better match with ui settings
hawkeye217 Oct 15, 2024
f1ffcc0
Merge branch 'embeddings-ui' of https://github.com/blakeblackshear/fr…
hawkeye217 Oct 15, 2024
6664ec6
fix icon size
hawkeye217 Oct 15, 2024
fd7580c
use two columns on mobile view
hawkeye217 Oct 15, 2024
37bece3
clean up search settings view
hawkeye217 Oct 15, 2024
b7ffc1e
Add zones and saving logic
NickM-27 Oct 15, 2024
3fad61d
Add all filters to side panel
NickM-27 Oct 15, 2024
683e350
better match with ui settings
hawkeye217 Oct 15, 2024
00d16d8
fix icon size
hawkeye217 Oct 15, 2024
8ce569d
Fix mobile fitler page
NickM-27 Oct 15, 2024
0e180cd
Fix embeddings access
NickM-27 Oct 15, 2024
eff4e66
Cleanup
NickM-27 Oct 15, 2024
a1abaed
Fix scroll
NickM-27 Oct 15, 2024
a894cd6
Merge branch 'embeddings-ui' of https://github.com/blakeblackshear/fr…
hawkeye217 Oct 16, 2024
4fb807a
fix double scrollbars and add separators on mobile too
hawkeye217 Oct 16, 2024
39a5ca5
two columns on mobile
hawkeye217 Oct 16, 2024
68aa3aa
italics for emphasis
hawkeye217 Oct 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
clean up search settings view
  • Loading branch information
hawkeye217 committed Oct 15, 2024
commit 53ac69393889dac26f077b02e50dc524d63c512a
121 changes: 64 additions & 57 deletions web/src/views/settings/SearchSettingsView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function SearchSettingsView({
if (changedValue) {
addMessage(
"search_settings",
`Unsaved search settings changes)`,
`Unsaved search settings changes`,
undefined,
"search_settings",
);
Expand All @@ -151,31 +151,37 @@ export default function SearchSettingsView({
<Heading as="h3" className="my-2">
Search Settings
</Heading>
<div className="my-3 space-y-3 text-sm text-muted-foreground">
<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. This feature works
by creating embeddings — numerical vector representations — for both
the images and text descriptions of your tracked objects. By
comparing these embeddings, Frigate assesses their similarities to
deliver relevant search results.
</p>
<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.
This feature works by creating embeddings — numerical vector
representations — for both the images and text descriptions of
your tracked objects. By comparing these embeddings, Frigate
assesses their similarities to deliver relevant search results.
</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 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>
<Separator className="my-2 flex bg-secondary" />
<div className="flex w-full flex-col space-y-6">

<div className="flex w-full max-w-lg flex-col space-y-6">
<div className="flex flex-row items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="improve-contrast">Enabled</Label>
Expand Down Expand Up @@ -210,23 +216,24 @@ export default function SearchSettingsView({
/>
</div>
<Separator className="my-2 flex bg-secondary" />
<div className="mt-2 space-y-3">
<div className="mt-2 flex flex-row space-x-5 space-y-3">
<div className="space-y-0.5">
<div className="text-md">Model Size</div>
<div className="text-sm">Model Size</div>
<div className="my-2 space-y-1 text-sm text-muted-foreground">
<p>
Configure the size of the model used for semantic search
embeddings:
</p>
<p>
• Configuring the <em>small</em> model employs a quantized
version of the model that uses much less RAM and runs faster
on CPU with a very negligible difference in embedding quality.
</p>
<p>
• Configuring the <em>large</em> model employs the full Jina
model and will automatically run on the GPU if applicable.
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 much 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
Expand Down Expand Up @@ -256,27 +263,27 @@ export default function SearchSettingsView({
</Select>
</div>
</div>
<div className="flex flex-1 flex-col justify-end">
<div className="flex flex-row gap-2 pt-5">
<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>
<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>
Expand Down