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

feat: enable model dropdown search by configured model (#3466)

Browse Source
This commit is contained in:
Faisal Amir 2024-09-05 14:10:41 +07:00 committed by GitHub
parent 1ffb7f213d
commit f759fae55f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 109 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -465,158 +465,73 @@ const ModelDropdown = ({
{engine === InferenceEngine.nitro && {engine === InferenceEngine.nitro &&
!isDownloadALocalModel && !isDownloadALocalModel &&
showModel && ( showModel &&
<> !searchText.length && (
{!searchText.length ? ( <ul className="pb-2">
<ul className="pb-2"> {featuredModel.map((model) => {
{featuredModel.map((model) => { const isDownloading = downloadingModels.some(
const isDownloading = downloadingModels.some( (md) => md.id === model.id
(md) => md.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))]" >
<div className="flex items-center gap-2">
<p
className="line-clamp-1 text-[hsla(var(--text-secondary))]"
title={model.name}
> >
<div className="flex items-center gap-2"> {model.name}
<p </p>
className="line-clamp-1 text-[hsla(var(--text-secondary))]" <ModelLabel
title={model.name} metadata={model.metadata}
> compact
{model.name} />
</p> </div>
<ModelLabel <div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
metadata={model.metadata} <span className="font-medium">
compact {toGibibytes(model.metadata.size)}
/> </span>
</div> {!isDownloading ? (
<div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]"> <DownloadCloudIcon
<span className="font-medium"> size={18}
{toGibibytes(model.metadata.size)} className="cursor-pointer text-[hsla(var(--app-link))]"
</span> onClick={() => downloadModel(model)}
{!isDownloading ? ( />
<DownloadCloudIcon ) : (
size={18} Object.values(downloadStates)
className="cursor-pointer text-[hsla(var(--app-link))]" .filter((x) => x.modelId === model.id)
onClick={() => downloadModel(model)} .map((item) => (
/> <ProgressCircle
) : ( key={item.modelId}
Object.values(downloadStates) percentage={
.filter((x) => x.modelId === model.id) formatDownloadPercentage(
.map((item) => ( item?.percent,
<ProgressCircle {
key={item.modelId} hidePercentage: true,
percentage={
formatDownloadPercentage(
item?.percent,
{
hidePercentage: true,
}
) as number
} }
size={100} ) as number
/> }
)) size={100}
)}
</div>
</li>
)
})}
</ul>
) : (
<>
{filteredDownloadedModels
.filter(
(x) => x.engine === InferenceEngine.nitro
)
.filter((x) => {
if (searchText.length === 0) {
return downloadedModels.find(
(c) => c.id === x.id
)
} else {
return x
}
})
.map((model) => {
const isDownloading = downloadingModels.some(
(md) => md.id === model.id
)
const isdDownloaded = downloadedModels.some(
(c) => c.id === model.id
)
return (
<li
key={model.id}
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">
<p
className={twMerge(
'line-clamp-1',
!isdDownloaded &&
'text-[hsla(var(--text-secondary))]'
)}
title={model.name}
>
{model.name}
</p>
<ModelLabel
metadata={model.metadata}
compact
/> />
</div> ))
<div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]"> )}
{!isdDownloaded && ( </div>
<span className="font-medium"> </li>
{toGibibytes(model.metadata.size)} )
</span> })}
)} </ul>
{!isDownloading && !isdDownloaded ? (
<DownloadCloudIcon
size={18}
className="cursor-pointer text-[hsla(var(--app-link))]"
onClick={() => downloadModel(model)}
/>
) : (
Object.values(downloadStates)
.filter(
(x) => x.modelId === model.id
)
.map((item) => (
<ProgressCircle
key={item.modelId}
percentage={
formatDownloadPercentage(
item?.percent,
{
hidePercentage: true,
}
) as number
}
size={100}
/>
))
)}
</div>
</li>
)
})}
</>
)}
</>
)} )}
<ul className="pb-2"> <ul className="pb-2">
{filteredDownloadedModels {filteredDownloadedModels
.filter((x) => x.engine === engine) .filter((x) => x.engine === engine)
.filter((y) => { .filter((y) => {
if (localEngines.includes(y.engine)) { if (
localEngines.includes(y.engine) &&
!searchText.length
) {
return downloadedModels.find((c) => c.id === y.id) return downloadedModels.find((c) => c.id === y.id)
} else { } else {
return y return y
@ -624,11 +539,17 @@ const ModelDropdown = ({
}) })
.map((model) => { .map((model) => {
if (!showModel) return null if (!showModel) return null
const isDownloading = downloadingModels.some(
(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={twMerge( className={twMerge(
'cursor-pointer px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]', 'flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
!apiKey !apiKey
? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]' ? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
: 'text-[hsla(var(--text-primary))]' : 'text-[hsla(var(--text-primary))]'
@ -639,13 +560,54 @@ const ModelDropdown = ({
!localEngines.includes(model.engine) !localEngines.includes(model.engine)
) )
return null return null
onClickModelItem(model.id) if (isdDownloaded) {
onClickModelItem(model.id)
}
}} }}
> >
<div className="flex flex-shrink-0 gap-x-2"> <div className="flex gap-x-2">
<p className="line-clamp-1 " title={model.name}> <p
className={twMerge(
'line-clamp-1',
!isdDownloaded &&
'text-[hsla(var(--text-secondary))]'
)}
title={model.name}
>
{model.name} {model.name}
</p> </p>
<ModelLabel metadata={model.metadata} compact />
</div>
<div className="flex items-center gap-2 text-[hsla(var(--text-tertiary))]">
{!isdDownloaded && (
<span className="font-medium">
{toGibibytes(model.metadata.size)}
</span>
)}
{!isDownloading && !isdDownloaded ? (
<DownloadCloudIcon
size={18}
className="cursor-pointer text-[hsla(var(--app-link))]"
onClick={() => downloadModel(model)}
/>
) : (
Object.values(downloadStates)
.filter((x) => x.modelId === model.id)
.map((item) => (
<ProgressCircle
key={item.modelId}
percentage={
formatDownloadPercentage(
item?.percent,
{
hidePercentage: true,
}
) as number
}
size={100}
/>
))
)}
</div> </div>
</li> </li>
) )