From 81d96fe3a9edafb9009a5e0dacca80d1b82ba8f0 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 31 Dec 2024 13:26:04 +0800 Subject: [PATCH] style: catalog item style --- src/pages/llmodels/catalog.tsx | 43 ++++++++-- .../llmodels/components/catalog-item.tsx | 46 ++++++---- src/pages/llmodels/config/test.ts | 84 +++++++++++++++++++ src/pages/llmodels/style/catalog-item.less | 21 +++-- 4 files changed, 168 insertions(+), 26 deletions(-) create mode 100644 src/pages/llmodels/config/test.ts diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index a19830b4..a5ca21e5 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/src/pages/llmodels/catalog.tsx @@ -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({ show: false, @@ -24,6 +25,32 @@ const Catalog: React.FC = () => { source: modelSourceMap.huggingface_value }); + const [dataList, setDataList] = useState([]); + + 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 ( { > - {Array.from({ length: 12 }).map((_, index) => { + {testData.map((item, index) => { return ( handleOnDeploy(index)} activeId={activeId} + data={item} itemId={index} > diff --git a/src/pages/llmodels/components/catalog-item.tsx b/src/pages/llmodels/components/catalog-item.tsx index 0ff0665b..0da81600 100644 --- a/src/pages/llmodels/components/catalog-item.tsx +++ b/src/pages/llmodels/components/catalog-item.tsx @@ -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 = (props) => { - const { onDeploy, itemId, activeId } = props; + const { onDeploy, itemId, activeId, data } = props; const handleOnDeploy = () => { onDeploy(); @@ -26,22 +28,23 @@ const CatalogItem: React.FC = (props) => { - gpustack/stable-diffusion-v3-5-medium-GGUF + {data.name} - 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}
- + {data.tags.map((sItem, i) => { + return ( + + {sItem} + + ); + })} + {/* Audio @@ -49,11 +52,24 @@ const CatalogItem: React.FC = (props) => { Qwen - + */} + {/* + Audio + GGUF + Qwen */} + {data.size?.length > 0 && ( + <> + + {data.size.map((sItem, i) => { + return ( + + {sItem} + + ); + })} + + )}
-
); diff --git a/src/pages/llmodels/config/test.ts b/src/pages/llmodels/config/test.ts new file mode 100644 index 00000000..966a254a --- /dev/null +++ b/src/pages/llmodels/config/test.ts @@ -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'] + } +]; diff --git a/src/pages/llmodels/style/catalog-item.less b/src/pages/llmodels/style/catalog-item.less index 73032ead..d420c585 100644 --- a/src/pages/llmodels/style/catalog-item.less +++ b/src/pages/llmodels/style/catalog-item.less @@ -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 {