From 32b402d4a17b36da8e4ca924593576a143d5a29b Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Sat, 21 Sep 2024 01:01:23 +0900
Subject: [PATCH 1/2] refactor: remove checking URL and add more form inputs

---
 .../components/ImportFromHuggingFaceModal.tsx | 121 ++++++++++++++----
 resources/i18n/de.json                        |   9 +-
 resources/i18n/el.json                        |  12 +-
 resources/i18n/en.json                        |  13 +-
 resources/i18n/es.json                        |  12 +-
 resources/i18n/fi.json                        |  12 +-
 resources/i18n/fr.json                        |  12 +-
 resources/i18n/id.json                        |  12 +-
 resources/i18n/it.json                        |  12 +-
 resources/i18n/ja.json                        |  12 +-
 resources/i18n/ko.json                        |  13 +-
 resources/i18n/mn.json                        |  11 +-
 resources/i18n/ms.json                        |  12 +-
 resources/i18n/pl.json                        |  12 +-
 resources/i18n/pt-BR.json                     |  12 +-
 resources/i18n/pt.json                        |  12 +-
 resources/i18n/ru.json                        |  12 +-
 resources/i18n/th.json                        |  12 +-
 resources/i18n/tr.json                        |  12 +-
 resources/i18n/vi.json                        |  12 +-
 resources/i18n/zh-CN.json                     |  12 +-
 resources/i18n/zh-TW.json                     |  12 +-
 22 files changed, 304 insertions(+), 67 deletions(-)

diff --git a/react/src/components/ImportFromHuggingFaceModal.tsx b/react/src/components/ImportFromHuggingFaceModal.tsx
index cff19a7b1..0f65667e9 100644
--- a/react/src/components/ImportFromHuggingFaceModal.tsx
+++ b/react/src/components/ImportFromHuggingFaceModal.tsx
@@ -1,10 +1,11 @@
+import { baiSignedRequestWithPromise } from '../helper';
+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,
-  Card,
   Form,
   FormInstance,
   Input,
@@ -12,8 +13,8 @@ import {
   theme,
   Typography,
 } from 'antd';
-import Markdown from 'markdown-to-jsx';
-import React, { useRef } from 'react';
+import _ from 'lodash';
+import React, { useEffect, useRef, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Service = {
@@ -34,13 +35,61 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
   const { token } = theme.useToken();
   const formRef = useRef<FormInstance<Service>>(null);
   const [isImportOnly, { toggle: toggleIsImportOnly }] = useToggle(false);
+  const [huggingFaceURL, setHuggingFaceURL] = useState<string | undefined>();
+  const baiClient = useSuspendedBackendaiClient();
+
+  const [isPendingCheck, startCheckTransition] = useTransition();
+  const hugginFaceModelInfo = useSuspenseTanQuery<{
+    author?: string;
+    model_name?: string;
+    markdown?: string;
+    isError?: boolean;
+    url?: string;
+  }>({
+    queryKey: ['huggingFaceReadme', huggingFaceURL],
+    queryFn: () => {
+      if (_.isEmpty(huggingFaceURL)) return Promise.resolve({});
+      return baiSignedRequestWithPromise({
+        method: 'GET',
+        url: `/services/_/huggingface/models?huggingface_url=${huggingFaceURL}`,
+        client: baiClient,
+      })
+        .then((result: any) => {
+          return {
+            ...result,
+            url: huggingFaceURL,
+          };
+        })
+        .catch(() => {
+          // TODO: handle error more gracefully
+          return {
+            isError: true,
+            url: huggingFaceURL,
+          };
+        });
+    },
+  });
+  const isHuggingfaceURLExisted = !_.isEmpty(
+    hugginFaceModelInfo.data.model_name,
+  );
+
+  // validate when huggingFaceModelInfo is updated
+  useEffect(() => {
+    if (hugginFaceModelInfo.data.url) {
+      formRef.current?.validateFields().catch(() => {});
+    }
+  }, [hugginFaceModelInfo.data.url]);
 
   const handleOnClick = () => {
     formRef.current
       ?.validateFields()
       .then((values) => {
+        startCheckTransition(() => {
+          setHuggingFaceURL(values?.url);
+        });
+
         // TODO: Implement import from Hugging Face
-        onRequestClose();
+        // onRequestClose();
       })
       .catch(() => {});
   };
@@ -50,7 +99,12 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
       title={t('data.modelStore.ImportFromHuggingFace')}
       centered
       footer={
-        <Button type="primary" htmlType="submit" onClick={handleOnClick}>
+        <Button
+          type="primary"
+          htmlType="submit"
+          onClick={handleOnClick}
+          loading={isPendingCheck}
+        >
           {isImportOnly
             ? t('data.modelStore.Import')
             : t('data.modelStore.ImportAndStartService')}
@@ -65,28 +119,43 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
         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,
+        <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();
+                }
+              },
             },
-          }}
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t('data.modelStore.ModelStoreFolderName')}
+          name="folder_name"
         >
-          <Markdown>{''}</Markdown>
-        </Card>
+          <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
index a897c6024..a80aab761 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Replikatnummer",
       "ImportAndStartService": "Dienst importieren und starten",
       "huggingFaceUrlPlaceholder": "Geben Sie die URL Hugging Face ein",
-      "ImportOnly": "Nur importieren"
+      "ImportOnly": "Nur importieren",
+      "StartWithHuggingFaceUrl": "Es sollte mit https://huggingface.co beginnen",
+      "CheckHuggingFaceUrl": "Siehe",
+      "ModelName": "Name des Modells",
+      "Author": "Autor",
+      "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
index efeaaff68..870fdba35 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Αριθμός αντιγράφου",
       "ImportAndStartService": "Εισαγωγή και έναρξη υπηρεσίας",
       "huggingFaceUrlPlaceholder": "Εισαγάγετε τη διεύθυνση URL Hugging Face.",
-      "ImportOnly": "Μόνο εισαγωγή"
+      "ImportOnly": "Μόνο εισαγωγή",
+      "StartWithHuggingFaceUrl": "Θα πρέπει να ξεκινά με https://huggingface.co",
+      "CheckHuggingFaceUrl": "Ελέγξτε το",
+      "ModelName": "Όνομα μοντέλου",
+      "Author": "Συγγραφέας",
+      "InvalidHuggingFaceUrl": "Μη έγκυρη διεύθυνση URL Hugging Face.",
+      "ModelStoreFolderName": "Όνομα φακέλου καταστήματος μοντέλου",
+      "ServiceName": "Όνομα υπηρεσίας"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "Το αίτημα πόρων είναι μικρότερο από το ελάχιστο απαιτούμενο από την εικόνα. Δοκιμάστε περισσότερους πόρους.",
     "APINotSupported": "Το API δεν υποστηρίζεται. Απαιτείται η τελευταία έκδοση του διαχειριστή Backend.AI.",
     "WrongAPIServerAddress": "Λάθος διεύθυνση διακομιστή API.",
-    "ReachedResourceLimitPleaseContact": "Φτάσατε το όριο των πόρων σας. \nΕπικοινωνήστε με τον διαχειριστή."
+    "ReachedResourceLimitPleaseContact": "Φτάσατε το όριο των πόρων σας. \nΕπικοινωνήστε με τον διαχειριστή.",
+    "InvalidUrl": "Δεν είναι έγκυρη διεύθυνση URL"
   },
   "maxLength": {
     "64chars": "(έως 64 χαρακτήρες)",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index f09fae65b..421836e5c 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -911,7 +911,15 @@
       "ReplicaNumber": "Replica Number",
       "ImportAndStartService": "Import & Start Service",
       "huggingFaceUrlPlaceholder": "Input Hugging Face URL",
-      "ImportOnly": "Import only"
+      "ImportOnly": "Import only",
+      "StartWithHuggingFaceUrl": "It should start with https://huggingface.co",
+      "CheckHuggingFaceUrl": "Check",
+      "ModelName": "Model name",
+      "Author": "Author",
+      "InvalidHuggingFaceUrl": "Invalid Hugging Face URL.",
+      "ModelStoreFolderName": "Model store folder name",
+      "ServiceName": "Service name",
+      "HuggingFaceURL": "Higging Face"
     }
   },
   "dialog": {
@@ -1610,7 +1618,8 @@
     "FolderSharingNotAvailableToUser": "Folder sharing is not available for requested user(s).",
     "APINotSupported": "API not supported. Requires latest version of Backend.AI manager.",
     "ErrorFetchingExternalContent": "Error fetching external content:",
-    "ReachedResourceLimitPleaseContact": "Reached your resource limit. Please contact the administrator."
+    "ReachedResourceLimitPleaseContact": "Reached your resource limit. Please contact the administrator.",
+    "InvalidUrl": "It is not a valid URL"
   },
   "maxLength": {
     "64chars": "(maximum 64 chars)",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index e1676c25b..260b5f54e 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -66,7 +66,8 @@
     "UserHasNoGroup": "El usuario no tiene grupo. Póngase en contacto con el administrador para solucionarlo.",
     "UserNameAlreadyExist": "El nombre de usuario ya existe. No se puede duplicar.",
     "VirtualFolderAlreadyExist": "Ya existe una carpeta virtual con el mismo nombre. Elimine su propia carpeta o rechace la invitación.",
-    "ReachedResourceLimitPleaseContact": "Alcanzó su límite de recursos. \nPor favor contacte al administrador."
+    "ReachedResourceLimitPleaseContact": "Alcanzó su límite de recursos. \nPor favor contacte al administrador.",
+    "InvalidUrl": "No es una URL válida"
   },
   "DownloadSSHKey": "Descargar clave SSH",
   "ErrorBoundary": {
@@ -416,7 +417,14 @@
       "ReplicaNumber": "Número de réplica",
       "ImportAndStartService": "Servicio de importación e inicio",
       "huggingFaceUrlPlaceholder": "Introduzca la URL Hugging Face",
-      "ImportOnly": "Sólo importar"
+      "ImportOnly": "Sólo importar",
+      "StartWithHuggingFaceUrl": "Debería comenzar con https://huggingface.co",
+      "CheckHuggingFaceUrl": "Consulte",
+      "ModelName": "Nombre del modelo",
+      "Author": "Autor",
+      "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
index 657fe8de7..bf12c428e 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -66,7 +66,8 @@
     "UserHasNoGroup": "Käyttäjällä ei ole ryhmää. Ota yhteyttä ylläpitäjään sen korjaamiseksi.",
     "UserNameAlreadyExist": "Käyttäjätunnus on jo olemassa. Sitä ei voi kopioida.",
     "VirtualFolderAlreadyExist": "Samanniminen virtuaalikansio on jo olemassa. Poista oma kansiosi tai hylkää kutsu.",
-    "ReachedResourceLimitPleaseContact": "Resurssiraja saavutettu. \nOta yhteyttä ylläpitäjään."
+    "ReachedResourceLimitPleaseContact": "Resurssiraja saavutettu. \nOta yhteyttä ylläpitäjään.",
+    "InvalidUrl": "Se ei ole kelvollinen URL-osoite"
   },
   "DownloadSSHKey": "Lataa SSH-avain",
   "ErrorBoundary": {
@@ -416,7 +417,14 @@
       "ReplicaNumber": "Replikan numero",
       "ImportAndStartService": "Tuo ja käynnistä palvelu",
       "huggingFaceUrlPlaceholder": "Syötä Hugging Face-URL-osoite",
-      "ImportOnly": "Vain tuonti"
+      "ImportOnly": "Vain tuonti",
+      "StartWithHuggingFaceUrl": "Sen pitäisi alkaa https://huggingface.co",
+      "CheckHuggingFaceUrl": "Tarkista",
+      "ModelName": "Mallin nimi",
+      "Author": "Kirjoittaja",
+      "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
index 3c760cbc3..8fa8db7d4 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Numéro de réplique",
       "ImportAndStartService": "Service d'importation et de démarrage",
       "huggingFaceUrlPlaceholder": "Saisissez l'URL Hugging Face",
-      "ImportOnly": "Importer uniquement"
+      "ImportOnly": "Importer uniquement",
+      "StartWithHuggingFaceUrl": "Cela devrait commencer par https://huggingface.co",
+      "CheckHuggingFaceUrl": "Vérifier",
+      "ModelName": "Nom du modèle",
+      "Author": "Auteur",
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valide.",
+      "ModelStoreFolderName": "Nom du dossier du magasin de modèles",
+      "ServiceName": "Nom du service"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "Votre demande de ressources est inférieure au minimum requis par l'image. Essayez d'autres ressources.",
     "APINotSupported": "L'API n'est pas prise en charge. Nécessite la dernière version du gestionnaire Backend.AI.",
     "WrongAPIServerAddress": "Mauvaise adresse du serveur API.",
-    "ReachedResourceLimitPleaseContact": "Vous avez atteint votre limite de ressources. \nVeuillez contacter l'administrateur."
+    "ReachedResourceLimitPleaseContact": "Vous avez atteint votre limite de ressources. \nVeuillez contacter l'administrateur.",
+    "InvalidUrl": "Ce n'est pas une URL valide"
   },
   "maxLength": {
     "64chars": "(maximum 64 caractères)",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index 54dade48e..fb9b5dbfc 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -787,7 +787,14 @@
       "ReplicaNumber": "Nomor Replika",
       "ImportAndStartService": "Impor dan Mulai Layanan",
       "huggingFaceUrlPlaceholder": "Masukkan URL Hugging Face",
-      "ImportOnly": "Impor saja"
+      "ImportOnly": "Impor saja",
+      "StartWithHuggingFaceUrl": "Ini harus dimulai dengan https://huggingface.co",
+      "CheckHuggingFaceUrl": "Periksa",
+      "ModelName": "Nama model",
+      "Author": "Penulis",
+      "InvalidHuggingFaceUrl": "URL Hugging Face tidak valid.",
+      "ModelStoreFolderName": "Nama folder penyimpanan model",
+      "ServiceName": "Nama layanan"
     }
   },
   "dialog": {
@@ -1484,7 +1491,8 @@
     "SmallerResourceThenImageRequires": "Permintaan sumber daya Anda lebih kecil dari jumlah minimum yang dibutuhkan oleh gambar. Coba lebih banyak sumber daya.",
     "APINotSupported": "API tidak didukung. Memerlukan versi terbaru dari manajer Backend.AI.",
     "WrongAPIServerAddress": "Alamat server API salah.",
-    "ReachedResourceLimitPleaseContact": "Mencapai batas sumber daya Anda. \nSilakan hubungi administrator."
+    "ReachedResourceLimitPleaseContact": "Mencapai batas sumber daya Anda. \nSilakan hubungi administrator.",
+    "InvalidUrl": "Ini bukan URL yang valid"
   },
   "maxLength": {
     "64chars": "(maksimum 64 karakter)",
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index ef9de9dcb..91bf0927e 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -787,7 +787,14 @@
       "ReplicaNumber": "Numero di replica",
       "ImportAndStartService": "Importa e avvia il servizio",
       "huggingFaceUrlPlaceholder": "Inserisci l'URL Hugging Face.",
-      "ImportOnly": "Solo importazione"
+      "ImportOnly": "Solo importazione",
+      "StartWithHuggingFaceUrl": "Dovrebbe iniziare con https://huggingface.co",
+      "CheckHuggingFaceUrl": "Controllo",
+      "ModelName": "Nome del modello",
+      "Author": "Autore",
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valido.",
+      "ModelStoreFolderName": "Nome della cartella dell'archivio modelli",
+      "ServiceName": "Nome del servizio"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "La richiesta di risorse è inferiore al minimo richiesto dall'immagine. Provare con altre risorse.",
     "APINotSupported": "API non supportata. Richiede l'ultima versione del gestore Backend.AI.",
     "WrongAPIServerAddress": "Indirizzo del server API errato.",
-    "ReachedResourceLimitPleaseContact": "Raggiunto il limite delle risorse. \nSi prega di contattare l'amministratore."
+    "ReachedResourceLimitPleaseContact": "Raggiunto il limite delle risorse. \nSi prega di contattare l'amministratore.",
+    "InvalidUrl": "Non è un URL valido"
   },
   "maxLength": {
     "64chars": "(massimo 64 caratteri)",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index e46e4aa7d..d5fad7638 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "レプリカ番号",
       "ImportAndStartService": "サービスのインポートと開始",
       "huggingFaceUrlPlaceholder": "Hugging Faceの URL を入力してください",
-      "ImportOnly": "輸入のみ"
+      "ImportOnly": "輸入のみ",
+      "StartWithHuggingFaceUrl": "https://huggingface.co で始まる必要があります",
+      "CheckHuggingFaceUrl": "チェック",
+      "ModelName": "モデル名",
+      "Author": "著者",
+      "InvalidHuggingFaceUrl": "無効なHugging Face URLです。",
+      "ModelStoreFolderName": "モデルストアフォルダー名",
+      "ServiceName": "サービス名"
     }
   },
   "dialog": {
@@ -1482,7 +1489,8 @@
     "SmallerResourceThenImageRequires": "リソース要求が画像に必要な最小値より小さい。より多くのリソースを試してください。",
     "APINotSupported": "APIはサポートされていません。最新バージョンのBackend.AIマネージャが必要です。",
     "WrongAPIServerAddress": "APIサーバーのアドレスが間違っています。",
-    "ReachedResourceLimitPleaseContact": "リソース制限に達しました。\n管理者にお問い合わせください。"
+    "ReachedResourceLimitPleaseContact": "リソース制限に達しました。\n管理者にお問い合わせください。",
+    "InvalidUrl": "有効な URL ではありません"
   },
   "maxLength": {
     "64chars": "（最大64文字）",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index a37026dde..ed3741b57 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -898,7 +898,15 @@
       "ReplicaNumber": "복제 번호",
       "ImportAndStartService": "가져오기 및 서비스 시작",
       "huggingFaceUrlPlaceholder": "Hugging Face URL을 입력하세요.",
-      "ImportOnly": "가져오기만 허용"
+      "ImportOnly": "가져오기만 허용",
+      "StartWithHuggingFaceUrl": "https://huggingface.co로 시작해야 합니다.",
+      "CheckHuggingFaceUrl": "확인",
+      "ModelName": "모델 이름",
+      "Author": "작성자",
+      "InvalidHuggingFaceUrl": "유효한 Hugging Face URL을 입력해주세요",
+      "PleaseClickCheckButton": "확인 버튼을 클릭해주세요",
+      "ModelStoreFolderName": "모델 저장소 폴더 이름",
+      "ServiceName": "서비스 이름"
     }
   },
   "dialog": {
@@ -1595,7 +1603,8 @@
     "CannotSharePrivateAutomountFolder": "정책에 따라 자동마운트 폴더는 공유할 수 없습니다.",
     "FolderSharingNotAvailableToUser": "요청한 사용자는 폴더 공유가 불가능한 상태입니다.",
     "APINotSupported": "지원하지 않는 API입니다. 최신 버전의 Backend.AI 매니저가 필요합니다.",
-    "ReachedResourceLimitPleaseContact": "자원 제한에 도달했습니다. 관리자에게 문의하세요."
+    "ReachedResourceLimitPleaseContact": "자원 제한에 도달했습니다. 관리자에게 문의하세요.",
+    "InvalidUrl": "유효한 URL이 아닙니다."
   },
   "maxLength": {
     "64chars": "(최대 길이 64자)",
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 10d4149fe..206068ba0 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -788,7 +788,13 @@
       "ReplicaNumber": "Хуулбарын дугаар",
       "ImportAndStartService": "Импорт хийх ба эхлүүлэх үйлчилгээ",
       "huggingFaceUrlPlaceholder": "Hugging Face URL-г оруулна уу",
-      "ImportOnly": "Зөвхөн импортлох"
+      "ImportOnly": "Зөвхөн импортлох",
+      "StartWithHuggingFaceUrl": "Энэ нь https://huggingface.co-ээс эхлэх ёстой",
+      "CheckHuggingFaceUrl": "Шалгах",
+      "ModelName": "Загварын нэр",
+      "InvalidHuggingFaceUrl": "Хүчингүй Hugging Face URL.",
+      "ModelStoreFolderName": "Загварын дэлгүүрийн хавтасны нэр",
+      "ServiceName": "Үйлчилгээний нэр"
     }
   },
   "dialog": {
@@ -1484,7 +1490,8 @@
     "VirtualFolderAlreadyExist": "Ижил нэртэй виртуал хавтас аль хэдийн байна. \nӨөрийн фолдерыг устгах эсвэл урилгаас татгалзаарай.",
     "WrongAPIServerAddress": "API серверийн хаяг буруу байна.",
     "ResourceLimitExceed": "Нөөцийн хязгаар хэтэрсэн. \nБоломжтой нөөцийн хэмжээг шалгана уу.",
-    "ReachedResourceLimitPleaseContact": "Таны нөөцийн хязгаарт хүрсэн. \nАдминтай холбогдоно уу."
+    "ReachedResourceLimitPleaseContact": "Таны нөөцийн хязгаарт хүрсэн. \nАдминтай холбогдоно уу.",
+    "InvalidUrl": "Энэ нь хүчинтэй URL биш байна"
   },
   "maxLength": {
     "64chars": "(хамгийн ихдээ 64 тэмдэгт)",
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index fa5dc000c..a4dd77d91 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -785,7 +785,14 @@
       "ReplicaNumber": "Nombor Replika",
       "ImportAndStartService": "Import dan Mulakan Perkhidmatan",
       "huggingFaceUrlPlaceholder": "Masukkan URL Hugging Face",
-      "ImportOnly": "Import sahaja"
+      "ImportOnly": "Import sahaja",
+      "StartWithHuggingFaceUrl": "Ia harus bermula dengan https://huggingface.co",
+      "CheckHuggingFaceUrl": "Semak",
+      "ModelName": "Nama model",
+      "Author": "Pengarang",
+      "InvalidHuggingFaceUrl": "URL Hugging Face tidak sah.",
+      "ModelStoreFolderName": "Nama folder kedai model",
+      "ServiceName": "Nama perkhidmatan"
     }
   },
   "dialog": {
@@ -1482,7 +1489,8 @@
     "UserNameAlreadyExist": "Nama pengguna sudah wujud. \nIa tidak boleh ditiru.",
     "VirtualFolderAlreadyExist": "Folder maya dengan nama yang sama sudah wujud. \nPadamkan folder anda sendiri atau tolak jemputan.",
     "WrongAPIServerAddress": "Alamat pelayan API salah.",
-    "ReachedResourceLimitPleaseContact": "Mencapai had sumber anda. \nSila hubungi pentadbir."
+    "ReachedResourceLimitPleaseContact": "Mencapai had sumber anda. \nSila hubungi pentadbir.",
+    "InvalidUrl": "Ia bukan URL yang sah"
   },
   "maxLength": {
     "64chars": "(maksimum 64 watak)",
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index 6aa183b0e..df64e3448 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Numer repliki",
       "ImportAndStartService": "Importuj i uruchamiaj usługę",
       "huggingFaceUrlPlaceholder": "Wpisz adres URL Hugging Face",
-      "ImportOnly": "Tylko importuj"
+      "ImportOnly": "Tylko importuj",
+      "StartWithHuggingFaceUrl": "Powinno zaczynać się od https://huggingface.co",
+      "CheckHuggingFaceUrl": "Sprawdź",
+      "ModelName": "Nazwa modelu",
+      "Author": "Autor",
+      "InvalidHuggingFaceUrl": "Nieprawidłowy adres URL Hugging Face.",
+      "ModelStoreFolderName": "Nazwa folderu sklepu modelu",
+      "ServiceName": "Nazwa usługi"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "Żądanie zasobów jest mniejsze niż minimum wymagane przez obraz. Spróbuj użyć więcej zasobów.",
     "APINotSupported": "Interfejs API nie jest obsługiwany. Wymaga najnowszej wersji menedżera Backend.AI.",
     "WrongAPIServerAddress": "Nieprawidłowy adres serwera API.",
-    "ReachedResourceLimitPleaseContact": "Osiągnięto limit zasobów. \nSkontaktuj się z administratorem."
+    "ReachedResourceLimitPleaseContact": "Osiągnięto limit zasobów. \nSkontaktuj się z administratorem.",
+    "InvalidUrl": "To nie jest prawidłowy adres URL"
   },
   "maxLength": {
     "64chars": "(maksymalnie 64 znaki)",
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index 89c935877..c3788be42 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Número da réplica",
       "ImportAndStartService": "Importar e iniciar serviço",
       "huggingFaceUrlPlaceholder": "Insira o URL Hugging Face",
-      "ImportOnly": "Somente importação"
+      "ImportOnly": "Somente importação",
+      "StartWithHuggingFaceUrl": "Deve começar com https://huggingface.co",
+      "CheckHuggingFaceUrl": "Verificar",
+      "ModelName": "Nome do modelo",
+      "Author": "Autor",
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "ServiceName": "Nome do serviço"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "O seu pedido de recursos é mais pequeno do que o mínimo exigido pela imagem. Tente mais recursos.",
     "APINotSupported": "API não suportada. Requer a versão mais recente do gestor Backend.AI.",
     "WrongAPIServerAddress": "Endereço do servidor API incorreto.",
-    "ReachedResourceLimitPleaseContact": "Atingiu seu limite de recursos. \nEntre em contato com o administrador."
+    "ReachedResourceLimitPleaseContact": "Atingiu seu limite de recursos. \nEntre em contato com o administrador.",
+    "InvalidUrl": "Não é um URL válido"
   },
   "maxLength": {
     "64chars": "(máximo de 64 caracteres)",
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 9c437533a..0cecbfa1e 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Número da réplica",
       "ImportAndStartService": "Importar e iniciar serviço",
       "huggingFaceUrlPlaceholder": "Insira o URL Hugging Face",
-      "ImportOnly": "Somente importação"
+      "ImportOnly": "Somente importação",
+      "StartWithHuggingFaceUrl": "Deve começar com https://huggingface.co",
+      "CheckHuggingFaceUrl": "Verificar",
+      "ModelName": "Nome do modelo",
+      "Author": "Autor",
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "ServiceName": "Nome do serviço"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "O seu pedido de recursos é mais pequeno do que o mínimo exigido pela imagem. Tente mais recursos.",
     "APINotSupported": "API não suportada. Requer a versão mais recente do gestor Backend.AI.",
     "WrongAPIServerAddress": "Endereço do servidor API incorreto.",
-    "ReachedResourceLimitPleaseContact": "Atingiu seu limite de recursos. \nEntre em contato com o administrador."
+    "ReachedResourceLimitPleaseContact": "Atingiu seu limite de recursos. \nEntre em contato com o administrador.",
+    "InvalidUrl": "Não é um URL válido"
   },
   "maxLength": {
     "64chars": "(máximo de 64 caracteres)",
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 70832a18d..2a7ed6f68 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Номер реплики",
       "ImportAndStartService": "Импортировать и запустить службу",
       "huggingFaceUrlPlaceholder": "Введите URL-адрес Hugging Face",
-      "ImportOnly": "Только импорт"
+      "ImportOnly": "Только импорт",
+      "StartWithHuggingFaceUrl": "Он должен начинаться с https://huggingface.co.",
+      "CheckHuggingFaceUrl": "Проверьте",
+      "ModelName": "Название модели",
+      "Author": "Автор",
+      "InvalidHuggingFaceUrl": "Неверный URL-адрес Hugging Face.",
+      "ModelStoreFolderName": "Имя папки хранилища моделей",
+      "ServiceName": "Название службы"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "Ваш запрос ресурсов меньше, чем минимально требуется для изображения. Попробуйте использовать больше ресурсов.",
     "APINotSupported": "API не поддерживается. Требуется последняя версия менеджера Backend.AI.",
     "WrongAPIServerAddress": "Неверный адрес сервера API.",
-    "ReachedResourceLimitPleaseContact": "Достигнут лимит ресурсов. \nПожалуйста, свяжитесь с администратором."
+    "ReachedResourceLimitPleaseContact": "Достигнут лимит ресурсов. \nПожалуйста, свяжитесь с администратором.",
+    "InvalidUrl": "Это недействительный URL-адрес."
   },
   "maxLength": {
     "64chars": "(максимум 64 символа)",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 1c768dade..c38493abb 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -903,7 +903,14 @@
     "NewFolderName": "ชื่อโฟลเดอร์ใหม่",
     "modelStore": {
       "ImportFromHuggingFace": "นำเข้าจาก Hugging Face",
-      "ImportOnly": "นำเข้าเท่านั้น"
+      "ImportOnly": "นำเข้าเท่านั้น",
+      "StartWithHuggingFaceUrl": "ควรขึ้นต้นด้วย https://huggingface.co",
+      "CheckHuggingFaceUrl": "ตรวจสอบ",
+      "ModelName": "ชื่อรุ่น",
+      "Author": "ผู้เขียน",
+      "InvalidHuggingFaceUrl": "URL Hugging Face ไม่ถูกต้อง",
+      "ModelStoreFolderName": "ชื่อโฟลเดอร์ร้านค้าโมเดล",
+      "ServiceName": "ชื่อบริการ"
     }
   },
   "dialog": {
@@ -1592,7 +1599,8 @@
     "FolderSharingNotAvailableToUser": "การแชร์โฟลเดอร์ไม่สามารถใช้ได้สำหรับผู้ใช้ที่ร้องขอ",
     "APINotSupported": "ไม่รองรับ API นี้ ต้องใช้เวอร์ชันล่าสุดของผู้จัดการ Backend.AI",
     "ErrorFetchingExternalContent": "เกิดข้อผิดพลาดในการดึงเนื้อหาภายนอก:",
-    "ReachedResourceLimitPleaseContact": "ถึงขีดจำกัดทรัพยากรของคุณแล้ว กรุณาติดต่อผู้ดูแลระบบ"
+    "ReachedResourceLimitPleaseContact": "ถึงขีดจำกัดทรัพยากรของคุณแล้ว กรุณาติดต่อผู้ดูแลระบบ",
+    "InvalidUrl": "ไม่ใช่ URL ที่ถูกต้อง"
   },
   "maxLength": {
     "64chars": "(สูงสุด 64 ตัวอักษร)",
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index 43abba023..bb8be7ec0 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Çoğaltma Numarası",
       "ImportAndStartService": "Hizmeti İçe Aktarma ve Başlatma",
       "huggingFaceUrlPlaceholder": "Hugging Face URL'sini girin",
-      "ImportOnly": "Yalnızca içe aktar"
+      "ImportOnly": "Yalnızca içe aktar",
+      "StartWithHuggingFaceUrl": "https://huggingface.co ile başlamalıdır.",
+      "CheckHuggingFaceUrl": "Kontrol et",
+      "ModelName": "Model adı",
+      "Author": "Yazar",
+      "InvalidHuggingFaceUrl": "Geçersiz Hugging Face URL'si.",
+      "ModelStoreFolderName": "Model deposu klasör adı",
+      "ServiceName": "Hizmet adı"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "Kaynak isteğiniz görüntünün gerektirdiği minimum değerden daha küçük. Daha fazla kaynak deneyin.",
     "APINotSupported": "API desteklenmiyor. Backend.AI yöneticisinin en son sürümünü gerektirir.",
     "WrongAPIServerAddress": "Yanlış API sunucu adresi.",
-    "ReachedResourceLimitPleaseContact": "Kaynak sınırınıza ulaştınız. \nLütfen yöneticiyle iletişime geçin."
+    "ReachedResourceLimitPleaseContact": "Kaynak sınırınıza ulaştınız. \nLütfen yöneticiyle iletişime geçin.",
+    "InvalidUrl": "Geçerli bir URL değil"
   },
   "maxLength": {
     "64chars": "(maksimum 64 karakter)",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index ab59d68f7..3a38e37c1 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "Số bản sao",
       "ImportAndStartService": "Dịch vụ nhập và bắt đầu",
       "huggingFaceUrlPlaceholder": "Nhập URL Hugging Face",
-      "ImportOnly": "Chỉ nhập khẩu"
+      "ImportOnly": "Chỉ nhập khẩu",
+      "StartWithHuggingFaceUrl": "Nó sẽ bắt đầu bằng https://huggingface.co",
+      "CheckHuggingFaceUrl": "Kiểm tra",
+      "ModelName": "Tên mẫu",
+      "Author": "Tác giả",
+      "InvalidHuggingFaceUrl": "URL Hugging Face không hợp lệ.",
+      "ModelStoreFolderName": "Tên thư mục lưu trữ mô hình",
+      "ServiceName": "Tên dịch vụ"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "UserNameAlreadyExist": "Tên này đã có người dùng. \nNó không thể bị trùng lặp.",
     "VirtualFolderAlreadyExist": "Một thư mục ảo có cùng tên đã tồn tại. \nXóa thư mục của riêng bạn hoặc từ chối lời mời.",
     "WrongAPIServerAddress": "Địa chỉ máy chủ API sai.",
-    "ReachedResourceLimitPleaseContact": "Đã đạt đến giới hạn tài nguyên của bạn. \nVui lòng liên hệ với quản trị viên."
+    "ReachedResourceLimitPleaseContact": "Đã đạt đến giới hạn tài nguyên của bạn. \nVui lòng liên hệ với quản trị viên.",
+    "InvalidUrl": "Đó không phải là một URL hợp lệ"
   },
   "maxLength": {
     "64chars": "(tối đa 64 ký tự)",
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index 549d306db..34f605235 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -786,7 +786,14 @@
       "ReplicaNumber": "副本号",
       "ImportAndStartService": "导入并启动服务",
       "huggingFaceUrlPlaceholder": "输入Hugging Face网址",
-      "ImportOnly": "仅导入"
+      "ImportOnly": "仅导入",
+      "StartWithHuggingFaceUrl": "它应该以 https://huggingface.co 开头",
+      "CheckHuggingFaceUrl": "检查",
+      "ModelName": "型号名称",
+      "Author": "作者",
+      "InvalidHuggingFaceUrl": "Hugging Face URL 无效。",
+      "ModelStoreFolderName": "模型存储文件夹名称",
+      "ServiceName": "服务名称"
     }
   },
   "dialog": {
@@ -1483,7 +1490,8 @@
     "SmallerResourceThenImageRequires": "您的资源请求小于图像要求的最小值。尝试更多资源。",
     "APINotSupported": "不支持 API。需要最新版本的 Backend.AI 管理器。",
     "WrongAPIServerAddress": "错误的 API 服务器地址。",
-    "ReachedResourceLimitPleaseContact": "已达到您的资源限制。\n请联系管理员。"
+    "ReachedResourceLimitPleaseContact": "已达到您的资源限制。\n请联系管理员。",
+    "InvalidUrl": "这不是一个有效的 URL"
   },
   "maxLength": {
     "64chars": "（最多 64 个字符）",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index d31ffe81b..264bb8ab6 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -785,7 +785,14 @@
       "ReplicaNumber": "副本號",
       "ImportAndStartService": "導入並啟動服務",
       "huggingFaceUrlPlaceholder": "輸入Hugging Face網址",
-      "ImportOnly": "僅導入"
+      "ImportOnly": "僅導入",
+      "StartWithHuggingFaceUrl": "它應該以 https://huggingface.co 開頭",
+      "CheckHuggingFaceUrl": "检查",
+      "ModelName": "型号名称",
+      "Author": "作者",
+      "InvalidHuggingFaceUrl": "Hugging Face URL 无效。",
+      "ModelStoreFolderName": "模型儲存資料夾名稱",
+      "ServiceName": "服務名稱"
     }
   },
   "dialog": {
@@ -1482,7 +1489,8 @@
     "SmallerResourceThenImageRequires": "您的资源请求小于图像要求的最小值。尝试更多资源。",
     "APINotSupported": "不支持 API。需要最新版本的 Backend.AI 管理器。",
     "WrongAPIServerAddress": "错误的 API 服务器地址。",
-    "ReachedResourceLimitPleaseContact": "已達到您的資源限制。\n請聯絡管理員。"
+    "ReachedResourceLimitPleaseContact": "已達到您的資源限制。\n請聯絡管理員。",
+    "InvalidUrl": "這不是一個有效的 URL"
   },
   "maxLength": {
     "64chars": "（最多 64 個字符）",

From e7da4b3323b845c7433f6d8b12ed8dc45f35129b Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Sat, 21 Sep 2024 06:30:46 +0800
Subject: [PATCH 2/2] remove unnecessary code.

---
 .../components/ImportFromHuggingFaceModal.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/react/src/components/ImportFromHuggingFaceModal.tsx b/react/src/components/ImportFromHuggingFaceModal.tsx
index 0f65667e9..201c4b254 100644
--- a/react/src/components/ImportFromHuggingFaceModal.tsx
+++ b/react/src/components/ImportFromHuggingFaceModal.tsx
@@ -5,6 +5,7 @@ import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
 import { useToggle } from 'ahooks';
 import {
+  App,
   Button,
   Form,
   FormInstance,
@@ -19,8 +20,8 @@ import { useTranslation } from 'react-i18next';
 
 type Service = {
   url: string;
-  inference_engine_version?: string;
-  replica_number?: number;
+  service_name?: string;
+  folder_name?: string;
 };
 
 interface ImportFromHuggingFaceModalProps extends BAIModalProps {
@@ -33,11 +34,11 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
+  const baiClient = useSuspendedBackendaiClient();
   const formRef = useRef<FormInstance<Service>>(null);
   const [isImportOnly, { toggle: toggleIsImportOnly }] = useToggle(false);
-  const [huggingFaceURL, setHuggingFaceURL] = useState<string | undefined>();
-  const baiClient = useSuspendedBackendaiClient();
 
+  const [huggingFaceURL, setHuggingFaceURL] = useState<string | undefined>();
   const [isPendingCheck, startCheckTransition] = useTransition();
   const hugginFaceModelInfo = useSuspenseTanQuery<{
     author?: string;
@@ -46,7 +47,7 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
     isError?: boolean;
     url?: string;
   }>({
-    queryKey: ['huggingFaceReadme', huggingFaceURL],
+    queryKey: ['huggingFaceValidation', huggingFaceURL],
     queryFn: () => {
       if (_.isEmpty(huggingFaceURL)) return Promise.resolve({});
       return baiSignedRequestWithPromise({
@@ -81,13 +82,12 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
   }, [hugginFaceModelInfo.data.url]);
 
   const handleOnClick = () => {
+    startCheckTransition(() => {
+      setHuggingFaceURL(formRef.current?.getFieldValue('url'));
+    });
     formRef.current
       ?.validateFields()
       .then((values) => {
-        startCheckTransition(() => {
-          setHuggingFaceURL(values?.url);
-        });
-
         // TODO: Implement import from Hugging Face
         // onRequestClose();
       })
@@ -111,6 +111,7 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
         </Button>
       }
       onCancel={onRequestClose}
+      destroyOnClose
       {...baiModalProps}
     >
       <Form