diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte index b017b1f677..af0f4d6050 100644 --- a/src/lib/components/workspace/Models.svelte +++ b/src/lib/components/workspace/Models.svelte @@ -42,9 +42,13 @@ let importFiles; let modelsImportInputElement: HTMLInputElement; + let tagsContainerElement: HTMLDivElement; + let loaded = false; let models = []; + let tags = []; + let selectedTag = ''; let filteredModels = []; let selectedModel = null; @@ -55,12 +59,14 @@ $: if (models) { filteredModels = models.filter((m) => { - if (query === '') return true; + if (query === '' && selectedTag === '') return true; const lowerQuery = query.toLowerCase(); return ( - (m.name || '').toLowerCase().includes(lowerQuery) || - (m.user?.name || '').toLowerCase().includes(lowerQuery) || // Search by user name - (m.user?.email || '').toLowerCase().includes(lowerQuery) // Search by user email + ((m.name || '').toLowerCase().includes(lowerQuery) || + (m.user?.name || '').toLowerCase().includes(lowerQuery) || // Search by user name + (m.user?.email || '').toLowerCase().includes(lowerQuery)) && // Search by user email + (selectedTag === '' || + m?.meta?.tags?.some((tag) => tag.name.toLowerCase() === selectedTag.toLowerCase())) ); }); } @@ -171,6 +177,16 @@ let groups = await getGroups(localStorage.token); group_ids = groups.map((group) => group.id); + if (models) { + tags = models + .filter((model) => !(model?.meta?.hidden ?? false)) + .flatMap((model) => model?.meta?.tags ?? []) + .map((tag) => tag.name); + + // Remove duplicates and sort + tags = Array.from(new Set(tags)).sort((a, b) => a.localeCompare(b)); + } + loaded = true; const onKeyDown = (event) => { @@ -215,7 +231,7 @@ }} /> -
+
{$i18n.t('Models')} @@ -262,6 +278,46 @@
+ {#if tags.length > 0} +
{ + if (e.deltaY !== 0) { + e.preventDefault(); + e.currentTarget.scrollLeft += e.deltaY; + } + }} + > +
+ + + {#each tags as tag} + + {/each} +
+
+ {/if}
{#each filteredModels as model (model.id)}