refactor: remove checking URL and add more form inputs

lablup · Sep 20, 2024 · 482d9cc · 482d9cc
1 parent 3d8fd90
commit 482d9cc
Show file tree

Hide file tree

Showing 22 changed files with 103 additions and 124 deletions.
diff --git a/react/src/components/ImportFromHuggingFaceModal.tsx b/react/src/components/ImportFromHuggingFaceModal.tsx
@@ -6,17 +6,14 @@ import Flex from './Flex';
 import { useToggle } from 'ahooks';
 import {
   Button,
-  Descriptions,
   Form,
   FormInstance,
   Input,
-  Space,
   Switch,
   theme,
   Typography,
 } from 'antd';
 import _ from 'lodash';
-import { CheckIcon } from 'lucide-react';
 import React, { useEffect, useRef, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,7 +36,6 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
   const formRef = useRef<FormInstance<Service>>(null);
   const [isImportOnly, { toggle: toggleIsImportOnly }] = useToggle(false);
   const [huggingFaceURL, setHuggingFaceURL] = useState<string | undefined>();
-  const [typedURL, setTypedURL] = useState('');
   const baiClient = useSuspendedBackendaiClient();
 
   const [isPendingCheck, startCheckTransition] = useTransition();
@@ -76,16 +72,6 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
   const isHuggingfaceURLExisted = !_.isEmpty(
     hugginFaceModelInfo.data.model_name,
   );
-  const shouldSkipURLCheck =
-    isHuggingfaceURLExisted && huggingFaceURL === typedURL;
-
-  // reset when modal is closed
-  useEffect(() => {
-    if (!baiModalProps.open) {
-      setHuggingFaceURL(undefined);
-      setTypedURL('');
-    }
-  }, [baiModalProps.open]);
 
   // validate when huggingFaceModelInfo is updated
   useEffect(() => {
@@ -98,19 +84,12 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
     formRef.current
       ?.validateFields()
       .then((values) => {
-        // TODO: Implement import from Hugging Face
-        onRequestClose();
-      })
-      .catch(() => {});
-  };
-
-  const handleOnCheck = () => {
-    formRef.current
-      ?.validateFields(['url'])
-      .then((v) => {
         startCheckTransition(() => {
-          setHuggingFaceURL(v?.url);
+          setHuggingFaceURL(values?.url);
         });
+
+        // TODO: Implement import from Hugging Face
+        // onRequestClose();
       })
       .catch(() => {});
   };
@@ -124,7 +103,7 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
           type="primary"
           htmlType="submit"
           onClick={handleOnClick}
-          disabled={!shouldSkipURLCheck}
+          loading={isPendingCheck}
         >
           {isImportOnly
             ? t('data.modelStore.Import')
@@ -141,86 +120,43 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
         layout="vertical"
         requiredMark="optional"
       >
-        <Form.Item>
-          <Space.Compact style={{ width: '100%' }}>
-            <Form.Item
-              noStyle
-              name="url"
-              rules={[
-                { required: true },
-                {
-                  pattern: /^https:\/\/huggingface.co\/.*/,
-                  message: t('data.modelStore.StartWithHuggingFaceUrl'),
-                },
-              ]}
-            >
-              <Input
-                placeholder={t('data.modelStore.huggingFaceUrlPlaceholder')}
-                onPressEnter={() => {
-                  handleOnCheck();
-                }}
-                onChange={(e) => {
-                  setTypedURL(e.target.value);
-                }}
-              />
-            </Form.Item>
-            <Button
-              type={!shouldSkipURLCheck ? 'primary' : 'default'}
-              disabled={shouldSkipURLCheck}
-              onClick={() => {
-                handleOnCheck();
-              }}
-              loading={isPendingCheck}
-            >
-              {shouldSkipURLCheck ? (
-                <CheckIcon />
-              ) : (
-                t('data.modelStore.CheckHuggingFaceUrl')
-              )}
-            </Button>
-          </Space.Compact>
-          <Form.Item
-            noStyle
-            name=""
-            rules={[
-              {
-                validator: async (_, value) => {
-                  if (
-                    !isHuggingfaceURLExisted &&
-                    hugginFaceModelInfo.data?.isError &&
-                    hugginFaceModelInfo.data.url === typedURL
-                  ) {
-                    return Promise.reject(
-                      t('data.modelStore.InvalidHuggingFaceUrl'),
-                    );
-                  } else {
-                    if (shouldSkipURLCheck) {
-                      return Promise.resolve();
-                    } else {
-                      return Promise.reject(
-                        t('data.modelStore.InvalidHuggingFaceUrl'),
-                      );
-                    }
-                  }
-                },
+        <Form.Item
+          label="Hugging Face URL"
+          name="url"
+          rules={[
+            { required: true },
+            {
+              pattern: /^https:\/\/huggingface.co\/.*/,
+              message: t('data.modelStore.StartWithHuggingFaceUrl'),
+            },
+            {
+              validator: async (_, value) => {
+                if (
+                  !isHuggingfaceURLExisted &&
+                  hugginFaceModelInfo.data?.isError &&
+                  hugginFaceModelInfo.data.url === value
+                ) {
+                  return Promise.reject(
+                    t('data.modelStore.InvalidHuggingFaceUrl'),
+                  );
+                } else {
+                  return Promise.resolve();
+                }
               },
-            ]}
-          ></Form.Item>
+            },
+          ]}
+        >
+          <Input />
         </Form.Item>
-        <Descriptions
-          bordered
-          style={{
-            opacity: shouldSkipURLCheck ? 1 : 0.7,
-          }}
-          column={1}
+        <Form.Item
+          label={t('data.modelStore.ModelStoreFolderName')}
+          name="folder_name"
         >
-          <Descriptions.Item label={t('data.modelStore.ModelName')}>
-            {shouldSkipURLCheck && hugginFaceModelInfo.data?.model_name}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('data.modelStore.Author')}>
-            {shouldSkipURLCheck && hugginFaceModelInfo.data?.author}
-          </Descriptions.Item>
-        </Descriptions>
+          <Input />
+        </Form.Item>
+        <Form.Item label={t('data.modelStore.ServiceName')} name="service_name">
+          <Input />
+        </Form.Item>
         <Flex
           gap={'xs'}
           style={{ marginTop: token.marginLG, marginBottom: token.marginLG }}

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Siehe",
       "ModelName": "Name des Modells",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "Ungültige Hugging Face URL."
+      "InvalidHuggingFaceUrl": "Ungültige Hugging Face URL.",
+      "ModelStoreFolderName": "Name des Modellspeicherordners",
+      "ServiceName": "Dienstname"
     }
   },
   "dialog": {

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Ελέγξτε το",
       "ModelName": "Όνομα μοντέλου",
       "Author": "Συγγραφέας",
-      "InvalidHuggingFaceUrl": "Μη έγκυρη διεύθυνση URL Hugging Face."
+      "InvalidHuggingFaceUrl": "Μη έγκυρη διεύθυνση URL Hugging Face.",
+      "ModelStoreFolderName": "Όνομα φακέλου καταστήματος μοντέλου",
+      "ServiceName": "Όνομα υπηρεσίας"
     }
   },
   "dialog": {

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -916,7 +916,10 @@
       "CheckHuggingFaceUrl": "Check",
       "ModelName": "Model name",
       "Author": "Author",
-      "InvalidHuggingFaceUrl": "Invalid Hugging Face URL."
+      "InvalidHuggingFaceUrl": "Invalid Hugging Face URL.",
+      "ModelStoreFolderName": "Model store folder name",
+      "ServiceName": "Service name",
+      "HuggingFaceURL": "Higging Face"
     }
   },
   "dialog": {

diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -422,7 +422,9 @@
       "CheckHuggingFaceUrl": "Consulte",
       "ModelName": "Nombre del modelo",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "URL Hugging Face no válida."
+      "InvalidHuggingFaceUrl": "URL Hugging Face no válida.",
+      "ModelStoreFolderName": "Nombre de la carpeta de la tienda de modelos",
+      "ServiceName": "Nombre del servicio"
     }
   },
   "dialog": {

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -422,7 +422,9 @@
       "CheckHuggingFaceUrl": "Tarkista",
       "ModelName": "Mallin nimi",
       "Author": "Kirjoittaja",
-      "InvalidHuggingFaceUrl": "Virheellinen Hugging Face URL-osoite."
+      "InvalidHuggingFaceUrl": "Virheellinen Hugging Face URL-osoite.",
+      "ModelStoreFolderName": "Mallin tallennuskansion nimi",
+      "ServiceName": "Palvelun nimi"
     }
   },
   "dialog": {

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Vérifier",
       "ModelName": "Nom du modèle",
       "Author": "Auteur",
-      "InvalidHuggingFaceUrl": "URL Hugging Face non valide."
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valide.",
+      "ModelStoreFolderName": "Nom du dossier du magasin de modèles",
+      "ServiceName": "Nom du service"
     }
   },
   "dialog": {

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -792,7 +792,9 @@
       "CheckHuggingFaceUrl": "Periksa",
       "ModelName": "Nama model",
       "Author": "Penulis",
-      "InvalidHuggingFaceUrl": "URL Hugging Face tidak valid."
+      "InvalidHuggingFaceUrl": "URL Hugging Face tidak valid.",
+      "ModelStoreFolderName": "Nama folder penyimpanan model",
+      "ServiceName": "Nama layanan"
     }
   },
   "dialog": {

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -792,7 +792,9 @@
       "CheckHuggingFaceUrl": "Controllo",
       "ModelName": "Nome del modello",
       "Author": "Autore",
-      "InvalidHuggingFaceUrl": "URL Hugging Face non valido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valido.",
+      "ModelStoreFolderName": "Nome della cartella dell'archivio modelli",
+      "ServiceName": "Nome del servizio"
     }
   },
   "dialog": {

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "チェック",
       "ModelName": "モデル名",
       "Author": "著者",
-      "InvalidHuggingFaceUrl": "無効なHugging Face URLです。"
+      "InvalidHuggingFaceUrl": "無効なHugging Face URLです。",
+      "ModelStoreFolderName": "モデルストアフォルダー名",
+      "ServiceName": "サービス名"
     }
   },
   "dialog": {

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -904,7 +904,9 @@
       "ModelName": "모델 이름",
       "Author": "작성자",
       "InvalidHuggingFaceUrl": "유효한 Hugging Face URL을 입력해주세요",
-      "PleaseClickCheckButton": "확인 버튼을 클릭해주세요"
+      "PleaseClickCheckButton": "확인 버튼을 클릭해주세요",
+      "ModelStoreFolderName": "모델 저장소 폴더 이름",
+      "ServiceName": "서비스 이름"
     }
   },
   "dialog": {

diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
@@ -792,7 +792,9 @@
       "StartWithHuggingFaceUrl": "Энэ нь https://huggingface.co-ээс эхлэх ёстой",
       "CheckHuggingFaceUrl": "Шалгах",
       "ModelName": "Загварын нэр",
-      "InvalidHuggingFaceUrl": "Хүчингүй Hugging Face URL."
+      "InvalidHuggingFaceUrl": "Хүчингүй Hugging Face URL.",
+      "ModelStoreFolderName": "Загварын дэлгүүрийн хавтасны нэр",
+      "ServiceName": "Үйлчилгээний нэр"
     }
   },
   "dialog": {

diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
@@ -790,7 +790,9 @@
       "CheckHuggingFaceUrl": "Semak",
       "ModelName": "Nama model",
       "Author": "Pengarang",
-      "InvalidHuggingFaceUrl": "URL Hugging Face tidak sah."
+      "InvalidHuggingFaceUrl": "URL Hugging Face tidak sah.",
+      "ModelStoreFolderName": "Nama folder kedai model",
+      "ServiceName": "Nama perkhidmatan"
     }
   },
   "dialog": {

diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Sprawdź",
       "ModelName": "Nazwa modelu",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "Nieprawidłowy adres URL Hugging Face."
+      "InvalidHuggingFaceUrl": "Nieprawidłowy adres URL Hugging Face.",
+      "ModelStoreFolderName": "Nazwa folderu sklepu modelu",
+      "ServiceName": "Nazwa usługi"
     }
   },
   "dialog": {

diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Verificar",
       "ModelName": "Nome do modelo",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "URL Hugging Face inválido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "ServiceName": "Nome do serviço"
     }
   },
   "dialog": {

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Verificar",
       "ModelName": "Nome do modelo",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "URL Hugging Face inválido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "ServiceName": "Nome do serviço"
     }
   },
   "dialog": {

diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Проверьте",
       "ModelName": "Название модели",
       "Author": "Автор",
-      "InvalidHuggingFaceUrl": "Неверный URL-адрес Hugging Face."
+      "InvalidHuggingFaceUrl": "Неверный URL-адрес Hugging Face.",
+      "ModelStoreFolderName": "Имя папки хранилища моделей",
+      "ServiceName": "Название службы"
     }
   },
   "dialog": {

diff --git a/resources/i18n/th.json b/resources/i18n/th.json
@@ -908,7 +908,9 @@
       "CheckHuggingFaceUrl": "ตรวจสอบ",
       "ModelName": "ชื่อรุ่น",
       "Author": "ผู้เขียน",
-      "InvalidHuggingFaceUrl": "URL Hugging Face ไม่ถูกต้อง"
+      "InvalidHuggingFaceUrl": "URL Hugging Face ไม่ถูกต้อง",
+      "ModelStoreFolderName": "ชื่อโฟลเดอร์ร้านค้าโมเดล",
+      "ServiceName": "ชื่อบริการ"
     }
   },
   "dialog": {

diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
@@ -791,7 +791,9 @@
       "CheckHuggingFaceUrl": "Kontrol et",
       "ModelName": "Model adı",
       "Author": "Yazar",
-      "InvalidHuggingFaceUrl": "Geçersiz Hugging Face URL'si."
+      "InvalidHuggingFaceUrl": "Geçersiz Hugging Face URL'si.",
+      "ModelStoreFolderName": "Model deposu klasör adı",
+      "ServiceName": "Hizmet adı"
     }
   },
   "dialog": {