Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: model dropdown search by configured model (#3047)

Browse Source
This commit is contained in:
Faisal Amir 2024-06-20 16:42:25 +07:00 committed by Louis
parent 08c60a70c2
commit 20859ccb9d
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
1 changed files with 94 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
web/containers/ModelDropdown/index.tsx
View File

@ -83,7 +83,7 @@ const ModelDropdown = ({
const filteredDownloadedModels = useMemo( const filteredDownloadedModels = useMemo(
() => () =>
downloadedModels configuredModels
.filter((e) => .filter((e) =>
e.name.toLowerCase().includes(searchText.toLowerCase().trim()) e.name.toLowerCase().includes(searchText.toLowerCase().trim())
) )
@ -105,7 +105,7 @@ const ModelDropdown = ({
} }
}) })
.sort((a, b) => a.name.localeCompare(b.name)), .sort((a, b) => a.name.localeCompare(b.name)),
[downloadedModels, searchText, searchFilter] [configuredModels, searchText, searchFilter]
) )
useEffect(() => { useEffect(() => {
@ -290,58 +290,58 @@ const ModelDropdown = ({
</div> </div>
</div> </div>
<ScrollArea className="h-[calc(100%-36px)] w-full"> <ScrollArea className="h-[calc(100%-36px)] w-full">
{filteredDownloadedModels.filter( {searchFilter !== 'remote' && (
(x) => x.engine === InferenceEngine.nitro
).length !== 0 ? (
<div className="relative w-full"> <div className="relative w-full">
<div className="mt-2"> <div className="mt-2">
<h6 className="mb-1 mt-3 px-3 font-medium text-[hsla(var(--text-secondary))]"> <h6 className="mb-1 mt-3 px-3 font-medium text-[hsla(var(--text-secondary))]">
Cortex Cortex
</h6> </h6>
</div>
{filteredDownloadedModels
.filter((x) => {
if (searchText.length === 0) {
return downloadedModels.find((c) => c.id === x.id)
} else {
return x
}
})
.filter((x) => x.engine === InferenceEngine.nitro).length !==
0 ? (
<ul className="pb-2"> <ul className="pb-2">
{filteredDownloadedModels {filteredDownloadedModels
? filteredDownloadedModels ? filteredDownloadedModels
.filter((x) => x.engine === InferenceEngine.nitro) .filter((x) => x.engine === InferenceEngine.nitro)
.map((model) => { .filter((x) => {
return ( if (searchText.length === 0) {
<li return downloadedModels.find((c) => c.id === x.id)
key={model.id} } else {
className="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]" return x
onClick={() => onClickModelItem(model.id)} }
>
<p className="line-clamp-1" title={model.name}>
{model.name}
</p>
<ModelLabel metadata={model.metadata} compact />
</li>
)
}) })
: null} .map((model) => {
</ul>
</div>
</div>
) : (
<>
{searchFilter !== 'remote' && (
<div className="relative w-full">
<div className="mt-2">
<h6 className="mb-1 mt-3 px-3 font-medium text-[hsla(var(--text-secondary))]">
Cortex
</h6>
{searchText.length === 0 ? (
<ul className="pb-2">
{featuredModel.map((model) => {
const isDownloading = downloadingModels.some( const isDownloading = downloadingModels.some(
(md) => md.id === model.id (md) => md.id === model.id
) )
const isdDownloaded = downloadedModels.some(
(c) => c.id === model.id
)
return ( return (
<li <li
key={model.id} key={model.id}
className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]" className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
onClick={() => {
if (isdDownloaded) {
onClickModelItem(model.id)
}
}}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p <p
className="line-clamp-1 text-[hsla(var(--text-secondary))]" className={twMerge(
'line-clamp-1',
!isdDownloaded &&
'text-[hsla(var(--text-secondary))]'
)}
title={model.name} title={model.name}
> >
{model.name} {model.name}
@ -352,10 +352,12 @@ const ModelDropdown = ({
/> />
</div> </div>
<div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]"> <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
<span className="font-medium"> {!isdDownloaded && (
{toGibibytes(model.metadata.size)} <span className="font-medium">
</span> {toGibibytes(model.metadata.size)}
{!isDownloading ? ( </span>
)}
{!isDownloading && !isdDownloaded ? (
<DownloadCloudIcon <DownloadCloudIcon
size={18} size={18}
className="cursor-pointer text-[hsla(var(--app-link))]" className="cursor-pointer text-[hsla(var(--app-link))]"
@ -382,76 +384,61 @@ const ModelDropdown = ({
</div> </div>
</li> </li>
) )
})} })
</ul> : null}
) : ( </ul>
<ul className="pb-2"> ) : (
{configuredModels <ul className="pb-2">
.filter((x) => x.engine === InferenceEngine.nitro) {featuredModel.map((model) => {
.filter((e) => const isDownloading = downloadingModels.some(
e.name (md) => md.id === model.id
.toLowerCase() )
.includes(searchText.toLowerCase().trim()) return (
) <li
.map((model) => { key={model.id}
const isDownloading = downloadingModels.some( className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
(md) => md.id === model.id >
) <div className="flex items-center gap-2">
return ( <p
<li className="line-clamp-1 text-[hsla(var(--text-secondary))]"
key={model.id} title={model.name}
className="flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]" >
> {model.name}
<div className="flex items-center gap-2"> </p>
<p <ModelLabel metadata={model.metadata} compact />
className="line-clamp-1 text-[hsla(var(--text-secondary))]" </div>
title={model.name} <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
> <span className="font-medium">
{model.name} {toGibibytes(model.metadata.size)}
</p> </span>
<ModelLabel {!isDownloading ? (
metadata={model.metadata} <DownloadCloudIcon
compact size={18}
/> className="cursor-pointer text-[hsla(var(--app-link))]"
</div> onClick={() => downloadModel(model)}
<div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]"> />
<span className="font-medium"> ) : (
{toGibibytes(model.metadata.size)} Object.values(downloadStates)
</span> .filter((x) => x.modelId === model.id)
{!isDownloading ? ( .map((item) => (
<DownloadCloudIcon <ProgressCircle
size={18} key={item.modelId}
className="cursor-pointer text-[hsla(var(--app-link))]" percentage={
onClick={() => downloadModel(model)} formatDownloadPercentage(item?.percent, {
/> hidePercentage: true,
) : ( }) as number
Object.values(downloadStates) }
.filter((x) => x.modelId === model.id) size={100}
.map((item) => ( />
<ProgressCircle ))
key={item.modelId} )}
percentage={ </div>
formatDownloadPercentage( </li>
item?.percent, )
{ })}
hidePercentage: true, </ul>
}
) as number
}
size={100}
/>
))
)}
</div>
</li>
)
})}
</ul>
)}
</div>
</div>
)} )}
</> </div>
)} )}
{groupByEngine.map((engine, i) => { {groupByEngine.map((engine, i) => {