From 3b0ef995ab1e23b23a657c0dbf2fc6c218819cf1 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 19 Sep 2024 18:56:42 +0900
Subject: [PATCH] feat: add `enableImportFromHuggingFace` option

---
 config.toml.sample                  |  1 +
 react/src/hooks/index.tsx           |  1 +
 react/src/pages/VFolderListPage.tsx |  7 ++++---
 src/components/backend-ai-login.ts  | 13 +++++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/config.toml.sample b/config.toml.sample
index f5f908787..a9081250e 100644
--- a/config.toml.sample
+++ b/config.toml.sample
@@ -33,6 +33,7 @@ eduAppNamePrefix = ""                   # The prefix of edu applauncher's app na
 enableModelStore = false                # Enable model store feature. (From Backend.AI 24.03)
 enableLLMPlayground = false             # Enable LLM Playground feature. (From Backend.AI 24.03)
 enableExtendLoginSession = false        # If true, enables login session extension UI. (From Backend.AI 24.09)
+enableImportFromHuggingFace = false     # Enable import from Hugging Face feature. (From Backend.AI 24.09)
 
 [wsproxy]
 proxyURL = "[Proxy URL]"
diff --git a/react/src/hooks/index.tsx b/react/src/hooks/index.tsx
index e801ee539..325918706 100644
--- a/react/src/hooks/index.tsx
+++ b/react/src/hooks/index.tsx
@@ -368,6 +368,7 @@ type BackendAIConfig = {
   ssoRealmName: string;
   enableModelStore: boolean;
   enableLLMPlayground: boolean;
+  enableImportFromHuggingFace: boolean;
   enableContainerCommit: boolean;
   appDownloadUrl: string;
   systemSSHImage: string;
diff --git a/react/src/pages/VFolderListPage.tsx b/react/src/pages/VFolderListPage.tsx
index 13dfd9c5c..f627000f3 100644
--- a/react/src/pages/VFolderListPage.tsx
+++ b/react/src/pages/VFolderListPage.tsx
@@ -52,6 +52,8 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
   ] = useToggle(false);
 
   const { token } = theme.useToken();
+  const enableImportFromHuggingFace =
+    baiClient._config.enableImportFromHuggingFace;
 
   useEffect(() => {
     const handler = () => {
@@ -129,12 +131,11 @@ const VFolderListPage: React.FC<VFolderListPageProps> = (props) => {
         }}
         tabBarExtraContent={
           <Flex gap="xs">
-            {_.includes(['model', 'model-store'], curTabKey) ? (
+            {_.includes(['model', 'model-store'], curTabKey) &&
+            enableImportFromHuggingFace ? (
               <Button
                 icon={<ImportOutlined />}
                 onClick={toggleImportFromHuggingFaceModal}
-                // Remove this line to test
-                style={{ display: 'none' }}
               >
                 {t('data.modelStore.ImportFromHuggingFace')}
               </Button>
diff --git a/src/components/backend-ai-login.ts b/src/components/backend-ai-login.ts
index eec2f9d98..0adf79a8a 100644
--- a/src/components/backend-ai-login.ts
+++ b/src/components/backend-ai-login.ts
@@ -141,6 +141,7 @@ export default class BackendAILogin extends BackendAIPage {
   @property({ type: Boolean }) isDirectorySizeVisible = true;
   @property({ type: Boolean }) enableModelStore = false;
   @property({ type: Boolean }) enableLLMPlayground = false;
+  @property({ type: Boolean }) enableImportFromHuggingFace = false;
   @property({ type: Boolean }) enableExtendLoginSession = false;
   @property({ type: Boolean }) showNonInstalledImages = false;
   @property({ type: String }) eduAppNamePrefix;
@@ -859,6 +860,16 @@ export default class BackendAILogin extends BackendAIPage {
       value: generalConfig?.enableLLMPlayground,
     } as ConfigValueObject) as boolean;
 
+    // Enable importing from Hugging Face support
+    this.enableImportFromHuggingFace = this._getConfigValueByExists(
+      generalConfig,
+      {
+        valueType: 'boolean',
+        defaultValue: false,
+        value: generalConfig?.enableImportFromHuggingFace,
+      } as ConfigValueObject,
+    ) as boolean;
+
     // Enable extend login session
     this.enableExtendLoginSession = this._getConfigValueByExists(
       generalConfig,
@@ -1886,6 +1897,8 @@ export default class BackendAILogin extends BackendAIPage {
           this.enableModelStore;
         globalThis.backendaiclient._config.enableLLMPlayground =
           this.enableLLMPlayground;
+        globalThis.backendaiclient._config.enableImportFromHuggingFace =
+          this.enableImportFromHuggingFace;
         globalThis.backendaiclient._config.enableExtendLoginSession =
           this.enableExtendLoginSession;
         globalThis.backendaiclient._config.pluginPages = this.pluginPages;