From 250d30d73a79ab777472bc9dc6d5640267c2a293 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Thu, 27 Feb 2025 15:31:11 +0700 Subject: [PATCH] chore: hub UI tooltip filter, max model size and search result (#4753) * chore: fix hub ui tooltip, max-filter, and search result * chore: fix linter --- .../Hub/ModelFilter/ContextLength/index.tsx | 2 +- .../Hub/ModelFilter/ModelSize/index.tsx | 25 ++++------- web/screens/Hub/index.tsx | 44 ++++++++++++++++--- .../ThreadCenterPanel/TextMessage/index.tsx | 13 +++--- web/utils/converter.ts | 17 +++++-- 5 files changed, 66 insertions(+), 35 deletions(-) diff --git a/web/screens/Hub/ModelFilter/ContextLength/index.tsx b/web/screens/Hub/ModelFilter/ContextLength/index.tsx index cb53e77a6..a0886e247 100644 --- a/web/screens/Hub/ModelFilter/ContextLength/index.tsx +++ b/web/screens/Hub/ModelFilter/ContextLength/index.tsx @@ -26,7 +26,7 @@ export default function ContextLengthFilter() { className="flex-shrink-0 text-[hsl(var(--text-secondary))]" /> } - content={''} + content="Controls how much text the model can consider at once. Longer context allows the model to handle more input but uses more memory and runs slower." />
diff --git a/web/screens/Hub/ModelFilter/ModelSize/index.tsx b/web/screens/Hub/ModelFilter/ModelSize/index.tsx index 806c56284..b95d57f8b 100644 --- a/web/screens/Hub/ModelFilter/ModelSize/index.tsx +++ b/web/screens/Hub/ModelFilter/ModelSize/index.tsx @@ -8,29 +8,20 @@ import { InfoIcon } from 'lucide-react' export const hubModelSizeMinAtom = atom(0) export const hubModelSizeMaxAtom = atom(100) -export default function ModelSizeFilter() { +export default function ModelSizeFilter({ max }: { max: number }) { const [value, setValue] = useAtom(hubModelSizeMinAtom) const [valueMax, setValueMax] = useAtom(hubModelSizeMaxAtom) const [inputingMinValue, setInputingMinValue] = useState(false) const [inputingMaxValue, setInputingMaxValue] = useState(false) const normalizeTextValue = (value: number) => { - return value === 100 ? '100GB' : value === 0 ? 0 : `${value}GB` + return value === 0 ? 0 : `${value}GB` } return (

Model size

- - } - content={''} - />
@@ -41,7 +32,7 @@ export default function ModelSizeFilter() { setValueMax(Number(e[1])) }} min={0} - max={100} + max={max} step={1} />
@@ -55,7 +46,7 @@ export default function ModelSizeFilter() { type="text" className="mt-1 h-8 w-[60px] p-2" min={0} - max={100} + max={max} value={inputingMinValue ? value : normalizeTextValue(value)} textAlign="left" onFocus={(e) => setInputingMinValue(true)} @@ -75,7 +66,7 @@ export default function ModelSizeFilter() { // E.g. anything changes that trigger onValueChanged // Which is incorrect if ( - Number(e.target.value) > 100 || + Number(e.target.value) > max || Number(e.target.value) < 0 || Number.isNaN(Number(e.target.value)) ) @@ -91,7 +82,7 @@ export default function ModelSizeFilter() { type="text" className="mt-1 h-8 w-[60px] p-2" min={0} - max={100} + max={max} value={inputingMaxValue ? valueMax : normalizeTextValue(valueMax)} textAlign="left" onFocus={(e) => setInputingMaxValue(true)} @@ -99,7 +90,7 @@ export default function ModelSizeFilter() { setInputingMaxValue(false) const numericValue = e.target.value.replace(/\D/g, '') const value = Number(numericValue) - setValueMax(value > 100 ? 100 : value) + setValueMax(value > max ? max : value) }} onChange={(e) => { // Passthru since it validates again onBlur @@ -111,7 +102,7 @@ export default function ModelSizeFilter() { // E.g. anything changes that trigger onValueChanged // Which is incorrect if ( - Number(e.target.value) > 100 || + Number(e.target.value) > max || Number(e.target.value) < 0 || Number.isNaN(Number(e.target.value)) ) diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx index 88106d6d0..c8d48fd4d 100644 --- a/web/screens/Hub/index.tsx +++ b/web/screens/Hub/index.tsx @@ -35,6 +35,7 @@ import { import ModelList from '@/screens/Hub/ModelList' +import { toGigabytes } from '@/utils/converter' import { extractModelRepo } from '@/utils/modelSource' import { fuzzySearch } from '@/utils/search' @@ -110,6 +111,14 @@ const HubScreen = () => { const [maxModelSizeFilter, setMaxModelSizeFilter] = useAtom(hubModelSizeMaxAtom) + const largestModel = + sources && + sources + .flatMap((model) => model.models) + .reduce((max, model) => (model.size > max.size ? model : max), { + size: 0, + }) + const searchedModels = useMemo( () => searchValue.length @@ -135,7 +144,7 @@ const HubScreen = () => { !minModelSizeFilter || model.models.some((e) => e.size >= minModelSizeFilter * (1 << 30)) const matchesMaxSize = - maxModelSizeFilter === 100 || + maxModelSizeFilter === largestModel?.size || model.models.some((e) => e.size <= maxModelSizeFilter * (1 << 30)) return isCompatible && matchesCtxLen && matchesMinSize && matchesMaxSize @@ -169,6 +178,19 @@ const HubScreen = () => { } }, [modelDetail, sources, setModelDetail, addModelSource]) + useEffect(() => { + if (largestModel) { + setMaxModelSizeFilter( + Number( + toGigabytes(Number(largestModel?.size), { + hideUnit: true, + toFixed: 0, + }) + ) + ) + } + }, [largestModel]) + useEffect(() => { if (selectedModel) { // Try add the model source again to update it's data @@ -403,7 +425,7 @@ const HubScreen = () => {
0 && 'visible' )} > @@ -414,7 +436,10 @@ const HubScreen = () => {
) : ( - <> + {searchedModels.map((model) => (
{
))} - + )}
@@ -468,7 +493,7 @@ const HubScreen = () => { onClick={() => { setCtxLenFilter(0) setMinModelSizeFilter(0) - setMaxModelSizeFilter(100) + setMaxModelSizeFilter(Number(largestModel?.size)) setCompatible(false) }} > @@ -487,7 +512,14 @@ const HubScreen = () => {
- +
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx index 684f1b0e4..0b8f03e76 100644 --- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx +++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx @@ -70,8 +70,9 @@ const MessageContainer: React.FC< return (