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

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

@ -465,9 +465,8 @@ 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(
@ -523,22 +522,23 @@ const ModelDropdown = ({
) )
})} })}
</ul> </ul>
) : ( )}
<>
<ul className="pb-2">
{filteredDownloadedModels {filteredDownloadedModels
.filter( .filter((x) => x.engine === engine)
(x) => x.engine === InferenceEngine.nitro .filter((y) => {
) if (
.filter((x) => { localEngines.includes(y.engine) &&
if (searchText.length === 0) { !searchText.length
return downloadedModels.find( ) {
(c) => c.id === x.id return downloadedModels.find((c) => c.id === y.id)
)
} else { } else {
return x return y
} }
}) })
.map((model) => { .map((model) => {
if (!showModel) return null
const isDownloading = downloadingModels.some( const isDownloading = downloadingModels.some(
(md) => md.id === model.id (md) => md.id === model.id
) )
@ -548,14 +548,24 @@ const ModelDropdown = ({
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={twMerge(
'flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
!apiKey
? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
: 'text-[hsla(var(--text-primary))]'
)}
onClick={() => { onClick={() => {
if (
!apiKey &&
!localEngines.includes(model.engine)
)
return null
if (isdDownloaded) { if (isdDownloaded) {
onClickModelItem(model.id) onClickModelItem(model.id)
} }
}} }}
> >
<div className="flex items-center gap-2"> <div className="flex gap-x-2">
<p <p
className={twMerge( className={twMerge(
'line-clamp-1', 'line-clamp-1',
@ -566,10 +576,7 @@ const ModelDropdown = ({
> >
{model.name} {model.name}
</p> </p>
<ModelLabel <ModelLabel metadata={model.metadata} compact />
metadata={model.metadata}
compact
/>
</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))]">
{!isdDownloaded && ( {!isdDownloaded && (
@ -585,9 +592,7 @@ const ModelDropdown = ({
/> />
) : ( ) : (
Object.values(downloadStates) Object.values(downloadStates)
.filter( .filter((x) => x.modelId === model.id)
(x) => x.modelId === model.id
)
.map((item) => ( .map((item) => (
<ProgressCircle <ProgressCircle
key={item.modelId} key={item.modelId}
@ -607,49 +612,6 @@ const ModelDropdown = ({
</li> </li>
) )
})} })}
</>
)}
</>
)}
<ul className="pb-2">
{filteredDownloadedModels
.filter((x) => x.engine === engine)
.filter((y) => {
if (localEngines.includes(y.engine)) {
return downloadedModels.find((c) => c.id === y.id)
} else {
return y
}
})
.map((model) => {
if (!showModel) return null
return (
<li
key={model.id}
className={twMerge(
'cursor-pointer px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
!apiKey
? 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
: 'text-[hsla(var(--text-primary))]'
)}
onClick={() => {
if (
!apiKey &&
!localEngines.includes(model.engine)
)
return null
onClickModelItem(model.id)
}}
>
<div className="flex flex-shrink-0 gap-x-2">
<p className="line-clamp-1 " title={model.name}>
{model.name}
</p>
</div>
</li>
)
})}
</ul> </ul>
</div> </div>
</div> </div>