Add an 'Import from hugging face' modal

react/src/components/ImportFromHuggingFaceModal.tsx

@@ -0,0 +1,107 @@
+import BAIModal, { BAIModalProps } from './BAIModal';
+import Flex from './Flex';
+import { FilterOutlined } from '@ant-design/icons';
+import { useToggle } from 'ahooks';
+import {
+  Button,
+  Card,
+  Form,
+  FormInstance,
+  Input,
+  Switch,
+  theme,
+  Typography,
+} from 'antd';
+import Markdown from 'markdown-to-jsx';
+import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Service = {
+  url: string;
+  inference_engine_version?: string;
+  replica_number?: number;
+};
+
+interface ImportFromHuggingFaceModalProps extends BAIModalProps {
+  onRequestClose: () => void;
+}
+
+const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
+  onRequestClose,
+  ...baiModalProps
+}) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const formRef = useRef<FormInstance<Service>>(null);
+  const [isImportOnly, { toggle: toggleIsImportOnly }] = useToggle(false);
+
+  const handleOnClick = () => {
+    formRef.current
+      ?.validateFields()
+      .then((values) => {
+        // TODO: Implement import from Hugging Face
+        onRequestClose();
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <BAIModal
+      title={t('data.modelStore.ImportFromHuggingFace')}
+      centered
+      footer={
+        <Button type="primary" htmlType="submit" onClick={handleOnClick}>
+          {isImportOnly
+            ? t('data.modelStore.Import')
+            : t('data.modelStore.ImportAndStartService')}
+        </Button>
+      }
+      onCancel={onRequestClose}
+      {...baiModalProps}
+    >
+      <Form
+        ref={formRef}
+        preserve={false}
+        layout="vertical"
+        requiredMark="optional"
+      >
+        <Form.Item name="url" rules={[{ required: true }]}>
+          <Input placeholder={t('data.modelStore.huggingFaceUrlPlaceholder')} />
+        </Form.Item>
+        <Card
+          size="small"
+          title={
+            <Flex direction="row" gap="xs">
+              <FilterOutlined />
+              README.md
+            </Flex>
+          }
+          styles={{
+            body: {
+              padding: token.paddingLG,
+              overflow: 'auto',
+              minHeight: 200,
+              maxHeight: token.screenXS,
+            },
+          }}
+        >
+          <Markdown>{''}</Markdown>
+        </Card>
+        <Flex
+          gap={'xs'}
+          style={{ marginTop: token.marginLG, marginBottom: token.marginLG }}
+        >
+          <Switch
+            checked={isImportOnly}
+            onChange={(e) => {
+              toggleIsImportOnly();
+            }}
+          />
+          <Typography.Text>{t('data.modelStore.ImportOnly')}</Typography.Text>
+        </Flex>
+      </Form>
+    </BAIModal>
+  );
+};
+
+export default ImportFromHuggingFaceModal;

react/src/components/VFolderSelect.tsx

@@ -95,6 +95,7 @@ const VFolderSelect: React.FC<VFolderSelectProps> = ({
         value: _.first(filteredVFolders)?.[valuePropName],
       }
     : undefined;
+  // TODO: use controllable value
   useEffect(() => {
     if (autoSelectDefault && autoSelectedOption) {
       setValue(autoSelectedOption.value, autoSelectedOption);

react/src/pages/VFolderListPage.tsx

@@ -1,9 +1,16 @@
 import Flex from '../components/Flex';
+import ImportFromHuggingFaceModal from '../components/ImportFromHuggingFaceModal';
 import InviteFolderPermissionSettingModal from '../components/InviteFolderPermissionSettingModal';
 import { filterEmptyItem } from '../helper';
 import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  ImportOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { useToggle } from 'ahooks';
 import { Alert, Button, Card, Skeleton, theme } from 'antd';
+import _ from 'lodash';
 import React, { Suspense, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
@@ -39,6 +46,10 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const dataViewRef = useRef(null);
   const [inviteFolderId, setInviteFolderId] = useState<string | null>(null);
+  const [
+    isVisibleImportFromHuggingFaceModal,
+    { toggle: toggleImportFromHuggingFaceModal },
+  ] = useToggle(false);
 
   const { token } = theme.useToken();
 
@@ -117,16 +128,28 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
           },
         }}
         tabBarExtraContent={
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={() => {
-              // @ts-ignore
-              dataViewRef.current?.openAddFolderDialog();
-            }}
-          >
-            {t('data.Add')}
-          </Button>
+          <Flex gap="xs">
+            {_.includes(['model', 'model-store'], curTabKey) ? (
+              <Button
+                icon={<ImportOutlined />}
+                onClick={toggleImportFromHuggingFaceModal}
+                // Remove this line to test
+                style={{ display: 'none' }}
+              >
+                {t('data.modelStore.ImportFromHuggingFace')}
+              </Button>
+            ) : null}
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                // @ts-ignore
+                dataViewRef.current?.openAddFolderDialog();
+              }}
+            >
+              {t('data.Add')}
+            </Button>
+          </Flex>
         }
       >
         {tabBannerText ? (
@@ -149,6 +172,12 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
         vfolderId={inviteFolderId}
         open={inviteFolderId !== null}
       />
+      <ImportFromHuggingFaceModal
+        open={isVisibleImportFromHuggingFaceModal}
+        onRequestClose={() => {
+          toggleImportFromHuggingFaceModal();
+        }}
+      />
     </Flex>
   );
 };

resources/i18n/de.json

@@ -777,7 +777,17 @@
     "Add": "hinzufügen",
     "CloningIsOnlyPossibleSameHost": "Derzeit ist das Klonen nur auf demselben Host möglich.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Neuer Ordnername"
+    "NewFolderName": "Neuer Ordnername",
+    "modelStore": {
+      "ImportFromHuggingFace": "Import aus Hugging Face",
+      "Import": "Importieren",
+      "StartService": "Dienst starten",
+      "InferenceEngineVersion": "Version der Inferenz-Engine",
+      "ReplicaNumber": "Replikatnummer",
+      "ImportAndStartService": "Dienst importieren und starten",
+      "huggingFaceUrlPlaceholder": "Geben Sie die URL Hugging Face ein",
+      "ImportOnly": "Nur importieren"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/el.json

@@ -777,7 +777,17 @@
     "Add": "Προσθέστε",
     "CloningIsOnlyPossibleSameHost": "Προς το παρόν, η κλωνοποίηση είναι δυνατή μόνο στον ίδιο κεντρικό υπολογιστή.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Νέο όνομα φακέλου"
+    "NewFolderName": "Νέο όνομα φακέλου",
+    "modelStore": {
+      "ImportFromHuggingFace": "Εισαγωγή από το Hugging Face",
+      "Import": "Εισαγωγή",
+      "StartService": "Ξεκινήστε την υπηρεσία",
+      "InferenceEngineVersion": "Έκδοση Inference Engine",
+      "ReplicaNumber": "Αριθμός αντιγράφου",
+      "ImportAndStartService": "Εισαγωγή και έναρξη υπηρεσίας",
+      "huggingFaceUrlPlaceholder": "Εισαγάγετε τη διεύθυνση URL Hugging Face.",
+      "ImportOnly": "Μόνο εισαγωγή"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/en.json

@@ -902,7 +902,17 @@
     "Add": "Add",
     "CloningIsOnlyPossibleSameHost": "Currently, cloning is only possible on the same host.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "New folder name"
+    "NewFolderName": "New folder name",
+    "modelStore": {
+      "ImportFromHuggingFace": "Import from Hugging Face",
+      "Import": "Import",
+      "StartService": "Start Service",
+      "InferenceEngineVersion": "Inference Engine Version",
+      "ReplicaNumber": "Replica Number",
+      "ImportAndStartService": "Import & Start Service",
+      "huggingFaceUrlPlaceholder": "Input Hugging Face URL",
+      "ImportOnly": "Import only"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/es.json

@@ -407,7 +407,17 @@
     "Add": "Añadir",
     "CloningIsOnlyPossibleSameHost": "Actualmente, la clonación sólo es posible en el mismo host.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Nuevo nombre de carpeta"
+    "NewFolderName": "Nuevo nombre de carpeta",
+    "modelStore": {
+      "ImportFromHuggingFace": "Importar desde Hugging Face",
+      "Import": "Importar",
+      "StartService": "Comienza el servicio",
+      "InferenceEngineVersion": "Versión del motor de inferencia",
+      "ReplicaNumber": "Número de réplica",
+      "ImportAndStartService": "Servicio de importación e inicio",
+      "huggingFaceUrlPlaceholder": "Introduzca la URL Hugging Face",
+      "ImportOnly": "Sólo importar"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/fi.json

@@ -407,7 +407,17 @@
     "CloningIsOnlyPossibleSameHost": "Tällä hetkellä kloonaus on mahdollista vain samassa isännässä.",
     "New": "Uusi",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Uusi kansion nimi"
+    "NewFolderName": "Uusi kansion nimi",
+    "modelStore": {
+      "ImportFromHuggingFace": "Tuo Hugging Facesta",
+      "Import": "Tuonti",
+      "StartService": "Aloita palvelu",
+      "InferenceEngineVersion": "Päättele moottorin versio",
+      "ReplicaNumber": "Replikan numero",
+      "ImportAndStartService": "Tuo ja käynnistä palvelu",
+      "huggingFaceUrlPlaceholder": "Syötä Hugging Face-URL-osoite",
+      "ImportOnly": "Vain tuonti"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/fr.json

@@ -777,7 +777,17 @@
     "Add": "Ajouter",
     "CloningIsOnlyPossibleSameHost": "Actuellement, le clonage n'est possible que sur le même hôte.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Nouveau nom de dossier"
+    "NewFolderName": "Nouveau nom de dossier",
+    "modelStore": {
+      "ImportFromHuggingFace": "Importer depuis Hugging Face",
+      "Import": "Importer",
+      "StartService": "Démarrer le service",
+      "InferenceEngineVersion": "Version du moteur d'inférence",
+      "ReplicaNumber": "Numéro de réplique",
+      "ImportAndStartService": "Service d'importation et de démarrage",
+      "huggingFaceUrlPlaceholder": "Saisissez l'URL Hugging Face",
+      "ImportOnly": "Importer uniquement"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/id.json

@@ -778,7 +778,17 @@
     "Add": "Menambahkan",
     "CloningIsOnlyPossibleSameHost": "Saat ini, kloning hanya dapat dilakukan pada host yang sama.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Nama folder baru"
+    "NewFolderName": "Nama folder baru",
+    "modelStore": {
+      "ImportFromHuggingFace": "Impor dari Hugging Face",
+      "Import": "Impor",
+      "StartService": "Memulai layanan",
+      "InferenceEngineVersion": "Versi Mesin Inferensi",
+      "ReplicaNumber": "Nomor Replika",
+      "ImportAndStartService": "Impor dan Mulai Layanan",
+      "huggingFaceUrlPlaceholder": "Masukkan URL Hugging Face",
+      "ImportOnly": "Impor saja"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/it.json

@@ -778,7 +778,17 @@
     "Add": "Aggiungi",
     "CloningIsOnlyPossibleSameHost": "Attualmente la clonazione è possibile solo sullo stesso host.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "Nuovo nome della cartella"
+    "NewFolderName": "Nuovo nome della cartella",
+    "modelStore": {
+      "ImportFromHuggingFace": "Importa da Hugging Face",
+      "Import": "Importare",
+      "StartService": "Avvia servizio",
+      "InferenceEngineVersion": "Versione del motore di inferenza",
+      "ReplicaNumber": "Numero di replica",
+      "ImportAndStartService": "Importa e avvia il servizio",
+      "huggingFaceUrlPlaceholder": "Inserisci l'URL Hugging Face.",
+      "ImportOnly": "Solo importazione"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/ja.json

@@ -777,7 +777,17 @@
     "Add": "追加",
     "CloningIsOnlyPossibleSameHost": "現在、クローン作成は同じホスト上でのみ可能です。",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "新しいフォルダ名"
+    "NewFolderName": "新しいフォルダ名",
+    "modelStore": {
+      "ImportFromHuggingFace": "Hugging Face からインポート",
+      "Import": "輸入",
+      "StartService": "サービスを開始する",
+      "InferenceEngineVersion": "推論エンジンのバージョン",
+      "ReplicaNumber": "レプリカ番号",
+      "ImportAndStartService": "サービスのインポートと開始",
+      "huggingFaceUrlPlaceholder": "Hugging Faceの URL を入力してください",
+      "ImportOnly": "輸入のみ"
+    }
   },
   "dialog": {
     "warning": {

resources/i18n/ko.json

@@ -889,7 +889,17 @@
     "Add": "추가",
     "CloningIsOnlyPossibleSameHost": "현재 폴더 복사는 동일한 호스트간에만 가능합니다.",
     "userQuotaScopeId": "Quota Scope ID",
-    "NewFolderName": "새 폴더 이름"
+    "NewFolderName": "새 폴더 이름",
+    "modelStore": {
+      "ImportFromHuggingFace": "Hugging Face에서 가져오기",
+      "Import": "가져오기",
+      "StartService": "서비스 시작",
+      "InferenceEngineVersion": "추론 엔진 버전",
+      "ReplicaNumber": "복제 번호",
+      "ImportAndStartService": "가져오기 및 서비스 시작",
+      "huggingFaceUrlPlaceholder": "Hugging Face URL을 입력하세요.",
+      "ImportOnly": "가져오기만 허용"
+    }
   },
   "dialog": {
     "warning": {