chore: list state merge

src/pages/llmodels/components/model-card.tsx

@@ -1,4 +1,5 @@
-import { Space, Tag } from 'antd';
+import IconFont from '@/components/icon-font';
+import { Button, Empty, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { queryHuggingfaceModelDetail } from '../apis';
 import '../style/model-card.less';
@@ -10,11 +11,11 @@ const ModelCard: React.FC<{ repo: string }> = (props) => {
 
   const getModelCardData = async () => {
     if (!repo) {
+      setModelData(null);
       return;
     }
     try {
       const res = await queryHuggingfaceModelDetail({ repo });
-      console.log('modelcarddata==========', res);
       setModelData(res);
     } catch (error) {
       setModelData({});
@@ -31,15 +32,27 @@ const ModelCard: React.FC<{ repo: string }> = (props) => {
         <span>Model Card</span>
       </TitleWrapper>
       <div className="wrapper">
-        <div className="model-card-wrap">
-          <div className="title">{modelData.id}</div>
-          <Space>
-            <Tag className="tag-item">
-              <span className="m-r-5">Architecture:</span>
-              {modelData.config?.model_type}
-            </Tag>
-          </Space>
-        </div>
+        {modelData ? (
+          <div className="model-card-wrap">
+            <div className="title">{modelData.id}</div>
+            <div className="flex-between flex-center">
+              <Tag className="tag-item">
+                <span className="m-r-5">Architecture:</span>
+                {modelData.config?.model_type}
+              </Tag>
+              <Button
+                type="link"
+                target="_blank"
+                href={`https://huggingface.co/${modelData.id}`}
+              >
+                View in Hugging Face
+                <IconFont type="icon-external-link"></IconFont>
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+        )}
       </div>
     </>
   );