diff --git a/react/src/components/HuggingFaceReadmeCard.tsx b/react/src/components/HuggingFaceReadmeCard.tsx new file mode 100644 index 000000000..b08ca2128 --- /dev/null +++ b/react/src/components/HuggingFaceReadmeCard.tsx @@ -0,0 +1,60 @@ +import { baiSignedRequestWithPromise } from '../helper'; +import { useSuspendedBackendaiClient } from '../hooks'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; +import Flex from './Flex'; +import { FilterOutlined } from '@ant-design/icons'; +import { Card, CardProps, theme } from 'antd'; +import React from 'react'; +import Markdown from 'react-markdown'; + +interface HuggingFaceReadmeCardProps extends CardProps { + huggingFaceUrl: string; +} + +const HuggingFaceReadmeCard: React.FC = ({ + huggingFaceUrl, + ...cardProps +}) => { + const baiClient = useSuspendedBackendaiClient(); + const { token } = theme.useToken(); + + const { data } = useSuspenseTanQuery<{ + author: string; + model_name: string; + markdown: string; + }>({ + queryKey: ['huggingFaceReadme', huggingFaceUrl], + queryFn: () => { + return baiSignedRequestWithPromise({ + method: 'GET', + url: `/services/_/huggingface/models?huggingface_url=${huggingFaceUrl}`, + client: baiClient, + }); + }, + }); + + return ( + + + README.md + + } + styles={{ + body: { + padding: token.paddingLG, + overflow: 'auto', + minHeight: 200, + maxHeight: token.screenXS, + }, + }} + {...cardProps} + > + {data?.markdown} + + ); +}; + +export default HuggingFaceReadmeCard; diff --git a/react/src/components/ImportFromHuggingFaceModal.tsx b/react/src/components/ImportFromHuggingFaceModal.tsx index cff19a7b1..1877288d0 100644 --- a/react/src/components/ImportFromHuggingFaceModal.tsx +++ b/react/src/components/ImportFromHuggingFaceModal.tsx @@ -1,10 +1,12 @@ import BAIModal, { BAIModalProps } from './BAIModal'; import Flex from './Flex'; +import HuggingFaceReadmeCard from './HuggingFaceReadmeCard'; import { FilterOutlined } from '@ant-design/icons'; import { useToggle } from 'ahooks'; import { Button, Card, + Empty, Form, FormInstance, Input, @@ -12,8 +14,7 @@ import { theme, Typography, } from 'antd'; -import Markdown from 'markdown-to-jsx'; -import React, { useRef } from 'react'; +import React, { Suspense, useRef } from 'react'; import { useTranslation } from 'react-i18next'; type Service = { @@ -26,6 +27,31 @@ interface ImportFromHuggingFaceModalProps extends BAIModalProps { onRequestClose: () => void; } +const ReadmeFallbackCard = () => { + const { token } = theme.useToken(); + return ( + + + README.md + + } + styles={{ + body: { + padding: token.paddingLG, + overflow: 'auto', + minHeight: 200, + maxHeight: token.screenXS, + }, + }} + > + + + ); +}; + const ImportFromHuggingFaceModal: React.FC = ({ onRequestClose, ...baiModalProps @@ -34,6 +60,9 @@ const ImportFromHuggingFaceModal: React.FC = ({ const { token } = theme.useToken(); const formRef = useRef>(null); const [isImportOnly, { toggle: toggleIsImportOnly }] = useToggle(false); + const [huggingFaceUrl, setHuggingFaceUrl] = React.useState< + string | undefined + >(); const handleOnClick = () => { formRef.current @@ -65,28 +94,36 @@ const ImportFromHuggingFaceModal: React.FC = ({ layout="vertical" requiredMark="optional" > - - - - - - README.md - - } - styles={{ - body: { - padding: token.paddingLG, - overflow: 'auto', - minHeight: 200, - maxHeight: token.screenXS, + - {''} - + { + formRef.current + ?.validateFields(['url']) + .then((v) => { + setHuggingFaceUrl(v?.url); + }) + .catch(() => {}); + }} + /> + + {huggingFaceUrl ? ( + }> + + + ) : ( + + )}