feat(FR-1850): Add Hugging Face model import functionality with folder creation support #4945

agatha197 · 2026-01-06T05:22:44Z

Implement Hugging Face Model Import Feature

This PR adds a new modal for importing models from Hugging Face, allowing users to specify model ID and version. Key changes include:

Created ImportArtifactModelsFromHuggingFaceModal component to handle Hugging Face model imports
Enhanced FolderCreateModal to support form state persistence in URL parameters
Added validation for model store project requirements
Implemented form value synchronization with URL parameters using debounce
Added translations for all Hugging Face import-related strings in multiple languages
Updated folder creation to properly handle model usage modes

The implementation allows users to import models directly from Hugging Face and store them in model-specific folders, with appropriate validation and project type checking.

Added 'Folder mount for Model Store' field to import modal

Caution

The folder selector will be implemented by https://lablup.atlassian.net/browse/FR-1870

When current project is not model-store-exclusive project. - Show confirm modal to change current project.

Added tooltip
Automatically set form.

Checklist:

Documentation
Minium required manager version
Specific setting for review (eg., KB link, endpoint or how to setup)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

agatha197 · 2026-01-06T05:23:13Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-01-06T05:25:09Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.87% (+0.96% 🔼)	587/12051
🔴	Branches	4.45% (+0.42% 🔼)	377/8466
🔴	Functions	2.73% (+0.5% 🔼)	101/3694
🔴	Lines	4.7% (+0.97% 🔼)	553/11770

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / ImportArtifactModelsFromHuggingFaceModal.tsx	0%	0%	0%	0%

Test suite run success

173 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from c476ea4

github-actions · 2026-01-06T05:30:57Z

Coverage report for `./packages/backend.ai-ui`

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	63.21% (-0.29% 🔻)	256/405
🔴	Branches	42.18% (-0.12% 🔻)	151/358
🔴	Functions	49.46% (-0.54% 🔻)	46/93
🟡	Lines	64.71% (-0.45% 🔻)	231/357

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	helper/index.ts	63.09% (-0.8% 🔻)	44.59% (-0.29% 🔻)	55.17% (-1.97% 🔻)	66.12% (-1.41% 🔻)

Test suite run success

186 tests passing in 9 suites.

Report generated by 🧪jest coverage report action from c476ea4

Copilot

Pull request overview

This PR introduces a comprehensive Hugging Face model import feature, enabling users to import models with validation, project management, and folder creation capabilities. The implementation moves the import modal from the shared UI package to the main React application to support more complex business logic around model-store projects.

Key changes:

Created ImportArtifactModelsFromHuggingFaceModal component with project validation and folder creation
Enhanced FolderCreateModal with URL parameter persistence using debounced synchronization
Migrated Hugging Face import component from backend.ai-ui package to main application for feature expansion
Added comprehensive translations across 21 languages for all import-related strings

Reviewed changes

Copilot reviewed 51 out of 51 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx`	New modal component for Hugging Face model imports with project validation and folder creation integration
`react/src/components/FolderCreateModal.tsx`	Added URL parameter persistence with debounce, silent validation, and merged initial values from query params
`react/src/components/VFolderSelect.tsx`	Integrated form values synchronization via URL params when creating model folders
`react/src/pages/VFolderNodeListPage.tsx`	Added usage mode form value initialization when opening folder creation modal
`react/src/pages/ReservoirPage.tsx`	Updated import to use new modal component location
`react/src/components/ProjectSelect.tsx`	Changed `optionFilterProp` to `showSearch` object format for consistency
`react/src/components/MainLayout/WebUIHeader.tsx`	Updated Divider prop from `type` to `orientation`
`resources/i18n/*.json` (21 files)	Added translations for Hugging Face import modal in all supported languages
`packages/backend.ai-ui/src/locale/*.json` (21 files)	Removed old `BAIImportFromHuggingFaceModal` translations from shared package
`packages/backend.ai-ui/src/components/BAIImportFromHuggingFaceModal.tsx`	Deleted old component file from shared UI package
`packages/backend.ai-ui/src/components/index.ts`	Removed exports for deleted component

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

react/src/components/FolderCreateModal.tsx

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

react/src/components/FolderCreateModal.tsx

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

nowgnuesLee

please resolve copilot review first

Copilot

Pull request overview

Copilot reviewed 51 out of 51 changed files in this pull request and generated 4 comments.

react/src/components/ProjectSelect.tsx

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

Copilot

Pull request overview

Copilot reviewed 52 out of 52 changed files in this pull request and generated 1 comment.

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

Copilot

Pull request overview

Copilot reviewed 52 out of 52 changed files in this pull request and generated 1 comment.

react/src/components/MainLayout/WebUIHeader.tsx

Copilot

Pull request overview

Copilot reviewed 52 out of 52 changed files in this pull request and generated 3 comments.

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

react/src/pages/ReservoirPage.tsx

Copilot

Pull request overview

Copilot reviewed 52 out of 52 changed files in this pull request and generated no new comments.

…from huggingface modal

Copilot

Pull request overview

Copilot reviewed 53 out of 53 changed files in this pull request and generated 3 comments.

Copilot · 2026-01-09T08:36:20Z

packages/backend.ai-ui/src/helper/index.ts

+export const convertToUUID = (id: string): string => {
+  if (isValidUUID(id)) {
+    return id;
+  }
+  return id.replace(
+    /([0-9a-fA-F]{8})([0-9a-fA-F]{4})([0-9a-fA-F]{4})([0-9a-fA-F]{4})([0-9a-fA-F]{12})/,
+    '$1-$2-$3-$4-$5',
+  );
+};


The convertToUUID helper function doesn't handle all edge cases properly:

It doesn't validate that the input string has exactly 32 hexadecimal characters before attempting conversion

If the input is neither a valid UUID nor a 32-character hex string, it returns the unchanged input, which could lead to unexpected behavior

Consider adding validation:

export const convertToUUID = (id: string): string => { if (isValidUUID(id)) { return id; } // Check if it's a 32-character hex string without hyphens if (/^[0-9a-fA-F]{32}$/.test(id)) { return id.replace( /([0-9a-fA-F]{8})([0-9a-fA-F]{4})([0-9a-fA-F]{4})([0-9a-fA-F]{4})([0-9a-fA-F]{12})/, '$1-$2-$3-$4-$5', ); } // Return as-is if not a recognizable format (or throw error) return id; };

Copilot · 2026-01-09T08:36:20Z

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx

+              });
+            })
+            .catch(() => {
+              return undefined;


The error handling in the .catch() block returns undefined explicitly, which is good practice for intentionally ignored errors. However, this prevents the modal from closing when validation fails. Consider whether the modal should remain open to allow users to correct validation errors, or if additional user feedback is needed when validation fails.

Suggested change

return undefined;

// Keep the modal open so users can correct form errors,

// but provide explicit feedback instead of silently ignoring.

message.error(

t(

'importArtifactModelsFromHuggingFaceModal.FailedToImportModelFromHuggingFace',

),

);

Copilot · 2026-01-09T08:36:21Z

resources/i18n/en.json

+  "importArtifactModelsFromHuggingFaceModal": {
+    "CreateANewModelStoreStorageFolder": "Create a new model-store–exclusive folder",
+    "CurrentProjectChangedSuccessfully": "Current project changed successfully.",
+    "EnterAModelID": "Enter a model ID. (e.g. openai/gpt-oss-20b)",


The model ID examples are inconsistent across translation files:

English: "openai/gpt-oss-20b" (lowercase, OSS)

Other languages: "OpenAI/GPT-SOSS-20B" (mixed case, SOSS)

For consistency and accuracy, all translations should use the same example format. The Hugging Face model ID format typically uses lowercase, so consider standardizing to "openai/gpt-oss-20b" or an actual model ID like "openai/gpt-2" across all languages.

github-actions bot assigned agatha197 Jan 6, 2026

github-actions bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC labels Jan 6, 2026

agatha197 mentioned this pull request Jan 6, 2026

fix(FR-1851): show reservoir page without error boundary #4935

Open

5 tasks

agatha197 changed the title ~~feat(FR-1850): add model store folder from reservoir importing model from huggingface modal~~ feat(FR-1850): Add Hugging Face model import functionality with folder creation support Jan 6, 2026

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 3c62d7a to 00abcc4 Compare January 6, 2026 05:29

agatha197 requested review from nowgnuesLee and yomybaby January 6, 2026 05:41

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch 2 times, most recently from baa2793 to 41f2b85 Compare January 6, 2026 08:25

Copilot AI review requested due to automatic review settings January 6, 2026 08:25

agatha197 force-pushed the fix_FR-1851_/reservoir-page-error branch from 174cab3 to ae20552 Compare January 6, 2026 08:25

Copilot started reviewing on behalf of agatha197 January 6, 2026 08:26 View session

Copilot AI reviewed Jan 6, 2026

View reviewed changes

nowgnuesLee requested changes Jan 7, 2026

View reviewed changes

agatha197 force-pushed the fix_FR-1851_/reservoir-page-error branch from ae20552 to 9fb1e60 Compare January 7, 2026 10:20

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 41f2b85 to 7159ab2 Compare January 7, 2026 10:20

agatha197 requested a review from nowgnuesLee January 7, 2026 10:20

agatha197 changed the base branch from fix_FR-1851_/reservoir-page-error to graphite-base/4945 January 7, 2026 10:22

Copilot AI review requested due to automatic review settings January 7, 2026 10:23

agatha197 force-pushed the graphite-base/4945 branch from 9fb1e60 to 325b9e6 Compare January 7, 2026 10:23

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 7159ab2 to 9585139 Compare January 7, 2026 10:23

agatha197 changed the base branch from graphite-base/4945 to fix_FR-1851_/reservoir-page-error January 7, 2026 10:23

Copilot started reviewing on behalf of agatha197 January 7, 2026 10:23 View session

Copilot AI reviewed Jan 7, 2026

View reviewed changes

agatha197 force-pushed the fix_FR-1851_/reservoir-page-error branch from 325b9e6 to 5e01a45 Compare January 8, 2026 04:20

Copilot started reviewing on behalf of agatha197 January 8, 2026 04:52 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx Outdated Show resolved Hide resolved

agatha197 changed the base branch from fix_FR-1851_/reservoir-page-error to graphite-base/4945 January 8, 2026 05:16

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 3de9b1b to 51548af Compare January 8, 2026 05:21

agatha197 force-pushed the graphite-base/4945 branch from 5e01a45 to 705732f Compare January 8, 2026 05:21

agatha197 changed the base branch from graphite-base/4945 to fix_FR-1851_/reservoir-page-error January 8, 2026 05:21

agatha197 marked this pull request as draft January 8, 2026 06:36

Copilot AI review requested due to automatic review settings January 8, 2026 06:37

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 51548af to dc8265f Compare January 8, 2026 06:37

agatha197 force-pushed the fix_FR-1851_/reservoir-page-error branch from 705732f to ad64b31 Compare January 8, 2026 06:37

Copilot started reviewing on behalf of agatha197 January 8, 2026 06:37 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

react/src/components/MainLayout/WebUIHeader.tsx Show resolved Hide resolved

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from dc8265f to 57e307d Compare January 8, 2026 07:36

Copilot AI review requested due to automatic review settings January 8, 2026 08:41

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 57e307d to 6a3b48d Compare January 8, 2026 08:41

Copilot started reviewing on behalf of agatha197 January 8, 2026 08:42 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx Show resolved Hide resolved

react/src/components/ImportArtifactModelsFromHuggingFaceModal.tsx Show resolved Hide resolved

react/src/pages/ReservoirPage.tsx Show resolved Hide resolved

yomybaby force-pushed the fix_FR-1851_/reservoir-page-error branch from ad64b31 to bf4c404 Compare January 8, 2026 09:29

yomybaby force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 6a3b48d to 34a3fd4 Compare January 8, 2026 09:29

Copilot AI review requested due to automatic review settings January 9, 2026 07:17

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 34a3fd4 to 10ca418 Compare January 9, 2026 07:17

agatha197 force-pushed the fix_FR-1851_/reservoir-page-error branch from bf4c404 to 4507e03 Compare January 9, 2026 07:17

Copilot started reviewing on behalf of agatha197 January 9, 2026 07:18 View session

Copilot AI reviewed Jan 9, 2026

View reviewed changes

feat(FR-1850): add model store folder from reservoir importing model …

c476ea4

…from huggingface modal

agatha197 force-pushed the feat_FR-1850_/add-model-store-folder-from-reservoir-importing-modal branch from 10ca418 to c476ea4 Compare January 9, 2026 08:28

agatha197 marked this pull request as ready for review January 9, 2026 08:31

Copilot AI review requested due to automatic review settings January 9, 2026 08:31

Copilot started reviewing on behalf of agatha197 January 9, 2026 08:32 View session

Copilot AI reviewed Jan 9, 2026

View reviewed changes

-              return undefined;
+              // Keep the modal open so users can correct form errors,
+              // but provide explicit feedback instead of silently ignoring.
+              message.error(
+                t(
+                  'importArtifactModelsFromHuggingFaceModal.FailedToImportModelFromHuggingFace',
+                ),
+              );

feat(FR-1850): Add Hugging Face model import functionality with folder creation support #4945

Are you sure you want to change the base?

feat(FR-1850): Add Hugging Face model import functionality with folder creation support #4945

Conversation

agatha197 commented Jan 6, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implement Hugging Face Model Import Feature

Uh oh!

agatha197 commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

github-actions bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./packages/backend.ai-ui

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

agatha197 commented Jan 6, 2026 •

edited by atlassian bot

Loading

agatha197 commented Jan 6, 2026 •

edited

Loading

github-actions bot commented Jan 6, 2026 •

edited

Loading

Coverage report for `./react`

github-actions bot commented Jan 6, 2026 •

edited

Loading

Coverage report for `./packages/backend.ai-ui`