feat: Improve form item and switch to README preview on validation check

lablup · Sep 21, 2024 · eef5ec0 · eef5ec0
1 parent 3d8fd90
commit eef5ec0
Show file tree

Hide file tree

Showing 22 changed files with 177 additions and 51 deletions.
diff --git 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 (
+    <Card
+      size="small"
+      title={
+        <Flex direction="row" gap="xs">
+          <FilterOutlined />
+          README.md
+        </Flex>
+      }
+      styles={{
+        body: {
+          padding: token.paddingLG,
+          overflow: 'auto',
+          height: 200,
+        },
+      }}
+    >
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+    </Card>
+  );
 };
 
 interface ImportFromHuggingFaceModalProps extends BAIModalProps {
@@ -43,10 +76,11 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
   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<ImportFromHuggingFaceModalProps> = ({
     },
   });
   const isHuggingfaceURLExisted = !_.isEmpty(
-    hugginFaceModelInfo.data.model_name,
+    huggingFaceModelInfo.data.model_name,
   );
   const shouldSkipURLCheck =
     isHuggingfaceURLExisted && huggingFaceURL === typedURL;
@@ -89,10 +123,10 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
 
   // 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<ImportFromHuggingFaceModalProps> = ({
           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<ImportFromHuggingFaceModalProps> = ({
         layout="vertical"
         requiredMark="optional"
       >
-        <Form.Item>
+        <Form.Item label="Hugging Face URL" required>
           <Space.Compact style={{ width: '100%' }}>
             <Form.Item
               noStyle
@@ -155,7 +192,6 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
               ]}
             >
               <Input
-                placeholder={t('data.modelStore.huggingFaceUrlPlaceholder')}
                 onPressEnter={() => {
                   handleOnCheck();
                 }}
@@ -184,43 +220,70 @@ const ImportFromHuggingFaceModal: React.FC<ImportFromHuggingFaceModalProps> = ({
             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();
                     }
                   }
                 },
               },
             ]}
           ></Form.Item>
         </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>
+        {huggingFaceURL && huggingFaceModelInfo.data?.markdown ? (
+          <Suspense fallback={<ReadmeFallbackCard />}>
+            <Card
+              size="small"
+              title={
+                <Flex direction="row" gap="xs">
+                  <FilterOutlined />
+                  README.md
+                </Flex>
+              }
+              styles={{
+                body: {
+                  padding: token.paddingLG,
+                  overflow: 'auto',
+                  height: 200,
+                },
+              }}
+            >
+              <Markdown>{huggingFaceModelInfo.data?.markdown}</Markdown>
+            </Card>
+          </Suspense>
+        ) : (
+          <ReadmeFallbackCard />
+        )}
         <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,10 @@
       "CheckHuggingFaceUrl": "Siehe",
       "ModelName": "Name des Modells",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "Ungültige Hugging Face URL."
+      "InvalidHuggingFaceUrl": "Ungültige Hugging Face URL.",
+      "ServiceName": "Dienstname",
+      "ModelStoreFolderName": "Name des Modellspeicherordners",
+      "NotSupportedModel": "Das Modell wird nicht unterstützt. \nBitte nutzen Sie das LLM-Modell."
     }
   },
   "dialog": {

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "Ελέγξτε το",
       "ModelName": "Όνομα μοντέλου",
       "Author": "Συγγραφέας",
-      "InvalidHuggingFaceUrl": "Μη έγκυρη διεύθυνση URL Hugging Face."
+      "InvalidHuggingFaceUrl": "Μη έγκυρη διεύθυνση URL Hugging Face.",
+      "ServiceName": "Όνομα υπηρεσίας",
+      "ModelStoreFolderName": "Όνομα φακέλου καταστήματος μοντέλου",
+      "NotSupportedModel": "Το μοντέλο δεν υποστηρίζεται. \nΧρησιμοποιήστε το μοντέλο LLM."
     }
   },
   "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",
+      "NotSupportedModel": "The model is not supported. Please use the LLM model."
     }
   },
   "dialog": {

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

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -422,7 +422,10 @@
       "CheckHuggingFaceUrl": "Tarkista",
       "ModelName": "Mallin nimi",
       "Author": "Kirjoittaja",
-      "InvalidHuggingFaceUrl": "Virheellinen Hugging Face URL-osoite."
+      "InvalidHuggingFaceUrl": "Virheellinen Hugging Face URL-osoite.",
+      "ServiceName": "Palvelun nimi",
+      "ModelStoreFolderName": "Mallin tallennuskansion nimi",
+      "NotSupportedModel": "Mallia ei tueta. \nKäytä LLM-mallia."
     }
   },
   "dialog": {

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "Vérifier",
       "ModelName": "Nom du modèle",
       "Author": "Auteur",
-      "InvalidHuggingFaceUrl": "URL Hugging Face non valide."
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valide.",
+      "ServiceName": "Nom du service",
+      "ModelStoreFolderName": "Nom du dossier du magasin de modèles",
+      "NotSupportedModel": "Le modèle n'est pas pris en charge. \nVeuillez utiliser le modèle LLM."
     }
   },
   "dialog": {

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -792,7 +792,10 @@
       "CheckHuggingFaceUrl": "Periksa",
       "ModelName": "Nama model",
       "Author": "Penulis",
-      "InvalidHuggingFaceUrl": "URL Hugging Face tidak valid."
+      "InvalidHuggingFaceUrl": "URL Hugging Face tidak valid.",
+      "ServiceName": "Nama layanan",
+      "ModelStoreFolderName": "Nama folder penyimpanan model",
+      "NotSupportedModel": "Model ini tidak didukung. \nSilakan gunakan model LLM."
     }
   },
   "dialog": {

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -792,7 +792,10 @@
       "CheckHuggingFaceUrl": "Controllo",
       "ModelName": "Nome del modello",
       "Author": "Autore",
-      "InvalidHuggingFaceUrl": "URL Hugging Face non valido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face non valido.",
+      "ServiceName": "Nome del servizio",
+      "ModelStoreFolderName": "Nome della cartella dell'archivio modelli",
+      "NotSupportedModel": "Il modello non è supportato. \nSi prega di utilizzare il modello LLM."
     }
   },
   "dialog": {

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "チェック",
       "ModelName": "モデル名",
       "Author": "著者",
-      "InvalidHuggingFaceUrl": "無効なHugging Face URLです。"
+      "InvalidHuggingFaceUrl": "無効なHugging Face URLです。",
+      "ServiceName": "サービス名",
+      "ModelStoreFolderName": "モデルストアフォルダー名",
+      "NotSupportedModel": "このモデルはサポートされていません。 \nLLMモデルを使用してください。"
     }
   },
   "dialog": {

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -904,7 +904,10 @@
       "ModelName": "모델 이름",
       "Author": "작성자",
       "InvalidHuggingFaceUrl": "유효한 Hugging Face URL을 입력해주세요",
-      "PleaseClickCheckButton": "확인 버튼을 클릭해주세요"
+      "PleaseClickCheckButton": "확인 버튼을 클릭해주세요",
+      "ServiceName": "서비스 이름",
+      "ModelStoreFolderName": "모델 저장소 폴더 이름",
+      "NotSupportedModel": "해당 모델은 지원되지 않습니다. \nLLM 모델을 사용하세요."
     }
   },
   "dialog": {

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

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

diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "Sprawdź",
       "ModelName": "Nazwa modelu",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "Nieprawidłowy adres URL Hugging Face."
+      "InvalidHuggingFaceUrl": "Nieprawidłowy adres URL Hugging Face.",
+      "ServiceName": "Nazwa usługi",
+      "ModelStoreFolderName": "Nazwa folderu sklepu modelu",
+      "NotSupportedModel": "Model nie jest obsługiwany. \nProszę skorzystać z modelu LLM."
     }
   },
   "dialog": {

diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "Verificar",
       "ModelName": "Nome do modelo",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "URL Hugging Face inválido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ServiceName": "Nome do serviço",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "NotSupportedModel": "O modelo não é suportado. \nPor favor, use o modelo LLM."
     }
   },
   "dialog": {

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
@@ -791,7 +791,10 @@
       "CheckHuggingFaceUrl": "Verificar",
       "ModelName": "Nome do modelo",
       "Author": "Autor",
-      "InvalidHuggingFaceUrl": "URL Hugging Face inválido."
+      "InvalidHuggingFaceUrl": "URL Hugging Face inválido.",
+      "ServiceName": "Nome do serviço",
+      "ModelStoreFolderName": "Nome da pasta de armazenamento de modelos",
+      "NotSupportedModel": "O modelo não é suportado. \nPor favor, use o modelo LLM."
     }
   },
   "dialog": {