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