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