root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: catalog item style

Browse Source
This commit is contained in:
jialin
2025-01-03 20:51:22 +08:00
parent 39fff0e57d
commit 81d96fe3a9
4 changed files with 168 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/catalog.tsx
+37 -6
View File
@@ -7,16 +7,17 @@ import { useIntl } from '@umijs/max';
import { Button, Col, Input, Pagination, Row, Space, message } from 'antd';
import _ from 'lodash';
import ResizeObserver from 'rc-resize-observer';
import React, { useCallback, useState } from 'react';
import { createModel } from './apis';
import React, { useCallback, useEffect, useState } from 'react';
import { createModel, queryHuggingfaceModels } from './apis';
import CatalogItem from './components/catalog-item';
import DelopyBuiltInModal from './components/deploy-builtin-modal';
import { getSourceRepoConfigValue, modelSourceMap } from './config';
import testData from './config/test';
import { FormData } from './config/types';
const Catalog: React.FC = () => {
const intl = useIntl();
const [span, setSpan] = React.useState(6);
const [span, setSpan] = React.useState(8);
const [activeId, setActiveId] = React.useState(-1);
const [openDeployModal, setOpenDeployModal] = useState<any>({
show: false,
@@ -24,6 +25,32 @@ const Catalog: React.FC = () => {
source: modelSourceMap.huggingface_value
});
const [dataList, setDataList] = useState<any[]>([]);
const getModelsFromHuggingface = useCallback(async (sort: string) => {
console.log('getModelsFromHuggingface:', sort);
try {
const params = {
search: {
query: 'gpustack',
tags: ['gguf']
}
};
const data = await queryHuggingfaceModels(params);
let list = _.map(data || [], (item: any) => {
return {
...item,
value: item.name,
label: item.name
};
});
setDataList(list);
} catch (error) {
console.log('error:', error);
return [];
}
}, []);
const handleResize = useCallback(
_.throttle((size: { width: number; height: number }) => {
const { width } = size;
@@ -34,9 +61,9 @@ const Catalog: React.FC = () => {
} else if (width < breakpoints.md) {
setSpan(12);
} else if (width < breakpoints.lg) {
setSpan(8);
setSpan(12);
} else {
setSpan(6);
setSpan(8);
}
console.log('size:', size);
}, 100),
@@ -85,6 +112,9 @@ const Catalog: React.FC = () => {
[openDeployModal]
);
useEffect(() => {
getModelsFromHuggingface('desc');
}, [getModelsFromHuggingface]);
return (
<PageContainer
ghost
@@ -114,12 +144,13 @@ const Catalog: React.FC = () => {
></PageTools>
<ResizeObserver onResize={handleResize}>
<Row gutter={[16, 16]}>
{Array.from({ length: 12 }).map((_, index) => {
{testData.map((item, index) => {
return (
<Col span={span} key={index}>
<CatalogItem
onDeploy={() => handleOnDeploy(index)}
activeId={activeId}
data={item}
itemId={index}
></CatalogItem>
</Col>
src/pages/llmodels/components/catalog-item.tsx
+31 -15
View File
@@ -1,17 +1,19 @@
import IMG from '@/assets/images/small-logo-200x200.png';
import AutoTooltip from '@/components/auto-tooltip';
import { Button, Tag, Typography } from 'antd';
import { Tag, Typography } from 'antd';
import classNames from 'classnames';
import React from 'react';
import '../style/catalog-item.less';
const COLORS = ['blue', 'purple', 'orange'];
interface CatalogItemProps {
activeId: number;
itemId: number;
data: any;
onDeploy: () => void;
}
const CatalogItem: React.FC<CatalogItemProps> = (props) => {
const { onDeploy, itemId, activeId } = props;
const { onDeploy, itemId, activeId, data } = props;
const handleOnDeploy = () => {
onDeploy();
@@ -26,22 +28,23 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
<img src={IMG} alt="" />
</div>
<AutoTooltip ghost style={{ flex: 1 }}>
gpustack/stable-diffusion-v3-5-medium-GGUF
{data.name}
</AutoTooltip>
</div>
<Typography.Paragraph className="desc" ellipsis={{ rows: 2 }}>
this is description this is description this is description this is
this is description this isthis is description this isthis is
description this is this is description this isthis is description
this isthis is description this isthis is description this isthis is
description this isthis is description this isthis is description this
is this is description this isthis is description this isthis is
description this isthis is description this is
{data.description}
</Typography.Paragraph>
</div>
<div className="item-footer">
<div className="tags">
<Tag color="blue" className="tag-item">
{data.tags.map((sItem, i) => {
return (
<Tag key={sItem} className="tag-item" color={COLORS[i]}>
{sItem}
</Tag>
);
})}
{/* <Tag color="blue" className="tag-item">
Audio
</Tag>
<Tag color="purple" className="tag-item">
@@ -49,11 +52,24 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
</Tag>
<Tag color="orange" className="tag-item">
Qwen
</Tag>
</Tag> */}
{/* <span className="dot"></span>
<Tag className="tag-item">Audio</Tag>
<Tag className="tag-item">GGUF</Tag>
<Tag className="tag-item">Qwen</Tag> */}
{data.size?.length > 0 && (
<>
<span className="dot"></span>
{data.size.map((sItem, i) => {
return (
<Tag key={sItem} className="tag-item">
{sItem}
</Tag>
);
})}
</>
)}
</div>
<Button size="small" type="primary" onClick={handleOnDeploy}>
Deploy
</Button>
</div>
</div>
);
src/pages/llmodels/config/test.ts
+84
View File
@@ -0,0 +1,84 @@
export default [
{
name: 'gpustack/bge-m3-GGUF',
tags: ['Embedding', 'GGUF', 'bert'],
description:
'It can simultaneously perform the three common retrieval functionalities of embedding model: dense retrieval, multi-vector retrieval, and sparse retrieval.',
size: ['567M']
},
{
name: 'gpustack/stable-diffusion-v3-5-medium-GGUF',
tags: ['Text-to-Image', 'GGUF'],
description:
'Stable Diffusion 3.5 Medium is a Multimodal Diffusion Transformer with improvements (MMDiT-X) text-to-image model that features improved performance in image quality, typography, complex prompt understanding, and resource-efficiency.',
size: ['8B']
},
{
name: 'gpustack/stable-diffusion-v3-5-large-GGUF',
tags: ['Text-to-Image', 'GGUF'],
description:
'Stable Diffusion 3.5 Large is a Multimodal Diffusion Transformer (MMDiT) text-to-image model that features improved performance in image quality, typography, complex prompt understanding, and resource-efficiency',
size: ['14B']
},
{
name: 'gpustack/jina-reranker-v1-tiny-en-GGUF',
tags: ['Rerank', 'GGUF', 'jina-bert-v2'],
description:
'his model is designed for blazing-fast reranking while maintaining competitive performance.',
size: ['Q8_0', 'Q4_0']
},
{
name: 'gpustack/stable-diffusion-v1-5-inpainting-GGUF',
tags: ['Text-to-Image', 'GGUF'],
description:
'Stable Diffusion Inpainting is a latent text-to-image diffusion model capable of generating photo-realistic images given any text input, with the extra capability of inpainting the pictures by using a mask',
size: ['1B', 'Q8_0', 'Q4_0']
},
{
name: 'gpustack/Llama-3.2-3B-Instruct-GGUF',
tags: ['Text-to-Text', 'GGUF', 'llama'],
description:
'The Llama 3.2 collection of multilingual large language models (LLMs) is a collection of pretrained and instruction-tuned generative models in 1B and 3B sizes (text in/text out).',
size: ['1B', 'Q8_0', 'Q4_0']
},
{
name: 'gpustack/faster-whisper-large-v1',
description:
'This model can be used in CTranslate2 or projects based on CTranslate2 such as faster-whisper.',
tags: ['Speech-to-Text'],
size: []
},
{
name: 'gpustack/faster-distil-whisper-medium.en',
description:
'This model can be used in CTranslate2 or projects based on CTranslate2 such as faster-whisper.',
tags: ['Speech-to-Text']
},
{
name: 'gpustack/CosyVoice-300M',
description:
'This model is a lightweight, fast, and efficient text-to-speech model that can be used in various applications.',
tags: ['Text-to-Speech']
},
{
name: 'gpustack/FLUX.1-mini-GGUF',
tags: ['Text-to-Image', 'GGUF'],
description:
'A 3.2B MMDiT distilled from Flux-dev for efficient text-to-image generation',
size: ['8B', 'Q8_0', 'Q4_0', 'FP16']
},
{
name: 'gpustack/stable-diffusion-v3-5-large-turbo-GGUF',
tags: ['Text-to-Image', 'GGUF'],
description:
'Stable Diffusion 3.5 Large Turbo is a Multimodal Diffusion Transformer (MMDiT) text-to-image model with Adversarial Diffusion Distillation (ADD)',
size: ['14B', 'Q8_0', 'Q4_0']
},
{
name: 'gpustack/FLUX.1-lite-GGUF',
description:
'This version uses 7 GB less RAM and runs 23% faster while maintaining the same precision (bfloat16) as the original model',
tags: ['Text-to-Image', 'GGUF'],
size: ['14B', 'Q8_0', 'Q4_0']
}
];
src/pages/llmodels/style/catalog-item.less
+16 -5
View File
@@ -1,8 +1,8 @@
.catalog-item {
height: 146px;
height: 160px;
overflow: hidden;
display: flex;
padding: 12px 14px;
padding: 16px 20px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
@@ -49,7 +49,7 @@
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 10px;
margin-bottom: 16px;
.name {
flex: 1;
@@ -61,13 +61,24 @@
color: var(--ant-color-text-secondary);
width: 100%;
overflow: hidden;
margin-bottom: 16px;
}
.item-footer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 8px;
justify-content: flex-start;
align-items: flex-start;
}
.dot {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--ant-color-text-tertiary);
margin-right: 8px;
}
.tags {