diff --git a/react/src/components/ImportFromHuggingFaceModal.tsx b/react/src/components/ImportFromHuggingFaceModal.tsx
index 36777e2cb..6ab592377 100644
--- a/react/src/components/ImportFromHuggingFaceModal.tsx
+++ b/react/src/components/ImportFromHuggingFaceModal.tsx
@@ -3,10 +3,12 @@ import { useSuspendedBackendaiClient } from '../hooks';
import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
import BAIModal, { BAIModalProps } from './BAIModal';
import Flex from './Flex';
+import { FilterOutlined } from '@ant-design/icons';
import { useToggle } from 'ahooks';
import {
Button,
- Descriptions,
+ Card,
+ Empty,
Form,
FormInstance,
Input,
@@ -17,13 +19,44 @@ import {
} from 'antd';
import _ from 'lodash';
import { CheckIcon } from 'lucide-react';
-import React, { useEffect, useRef, useState, useTransition } from 'react';
+import Markdown from 'markdown-to-jsx';
+import React, {
+ Suspense,
+ useEffect,
+ useRef,
+ useState,
+ useTransition,
+} from 'react';
import { useTranslation } from 'react-i18next';
type Service = {
url: string;
- inference_engine_version?: string;
- replica_number?: number;
+ service_name?: string;
+ folder_name?: string;
+};
+
+const ReadmeFallbackCard = () => {
+ const { token } = theme.useToken();
+ return (
+
+
+ README.md
+
+ }
+ styles={{
+ body: {
+ padding: token.paddingLG,
+ overflow: 'auto',
+ height: 200,
+ },
+ }}
+ >
+
+
+ );
};
interface ImportFromHuggingFaceModalProps extends BAIModalProps {
@@ -43,10 +76,11 @@ const ImportFromHuggingFaceModal: React.FC = ({
const baiClient = useSuspendedBackendaiClient();
const [isPendingCheck, startCheckTransition] = useTransition();
- const hugginFaceModelInfo = useSuspenseTanQuery<{
+ const huggingFaceModelInfo = useSuspenseTanQuery<{
author?: string;
model_name?: string;
markdown?: string;
+ pipeline_tag?: string;
isError?: boolean;
url?: string;
}>({
@@ -74,7 +108,7 @@ const ImportFromHuggingFaceModal: React.FC = ({
},
});
const isHuggingfaceURLExisted = !_.isEmpty(
- hugginFaceModelInfo.data.model_name,
+ huggingFaceModelInfo.data.model_name,
);
const shouldSkipURLCheck =
isHuggingfaceURLExisted && huggingFaceURL === typedURL;
@@ -89,10 +123,10 @@ const ImportFromHuggingFaceModal: React.FC = ({
// validate when huggingFaceModelInfo is updated
useEffect(() => {
- if (hugginFaceModelInfo.data.url) {
+ if (huggingFaceModelInfo.data.url) {
formRef.current?.validateFields().catch(() => {});
}
- }, [hugginFaceModelInfo.data.url]);
+ }, [huggingFaceModelInfo.data.url]);
const handleOnClick = () => {
formRef.current
@@ -124,7 +158,10 @@ const ImportFromHuggingFaceModal: React.FC = ({
type="primary"
htmlType="submit"
onClick={handleOnClick}
- disabled={!shouldSkipURLCheck}
+ disabled={
+ !shouldSkipURLCheck ||
+ huggingFaceModelInfo.data?.pipeline_tag! !== 'text-generation'
+ }
>
{isImportOnly
? t('data.modelStore.Import')
@@ -141,7 +178,7 @@ const ImportFromHuggingFaceModal: React.FC = ({
layout="vertical"
requiredMark="optional"
>
-
+
= ({
]}
>
{
handleOnCheck();
}}
@@ -184,22 +220,30 @@ const ImportFromHuggingFaceModal: React.FC = ({
name=""
rules={[
{
- validator: async (_, value) => {
+ validator: async () => {
if (
!isHuggingfaceURLExisted &&
- hugginFaceModelInfo.data?.isError &&
- hugginFaceModelInfo.data.url === typedURL
+ huggingFaceModelInfo.data?.isError &&
+ huggingFaceModelInfo.data.url === typedURL
) {
return Promise.reject(
t('data.modelStore.InvalidHuggingFaceUrl'),
);
} else {
- if (shouldSkipURLCheck) {
- return Promise.resolve();
- } else {
+ if (!shouldSkipURLCheck) {
return Promise.reject(
t('data.modelStore.InvalidHuggingFaceUrl'),
);
+ } else if (
+ huggingFaceModelInfo.data?.pipeline_tag &&
+ huggingFaceModelInfo.data?.pipeline_tag !==
+ 'text-generation'
+ ) {
+ return Promise.reject(
+ t('data.modelStore.NotSupportedModel'),
+ );
+ } else {
+ return Promise.resolve();
}
}
},
@@ -207,20 +251,39 @@ const ImportFromHuggingFaceModal: React.FC = ({
]}
>
-
-
- {shouldSkipURLCheck && hugginFaceModelInfo.data?.model_name}
-
-
- {shouldSkipURLCheck && hugginFaceModelInfo.data?.author}
-
-
+
+
+
+
+
+ {huggingFaceURL && huggingFaceModelInfo.data?.markdown ? (
+ }>
+
+
+ README.md
+
+ }
+ styles={{
+ body: {
+ padding: token.paddingLG,
+ overflow: 'auto',
+ height: 200,
+ },
+ }}
+ >
+ {huggingFaceModelInfo.data?.markdown}
+
+
+ ) : (
+
+ )}