style: catalog item style

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 React, { useCallback, useEffect, useState } from 'react';
-import { createModel } from './apis';
+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

@@ -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
+          {data.description}
-          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
         </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

@@ -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

@@ -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;
+    flex-direction: column;
-    align-items: center;
+    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 {