chore: drawer ux

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

@@ -0,0 +1,48 @@
+import { Space, Tag } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { queryHuggingfaceModelDetail } from '../apis';
+import '../style/model-card.less';
+import TitleWrapper from './title-wrapper';
+
+const ModelCard: React.FC<{ repo: string }> = (props) => {
+  const { repo } = props;
+  const [modelData, setModelData] = useState<any>({});
+
+  const getModelCardData = async () => {
+    if (!repo) {
+      return;
+    }
+    try {
+      const res = await queryHuggingfaceModelDetail({ repo });
+      console.log('modelcarddata==========', res);
+      setModelData(res);
+    } catch (error) {
+      setModelData({});
+    }
+  };
+
+  useEffect(() => {
+    getModelCardData();
+  }, [repo]);
+
+  return (
+    <>
+      <TitleWrapper>
+        <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>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(ModelCard);